@carbon/react 1.44.0 → 1.45.0-rc.0

package/es/components/Checkbox/Checkbox.d.ts

@@ -46,7 +46,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     invalidText?: React.ReactNode;
     /**
-     * Provide a `Slug` component to be rendered inside the `Checkbox` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Checkbox/Checkbox.js

@@ -175,7 +175,7 @@ Checkbox.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
   slug: PropTypes.node,
   /**

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -109,7 +109,7 @@ CheckboxGroup.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
   slug: PropTypes.node,
   /**

package/es/components/ComboBox/ComboBox.d.ts

@@ -137,7 +137,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `ComboBox` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/ComboBox/ComboBox.js

@@ -575,7 +575,7 @@ ComboBox.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
    */
   slug: PropTypes.node,
   /**

package/es/components/ComboButton/index.js

@@ -20,7 +20,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _ChevronDown;
-const spacing = 4; // top and bottom spacing between the button and the menu. in px
+const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };

package/es/components/ComposedModal/ModalFooter.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 interface SecondaryButtonProps {
     buttonText: ReactNode;
     onClick(evt: MouseEvent): void;
@@ -70,7 +71,7 @@ export interface ModalFooterProps {
     /**
      * loading status
      */
-    loadingStatus?: string;
+    loadingStatus?: InlineLoadingStatus;
     /**
      * Specify the description for the loading text
      */

package/es/components/DataTable/DataTable.d.ts

@@ -22,6 +22,7 @@ import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
+import TableSlugRow from './TableSlugRow';
 import TableToolbar from './TableToolbar';
 import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
@@ -302,6 +303,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     static TableRow: typeof TableRow;
     static TableSelectAll: typeof TableSelectAll;
     static TableSelectRow: typeof TableSelectRow;
+    static TableSlugRow: typeof TableSlugRow;
     static TableToolbar: typeof TableToolbar;
     static TableToolbarAction: typeof TableToolbarAction;
     static TableToolbarContent: typeof TableToolbarContent;

package/es/components/DataTable/DataTable.js

@@ -31,6 +31,7 @@ import TableHeader from './TableHeader.js';
 import TableRow from './TableRow.js';
 import TableSelectAll from './TableSelectAll.js';
 import TableSelectRow from './TableSelectRow.js';
+import TableSlugRow from './TableSlugRow.js';
 import TableToolbar from './TableToolbar.js';
 import TableToolbarAction from './TableToolbarAction.js';
 import TableToolbarContent from './TableToolbarContent.js';
@@ -723,6 +724,7 @@ _defineProperty(DataTable, "TableHeader", void 0);
 _defineProperty(DataTable, "TableRow", void 0);
 _defineProperty(DataTable, "TableSelectAll", void 0);
 _defineProperty(DataTable, "TableSelectRow", void 0);
+_defineProperty(DataTable, "TableSlugRow", void 0);
 _defineProperty(DataTable, "TableToolbar", void 0);
 _defineProperty(DataTable, "TableToolbarAction", void 0);
 _defineProperty(DataTable, "TableToolbarContent", void 0);
@@ -743,6 +745,7 @@ DataTable.TableHeader = TableHeader;
 DataTable.TableRow = TableRow;
 DataTable.TableSelectAll = TableSelectAll;
 DataTable.TableSelectRow = TableSelectRow;
+DataTable.TableSlugRow = TableSlugRow;
 DataTable.TableToolbar = TableToolbar;
 DataTable.TableToolbarAction = TableToolbarAction;
 DataTable.TableToolbarContent = TableToolbarContent;

package/es/components/DataTable/TableExpandRow.js

