@carbon/react 1.68.0 → 1.69.0

package/es/components/Tag/SelectableTag.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -26,6 +26,14 @@ export interface SelectableTagBaseProps {
      * Can be a React component class
      */
     renderIcon?: React.ElementType;
+    /**
+     * Provide an optional hook that is called when selected is changed
+     */
+    onChange?: (selected: boolean) => void;
+    /**
+     * Provide an optional function to be called when the tag is clicked.
+     */
+    onClick?: (e: Event) => void;
     /**
      * Specify the state of the selectable tag.
      */
@@ -35,10 +43,6 @@ export interface SelectableTagBaseProps {
      * `md` (default) or `lg` sizes.
      */
     size?: keyof typeof SIZES;
-    /**
-     * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-     */
-    slug?: ReactNode;
     /**
      * Provide text to be rendered inside of a the tag.
      */
@@ -46,7 +50,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -65,6 +69,14 @@ declare const SelectableTag: {
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional hook that is called when selected is changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the tag is clicked.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Specify the state of the selectable tag.
          */
@@ -74,10 +86,6 @@ declare const SelectableTag: {
          * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/es/components/Tag/SelectableTag.js

@@ -24,8 +24,9 @@ const SelectableTag = _ref => {
     disabled,
     id,
     renderIcon,
+    onChange,
+    onClick,
     selected = false,
-    slug,
     size,
     text,
     ...other
@@ -42,21 +43,12 @@ const SelectableTag = _ref => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
-
-  // Removing onClick from the spread operator
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {
-    onClick,
-    ...otherProps
-  } = other;
+  const handleClick = e => {
+    setSelectedTag(!selectedTag);
+    onChange?.(!selectedTag);
+    onClick?.(e);
+  };
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       label: text,
@@ -65,31 +57,29 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
-      "aria-pressed": selectedTag,
+      "aria-pressed": selectedTag !== false,
       ref: tagRef,
-      slug: slug,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
       className: tagClasses,
       id: tagId,
-      onClick: () => setSelectedTag(!selectedTag)
-    }, otherProps), /*#__PURE__*/React__default.createElement(Text, {
+      onClick: handleClick
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
       title: text,
       className: `${prefix}--tag__label`
-    }, text), normalizedSlug));
+    }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    "aria-pressed": selectedTag,
+    "aria-pressed": selectedTag !== false,
     ref: tagRef,
-    slug: slug,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
     className: tagClasses,
     id: tagId,
-    onClick: () => setSelectedTag(!selectedTag)
-  }, otherProps), normalizedSlug, /*#__PURE__*/React__default.createElement(Text, {
+    onClick: handleClick
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -112,6 +102,14 @@ SelectableTag.propTypes = {
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Provide an optional hook that is called when selected is changed
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide an optional function to be called when the tag is clicked.
+   */
+  onClick: PropTypes.func,
   /**
    * Specify the state of the selectable tag.
    */
@@ -121,10 +119,6 @@ SelectableTag.propTypes = {
    * `md` (default) or `lg` sizes.
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-   */
-  slug: PropTypes.node,
   /**
    * Provide text to be rendered inside of a the tag.
    */

package/es/components/Toggle/Toggle.js

@@ -103,6 +103,8 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: switchClasses
     }, isSm && /*#__PURE__*/React__default.createElement("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
       className: `${prefix}--toggle__check`,
       width: "6px",
       height: "5px",

package/es/components/ToggleSmall/ToggleSmall.Skeleton.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+interface ToggleSmallSkeletonProps {
+    ['aria-label']: string;
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Provide an id that unique represents the underlying `<input>`
+     */
+    id?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     * `aria-label` is always required but will be null if `labelText` is also
+     * provided
+     */
+    labelText?: string;
+}
+declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonProps> {
+    static propTypes: {
+        "aria-label": PropTypes.Validator<string>;
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an id that unique represents the underlying `<input>`
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the text that will be read by a screen reader when visiting this
+         * control
+         * `aria-label` is always required but will be null if `labelText` is also
+         * provided
+         */
+        labelText: PropTypes.Requireable<string>;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default ToggleSmallSkeleton;
+export { ToggleSmallSkeleton };

package/es/components/ToggleSmall/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from './ToggleSmall.Skeleton';

package/es/components/TreeView/TreeNode.js

@@ -271,9 +271,11 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     className: `${prefix}--tree-node__label__details`
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: `${prefix}--tree-node__icon`
-  }), label)), expanded && /*#__PURE__*/React__default.createElement("ul", {
+  }), label)), /*#__PURE__*/React__default.createElement("ul", {
     role: "group",
-    className: `${prefix}--tree-node__children`
+    className: cx(`${prefix}--tree-node__children`, {
+      [`${prefix}--tree-node--hidden`]: !expanded
+    })
   }, nodesWithProps));
 });
 TreeNode.propTypes = {

package/es/components/TreeView/TreeView.js

@@ -151,12 +151,12 @@ const TreeView = _ref => {
     }])) {
       const nodeIds = [];
       if (matches(event, [Home, End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
           nodeIds.push(treeWalker.current.currentNode?.id);
         }
         while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
-          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled')) {
+          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled') && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) {
             nodeIds.push(nextFocusNode?.id);
           }
         }
@@ -167,7 +167,7 @@ const TreeView = _ref => {
       }) && event.ctrlKey) {
         treeWalker.current.currentNode = treeWalker.current.root;
         while (treeWalker.current.nextNode()) {
-          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
             nodeIds.push(treeWalker.current.currentNode?.id);
           }
         }
