@carbon/react 1.30.0 → 1.31.0-rc.0

package/es/index.js

@@ -9,43 +9,48 @@ import './feature-flags.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
+export { ComboButton } from './components/ComboButton/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 import './components/DataTable/index.js';
+export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
-export { default as Form } from './components/Form/Form.js';
 export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { FormContext } from './components/FluidForm/FormContext.js';
+export { default as Form } from './components/Form/Form.js';
 export { FlexGrid } from './components/Grid/FlexGrid.js';
 export { Grid } from './components/Grid/Grid.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
+export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
+export { MenuButton } from './components/MenuButton/index.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
+export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
+export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as Slider } from './components/Slider/index.js';
-export { default as TileGroup } from './components/TileGroup/index.js';
-export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
-export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
-export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
-export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
+export { default as TextArea } from './components/TextArea/TextArea.js';
+export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
+import './components/TextInput/index.js';
+export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
-export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
+export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';
+export { Layout as unstable_Layout } from './components/Layout/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
-export { ComboButton as unstable_ComboButton } from './components/ComboButton/index.js';
-export { MenuButton as unstable_MenuButton } from './components/MenuButton/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
@@ -54,7 +59,6 @@ import './components/Text/index.js';
 export { GlobalTheme, Theme, ThemeContext, useTheme } from './components/Theme/index.js';
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
-export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
@@ -72,9 +76,11 @@ export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSni
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
+export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
+export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { default as Filename } from './components/FileUploader/Filename.js';
 export { default as FileUploaderSkeleton } from './components/FileUploader/FileUploader.Skeleton.js';
 export { default as FileUploaderButton } from './components/FileUploader/FileUploaderButton.js';
@@ -88,8 +94,9 @@ export { default as Loading } from './components/Loading/Loading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
-export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
+export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
+export { default as TextInput } from './components/TextInput/TextInput.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
@@ -118,10 +125,8 @@ export { default as unstable__FluidSelectSkeleton } from './components/FluidSele
 export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
 export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
-export { LayoutDirection as unstable_LayoutDirection } from './components/Layout/LayoutDirection.js';
-export { useLayoutDirection as unstable_useLayoutDirection } from './components/Layout/useLayoutDirection.js';
-export { Menu as unstable_Menu } from './components/Menu/Menu.js';
-export { MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable } from './components/Menu/MenuItem.js';
+export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
+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 Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
@@ -160,6 +165,8 @@ export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryCo
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
 export { default as Link } from './components/Link/Link.js';
+export { Menu } from './components/Menu/Menu.js';
+export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
@@ -173,31 +180,26 @@ export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButt
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
+export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
 export { default as Select } from './components/Select/Select.js';
 export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
-export { default as Switch } from './components/Switch/Switch.js';
-export { default as IconSwitch } from './components/Switch/IconSwitch.js';
+export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
+export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
+export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
+export { default as Switch } from './components/Switch/Switch.js';
+export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as Tag, types } from './components/Tag/Tag.js';
-export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
-export { default as TextArea } from './components/TextArea/TextArea.js';
-export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
-export { default as TextInput } from './components/TextInput/TextInput.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
-export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
-export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
-export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
-export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
-export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as Content } from './components/UIShell/Content.js';
 export { default as Header } from './components/UIShell/Header.js';
 export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';

package/lib/components/Accordion/Accordion.js

@@ -28,13 +28,15 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
-    size = 'md',
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
     [`${prefix}--accordion--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Button/Button.js

@@ -44,7 +44,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     onMouseEnter,
     onMouseLeave,
     renderIcon: ButtonImageElement,
-    size = 'lg',
+    size,
     tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
@@ -63,9 +63,14 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   const buttonClasses = cx__default["default"](className, {
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--xl`]: size === 'xl',
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--2xl`]: size === '2xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,

package/lib/components/Checkbox/Checkbox.js

@@ -77,8 +77,8 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     className: `${prefix}--checkbox`,
     id: id,
     ref: el => {
-      if (el && indeterminate) {
-        el.indeterminate = indeterminate;
+      if (el) {
+        el.indeterminate = indeterminate ?? false;
       }
       if (typeof ref === 'function') {
         ref(el);

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -211,6 +211,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyButton["default"], {
+    size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
     feedback: feedback,

package/lib/components/ComboButton/index.js

@@ -44,7 +44,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     label,
     onClick,
     size = 'lg',
-    tooltipAlign,
+    tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
@@ -86,7 +86,8 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   const triggerClasses = cx__default["default"](`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
-    ref: ref
+    ref: ref,
+    "aria-owns": open ? id : null
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
@@ -98,12 +99,12 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     label: t('carbon.combo-button.additional-actions'),
     size: size,
     disabled: disabled,
