Merge branch 'main' into add_typescript_types_to_fluidSearch

.prettierignore

@@ -58,6 +58,7 @@ packages/**/examples/**
 
 # Upgrade
 packages/upgrade/cli.js
+packages/upgrade/**/*.output.js
 
 # Accessibility Verification Testing
 **/.avt/**

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -801,6 +801,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },
@@ -1799,6 +1802,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },
@@ -1836,6 +1842,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },
@@ -4227,6 +4236,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/code-connect/AILabel/AILabel.figma.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { AILabel } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AILabel,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-1916&t=9XaizJDx8eI6KgQz-4',
+  {
+    props: {
+      aiText: figma.string('Text translation'),
+      size: figma.enum('Size', {
+        '16px': 'mini',
+        '20px': '2xs',
+        '24px': 'xs',
+        '32px': 'sm',
+        '40px': 'md',
+        '48px': 'lg',
+        '64px': 'xl',
+      }),
+    },
+    example: ({ ...props }) => <AILabel autoAlign {...props} />,
+  }
+);
+
+// inline
+figma.connect(
+  AILabel,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-2035&t=9XaizJDx8eI6KgQz-4',
+  {
+    props: {
+      aiText: figma.string('Text translation'),
+      textLabel: figma.enum('Type', {
+        'Text + Icon': figma.string('Slug text'),
+      }),
+      size: figma.enum('Size', {
+        '12px': 'sm',
+        '14px': 'md',
+        '16px': 'lg',
+      }),
+    },
+    example: ({ ...props }) => <AILabel autoAlign kind="inline" {...props} />,
+  }
+);

packages/react/code-connect/AILabel/AILabelActions.figma.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { AILabelActions } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AILabelActions,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3559&t=SB9qULZbn3FRopvU-4',
+  {
+    props: {
+      children: figma.children('*'),
+    },
+    example: ({ children }) => <AILabelActions>{children}</AILabelActions>,
+  }
+);

packages/react/code-connect/AILabel/AILabelContent.figma.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { AILabelContent } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AILabelContent,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3508&t=SB9qULZbn3FRopvU-4',
+  {
+    props: {
+      title: figma.string('AI title'),
+      description: figma.string('AI description'),
+      slotOne: figma.boolean('Slot 1', {
+        true: figma.instance('Swap slot 1'),
+        false: '',
+      }),
+      slotTwo: figma.boolean('Slot 2', {
+        true: figma.instance('Swap slot 2'),
+      }),
+      slotThree: figma.boolean('Slot 3', {
+        true: figma.instance('Swap slot 3'),
+      }),
+      slotFour: figma.boolean('Slot 4', {
+        true: figma.instance('Swap slot 4'),
+      }),
+      actions: figma.children(['Actions footer']),
+    },
+    example: ({
+      title,
+      description,
+      slotOne,
+      slotTwo,
+      slotThree,
+      slotFour,
+      actions,
+    }) => (
+      <AILabelContent>
+        {slotOne}
+        <div>
+          <p>AI Explained</p>
+          <h1>{title}</h1>
+          <p>{description}</p>
+          {slotOne}
+          <hr />
+          {slotTwo}
+          <p>
+            This is sample placeholder content, replace with your own content
+            and custom styles.
+          </p>
+          {slotThree}
+          {slotFour}
+        </div>
+        {actions}
+      </AILabelContent>
+    ),
+  }
+);

packages/react/code-connect/Tabs/Tabs.figma.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react/jsx-no-duplicate-props */
 // @ts-nocheck
 import React from 'react';
 import {
@@ -34,12 +33,14 @@ figma.connect(
         size: figma.enum('Size', {
           Large: 'lg',
         }),
-        dismissable: figma.boolean('Dismissible'),
-        dismissablePlusIcon: figma.boolean('Dismissible + Icon'),
+        dismissable: figma.boolean('Dismissible', {
+          true: true,
+          false: figma.boolean('Dismissible + Icon'),
+        }),
       }),
     },
     example: ({ children, contained, fullWidth, tab }) => (
-      <Tabs dismissable={tab.dismissable} dismissable={tab.dismissablePlusIcon}>
+      <Tabs dismissable={tab.dismissable}>
         <TabList
           aria-label="List of tabs"
           contained={contained}

packages/react/code-connect/Tooltip/Tooltip.figma.tsx

@@ -77,7 +77,7 @@ figma.connect(
         openOnHover
         definition={tooltip.definition}
         align={align}>
-        {tooltip.children}
+        {item.children}
       </DefinitionTooltip>
     ),
   }

