@carbon/react 1.30.0 → 1.31.0-rc.0

package/es/components/Accordion/Accordion.js

@@ -18,13 +18,15 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
-    size = 'md',
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${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.createElement("ul", _extends({

package/es/components/Button/Button.js

@@ -34,7 +34,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     onMouseEnter,
     onMouseLeave,
     renderIcon: ButtonImageElement,
-    size = 'lg',
+    size,
     tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
@@ -53,9 +53,14 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   const buttonClasses = cx(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/es/components/Checkbox/Checkbox.js

@@ -67,8 +67,8 @@ const Checkbox = /*#__PURE__*/React__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/es/components/CodeSnippet/CodeSnippet.js

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

package/es/components/ComboButton/index.js

@@ -34,7 +34,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     label,
     onClick,
     size = 'lg',
-    tooltipAlign,
+    tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
@@ -76,7 +76,8 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   const triggerClasses = cx(`${prefix}--combo-button__trigger`);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
-    ref: ref
+    ref: ref,
+    "aria-owns": open ? id : null
   }), /*#__PURE__*/React__default.createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -88,12 +89,12 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     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.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement(Menu, {
     ref: menuRef,
     id: id,
@@ -134,7 +135,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: PropTypes.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/es/components/ContainedList/ContainedList.js

@@ -8,6 +8,7 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { LayoutConstraint } from '../Layout/index.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -43,13 +44,16 @@ function ContainedList(_ref) {
     isInset,
     kind = variants[0],
     label,
-    size = 'lg'
+    size
   } = _ref;
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
   const classes = cx(`${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);
@@ -60,7 +64,11 @@ function ContainedList(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     id: labelId,
     className: `${prefix}--contained-list__label`
-  }, label), /*#__PURE__*/React__default.createElement("div", {
+  }, label), /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'xl'
+    },
     className: `${prefix}--contained-list__action`
   }, action)), children && /*#__PURE__*/React__default.createElement("ul", {
     "aria-labelledby": labelId

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -8,6 +8,7 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { LayoutConstraint } from '../../Layout/index.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 function ContainedListItem(_ref) {
@@ -38,7 +39,11 @@ function ContainedListItem(_ref) {
     onClick: onClick
   }, content) : /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--contained-list-item__content`
-  }, content), action && /*#__PURE__*/React__default.createElement("div", {
+  }, content), action && /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      min: 'sm',
+      max: 'lg'
+    },
     className: `${prefix}--contained-list-item__action`
   }, action));
 }

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
+import { LayoutConstraint } from '../Layout/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -107,9 +108,17 @@ class ContentSwitcher extends React__default.Component {
     const classes = cx(`${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.createElement("div", _extends({}, other, {
+    return /*#__PURE__*/React__default.createElement(LayoutConstraint, _extends({
+      size: {
+        default: 'md',
+        min: 'sm',
+        max: 'lg'
+      }
+    }, other, {
       className: classes,
       role: "tablist"
     }), React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.cloneElement(child, {

package/es/components/CopyButton/CopyButton.js

@@ -11,6 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import { Copy as Copy$1 } from '@carbon/icons-react';
 import Copy from '../Copy/Copy.js';
+import { LayoutConstraint } from '../Layout/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 function CopyButton(_ref) {
@@ -20,12 +21,17 @@ function CopyButton(_ref) {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement(Copy, _extends({
+  return /*#__PURE__*/React__default.createElement(LayoutConstraint, {
+    size: {
+      default: 'md',
+      max: 'lg'
+    }
+  }, /*#__PURE__*/React__default.createElement(Copy, _extends({
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
     className: `${prefix}--snippet__icon`
-  }));
+  })));
 }
 CopyButton.propTypes = {
   /**

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -111,6 +111,5 @@ DataTableSkeleton.defaultProps = {
   showHeader: true,
   showToolbar: true
 };
-var DataTableSkeleton$1 = DataTableSkeleton;
 
-export { DataTableSkeleton$1 as default };
+export { DataTableSkeleton as default };

package/es/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/es/components/FileUploader/FileUploaderButton.js

@@ -46,7 +46,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/es/components/IconButton/index.js

@@ -21,16 +21,19 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     className,
     closeOnActivation = true,
     defaultOpen = false,
+    disabled,
     enterDelayMs,
     kind,
     label,
     leaveDelayMs,
     wrapperClasses,
-    size = 'md',
+    size,
     ...rest
   } = props;
   const prefix = usePrefix();
-  const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`);
+  const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
+    [`${prefix}--icon-tooltip--disabled`]: disabled
+  });
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     closeOnActivation: closeOnActivation,
@@ -40,6 +43,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(pr
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
+    disabled: disabled,
     kind: kind,
     ref: ref,
     size: size,
@@ -67,6 +71,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */

package/es/components/Layout/index.js

@@ -0,0 +1,118 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const densities = ['condensed', 'normal'];
+const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(_ref, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classes = cx(className, `${prefix}--layout`, {
+    [`${prefix}--layout--size-${size}`]: sizes.includes(size),
+    [`${prefix}--layout--density-${density}`]: densities.includes(density)
+  });
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _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.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+  /**
+   * Provide child elements to be rendered inside of `Layout`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the desired density of components within this layout
+   */
+  density: PropTypes.oneOf(densities),
+  /**
+   * Specify the desired size of components within this layout
+   */
+  size: PropTypes.oneOf(sizes)
+};
+const LayoutConstraint = /*#__PURE__*/React__default.forwardRef(function Layout(_ref2, forwardRef) {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className,
+    density,
+    size,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const classes = cx(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.createElement(BaseComponent, _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.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+  /**
+   * Provide child elements to be rendered inside of `LayoutConstraint`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the desired layout density constraints of this element's children
+   */
+  density: PropTypes.shape({
+    min: PropTypes.oneOf(densities),
+    default: PropTypes.oneOf(densities),
+    max: PropTypes.oneOf(densities)
+  }),
+  /**
+   * Specify the desired layout size constraints of this element's children
+   */
+  size: PropTypes.shape({
+    min: PropTypes.oneOf(sizes),
+    default: PropTypes.oneOf(sizes),
+    max: PropTypes.oneOf(sizes)
+  })
+};
+
+export { Layout, LayoutConstraint };

package/es/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/es/components/Menu/MenuItem.js

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

package/es/components/MenuButton/index.js

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

package/es/components/OverflowMenu/index.js

@@ -5,9 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import React__default from 'react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { OverflowMenu as OverflowMenu$2 } from './next/index.js';
 import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
-const OverflowMenu = createClassWrapper(OverflowMenu$1);
+const OverflowMenuV11 = createClassWrapper(OverflowMenu$1);
+function OverflowMenu(props) {
+  const enableV12OverflowMenu = useFeatureFlag('enable-v12-overflowmenu');
+  return enableV12OverflowMenu ? /*#__PURE__*/React__default.createElement(OverflowMenu$2, props) : /*#__PURE__*/React__default.createElement(OverflowMenuV11, props);
+}
+OverflowMenu.displayName = 'OverflowMenu';
 
 export { OverflowMenu, OverflowMenu as default };

package/es/components/OverflowMenu/next/index.js

@@ -0,0 +1,98 @@
+/**
+ * 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 { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { OverflowMenuVertical } from '@carbon/icons-react';
+import { IconButton } from '../../IconButton/index.js';
+import { Menu } from '../../Menu/Menu.js';
+import { useId } from '../../../internal/useId.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
+
+const defaultSize = 'md';
+const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMenu(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    label = 'Options',
+    renderIcon: IconElement = OverflowMenuVertical,
+    size = defaultSize,
+    tooltipAlignment,
+    ...rest
+  } = _ref;
+  const id = useId('overflowmenu');
+  const prefix = usePrefix();
+  const triggerRef = useRef(null);
+  const {
+    open,
+    x,
+    y,
+    handleClick,
+    handleMousedown,
+    handleClose
+  } = useAttachedMenu(triggerRef);
+  const containerClasses = cx(className, `${prefix}--overflow-menu__container`);
+  const triggerClasses = cx(`${prefix}--overflow-menu`, {
+    [`${prefix}--overflow-menu--open`]: open
+  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: containerClasses,
+    "aria-owns": open ? id : null,
+    ref: forwardRef
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-controls": open ? id : null,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    className: triggerClasses,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    ref: triggerRef,
+    label: label,
+    align: tooltipAlignment
+  }, /*#__PURE__*/React__default.createElement(IconElement, {
+    className: `${prefix}--overflow-menu__icon`
+  })), /*#__PURE__*/React__default.createElement(Menu, {
+    id: id,
+    size: size,
+    open: open,
+    onClose: handleClose,
+    x: x,
+    y: y,
+    label: label
+  }, children));
+});
+OverflowMenu.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this OverflowMenu.
+   */
+  children: PropTypes.node,
+  /**
+   * Additional CSS class names for the trigger button.
+   */
+  className: PropTypes.string,
+  /**
+   * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+   */
+  label: PropTypes.string,
+  /**
+   * Otionally provide a custom icon to be rendered on the trigger button.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify how the trigger tooltip should be aligned.
+   */
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+};
+
+export { OverflowMenu };