@@ -28,17 +28,34 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
+
+  // We need to put the slug before the expansion arrow and all other table cells after the arrow.
+  let rowHasSlug;
+  const slug = React__default.Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow') {
+      if (child.props.slug) {
+        rowHasSlug = true;
+      }
+      return child;
+    }
+  });
+  const normalizedChildren = React__default.Children.toArray(children).map(child => {
+    if (child.type?.displayName !== 'TableSlugRow') {
+      return child;
+    }
+  });
   const className = cx({
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
-    [`${prefix}--data-table--selected`]: isSelected
+    [`${prefix}--data-table--selected`]: isSelected,
+    [`${prefix}--parent-row--slug`]: rowHasSlug
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), /*#__PURE__*/React__default.createElement(TableCell, {
+  }), slug, /*#__PURE__*/React__default.createElement(TableCell, {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
@@ -53,7 +70,7 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
-  }))), children);
+  }))), normalizedChildren);
 });
 TableExpandRow.propTypes = {
   /**

package/es/components/DataTable/TableHeader.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 { ReactNodeLike } from 'prop-types';
 import React, { MouseEventHandler } from 'react';
 import { ReactAttr } from '../../types/common';
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
@@ -43,6 +44,10 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
      */
     scope?: string;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/es/components/DataTable/TableHeader.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
 import './state/sorting.js';
 import { useId } from '../../internal/useId.js';
@@ -52,11 +52,26 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     scope = defaultScope,
     sortDirection,
     translateWithId: t = translateWithId,
+    slug,
     id,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
+
+  // Slug is always size `mini`
+  const slugRef = useRef(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      ref: slugRef
+    });
+  }
+  const headerLabelClassNames = cx({
+    [`${prefix}--table-header-label`]: true,
+    [`${prefix}--table-header-label--slug`]: slug
+  });
   if (!isSortable) {
     return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
       id: id,
@@ -65,8 +80,8 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       colSpan: colSpan,
       ref: ref
     }), children ? /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--table-header-label`
-    }, children) : null);
+      className: headerLabelClassNames
+    }, children, normalizedSlug) : null);
   }
   const className = cx(headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -80,7 +95,16 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     isSortHeader,
     sortStates
   });
-  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`);
+  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, {
+    [`${prefix}--table-sort__header--slug`]: slug
+  });
+  const handleClick = evt => {
+    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+      return;
+    } else if (onClick) {
+      return onClick(evt);
+    }
+  };
   return /*#__PURE__*/React__default.createElement("th", {
     id: id,
     "aria-sort": ariaSort,
@@ -95,12 +119,12 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     type: "button",
     "aria-describedby": uniqueId,
     className: className,
-    onClick: onClick
+    onClick: handleClick
   }, rest), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