packages/react/package.json

@@ -81,7 +81,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.32.0-rc.0",
     "@carbon/themes": "^11.40.0-rc.0",
-    "@figma/code-connect": "^1.0.4",
+    "@figma/code-connect": "^1.0.6",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -131,7 +131,7 @@
     "style-loader": "^4.0.0",
     "typescript-config-carbon": "^0.3.0",
     "webpack": "^5.65.0",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^5.0.0"
   },
   "sideEffects": [
     "es/index.js",

packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -80,7 +80,7 @@ const BreadcrumbItem: ForwardRefReturn<HTMLLIElement, BreadcrumbItemProps> =
       return (
         <li className={className} ref={ref} {...rest}>
           {href ? (
-            <Link href={href} aria-current={ariaCurrent}>
+            <Link href={href} aria-current={ariaCurrent || isCurrentPage}>
               {children}
             </Link>
           ) : (

packages/react/src/components/CodeSnippet/CodeSnippet.tsx

@@ -44,6 +44,11 @@ export interface CodeSnippetProps {
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Specify a label to be read by screen readers on the containing textbox
    * node
@@ -150,6 +155,7 @@ export interface CodeSnippetProps {
 
 function CodeSnippet({
   align = 'bottom',
+  autoAlign = false,
   className,
   type = 'single',
   children,
@@ -304,6 +310,7 @@ function CodeSnippet({
       <Copy
         {...rest}
         align={align}
+        autoAlign={autoAlign}
         onClick={handleCopyClick}
         aria-label={deprecatedAriaLabel || ariaLabel}
         aria-describedby={uid}
@@ -377,6 +384,7 @@ function CodeSnippet({
       {!hideCopyButton && (
         <CopyButton
           align={align}
+          autoAlign={autoAlign}
           size={type === 'multi' ? 'sm' : 'md'}
           disabled={disabled}
           onClick={handleCopyClick}
@@ -437,6 +445,11 @@ CodeSnippet.propTypes = {
     'This prop syntax has been deprecated. Please use the new `aria-label`.'
   ),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Provide the content of your CodeSnippet as a node or string
    */

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -209,6 +209,13 @@ describe('ComboBox', () => {
     expect(findInputNode()).toHaveDisplayValue('Apple');
   });
 
+  it('should handle InputBlur with allowCustomValue', async () => {
+    render(<ComboBox {...mockProps} allowCustomValue />);
+    await userEvent.type(findInputNode(), 'Apple');
+    fireEvent.blur(findInputNode());
+    expect(findInputNode()).toHaveDisplayValue('Apple');
+  });
+
   it('should apply onChange value if custom value is entered and `allowCustomValue` is set', async () => {
     render(<ComboBox {...mockProps} allowCustomValue />);
 

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -492,7 +492,15 @@ const ComboBox = forwardRef(
         const { highlightedIndex } = changes;
 
         switch (type) {
-          case InputBlur:
+          case InputBlur: {
+            if (allowCustomValue && highlightedIndex == '-1') {
+              const customValue = inputValue as ItemType;
+              changes.selectedItem = customValue;
+              if (onChange) {
+                onChange({ selectedItem: inputValue as ItemType, inputValue });
+              }
+              return changes;
+            }
             if (
               state.inputValue &&
               highlightedIndex == '-1' &&
@@ -502,16 +510,17 @@ const ComboBox = forwardRef(
                 ...changes,
                 inputValue: itemToString(changes.selectedItem),
               };
-            } else if (
+            }
+            if (
               state.inputValue &&
               highlightedIndex == '-1' &&
               !allowCustomValue &&
               !changes.selectedItem
             ) {
               return { ...changes, inputValue: '' };
-            } else {
-              return changes;
             }
+            return changes;
+          }
           case InputKeyDownEnter:
             if (allowCustomValue) {
               setInputValue(inputValue);

packages/react/src/components/Copy/Copy.tsx

@@ -35,6 +35,11 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */
@@ -66,6 +71,7 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 export default function Copy({
   align = 'bottom',
+  autoAlign = false,
   children,
   className,
   feedback = 'Copied!',
@@ -112,6 +118,7 @@ export default function Copy({
     <IconButton
       closeOnActivation={false}
       align={align}
+      autoAlign={autoAlign}
       className={classNames}
       label={animation ? feedback : initialLabel}
       onClick={composeEventHandlers([onClick, handleClick])}
@@ -143,6 +150,11 @@ Copy.propTypes = {
     'right',
   ]),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */