@carbon/react 1.97.0-rc.0 → 1.98.0

package/es/components/FileUploader/FileUploaderItem.js

@@ -36,10 +36,10 @@ function FileUploaderItem({
   const textRef = useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId();
   const {
     current: id
-  } = useRef(uuid || useId());
+  } = useRef(uuid || generatedId);
   const classes = cx(`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
@@ -49,11 +49,14 @@ function FileUploaderItem({
   const filterSpaceName = name => {
     return name?.replace(/\s+/g, '');
   };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
+    if (!element) {
+      setIsEllipsisApplied(false);
+      return false;
+    }
+    const isActive = element.offsetWidth < element.scrollWidth;
+    setIsEllipsisApplied(isActive);
+    return isActive;
   };
   useLayoutEffect(() => {
     isEllipsisActive(textRef.current);

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

@@ -4,6 +4,7 @@
  * 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 { Menu } from './Menu';
-import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
-export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };
+import { Menu, type MenuProps } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuProps, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps, };
+export default Menu;

package/es/components/Modal/Modal.js

@@ -167,7 +167,7 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !passiveModal && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -194,7 +194,8 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
           endTrapNode,
           currentActiveNode,
           oldActiveNode,
-          selectorsFloatingMenus
+          selectorsFloatingMenus,
+          prefix
         });
         if (wrapFocusTimeout.current) {
           clearTimeout(wrapFocusTimeout.current);

package/es/components/Notification/Notification.js

@@ -509,7 +509,7 @@ function ActionableNotification({
   const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect(() => {
     if (hasFocus && role === 'alertdialog') {
-      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      const button = document.querySelector(`button.${prefix}--actionable-notification__action-button`);
       button?.focus();
     }
   });
@@ -532,7 +532,8 @@ function ActionableNotification({
         startTrapNode,
         endTrapNode,
         currentActiveNode,
-        oldActiveNode
+        oldActiveNode,
+        prefix
       });
     }
   }

package/es/components/Pagination/Pagination.js

@@ -7,16 +7,16 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
+import { IconButton } from '../IconButton/index.js';
+import PropTypes from 'prop-types';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
+import cx from 'classnames';
+import isEqual from 'react-fast-compare';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { IconButton } from '../IconButton/index.js';
-import isEqual from 'react-fast-compare';
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -266,7 +266,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(CaretLeft, null))), /*#__PURE__*/React.createElement(IconButton, {
-    align: "top-end",
+    align: "top",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,

package/es/components/Popover/index.js

@@ -116,8 +116,8 @@ forwardRef) {
       // If a value is not set via a custom property, provide a default value that matches the
       // default values defined in the sass style file
       const getStyle = window.getComputedStyle(popover.current, null);
-      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
-      const caretProperty = getStyle.getPropertyValue('--cds-popover-caret-height');
+      const offsetProperty = getStyle.getPropertyValue(`--${prefix}-popover-offset`);
+      const caretProperty = getStyle.getPropertyValue(`--${prefix}-popover-caret-height`);
 
       // Handle if the property values are in px or rem.
       // We want to store just the base number value without a unit suffix

package/es/components/Select/Select.js

@@ -14,12 +14,12 @@ import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,
@@ -49,7 +49,6 @@ const Select = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
-  const selectInstanceId = useId();
   // Convert children to an array of valid elements once using type narrowing
   const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 
@@ -61,55 +60,50 @@ const Select = /*#__PURE__*/React.forwardRef(({
   // otherwise, fallback to the first option's text
   const initialTitle = other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || '';
   const [title, setTitle] = useState(initialTitle);
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
     [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: invalid,
-    [`${prefix}--select--disabled`]: disabled,
+    [`${prefix}--select--invalid`]: normalizedProps.invalid,
+    [`${prefix}--select--disabled`]: normalizedProps.disabled,
     [`${prefix}--select--readonly`]: readOnly,
-    [`${prefix}--select--warning`]: warn,
-    [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--select--warning`]: normalizedProps.warn,
+    [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--select--slug`]: slug,
     [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx({
     [`${prefix}--select-input`]: true,
     [`${prefix}--select-input--${size}`]: size
   });
-  const errorId = `${id}-error-msg`;
-  const errorText = (() => {
-    if (invalid) {
-      return invalidText;
-    }
-    if (warn) {
-      return warnText;
-    }
-  })();
-  const error = invalid || warn ? /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`,
-    id: errorId
-  }, errorText) : null;
+  const error = normalizedProps.validation;
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
-  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   const ariaProps = {};
-  if (invalid) {
-    ariaProps['aria-describedby'] = errorId;
+  if (normalizedProps.invalid) {
+    ariaProps['aria-describedby'] = normalizedProps.invalidId;
   } else if (!inline && !isFluid) {
-    ariaProps['aria-describedby'] = helper ? helperId : undefined;
+    ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
   }
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
@@ -146,8 +140,8 @@ const Select = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
-      disabled: disabled || undefined,
-      "aria-invalid": invalid || undefined,
+      disabled: normalizedProps.disabled || undefined,
+      "aria-invalid": normalizedProps.invalid || undefined,
       "aria-readonly": readOnly || undefined,
       title: title,
       onChange: composeEventHandlers([onChange, handleChange])
@@ -155,9 +149,9 @@ const Select = /*#__PURE__*/React.forwardRef(({
       ref: ref
     }), children), /*#__PURE__*/React.createElement(ChevronDown, {
       className: `${prefix}--select__arrow`
-    }), invalid && /*#__PURE__*/React.createElement(WarningFilled, {
+    }), normalizedProps.invalid && /*#__PURE__*/React.createElement(WarningFilled, {
       className: `${prefix}--select__invalid-icon`
-    }), !invalid && warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
+    }), !normalizedProps.invalid && normalizedProps.warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
       className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
   })();