+  }, children), normalizedSlug, /*#__PURE__*/React__default.createElement(ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {

package/es/components/DataTable/TableSlugRow.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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, { ReactNodeLike } from 'prop-types';
+export interface TableSlugRowProps {
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     */
+    slug?: ReactNodeLike;
+}
+declare const TableSlugRow: {
+    ({ className, slug }: TableSlugRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default TableSlugRow;

package/es/components/DataTable/TableSlugRow.js

@@ -0,0 +1,49 @@
+/**
+ * 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__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const TableSlugRow = _ref => {
+  let {
+    className,
+    slug
+  } = _ref;
+  const prefix = usePrefix();
+  const TableSlugRowClasses = cx({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-slug`]: true,
+    [`${prefix}--table-column-slug--active`]: slug
+  });
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("td", {
+    className: TableSlugRowClasses
+  }, normalizedSlug);
+};
+TableSlugRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+   */
+  slug: PropTypes.node
+};
+
+export { TableSlugRow as default };

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

@@ -20,10 +20,11 @@ import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
+import TableSlugRow from './TableSlugRow';
 import TableToolbar from './TableToolbar';
 import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DataTable/index.js

@@ -37,6 +37,8 @@ import TableSelectAll from './TableSelectAll.js';
 export { default as TableSelectAll } from './TableSelectAll.js';
 import TableSelectRow from './TableSelectRow.js';
 export { default as TableSelectRow } from './TableSelectRow.js';
+import TableSlugRow from './TableSlugRow.js';
+export { default as TableSlugRow } from './TableSlugRow.js';
 import TableToolbar from './TableToolbar.js';
 export { default as TableToolbar } from './TableToolbar.js';
 import TableToolbarAction from './TableToolbarAction.js';
@@ -63,6 +65,7 @@ DataTable.TableHeader = TableHeader;
 DataTable.TableRow = TableRow;
 DataTable.TableSelectAll = TableSelectAll;
 DataTable.TableSelectRow = TableSelectRow;
+DataTable.TableSlugRow = TableSlugRow;
 DataTable.TableToolbar = TableToolbar;
 DataTable.TableToolbarAction = TableToolbarAction;
 DataTable.TableToolbarContent = TableToolbarContent;

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -77,7 +77,7 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, Exclude
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/DatePickerInput/DatePickerInput.js

@@ -206,7 +206,7 @@ DatePickerInput.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Dropdown/Dropdown.d.ts

@@ -112,7 +112,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Dropdown/Dropdown.js

@@ -396,7 +396,7 @@ Dropdown.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
   slug: PropTypes.node,
   /**

package/es/components/InlineLoading/InlineLoading.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+export declare const InlineLoadingStatuses: readonly ["inactive", "active", "finished", "error"];
+export type InlineLoadingStatus = (typeof InlineLoadingStatuses)[number];
+export interface InlineLoadingProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'> {
+    /**
+     * Specify a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the description for the inline loading text
+     */
+    description?: React.ReactNode;
+    /**
+     * Specify the description for the inline loading text
+     */
+    iconDescription?: string;
+    /**
+     * Provide an optional handler to be invoked when <InlineLoading> is
+     * successful
+     */
+    onSuccess?: () => void;
+    /**
+     * Specify the loading status
+     */
+    status?: InlineLoadingStatus;
+    /**
+     * Provide a delay for the `setTimeout` for success
+     */
+    successDelay?: number;
+}
+declare const InlineLoading: {
+    ({ className, status, iconDescription, description, onSuccess, successDelay, ...rest }: InlineLoadingProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional handler to be invoked when <InlineLoading> is
+         * successful
+         */
+        onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the loading status
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Provide a delay for the `setTimeout` for success
+         */
+        successDelay: PropTypes.Requireable<number>;
+    };
+};
+export default InlineLoading;

package/es/components/InlineLoading/InlineLoading.js

@@ -13,7 +13,7 @@ import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import Loading from '../Loading/Loading.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function InlineLoading(_ref) {
+const InlineLoading = _ref => {
   let {
     className,
     status = 'active',
@@ -21,7 +21,7 @@ function InlineLoading(_ref) {
     description,
     onSuccess,
     successDelay = 1500,
-    ...other
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
@@ -64,10 +64,10 @@ function InlineLoading(_ref) {
   }, loading);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: loadingClasses
-  }, other, {
+  }, rest, {
     "aria-live": 'assertive' 
   }), loadingAnimation, description && loadingText);
-}
+};
 InlineLoading.propTypes = {
   /**
    * Specify a custom className to be applied to the container node

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

package/es/components/Layer/LayerContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 React from 'react';
+export declare const LayerContext: React.Context<0 | 1 | 2>;

package/es/components/Layer/LayerLevel.d.ts

@@ -0,0 +1,5 @@
+export declare const levels: readonly ["one", "two", "three"];
+export declare const MIN_LEVEL = 0;
+export declare const MAX_LEVEL: number;
+export declare const LayerLevels: readonly [0, 1, 2];
+export type LayerLevel = (typeof LayerLevels)[number];

package/es/components/Layer/LayerLevel.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+
+const levels = ['one', 'two', 'three'];
+const MIN_LEVEL = 0;
+const MAX_LEVEL = levels.length - 1;
+
+export { MAX_LEVEL, MIN_LEVEL, levels };

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

@@ -0,0 +1,38 @@
+/**
+ * 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 React from 'react';
+import { LayerLevel } from './LayerLevel';
+import { PolymorphicProps } from '../../types/common';
+/**
+ * A custom hook that will return information about the current layer. A common
+ * field to pull from this is the `level` for the layer that the component that
+ * calls this hook is currently in
+ */
+export declare function useLayer(): {
+    level: 0 | 1 | 2;
+};
+interface LayerBaseProps {
+    /**
+     * Provide child elements to be rendered inside of `Theme`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the layer level and override any existing levels based on hierarchy
+     */
+    level?: LayerLevel;
+}
+export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
+export interface LayerComponent {
+    <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export declare const Layer: LayerComponent;
+export {};

package/es/components/Layer/index.js

@@ -11,9 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { LayerContext } from './LayerContext.js';
-
-const levels = ['one', 'two', 'three'];
-const MAX_LEVEL = levels.length - 1;
+import { levels, MIN_LEVEL, MAX_LEVEL } from './LayerLevel.js';
 
 /**
  * A custom hook that will return information about the current layer. A common
@@ -26,9 +24,9 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
+const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   let {
-    as: BaseComponent = 'div',
+    as = 'div',
     className: customClassName,
     children,
     level: overrideLevel,
@@ -38,8 +36,9 @@ const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
-  // The level should be between 0 and MAX_LEVEL
-  const value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
+  // The level should be between MIN_LEVEL and MAX_LEVEL
+  const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
+  const BaseComponent = as;
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
@@ -48,7 +47,8 @@ const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
     className: className
   }), children));
 });
-Layer.propTypes = {
+LayerRenderFunction.displayName = 'Layer';
+LayerRenderFunction.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -68,5 +68,6 @@ Layer.propTypes = {
    */
   level: PropTypes.oneOf([0, 1, 2])
 };
+const Layer = LayerRenderFunction;
 
 export { Layer, useLayer };

package/es/components/Menu/MenuItem.js

@@ -169,7 +169,8 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     className: `${prefix}--menu-item__icon`
   }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
-    className: `${prefix}--menu-item__label`
+    className: `${prefix}--menu-item__label`,
+    title: label
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {