@carbon/react 1.44.0 → 1.45.0-rc.0

package/lib/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/lib/components/Checkbox/Checkbox.js

@@ -185,7 +185,7 @@ Checkbox.propTypes = {
    */
   readOnly: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -119,7 +119,7 @@ CheckboxGroup.propTypes = {
    */
   readOnly: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/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/lib/components/ComboBox/ComboBox.js

@@ -586,7 +586,7 @@ ComboBox.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   /**

package/lib/components/ComboButton/index.js

@@ -30,7 +30,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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/lib/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/lib/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/lib/components/DataTable/DataTable.js

@@ -35,6 +35,7 @@ var TableHeader = require('./TableHeader.js');
 var TableRow = require('./TableRow.js');
 var TableSelectAll = require('./TableSelectAll.js');
 var TableSelectRow = require('./TableSelectRow.js');
+var TableSlugRow = require('./TableSlugRow.js');
 var TableToolbar = require('./TableToolbar.js');
 var TableToolbarAction = require('./TableToolbarAction.js');
 var TableToolbarContent = require('./TableToolbarContent.js');
@@ -733,6 +734,7 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "TableHeader", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectAll", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSlugRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbar", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarAction", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarContent", void 0);
@@ -753,6 +755,7 @@ DataTable.TableHeader = TableHeader["default"];
 DataTable.TableRow = TableRow["default"];
 DataTable.TableSelectAll = TableSelectAll["default"];
 DataTable.TableSelectRow = TableSelectRow["default"];
+DataTable.TableSlugRow = TableSlugRow["default"];
 DataTable.TableToolbar = TableToolbar["default"];
 DataTable.TableToolbarAction = TableToolbarAction["default"];
 DataTable.TableToolbarContent = TableToolbarContent["default"];

package/lib/components/DataTable/TableExpandRow.js

@@ -38,17 +38,34 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
     ...rest
   } = _ref;
   const prefix = usePrefix.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["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow') {
+      if (child.props.slug) {
+        rowHasSlug = true;
+      }
+      return child;
+    }
+  });
+  const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName !== 'TableSlugRow') {
+      return child;
+    }
+  });
   const className = cx__default["default"]({
     [`${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["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
+  }), slug, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
@@ -63,7 +80,7 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
-  }))), children);
+  }))), normalizedChildren);
 });
 TableExpandRow.propTypes = {
   /**

package/lib/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/lib/components/DataTable/TableHeader.js

@@ -62,11 +62,26 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     scope = defaultScope,
     sortDirection,
     translateWithId: t = translateWithId,
+    slug,
     id,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
+
+  // Slug is always size `mini`
+  const slugRef = React.useRef(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini',
+      ref: slugRef
+    });
+  }
+  const headerLabelClassNames = cx__default["default"]({
+    [`${prefix}--table-header-label`]: true,
+    [`${prefix}--table-header-label--slug`]: slug
+  });
   if (!isSortable) {
     return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
       id: id,
@@ -75,8 +90,8 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
       colSpan: colSpan,
       ref: ref
     }), children ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--table-header-label`
-    }, children) : null);
+      className: headerLabelClassNames
+    }, children, normalizedSlug) : null);
   }
   const className = cx__default["default"](headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -90,7 +105,16 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     isSortHeader,
     sortStates: sortStates.sortStates
   });
-  const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`);
+  const headerClasses = cx__default["default"](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["default"].createElement("th", {
     id: id,
     "aria-sort": ariaSort,
@@ -105,12 +129,12 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     type: "button",
     "aria-describedby": uniqueId,
     className: className,
-    onClick: onClick
+    onClick: handleClick
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
+  }, children), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {

package/lib/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/lib/components/DataTable/TableSlugRow.js

@@ -0,0 +1,59 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const TableSlugRow = _ref => {
+  let {
+    className,
+    slug
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const TableSlugRowClasses = cx__default["default"]({
+    ...(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["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement("td", {
+    className: TableSlugRowClasses
+  }, normalizedSlug);
+};
+TableSlugRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+   */
+  slug: PropTypes__default["default"].node
+};
+
+exports["default"] = TableSlugRow;

package/lib/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/lib/components/DataTable/index.js

@@ -25,6 +25,7 @@ var TableHeader = require('./TableHeader.js');
 var TableRow = require('./TableRow.js');
 var TableSelectAll = require('./TableSelectAll.js');
 var TableSelectRow = require('./TableSelectRow.js');
+var TableSlugRow = require('./TableSlugRow.js');
 var TableToolbar = require('./TableToolbar.js');
 var TableToolbarAction = require('./TableToolbarAction.js');
 var TableToolbarContent = require('./TableToolbarContent.js');
@@ -46,6 +47,7 @@ DataTable["default"].TableHeader = TableHeader["default"];
 DataTable["default"].TableRow = TableRow["default"];
 DataTable["default"].TableSelectAll = TableSelectAll["default"];
 DataTable["default"].TableSelectRow = TableSelectRow["default"];
+DataTable["default"].TableSlugRow = TableSlugRow["default"];
 DataTable["default"].TableToolbar = TableToolbar["default"];
 DataTable["default"].TableToolbarAction = TableToolbarAction["default"];
 DataTable["default"].TableToolbarContent = TableToolbarContent["default"];
@@ -69,6 +71,7 @@ exports.TableHeader = TableHeader["default"];
 exports.TableRow = TableRow["default"];
 exports.TableSelectAll = TableSelectAll["default"];
 exports.TableSelectRow = TableSelectRow["default"];
+exports.TableSlugRow = TableSlugRow["default"];
 exports.TableToolbar = TableToolbar["default"];
 exports.TableToolbarAction = TableToolbarAction["default"];
 exports.TableToolbarContent = TableToolbarContent["default"];

package/lib/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/lib/components/DatePickerInput/DatePickerInput.js

@@ -216,7 +216,7 @@ DatePickerInput.propTypes = {
    */
   size: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/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/lib/components/Dropdown/Dropdown.js

@@ -406,7 +406,7 @@ Dropdown.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   /**

package/lib/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/lib/components/InlineLoading/InlineLoading.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function InlineLoading(_ref) {
+const InlineLoading = _ref => {
   let {
     className,
     status = 'active',
@@ -31,7 +31,7 @@ function InlineLoading(_ref) {
     description,
     onSuccess,
     successDelay = 1500,
-    ...other
+    ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const loadingClasses = cx__default["default"](`${prefix}--inline-loading`, className);
@@ -74,10 +74,10 @@ function InlineLoading(_ref) {
   }, loading);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["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/lib/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/lib/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/lib/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/lib/components/Layer/LayerLevel.js

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

package/lib/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 {};