@@ -189,7 +189,7 @@ const TreeView = _ref => {
         if (!(node instanceof Element)) {
           return NodeFilter.FILTER_SKIP;
         }
-        if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
+        if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
           return NodeFilter.FILTER_REJECT;
         }
         if (node.matches(`li.${prefix}--tree-node`)) {

package/es/components/UIShell/SideNavMenuItem.d.ts

@@ -4,8 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { HTMLAttributes } from 'react';
-interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
+import React, { ComponentProps } from 'react';
+import Link from './Link';
+interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
      * Specify the children to be rendered inside of the `SideNavMenuItem`
      */
@@ -25,5 +26,5 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
      */
     href?: string;
 }
-declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
+declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -19,7 +19,6 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
     children,
     className: customClassName,
     isActive,
-    href,
     ...rest
   } = props;
   const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
@@ -29,9 +28,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({
-    href: href
-  }, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));

package/es/index.js

@@ -18,6 +18,7 @@ export { default as ButtonSkeleton } from './components/Button/Button.Skeleton.j
 export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
+export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
@@ -211,7 +212,6 @@ export { LayoutDirection as unstable_LayoutDirection } from './components/Layout
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
-export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';
 export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';

package/es/internal/useIdPrefix.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export declare const IdPrefixContext: React.Context<string | null | undefined>;
+export declare function useIdPrefix(): string | null | undefined;

package/lib/components/Accordion/AccordionItem.js

@@ -118,7 +118,6 @@ function AccordionItem(_ref) {
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: content,
-    hidden: !isOpen,
     className: `${prefix}--accordion__wrapper`,
     onTransitionEnd: onAnimationEnd
   }, /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Button/Button.js

@@ -35,6 +35,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   const tooltipRef = React.useRef(null);
   const {
     as,
+    autoAlign = false,
     children,
     hasIconOnly = false,
     iconDescription,
@@ -93,6 +94,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
+      autoAlign: autoAlign,
       onClick: events.composeEventHandlers([onClick, handleClick]),
       renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
     }), iconOnlyImage ?? children);
@@ -105,6 +107,10 @@ Button.propTypes = {
    * Make sure to apply all props to the root node and render children appropriately
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Specify the content of your Button
    */

package/lib/components/Checkbox/Checkbox.js

@@ -91,7 +91,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       }
       if (typeof ref === 'function') {
         ref(el);
-      } else if (ref && Object(ref) === ref) {
+      } else if (ref && 'current' in ref) {
         ref.current = el;
       }
     }

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -136,6 +136,5 @@ CheckboxGroup.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var CheckboxGroup$1 = CheckboxGroup;
 
-exports["default"] = CheckboxGroup$1;
+exports["default"] = CheckboxGroup;

package/lib/components/CheckboxGroup/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import CheckboxGroup from './CheckboxGroup';
+import { type CheckboxGroupProps, type CustomType } from './CheckboxGroup';
+export default CheckboxGroup;
+export { CheckboxGroup, type CheckboxGroupProps, type CustomType };

package/lib/components/ComboBox/ComboBox.js

@@ -16,7 +16,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var useId = require('../../internal/useId.js');
@@ -27,6 +27,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -119,7 +120,6 @@ const findHighlightedIndex = (_ref3, inputValue) => {
  */
 
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const [cursorPosition, setCursorPosition] = React.useState(0);
   const prevInputLengthRef = React.useRef(0);
   const inputRef = React.useRef(null);
   const {
@@ -157,19 +157,20 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     slug,
     ...rest
   } = props;
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [react.flip(), floatingUi_dom.hide()],
+    middleware: autoAlign ? [react.flip(), floatingUi_dom.hide()] : undefined,
     whileElementsMounted: react.autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -183,7 +184,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
-  }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
+  }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
@@ -377,7 +378,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
@@ -447,7 +448,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
       setHighlightedIndex(indexToHighlight(normalizedInput));
-      setCursorPosition(inputValue === null ? 0 : normalizedInput.length);
     },
     onSelectedItemChange(_ref5) {
       let {
@@ -496,11 +496,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-    }
-  }, [inputValue, cursorPosition]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
     onClick: handleToggleClick(isOpen),
@@ -544,9 +539,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel,
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   React.useEffect(() => {
     if (textInput.current) {
       if (inputRef.current && typeaheadText) {
@@ -562,7 +556,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
     as: "label",
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     className: className,
@@ -574,7 +568,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -587,11 +581,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
+    'aria-label': titleText ? undefined : deprecatedAriaLabel || ariaLabel,
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     value: inputValue,
     onChange: e => {
       const newValue = e.target.value;
+      setInputValue(newValue);
       downshiftSetInputValue(newValue);
     },
     ref: mergeRefs["default"](textInput, ref, inputRef),
@@ -648,7 +644,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (matchingItem) {
           const newValue = itemToString(matchingItem);
           downshiftSetInputValue(newValue);
-          setCursorPosition(newValue.length);
           selectItem(matchingItem);
         }
       }
@@ -671,12 +666,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({
       item,
-      index: index$1
+      index
     });
 
     // The initial implementation using <Downshift> would place the disabled attribute
@@ -689,10 +684,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({

package/lib/components/ComboButton/index.js

@@ -14,7 +14,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../IconButton/index.js');
+var index$1 = require('../IconButton/index.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
@@ -24,6 +24,7 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,12 +58,18 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  const middlewares = [react.flip({
-    crossAxis: false
-  }), floatingUi_dom.hide()];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [react.flip({
+      crossAxis: false
+    }), floatingUi_dom.hide()];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
       apply(_ref2) {
@@ -137,7 +144,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     size: size,
     disabled: disabled,
     onClick: handlePrimaryActionClick
-  }, label)), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, label)), /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
     ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),

package/lib/components/DataTable/TableCell.d.ts

@@ -28,8 +28,5 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
      */
     headers?: string;
 }
-declare const TableCell: {
-    ({ children, className, hasSlugHeader, colSpan, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;