@carbon/react 1.31.3 → 1.32.0

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -31,7 +31,9 @@ class ContentSwitcher extends React__default["default"].Component {
   constructor() {
     super(...arguments);
     _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {});
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      selectedIndex: undefined
+    });
     _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
       this._switchRefs[index] = ref;
     });
@@ -51,7 +53,7 @@ class ContentSwitcher extends React__default["default"].Component {
         key
       } = data;
       if (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
-        const nextIndex = navigation.getNextIndex(key, index, this.props.children.length);
+        const nextIndex = navigation.getNextIndex(key, index, this.props.children?.length);
         const children = React__default["default"].Children.toArray(this.props.children);
         if (selectionMode === 'manual') {
           const switchRef = this._switchRefs[nextIndex];
@@ -60,6 +62,9 @@ class ContentSwitcher extends React__default["default"].Component {
           this.setState({
             selectedIndex: nextIndex
           }, () => {
+            if (typeof this.state.selectedIndex !== 'number') {
+              return;
+            }
             const child = children[this.state.selectedIndex];
             const switchRef = this._switchRefs[this.state.selectedIndex];
             switchRef && switchRef.focus();
@@ -105,16 +110,18 @@ class ContentSwitcher extends React__default["default"].Component {
       children,
       className,
       light,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       selectedIndex,
       // eslint-disable-line no-unused-vars
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       selectionMode,
       // eslint-disable-line no-unused-vars
       size,
       ...other
     } = this.props;
-    const isIconOnly = React__default["default"].Children.map(children, child => {
+    const isIconOnly = React__default["default"].Children?.map(children, child => {
       return child.type.displayName === 'IconSwitch';
-    }).every(val => val === true);
+    })?.every(val => val === true);
     const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
       [`${prefix}--content-switcher--light`]: light,
       [`${prefix}--content-switcher--${size}`]: size,
@@ -130,8 +137,9 @@ class ContentSwitcher extends React__default["default"].Component {
       }
     }, other, {
       className: classes,
-      role: "tablist"
-    }), React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+      role: "tablist",
+      onChange: undefined
+    }), children && React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
       index,
       onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
       onKeyDown: this.handleChildChange,

package/lib/components/DangerButton/DangerButton.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 { ButtonComponent } from '../Button';
+declare const DangerButton: ButtonComponent;
+export default DangerButton;

package/lib/components/DangerButton/DangerButton.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,6 +21,5 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
   kind: "danger"
 }, props));
-var DangerButton$1 = DangerButton;
 
-exports["default"] = DangerButton$1;
+exports["default"] = DangerButton;

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

package/lib/components/DataTable/TableBatchAction.js

@@ -13,6 +13,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/DataTable/TableBatchActions.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var TableActionList = require('./TableActionList.js');
 require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');

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

@@ -0,0 +1,29 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface TableBodyProps extends ReactAttr<HTMLTableSectionElement> {
+    /**
+     * `polite` Adjust the notification behavior of screen readers
+     */
+    'aria-live'?: 'polite' | 'assertive' | 'off';
+}
+declare const TableBody: {
+    ({ children, className, ...rest }: TableBodyProps): JSX.Element;
+    propTypes: {
+        /**
+         * `polite` Adjust the notification behavior of screen readers
+         */
+        'aria-live': PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        'aria-live': string;
+    };
+};
+export default TableBody;

package/lib/components/DataTable/TableBody.js

