@carbon/react 1.63.2 → 1.64.0

package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js

@@ -0,0 +1,143 @@
+/**
+ * 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 { evaluate, getPaddingObject, rectToClientRect, sides } from '../../utils/dist/floating-ui.utils.mjs.js';
+export { rectToClientRect } from '../../utils/dist/floating-ui.utils.mjs.js';
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+
+export { detectOverflow, hide };

package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+export { evaluate, expandPaddingObject, getPaddingObject, rectToClientRect, sides };

package/lib/components/{Slug → AILabel}/index.js

@@ -18,6 +18,7 @@ var index = require('../Toggletip/index.js');
 var index$1 = require('../IconButton/index.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,24 +27,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _Undo;
-const SlugContent = /*#__PURE__*/React__default["default"].forwardRef(function SlugContent(_ref, ref) {
+const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(function AILabelContent(_ref, ref) {
   let {
     children,
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const hasSlugActions = React__default["default"].Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
-  const slugContentClasses = cx__default["default"](className, {
+  const hasAILabelActions = React__default["default"].Children.toArray(children).some(child => child.type?.displayName === 'AILabelActions');
+  const aiLabelContentClasses = cx__default["default"](className, {
     [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasSlugActions
+    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
-    className: slugContentClasses,
-    ref: ref
+    className: aiLabelContentClasses
   }, children);
 });
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
    */
@@ -53,22 +53,22 @@ SlugContent.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-const SlugActions = /*#__PURE__*/React__default["default"].forwardRef(function SlugActions(_ref2, ref) {
+const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(function AILabelActions(_ref2, ref) {
   let {
     children,
     className
   } = _ref2;
   const prefix = usePrefix.usePrefix();
-  const slugActionBarClasses = cx__default["default"](className, {
+  const aiLabelActionsClasses = cx__default["default"](className, {
     [`${prefix}--slug-actions`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
-    className: slugActionBarClasses,
+    className: aiLabelActionsClasses,
     ref: ref
   }, children);
 });
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar
    */
@@ -78,10 +78,11 @@ SlugActions.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_ref3, ref) {
+const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILabel(_ref3, ref) {
   let {
     aiText = 'AI',
     aiTextLabel,
+    textLabel,
     align,
     autoAlign = true,
     children,
@@ -91,29 +92,30 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     revertActive,
     revertLabel = 'Revert to AI input',
     slugLabel = 'Show information',
+    ['aria-label']: ariaLabel = 'Show information',
     size = 'xs',
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
-  const id = useId.useId('slug');
-  const slugClasses = cx__default["default"](className, {
+  const id = useId.useId('AILabel');
+  const aiLabelClasses = cx__default["default"](className, {
     [`${prefix}--slug`]: true,
     [`${prefix}--slug--revert`]: revertActive
   });
-  const slugButtonClasses = cx__default["default"]({
+  const aiLabelButtonClasses = cx__default["default"]({
     [`${prefix}--slug__button`]: true,
     [`${prefix}--slug__button--${size}`]: size,
     [`${prefix}--slug__button--${kind}`]: kind,
-    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && aiTextLabel
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
       onRevertClick(evt);
     }
   };
-  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: slugClasses,
+    className: aiLabelClasses,
     ref: ref,
     id: id
   }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
@@ -125,24 +127,29 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     align: align,
     autoAlign: autoAlign
   }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
-    className: slugButtonClasses,
-    label: ariaLabel
+    className: aiLabelButtonClasses,
+    label: ariaLabelText
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slug__text`
-  }, aiText), aiTextLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slug__additional-text`
-  }, aiTextLabel)), children));
+  }, aiTextLabel || textLabel)), children));
 });
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+  /**
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
+   */
+  AILabelContent: PropTypes__default["default"].node,
   /**
    * Specify the correct translation of the AI text
    */
   aiText: PropTypes__default["default"].string,
   /**
+   * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: PropTypes__default["default"].string,
+  aiTextLabel: deprecate["default"](PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
@@ -163,20 +170,24 @@ Slug.propTypes = {
   'right-end', 'right-top',
   // deprecated use right-start instead
   'right-start']),
+  /**
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
+   */
+  'aria-label': PropTypes__default["default"].string,
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes__default["default"].bool,
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
   children: PropTypes__default["default"].node,
   /**
-   * Specify an optional className to be added to the AI slug
+   * Specify an optional className to be added to the `AILabel`
    */
   className: PropTypes__default["default"].string,
   /**
-   * Specify the type of Slug, from the following list of types:
+   * Specify the type of `AILabel`, from the following list of types:
    */
   kind: PropTypes__default["default"].oneOf(['default', 'inline']),
   /**
@@ -196,15 +207,16 @@ Slug.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * @deprecated
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugContent: PropTypes__default["default"].node,
+  slugLabel: deprecate["default"](PropTypes__default["default"].string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
   /**
-   * Specify the text that will be provided to the aria-label of the `Slug` button
+   * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  slugLabel: PropTypes__default["default"].string
+  textLabel: PropTypes__default["default"].string
 };
 
-exports.Slug = Slug;
-exports.SlugActions = SlugActions;
-exports.SlugContent = SlugContent;
+exports.AILabel = AILabel;
+exports.AILabelActions = AILabelActions;
+exports.AILabelContent = AILabelContent;

package/lib/components/{AiSkeleton/AiSkeletonIcon.d.ts → AISkeleton/AISkeletonIcon.d.ts}

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
     /**
      * Specify an optional className to add.
      */
@@ -16,8 +16,8 @@ interface AiSkeletonIconProps {
      */
     style?: React.CSSProperties;
 }
-declare const AiSkeletonIcon: {
-    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonIcon: {
+    ({ className, ...rest }: AISkeletonIconProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -29,4 +29,4 @@ declare const AiSkeletonIcon: {
         style: PropTypes.Requireable<object>;
     };
 };
-export default AiSkeletonIcon;
+export default AISkeletonIcon;

package/lib/components/{AiSkeleton/AiSkeletonIcon.js → AISkeleton/AISkeletonIcon.js}

@@ -22,20 +22,20 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonIcon = _ref => {
+const AISkeletonIcon = _ref => {
   let {
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const AiSkeletonIconClasses = cx__default["default"](className, {
+  const AISkeletonIconClasses = cx__default["default"](className, {
     [`${prefix}--skeleton__icon--ai`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(SkeletonIcon["default"], _rollupPluginBabelHelpers["extends"]({
-    className: AiSkeletonIconClasses
+    className: AISkeletonIconClasses
   }, rest));
 };
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
@@ -46,4 +46,4 @@ AiSkeletonIcon.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-exports["default"] = AiSkeletonIcon;
+exports["default"] = AISkeletonIcon;

package/lib/components/{AiSkeleton/AiSkeletonPlaceholder.d.ts → AISkeleton/AISkeletonPlaceholder.d.ts}

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
     /**
      * Add a custom class to the component to set the height and width
      */
     className?: string;
 }
-declare const AiSkeletonPlaceholder: {
-    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonPlaceholder: {
+    ({ className, ...other }: AISkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Add a custom class to the component
@@ -21,4 +21,4 @@ declare const AiSkeletonPlaceholder: {
         className: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;

package/lib/components/{AiSkeleton/AiSkeletonPlaceholder.js → AISkeleton/AISkeletonPlaceholder.js}

@@ -22,21 +22,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonPlaceholder = _ref => {
+const AISkeletonPlaceholder = _ref => {
   let {
     className,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const AiSkeletonPlaceholderClasses = cx__default["default"]({
+  const AISkeletonPlaceholderClasses = cx__default["default"]({
     className,
     [`${prefix}--skeleton__placeholder--ai`]: true
   }, className);
   return /*#__PURE__*/React__default["default"].createElement(SkeletonPlaceholder["default"], _rollupPluginBabelHelpers["extends"]({
-    className: AiSkeletonPlaceholderClasses
+    className: AISkeletonPlaceholderClasses
   }, other));
 };
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
   /**
    * Add a custom class to the component
    * to set the height and width
@@ -44,4 +44,4 @@ AiSkeletonPlaceholder.propTypes = {
   className: PropTypes__default["default"].string
 };
 
-exports["default"] = AiSkeletonPlaceholder;
+exports["default"] = AISkeletonPlaceholder;

package/lib/components/{AiSkeleton/AiSkeletonText.d.ts → AISkeleton/AISkeletonText.d.ts}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */
@@ -27,8 +27,8 @@ interface AiSkeletonTextProps {
      */
     width?: string;
 }
-declare const AiSkeletonText: {
-    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonText: {
+    ({ className, ...rest }: AISkeletonTextProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node
@@ -52,4 +52,4 @@ declare const AiSkeletonText: {
         width: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonText;
+export default AISkeletonText;

package/lib/components/{AiSkeleton/AiSkeletonText.js → AISkeleton/AISkeletonText.js}

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const AiSkeletonText = _ref => {
+const AISkeletonText = _ref => {
   let {
     className,
     ...rest
@@ -35,7 +35,7 @@ const AiSkeletonText = _ref => {
     className: aiSkeletonTextClasses
   }, rest));
 };
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -58,4 +58,4 @@ AiSkeletonText.propTypes = {
   width: PropTypes__default["default"].string
 };
 
-exports["default"] = AiSkeletonText;
+exports["default"] = AISkeletonText;

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

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+import AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };

package/lib/components/Accordion/AccordionItem.js

@@ -118,6 +118,7 @@ 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/CheckboxGroup/CheckboxGroup.js

@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'Slug') {
+  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/ComboBox/ComboBox.js

@@ -253,8 +253,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       case ToggleButtonClick:
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
         return changes;
@@ -294,6 +293,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const showWarning = !invalid && warn;
   const className = cx__default["default"](`${prefix}--combo-box`, {
+    [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -314,7 +314,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }]);
   const inputClasses = cx__default["default"](`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
-    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
+    [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
   // needs to be Capitalized for react to render it correctly
@@ -322,7 +322,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/ComposedModal/ComposedModal.js

@@ -257,7 +257,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm'
     });

package/lib/components/DataTable/DataTable.js

@@ -19,7 +19,7 @@ var cells = require('./tools/cells.js');
 var denormalize = require('./tools/denormalize.js');
 var events = require('../../tools/events.js');
 var filter = require('./tools/filter.js');
-var instanceId = require('./tools/instanceId.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var Table = require('./Table.js');
 var TableActionList = require('./TableActionList.js');
 var TableBatchAction = require('./TableBatchAction.js');
@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
-const getInstanceId = instanceId["default"]();
+const getInstanceId = setupGetInstanceId["default"]();
 const translationKeys = {
   expandRow: 'carbon.table.row.expand',
   collapseRow: 'carbon.table.row.collapse',