-    align: tooltipAlign,
+    align: tooltipAlignment,
     "aria-haspopup": true,
     "aria-expanded": open,
     onClick: handleTriggerClick,
     onMouseDown: handleTriggerMousedown,
-    "aria-owns": open ? id : null
+    "aria-controls": open ? id : null
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     ref: menuRef,
     id: id,
@@ -144,7 +145,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlign: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.

package/lib/components/ContainedList/ContainedList.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var index = require('../Layout/index.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -53,13 +54,16 @@ function ContainedList(_ref) {
     isInset,
     kind = variants[0],
     label,
-    size = 'lg'
+    size
   } = _ref;
   const labelId = `${useId.useId('contained-list')}-header`;
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--contained-list`, {
-    [`${prefix}--contained-list--inset-rulers`]: isInset
-  }, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
+    [`${prefix}--contained-list--inset-rulers`]: isInset,
+    [`${prefix}--contained-list--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size
+  }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
   const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
   const renderedChildren = renderChildren(children);
@@ -70,7 +74,11 @@ function ContainedList(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     id: labelId,
     className: `${prefix}--contained-list__label`
-  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label), /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'xl'
+    },
     className: `${prefix}--contained-list__action`
   }, action)), children && /*#__PURE__*/React__default["default"].createElement("ul", {
     "aria-labelledby": labelId

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var index = require('../../Layout/index.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -48,7 +49,11 @@ function ContainedListItem(_ref) {
     onClick: onClick
   }, content) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--contained-list-item__content`
-  }, content), action && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, content), action && /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'lg'
+    },
     className: `${prefix}--contained-list-item__action`
   }, action));
 }

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var deprecate = require('../../prop-types/deprecate.js');
+var index = require('../Layout/index.js');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var match = require('../../internal/keyboard/match.js');
@@ -117,9 +118,17 @@ class ContentSwitcher extends React__default["default"].Component {
     const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
       [`${prefix}--content-switcher--light`]: light,
       [`${prefix}--content-switcher--${size}`]: size,
+      // TODO: V12 - Remove this class
+      [`${prefix}--layout--size-${size}`]: size,
       [`${prefix}--content-switcher--icon-only`]: isIconOnly
     });
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+    return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
+      size: {
+        default: 'md',
+        min: 'sm',
+        max: 'lg'
+      }
+    }, other, {
       className: classes,
       role: "tablist"
     }), React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {

package/lib/components/CopyButton/CopyButton.js

@@ -15,6 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
+var index = require('../Layout/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -30,12 +31,17 @@ function CopyButton(_ref) {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(index.LayoutConstraint, {
+    size: {
+      default: 'md',
+      max: 'lg'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Copy, {
     className: `${prefix}--snippet__icon`
-  }));
+  })));
 }
 CopyButton.propTypes = {
   /**

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -121,6 +121,5 @@ DataTableSkeleton.defaultProps = {
   showHeader: true,
   showToolbar: true
 };
-var DataTableSkeleton$1 = DataTableSkeleton;
 
-exports["default"] = DataTableSkeleton$1;
+exports["default"] = DataTableSkeleton;

package/lib/components/DataTableSkeleton/index.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 DataTableSkeleton from './DataTableSkeleton';
+export default DataTableSkeleton;
+export { DataTableSkeleton };

package/lib/components/FileUploader/FileUploaderButton.js

@@ -56,7 +56,8 @@ function FileUploaderButton(_ref) {
     [`${prefix}--btn--disabled`]: disabled,
     // V11: remove field, small
     [`${prefix}--btn--md`]: size === 'field' || size === 'md',
-    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
+    [`${prefix}--layout--size-${size}`]: size
   });
 
   // Adjust label text state based on changes to the labelText prop

package/lib/components/IconButton/index.js

@@ -31,16 +31,19 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     className,
     closeOnActivation = true,
     defaultOpen = false,
+    disabled,
     enterDelayMs,
     kind,
     label,
     leaveDelayMs,
     wrapperClasses,
-    size = 'md',
+    size,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
-  const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`);
+  const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
+    [`${prefix}--icon-tooltip--disabled`]: disabled
+  });
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
     closeOnActivation: closeOnActivation,
