@carbon/react 1.97.0 → 1.99.0-rc.0

package/es/components/NumberInput/NumberInput.js

@@ -126,6 +126,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     max,
     min,
     onBlur,
+    onStepperBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -426,6 +427,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      let parsedValueForBlur;
       if (type === 'text') {
         // When isControlled, the current inputValue needs re-parsed
         // because the consumer's onChange hasn't been called yet and
@@ -441,6 +443,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
+        parsedValueForBlur = parsedFormattedNewValue;
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
@@ -466,7 +469,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         }
       }
       if (onBlur) {
-        onBlur(e);
+        if (type === 'number') {
+          onBlur(e, value);
+          return;
+        }
+        const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+        onBlur(e, parsedTextValue);
       }
     },
     pattern: pattern,
@@ -486,7 +494,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -499,7 +507,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -610,10 +618,14 @@ NumberInput.propTypes = {
    */
   stepStartValue: PropTypes.number,
   /**
-   * Provide an optional handler that is called when the input or stepper
-   * buttons are blurred.
+   * Provide an optional handler that is called when the input is blurred.
    */
   onBlur: PropTypes.func,
+  /**
+   * Provide an optional handler that is called when the stepper
+   * buttons are blurred.
+   */
+  onStepperBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.

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.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/Popover/index.js

@@ -60,27 +60,41 @@ forwardRef) {
   const caretRef = useRef(null);
   const popover = useRef(null);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
+  const lastClickWasInsidePopoverContent = useRef(false);
   let align = mapPopoverAlign(initialAlign);
 
+  // Tracks clicks inside PopoverContent to prevent it from closing when clicked, this handles an edge
+  // case where the popover will close when clicking non-focusable elements (e.g. text)
+  useEvent(popover, 'mousedown', event => {
+    const target = event.target;
+    lastClickWasInsidePopoverContent.current = refs.floating.current?.contains(target) || false;
+
+    // reset flag
+    if (lastClickWasInsidePopoverContent.current) {
+      setTimeout(() => {
+        lastClickWasInsidePopoverContent.current = false;
+      }, 0);
+    }
+  });
+
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (isTabTip) {
-      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
-        onRequestClose?.();
-      }
-      return;
-    }
     if (!relatedTarget) {
+      // do not close if PopoverContent was clicked
+      if (lastClickWasInsidePopoverContent.current) {
+        lastClickWasInsidePopoverContent.current = false;
+        return;
+      }
       onRequestClose?.();
-      return;
-    }
-    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
-    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+    } else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+      const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+      const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 
-    // Only close if focus moved outside both containers
-    if (isOutsideMainContainer && isOutsideFloating) {
-      onRequestClose?.();
+      // Only close if focus moved outside both containers and not to an interactive parent wrapper
+      if (isOutsideFloating && !isFocusableWrapper) {
+        onRequestClose?.();
+      }
     }
   });
   useWindowEvent('click', ({

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/Tabs/Tabs.js

@@ -886,7 +886,7 @@ const Tab = /*#__PURE__*/forwardRef(({
     })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    tabIndex: -1,
     "aria-disabled": disabled,
     "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
     disabled: disabled,

package/es/components/TextArea/TextArea.js

@@ -202,8 +202,10 @@ const TextArea = frFn((props, forwardRef) => {
   }, labelText) : null;
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
-    className: counterClasses
+    className: counterClasses,
+    "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
+  const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
@@ -234,8 +236,13 @@ const TextArea = frFn((props, forwardRef) => {
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
-  } else if (!invalid && !warn && !isFluid && helperText) {
-    ariaDescribedBy = helperId;
+  } else if (warn && !isFluid) {
+    ariaDescribedBy = warnId;
+  } else {
+    const ids = [];
+    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (counterDescriptionId) ids.push(counterDescriptionId);
+    ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
   if (enableCounter) {
     // handle different counter mode
@@ -292,7 +299,10 @@ const TextArea = frFn((props, forwardRef) => {
     className: formItemClasses
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
-  }, label, counter), /*#__PURE__*/React.createElement("div", {
+  }, label, counter), enableCounter && maxCount && /*#__PURE__*/React.createElement("span", {
+    id: counterDescriptionId,
+    className: `${prefix}--visually-hidden`
+  }, counterMode === 'word' ? `Word limit ${maxCount}` : `Character limit ${maxCount}`), /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null

package/es/components/TextInput/PasswordInput.js

@@ -135,6 +135,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  const tooltipClasses = cx(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
   let align = undefined;
   if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
     if (tooltipAlignment === 'center') {
@@ -172,12 +173,12 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
-    className: `${prefix}--toggle-password-tooltip`,
+    className: tooltipClasses,
     label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   useEffect(() => {

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

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/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/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>;