@@ -10,13 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 var PropTypes = require('prop-types');
+var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableBody = _ref => {
   let {
@@ -39,6 +39,5 @@ TableBody.propTypes = {
 TableBody.defaultProps = {
   'aria-live': 'polite'
 };
-var TableBody$1 = TableBody;
 
-exports["default"] = TableBody$1;
+exports["default"] = TableBody;

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

@@ -0,0 +1,51 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface TableContainerProps extends Omit<ReactAttr<HTMLDivElement>, 'title'> {
+    /**
+     * Optional description text for the Table
+     */
+    description?: React.ReactNode;
+    /**
+     * Specify whether the table should have a sticky header
+     */
+    stickyHeader?: boolean;
+    /**
+     * If true, will use a width of 'fit-content' to match the inner table width
+     */
+    useStaticWidth?: boolean;
+    /**
+     * Provide a title for the Table
+     */
+    title?: React.ReactNode;
+}
+declare const TableContainer: {
+    ({ className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * Optional description text for the Table
+         */
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether the table should have a sticky header
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a title for the Table
+         */
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * If true, will use a width of 'fit-content' to match the inner table width
+         */
+        useStaticWidth: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableContainer;

package/lib/components/DataTable/TableContainer.js

@@ -43,8 +43,8 @@ const TableContainer = _ref => {
   });
   const value = React.useMemo(() => {
     return {
-      titleId: title ? titleId : null,
-      descriptionId: description ? descriptionId : null
+      titleId: title ? titleId : undefined,
+      descriptionId: description ? descriptionId : undefined
     };
   }, [title, description, titleId, descriptionId]);
   return /*#__PURE__*/React__default["default"].createElement(TableContext.TableContext.Provider, {
@@ -81,6 +81,5 @@ TableContainer.propTypes = {
    */
   useStaticWidth: PropTypes__default["default"].bool
 };
-var TableContainer$1 = TableContainer;
 
-exports["default"] = TableContainer$1;
+exports["default"] = TableContainer;

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

@@ -0,0 +1,86 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+type TableExpandHeaderPropsBase = {
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    ariaLabel?: string;
+    /**
+     * @deprecated The enableExpando prop is being replaced by `enableToggle`
+     */
+    enableExpando?: false | undefined;
+    /**
+     * Specify whether an expand all button should be displayed
+     */
+    enableToggle?: false | undefined;
+    /**
+     * The description of the chevron right icon, to be put in its SVG `<title>` element.
+     */
+    expandIconDescription?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded?: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
+} & ReactAttr<HTMLTableCellElement>;
+type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableToggle' | 'onExpand'> & {
+    enableToggle: true;
+    ariaLabel: string;
+    onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
+};
+type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableExpando' | 'onExpand'> & {
+    enableExpando: true;
+    ariaLabel: string;
+    onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
+};
+export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
+declare const TableExpandHeader: {
+    ({ ariaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        ariaLabel: PropTypes.Requireable<any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * The enableExpando prop is being replaced by enableToggle
+         */
+        enableExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify whether an expand all button should be displayed
+         */
+        enableToggle: PropTypes.Requireable<boolean>;
+        /**
+         * The description of the chevron right icon, to be put in its SVG `<title>` element.
+         */
+        expandIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Supply an id to the th element.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Specify whether this row is expanded or not. This helps coordinate data
+         * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+         */
+        isExpanded: Function;
+        /**
+         * Hook for when a listener initiates a request to expand the given row
+         */
+        onExpand: PropTypes.Requireable<any>;
+    };
+};
+export default TableExpandHeader;

package/lib/components/DataTable/TableExpandHeader.js

@@ -10,13 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
-var deprecate = require('../../prop-types/deprecate.js');
 var React = require('react');
-var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -90,6 +90,5 @@ TableExpandHeader.propTypes = {
    */
   onExpand: PropTypes__default["default"].oneOfType([requiredIfGivenPropIsTruthy["default"]('enableExpando', PropTypes__default["default"].func), requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].func)])
 };
-var TableExpandHeader$1 = TableExpandHeader;
 
-exports["default"] = TableExpandHeader$1;
+exports["default"] = TableExpandHeader;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -17,14 +17,15 @@ var keys = require('../../../internal/keyboard/keys.js');
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
 var carbonFlatpickrFixEventsPlugin = (config => fp => {
+  const {
+    inputFrom,
+    inputTo,
+    lastStartValue
+  } = config;
   /**
    * Handles `keydown` event.
    */
   const handleKeydown = event => {
-    const {
-      inputFrom,
-      inputTo
-    } = config;
     const {
       target
     } = event;
@@ -45,6 +46,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       }
     }
   };
+  const parseDateWithFormat = dateStr => fp.parseDate(dateStr, fp.config.dateFormat);
 
   /**
    * Handles `blur` event.
@@ -54,11 +56,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
    * set the date again, triggering the calendar to update.
    */
   const handleBlur = event => {
-    const {
-      inputFrom,
-      inputTo,
-      lastStartValue
-    } = config;
     const {
       target
     } = event;
@@ -68,8 +65,9 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     if (inputTo === target && fp.selectedDates[1]) {
       // Using getTime() enables the ability to more readily compare the date currently
       // selected in the calendar and the date currently in the value of the input
-      const selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
-      const currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0);
+      const withoutTime = date => date.setHours(0, 0, 0, 0);
+      const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
+      const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
       // The date should only be set if both dates are valid dates, and they don't match.
       // When they don't match, this indiciates that the date selected in the calendar is stale,
@@ -79,19 +77,17 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
         fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
       }
     }
-
+    const isValidDate = date => date.toString() !== 'Invalid Date';
     // save end date in calendar inmediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
-      let currentEndDate = new Date(inputTo.value);
-      if (currentEndDate.toString() !== 'Invalid Date') {
+      if (isValidDate(parseDateWithFormat(inputTo.value))) {
         fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
       }
     }
 
     // overriding the flatpickr bug where the startDate gets deleted on blur
     if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-      let currentStartDate = new Date(lastStartValue.current);
-      if (currentStartDate.toString() !== 'Invalid Date') {
+      if (isValidDate(parseDateWithFormat(lastStartValue.current))) {
         inputFrom.value = lastStartValue.current;
         if (inputTo.value) {
           fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);

package/lib/components/Dropdown/Dropdown.js

@@ -227,6 +227,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ,
     role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
     ,
+    "aria-owns": getMenuProps().id,
     "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../TextInput/index.js');
+require('../TextInput/ControlledPasswordInput.js');
 var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');

package/lib/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
+    /**
+     * Provide the children form elements to be rendered inside of the <fieldset>
+     */
+    children: React.ReactNode;
+    /**
+     * Provide a custom className to be applied to the containing <fieldset> node
+     */
+    className?: string;
+    /**
+     * Specify whether the <FormGroup> is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide id for the fieldset <legend> which corresponds to the fieldset
+     * `aria-labelledby`
+     */
+    legendId?: string;
+    /**
+     * Provide the text to be rendered inside of the fieldset <legend>
+     */
+    legendText: React.ReactNode;
+    /**
+     * Specify whether the message should be displayed in the <FormGroup>
+     */
+    message?: boolean;
+    /**
+     * Provide the text for the message in the <FormGroup>
+     */
+    messageText?: string;
+}
+declare const FormGroup: {
+    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide the children form elements to be rendered inside of the <fieldset>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing <fieldset> node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the <FormGroup> is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide id for the fieldset <legend> which corresponds to the fieldset
+         * `aria-labelledby`
+         */
+        legendId: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the text to be rendered inside of the fieldset <legend>
+         */
+        legendText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Specify whether the message should be displayed in the <FormGroup>
+         */
+        message: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text for the message in the <FormGroup>
+         */
+        messageText: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        invalid: boolean;
+        message: boolean;
+        messageText: string;
+    };
+};
+export default FormGroup;

package/lib/components/IconButton/index.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
@@ -32,10 +33,10 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     closeOnActivation = true,
     defaultOpen = false,
     disabled,
-    enterDelayMs,
+    enterDelayMs = 100,
     kind,
     label,
-    leaveDelayMs,
+    leaveDelayMs = 100,
     wrapperClasses,
     size,
     ...rest

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright IBM Corp. 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 React, { ElementType, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Density of components within this layout
+ */
+type Density = 'condensed' | 'normal';
+/**
+ * Size of components within this layout
+ */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface LayoutProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Specify a custom component or element to be rendered as the top-level
+     * element in the component
+     */
+    as?: (() => ReactNode) | string | ElementType;
+    /**
+     * Provide child elements to be rendered inside of `Layout`
+     */
+    children?: ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the desired density of components within this layout
+     */
+    density?: Density;
+    /**
+     * Specify the desired size of components within this layout
+     */
+    size?: Size;
+}
+declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<React.ReactNode>>;
+export interface LayoutConstraintProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Specify a custom component or element to be rendered as the top-level
+     * element in the component
+     */
+    as?: (() => ReactNode) | string | ElementType;
+    /**
+     * Provide child elements to be rendered inside of `LayoutConstraint`
+     */
+    children?: ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the desired layout density constraints of this element's children
+     */
+    density?: {
+        min?: Density | null;
+        default?: Density | null;
+        max?: Density | null;
+    } | null;
+    /**
+     * Specify the desired layout size constraints of this element's children
+     */
+    size?: {
+        min?: Size | null;
+        default?: Size | null;
+        max?: Size | null;
+    } | null;
+}
+declare const LayoutConstraint: React.ForwardRefExoticComponent<LayoutConstraintProps & React.RefAttributes<React.ReactNode>>;
+export { Layout, LayoutConstraint };

package/lib/components/Layout/index.js

@@ -23,6 +23,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 const densities = ['condensed', 'normal'];
+
+/**
+ * Density of components within this layout
+ */
+
+/**
+ * Size of components within this layout
+ */
+
 const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref, forwardRef) {
   let {
     as: BaseComponent = 'div',
@@ -34,8 +43,8 @@ const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout
   } = _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)
+    [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
+    [`${prefix}--layout--density-${density}`]: density && densities.includes(density)
   });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: forwardRef,
@@ -82,9 +91,9 @@ const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(funct
   }).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
+      [`${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, {