@@ -50,6 +53,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    disabled: disabled,
     kind: kind,
     ref: ref,
     size: size,
@@ -77,6 +81,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].bool,
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes__default["default"].bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */

package/lib/components/Layout/index.js

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const densities = ['condensed', 'normal'];
+const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](className, `${prefix}--layout`, {
+    [`${prefix}--layout--size-${size}`]: sizes.includes(size),
+    [`${prefix}--layout--density-${density}`]: densities.includes(density)
+  });
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: forwardRef,
+    className: classes
+  }), children);
+});
+Layout.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * Provide child elements to be rendered inside of `Layout`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the desired density of components within this layout
+   */
+  density: PropTypes__default["default"].oneOf(densities),
+  /**
+   * Specify the desired size of components within this layout
+   */
+  size: PropTypes__default["default"].oneOf(sizes)
+};
+const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref2, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](className, Object.entries({
+    size,
+    density
+  }).map(_ref3 => {
+    let [group, constraints] = _ref3;
+    return {
+      [`${prefix}--layout-constraint--${group}:default-${constraints?.default}`]: constraints?.default,
+      [`${prefix}--layout-constraint--${group}:min-${constraints?.min}`]: constraints?.min,
+      [`${prefix}--layout-constraint--${group}:max-${constraints?.max}`]: constraints?.max
+    };
+  }));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: forwardRef,
+    className: classes
+  }), children);
+});
+LayoutConstraint.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * Provide child elements to be rendered inside of `LayoutConstraint`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the desired layout density constraints of this element's children
+   */
+  density: PropTypes__default["default"].shape({
+    min: PropTypes__default["default"].oneOf(densities),
+    default: PropTypes__default["default"].oneOf(densities),
+    max: PropTypes__default["default"].oneOf(densities)
+  }),
+  /**
+   * Specify the desired layout size constraints of this element's children
+   */
+  size: PropTypes__default["default"].shape({
+    min: PropTypes__default["default"].oneOf(sizes),
+    default: PropTypes__default["default"].oneOf(sizes),
+    max: PropTypes__default["default"].oneOf(sizes)
+  })
+};
+
+exports.Layout = Layout;
+exports.LayoutConstraint = LayoutConstraint;

package/lib/components/ListBox/ListBoxPropTypes.d.ts

@@ -10,5 +10,5 @@ declare const listBoxSizes: readonly ["sm", "md", "lg"];
 export type ListBoxType = (typeof listBoxTypes)[number];
 export type ListBoxSize = (typeof listBoxSizes)[number];
 export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
-export declare const ListBoxSize: PropTypes.Requireable<"md" | "sm" | "lg">;
+export declare const ListBoxSize: PropTypes.Requireable<"sm" | "md" | "lg">;
 export {};

package/lib/components/Menu/MenuItem.js

@@ -290,12 +290,13 @@ MenuItemGroup.propTypes = {
    */
   label: PropTypes__default["default"].string.isRequired
 };
+const defaultItemToString = item => item.toString();
 const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
   let {
     className,
     defaultSelectedItem,
     items,
-    itemToString = item => item.toString(),
+    itemToString = defaultItemToString,
     label,
     onChange,
     selectedItem,

package/lib/components/MenuButton/index.js

@@ -68,10 +68,13 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   }
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
-  }, className);
+  });
   const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
+    "aria-owns": open ? id : null,
+    className: className
+  }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
     kind: buttonKind,
@@ -81,8 +84,8 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     "aria-expanded": open,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    "aria-owns": open ? id : null
-  }), label), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    "aria-controls": open ? id : null
+  }, label), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     ref: menuRef,
     id: id,
     label: label,