@@ -173,10 +167,10 @@ const Select = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null
+    "data-invalid": normalizedProps.invalid || null
   }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null,
+    "data-invalid": normalizedProps.invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
   }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {

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

@@ -111,3 +111,4 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
+export default Toggletip;

package/es/components/Toggletip/index.js

@@ -282,4 +282,4 @@ ToggletipActions.propTypes = {
   className: PropTypes.string
 };
 
-export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Toggletip as default };

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

@@ -4,6 +4,7 @@
  * 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 { DefinitionTooltip } from './DefinitionTooltip';
+import { DefinitionTooltip, type DefinitionTooltipProps } from './DefinitionTooltip';
 import { Tooltip, type TooltipProps } from './Tooltip';
-export { DefinitionTooltip, Tooltip, type TooltipProps };
+export { DefinitionTooltip, Tooltip, type DefinitionTooltipProps, type TooltipProps, };
+export default Tooltip;

package/es/internal/FloatingMenu.js

@@ -8,7 +8,6 @@
 import React, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
 import * as FeatureFlags from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
-import window from 'window-or-global';
 import { Tab } from './keyboard/keys.js';
 import { match } from './keyboard/match.js';
 import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
@@ -109,14 +108,16 @@ const FloatingMenu = ({
     const menuSize = menuBody.getBoundingClientRect();
     const refPosition = triggerEl ? triggerEl.getBoundingClientRect() : undefined;
     const offsetValue = typeof menuOffset === 'function' ? menuOffset(menuBody, menuDirection, triggerEl, flipped) : menuOffset;
+    const scrollX = globalThis.scrollX ?? 0;
+    const scrollY = globalThis.scrollY ?? 0;
     if (updateOrientation) {
       updateOrientation({
         menuSize,
         refPosition,
         direction: menuDirection,
         offset: offsetValue,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -136,8 +137,8 @@ const FloatingMenu = ({
         },
         offset: offsetValue,
         direction: menuDirection,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -257,7 +258,8 @@ const FloatingMenu = ({
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
         currentActiveNode: relatedTarget,
-        oldActiveNode: target
+        oldActiveNode: target,
+        prefix
       });
     }
   };

package/es/internal/OptimizedResize.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import window from 'window-or-global';
-
-// mdn resize function
+// Use `globalThis` for universal access to global object (browser, workers, Node).
+const win = globalThis;
 
 /**
  * A callback function to be executed on `resize`.
@@ -25,7 +24,7 @@ const OptimizedResize = (() => {
   const handleResize = () => {
     if (!running) {
       running = true;
-      window.requestAnimationFrame(runCallbacks);
+      win.requestAnimationFrame(runCallbacks);
     }
   };
   const addCallback = callback => {
@@ -38,7 +37,7 @@ const OptimizedResize = (() => {
     /** Adds a callback function to be executed on window `resize`. */
     add: callback => {
       if (!callbacks.length) {
-        window.addEventListener('resize', handleResize);
+        win.addEventListener('resize', handleResize);
       }
       addCallback(callback);
       return {

package/es/internal/wrapFocus.d.ts

@@ -14,12 +14,12 @@
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[]) => boolean;
+export declare const elementOrParentIsFloatingMenu: (node: Node, selectorsFloatingMenus?: string[], prefix?: string) => boolean;
 /**
  * Ensures the focus is kept within the given container by implementing
  * "focus-wrap" behavior.
  */
-export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, prefix, }: {
     /** The DOM node of the container. */
     bodyNode: HTMLElement | null;
     /** The start sentinel node for focus trapping. */
@@ -32,6 +32,8 @@ export declare const wrapFocus: ({ bodyNode, startTrapNode, endTrapNode, current
     oldActiveNode: HTMLElement;
     /** CSS selectors for floating menus. */
     selectorsFloatingMenus?: string[];
+    /** Classname prefix for Carbon selectors. */
+    prefix?: string;
 }) => void;
 /**
  * Ensures the focus is kept in the given container, implementing "focus-wrap"

package/es/internal/wrapFocus.js

@@ -30,9 +30,9 @@ const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOC
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = []) => {
+const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = [], prefix = 'cds') => {
   if (node instanceof Element && typeof node.closest === 'function') {
-    const allSelectorsFloatingMenus = ['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', ...selectorsFloatingMenus];
+    const allSelectorsFloatingMenus = [`.${prefix}--overflow-menu-options`, `.${prefix}--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => !!node.closest(selector));
   }
   return false;
@@ -48,9 +48,10 @@ const wrapFocus = ({
   endTrapNode,
   currentActiveNode,
   oldActiveNode,
-  selectorsFloatingMenus
+  selectorsFloatingMenus,
+  prefix = 'cds'
 }) => {
-  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus, prefix)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
       const tabbableElement = Array.from(bodyNode.querySelectorAll(selectorTabbable)).reverse().find(({

package/es/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/lib/components/ButtonSet/ButtonSet.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * fluid: button set resize to the size of the container up to a maximum dependant on the
+     * number of buttons. Overrides `stacked` property.
+     */
+    fluid?: boolean;
     /**
      * Specify the button arrangement of the set (vertically stacked or
      * horizontal)

package/lib/components/ButtonSet/ButtonSet.js

@@ -14,22 +14,81 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
+const buttonOrder = kind => ({
+  ghost: 1,
+  'danger--ghost': 2,
+  tertiary: 3,
+  danger: 5,
+  primary: 6
+})[kind] ?? 4;
+const getButtonKind = element => {
+  if (/*#__PURE__*/React.isValidElement(element) && element.props && typeof element.props === 'object') {
+    const props = element.props;
+    return props.kind ?? 'primary';
+  }
+  return 'primary';
+};
 const ButtonSet = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     className,
+    fluid,
     stacked,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
+  const fluidInnerRef = React.useRef(null);
+  const [isStacked, setIsStacked] = React.useState(false);
+  const [sortedChildren, setSortedChildren] = React.useState(React.Children.toArray(children));
+
+  /**
+   * Used to determine if the buttons are currently stacked
+   */
+  useIsomorphicEffect.default(() => {
+    const checkStacking = () => {
+      let newIsStacked = stacked || false;
+      if (fluidInnerRef && fluidInnerRef.current) {
+        const computedStyle = window.getComputedStyle(fluidInnerRef.current);
+        newIsStacked = computedStyle?.getPropertyValue?.('--flex-direction') === 'column';
+      }
+      return newIsStacked;
+    };
+
+    /* initial value not dependant on observer */
+    setIsStacked(checkStacking());
+    if (!fluidInnerRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      setIsStacked(checkStacking());
+    });
+    resizeObserver.observe(fluidInnerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [isStacked, stacked]);
+  React.useEffect(() => {
+    const newSortedChildren = React.Children.toArray(children);
+    newSortedChildren.sort((a, b) => {
+      return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
+    });
+    setSortedChildren(newSortedChildren);
+
+    // adding sortedChildren to deps causes an infinite loop
+  }, [children, isStacked]);
   const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
-    [`${prefix}--btn-set--stacked`]: stacked
+    [`${prefix}--btn-set--stacked`]: isStacked,
+    [`${prefix}--btn-set--fluid`]: fluid
   });
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: buttonSetClasses,
     ref: ref
-  }), children);
+  }), fluid ? /*#__PURE__*/React.createElement("div", {
+    ref: fluidInnerRef,
+    className: cx(`${prefix}--btn-set__fluid-inner`, {
+      [`${prefix}--btn-set__fluid-inner--auto-stack`]: true
+    })
+  }, sortedChildren) : children);
 });
 ButtonSet.displayName = 'ButtonSet';
 ButtonSet.propTypes = {
@@ -41,9 +100,14 @@ ButtonSet.propTypes = {
    * Specify an optional className to be added to your ButtonSet
    */
   className: PropTypes.string,
+  /**
+   * fluid: button set resize to the size of the container up to a maximum dependant on the
+   * number of buttons.
+   */
+  fluid: PropTypes.bool,
   /**
    * Specify the button arrangement of the set (vertically stacked or
-   * horizontal)
+   * horizontal) - ignored when fluid is true
    */
   stacked: PropTypes.bool
 };

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/lib/components/ComposedModal/ComposedModal.js

@@ -210,7 +210,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !isPassive && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -234,7 +234,8 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+        prefix
       });
     }
 

package/lib/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

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

@@ -282,11 +282,12 @@ export declare const DataTable: {
     };
     TableCell: React.ForwardRefExoticComponent<import("./TableCell").TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
     TableContainer: {
-        ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             aiEnabled: PropTypes.Requireable<boolean>;
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
+            decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             stickyHeader: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -5,12 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type HTMLAttributes } from 'react';
+import React, { ReactNode, type HTMLAttributes } from 'react';
 export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * Specify if the entire table has AI generated contents
      */
     aiEnabled?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+     */
+    decorator?: ReactNode;
     /**
      * Optional description text for the Table
      */
@@ -29,7 +33,7 @@ export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>
     title?: React.ReactNode;
 }
 declare const TableContainer: {
-    ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+    ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the entire table has AI generated contents
@@ -37,6 +41,10 @@ declare const TableContainer: {
         aiEnabled: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Optional description text for the Table
          */