@carbon/ibm-products 2.30.0 → 2.31.0

package/es/components/ComboButton/ComboButton.d.ts

@@ -1,21 +1,41 @@
 /**
- * The combo button consolidates similar actions, while exposing the most commonly used one.
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export function ComboButton({ children, className, overflowMenu, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    overflowMenu: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ComboButton {
-    namespace deprecated {
-        let level: string;
-        let details: string;
-    }
-    namespace propTypes {
-        export let children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        export { string as className };
-        export let overflowMenu: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
-    }
+import React, { ComponentProps, ReactNode } from 'react';
+interface ComboButtonProps extends ComponentProps<'div'> {
+    /** Provide the contents of the `ComboButton` */
+    children?: ReactNode;
+    /** Provide an optional class to be applied to the containing node */
+    className?: string;
+    /** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
+    overflowMenu: {
+        /**
+         * The event handler for the `click` event.
+         */
+        onClick?(): void;
+        /**
+         * Function called when menu is closed
+         */
+        onClose?(): void;
+        /**
+         * The event handler for the `focus` event.
+         */
+        onFocus?(): void;
+        /**
+         * The event handler for the `keydown` event.
+         */
+        onKeyDown?(): void;
+        /**
+         * Function called when menu is opened
+         */
+        onOpen?(): void;
+    };
 }
-import { string } from 'prop-types';
+/**
+ * The combo button consolidates similar actions, while exposing the most commonly used one.
+ */
+declare const ComboButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<ComboButtonProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ComboButton };

package/es/components/ComboButton/ComboButton.js

@@ -11,18 +11,17 @@ import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import cx from 'classnames';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
-import React__default, { useRef, useState, Children, createElement } from 'react';
+import React__default, { forwardRef, useRef, useState, Children, createElement } from 'react';
+import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className", "overflowMenu"],
-  _excluded2 = ["children"],
-  _excluded3 = ["children", "renderIcon"];
-var blockClass = 'security--combo-button';
+  _excluded2 = ["children", "renderIcon"];
+var blockClass = "".concat(pkg.prefix, "--combo-button");
 var componentName = 'ComboButton';
-
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
  */
-var ComboButton = function ComboButton(_ref) {
+var ComboButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     overflowMenu = _ref.overflowMenu,
@@ -33,21 +32,22 @@ var ComboButton = function ComboButton(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var _Children$toArray$fil = Children.toArray(children).filter(Boolean).map(function (_ref2) {
-      var _ref2$props = _ref2.props,
-        children = _ref2$props.children,
-        props = _objectWithoutProperties(_ref2$props, _excluded2);
-      return _objectSpread2(_objectSpread2({}, props), {}, {
-        children: /*#__PURE__*/React__default.createElement("span", {
-          className: "".concat(blockClass, "__action"),
-          title: children
-        }, children)
-      });
+  var _Children$toArray$fil = Children.toArray(children).filter(Boolean).map(function (child) {
+      if ( /*#__PURE__*/React__default.isValidElement(child)) {
+        var props = child.props;
+        return _objectSpread2(_objectSpread2({}, props), {}, {
+          children: /*#__PURE__*/React__default.createElement("span", {
+            className: "".concat(blockClass, "__action")
+          }, child)
+        });
+      }
+      return null;
     }),
     _Children$toArray$fil2 = _toArray(_Children$toArray$fil),
     primaryAction = _Children$toArray$fil2[0],
     restActions = _Children$toArray$fil2.slice(1);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    ref: ref,
     className: cx(blockClass, className),
     "data-floating-menu-container": true
   }), /*#__PURE__*/React__default.createElement(Button, primaryAction), restActions.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({}, overflowMenu, {
@@ -73,10 +73,10 @@ var ComboButton = function ComboButton(_ref) {
       });
     },
     flipped: true
-  }), restActions.map(function (_ref3, index) {
-    var children = _ref3.children,
-      Icon = _ref3.renderIcon,
-      action = _objectWithoutProperties(_ref3, _excluded3);
+  }), restActions.map(function (_ref2, index) {
+    var children = _ref2.children,
+      Icon = _ref2.renderIcon,
+      action = _objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({}, action, {
       key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
       className: "".concat(blockClass, "__overflow-menu__item"),
@@ -85,17 +85,21 @@ var ComboButton = function ComboButton(_ref) {
       }, /*#__PURE__*/React__default.createElement(Icon, null)))
     }));
   })));
-};
+});
+
+/**@ts-ignore*/
 ComboButton.deprecated = {
   level: 'warn',
   details: "Please replace ".concat(componentName, " with Carbon's ComboButton")
 };
+ComboButton.displayName = componentName;
 ComboButton.propTypes = {
   /** Provide the contents of the `ComboButton` */
   children: propTypesExports.node.isRequired,
   /** Provide an optional class to be applied to the containing node */
   className: propTypesExports.string,
   /** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
+  /**@ts-ignore*/
   overflowMenu: propTypesExports.shape(OverflowMenu.propTypes)
 };
 

package/es/components/ComboButton/ComboButtonItem/index.d.ts

@@ -1,16 +1,25 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /**
  * The combo button item provides additional actions a user can take.
  */
-export function ComboButtonItem({ ...rest }: {
-    [x: string]: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ComboButtonItem {
-    namespace propTypes {
-        export let children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        export { bool as disabled };
-        export { string as href };
-        export let renderIcon: import("prop-types").Requireable<object>;
-    }
-}
-import { bool } from 'prop-types';
-import { string } from 'prop-types';
+declare const ComboButtonItem: {
+    ({ ...rest }: {
+        [x: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /** Provide the contents of the `ComboButtonItem` */
+        children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
+        /** Specify whether the `ComboButton` should be disabled, or not */
+        disabled: import("prop-types").Requireable<boolean>;
+        /** Provide an optional `href` for the `ComboButtonItem` to become an `a` element */
+        href: import("prop-types").Requireable<string>;
+        /** Provide an optional icon to render */
+        renderIcon: import("prop-types").Requireable<object>;
+    };
+};
+export { ComboButtonItem };

package/es/components/CreateModal/CreateModal.d.ts

@@ -1,8 +1,72 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The title of the CreateModal is usually the product or service name.
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the CreateModal is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The description of the CreateModal serves to provide more information about the modal.
+     */
+    description: ReactNode;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: ReactNode;
+}
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
 content, and is persistent until dismissed. The purpose of this modal should be
 immediately apparent to the user, with a clear and obvious path to completion.
  */
-export let CreateModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateModal: React.ForwardRefExoticComponent<CreateModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/es/components/CreateModal/CreateModal.js

@@ -28,7 +28,6 @@ var isValidChildren = function isValidChildren() {
     return;
   };
 };
-
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
@@ -93,6 +92,7 @@ CreateModal.propTypes = {
   /**
    * Children refers to all form items within a form inside of the modal's body.
    */
+  /**@ts-ignore*/
   children: isValidChildren(),
   /**
    * Specify an optional className to be applied to the modal root node

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -87,7 +87,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps(), {
-      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -1,5 +1,5 @@
 export default Columns;
-declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel }: {
     getVisibleColumnsCount: any;
     filterString: any;
     columns: any;
@@ -8,12 +8,14 @@ declare function Columns({ getVisibleColumnsCount, filterString, columns, setCol
     assistiveTextInstructionsLabel: any;
     assistiveTextDisabledInstructionsLabel: any;
     selectAllLabel: any;
+    customizeTearsheetHeadingLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Columns {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
         let assistiveTextInstructionsLabel: PropTypes.Requireable<string>;
         let columns: PropTypes.Validator<any[]>;
+        let customizeTearsheetHeadingLabel: PropTypes.Requireable<string>;
         let disabledInstructionsLabel: PropTypes.Requireable<string>;
         let filterString: PropTypes.Validator<string>;
         let getVisibleColumnsCount: PropTypes.Validator<(...args: any[]) => any>;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -24,7 +24,8 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel;
+    selectAllLabel = _ref.selectAllLabel,
+    customizeTearsheetHeadingLabel = _ref.customizeTearsheetHeadingLabel;
   var listId = useRef(uuidv4()); // keep id between renders
   var listRef = useRef(null);
   var _React$useState = React__default.useState(''),
@@ -47,6 +48,7 @@ var Columns = function Columns(_ref) {
   }, /*#__PURE__*/React__default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
+    "aria-label": customizeTearsheetHeadingLabel,
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -81,6 +83,7 @@ Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,
   columns: PropTypes.array.isRequired,
+  customizeTearsheetHeadingLabel: PropTypes.string,
   disabledInstructionsLabel: PropTypes.string,
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -8,7 +8,6 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { isColumnVisible } from './common.js';
 import Columns from './Columns.js';
 import Actions from './Actions.js';
 import { pkg } from '../../../../../settings.js';
@@ -51,19 +50,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = useState(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = isColumnVisible(defA);
-      var isVisibleB = isColumnVisible(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = useState(columnDefinitions),
     _useState8 = _slicedToArray(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];
@@ -149,7 +136,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    customizeTearsheetHeadingLabel: customizeTearsheetHeadingLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -7,13 +7,6 @@
 
 import isBoolean from 'lodash/isBoolean';
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
 var isColumnVisible = function isColumnVisible(colDef) {
   return isBoolean(colDef.isVisible) ? colDef.isVisible : true;
 };

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -86,12 +86,19 @@ var stateReducer = function stateReducer(newState, action) {
           getRowId = _ref3.getRowId,
           indeterminate = _ref3.indeterminate,
           isChecked = _ref3.isChecked;
+        var newSelectedRowIds = {};
         if (rows) {
           var newSelectedRowData = {};
           rows.forEach(function (row) {
+            var props = row.getRowProps();
+            if (props && props.disabled) {
+              return;
+            }
+            newSelectedRowIds[getRowId(row.original, row.index)] = true;
             newSelectedRowData[getRowId(row.original, row.index)] = row.original;
           });
           return _objectSpread2(_objectSpread2({}, newState), {}, {
+            selectedRowIds: newSelectedRowIds,
             selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
           });
         }

package/es/components/EditInPlace/EditInPlace.js

@@ -142,10 +142,7 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: cx(blockClass, "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "".concat(blockClass, "__text-input-label"),
-    htmlFor: id
-  }, labelText), /*#__PURE__*/React__default.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     id: id,
     className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--").concat(size)),
     type: "text",
@@ -154,7 +151,9 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: inputRef
     // readOnly={readOnly}
     ,
-    onKeyDown: onKeyHandler
+    onKeyDown: onKeyHandler,
+    "aria-label": labelText,
+    "aria-invalid": invalid
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__ellipsis"),
     "aria-hidden": !focused

package/es/components/Nav/Nav.d.ts

@@ -0,0 +1,3 @@
+export let Nav: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default Nav;
+import React from 'react';

package/es/components/Nav/Nav.js

@@ -0,0 +1,154 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import NavList, { blockClass as blockClass$2 } from './NavList.js';
+import NavItem, { blockClass as blockClass$1 } from './NavItem.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+
+var _excluded = ["activeHref", "className", "children", "heading", "label"];
+var componentName = 'Nav';
+var blockClass = "".concat(pkg.prefix, "--nav");
+var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var activeHref = _ref.activeHref,
+    className = _ref.className,
+    children = _ref.children,
+    heading = _ref.heading,
+    label = _ref.label,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(activeHref),
+    _useState2 = _slicedToArray(_useState, 2),
+    _activeHref = _useState2[0],
+    setActiveHref = _useState2[1];
+  var navigationLists = useRef({});
+  useEffect(function () {
+    if (!_activeHref && window.location) {
+      var _window$location = window.location,
+        hash = _window$location.hash,
+        pathname = _window$location.pathname;
+      setActiveHref(pathname + hash);
+    }
+  }, [_activeHref]);
+
+  /**
+   * Creates a new child list item.
+   * @param {NavItem} child The child list item to create.
+   * @param {number} index The index of the child list item.
+   * @returns {NavItem} The new child list item.
+   */
+  var buildNewItemChild = function buildNewItemChild(child, index) {
+    var key = "".concat(blockClass$1, "--").concat(index);
+    return /*#__PURE__*/React__default.createElement(NavItem, _extends({}, child.props, {
+      activeHref: _activeHref,
+      key: key,
+      onClick: function onClick(event, href) {
+        return handleItemClick(event, href, child.props.onClick);
+      }
+    }));
+  };
+
+  /**
+   * Creates a new child list.
+   * @param {NavList} child The child list to create.
+   * @param {number} index The index of the child list.
+   * @returns {NavList} The new child list.
+   */
+  var buildNewListChild = function buildNewListChild(child, index) {
+    var key = "".concat(blockClass$2, "--").concat(index);
+    return /*#__PURE__*/React__default.createElement(NavList, _extends({}, child.props, {
+      activeHref: _activeHref,
+      id: key,
+      key: key,
+      onListClick: handleListClick,
+      onItemClick: handleItemClick,
+      ref: function ref(el) {
+        return navigationLists.current[key] = el;
+      }
+    }));
+  };
+
+  /**
+   * Handles toggling the list item.
+   * @param {SyntheticEvent} event The event fired when the list item is toggled.
+   * @param {string} href The URL of the list item.
+   */
+  var handleItemClick = function handleItemClick(event, href, onClick) {
+    event.stopPropagation();
+    var type = event.type,
+      which = event.which;
+
+    // Enter (13) and spacebar (32).
+    var acceptableEvent = which === 13 || which === 32 || type === 'click';
+    var diffHref = href !== _activeHref;
+    if (acceptableEvent && diffHref) {
+      setActiveHref(href);
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  /**
+   * Handles when a list has been selected.
+   * @param {number} id The index of the list.
+   */
+  var handleListClick = function handleListClick(id) {
+    Object.keys(navigationLists.current).forEach(function (key) {
+      if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
+        navigationLists.current[key].close();
+      }
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("nav", _extends({
+    className: cx(blockClass, className),
+    "aria-label": label,
+    ref: ref
+  }, getDevtoolsProps(componentName), rest), heading && /*#__PURE__*/React__default.createElement("h1", {
+    className: "".concat(blockClass, "__heading")
+  }, heading), /*#__PURE__*/React__default.createElement("ul", {
+    className: "".concat(blockClass, "__wrapper"),
+    role: "menubar"
+  }, React__default.Children.map(children, function (child, index) {
+    var _child$type;
+    return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
+  })));
+});
+Nav.propTypes = {
+  /**
+   * Hypertext reference for active page.
+   */
+  activeHref: PropTypes.string,
+  /**
+   * Child elements.
+   */
+  children: PropTypes.node,
+  /**
+   * Extra classes to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Heading.
+   */
+  heading: PropTypes.string,
+  /**
+   * Aria-label on the rendered `nav` element.
+   */
+  label: PropTypes.string.isRequired
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+Nav = pkg.checkComponentEnabled(Nav, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+Nav.displayName = componentName;
+
+export { Nav };

package/es/components/Nav/NavItem.d.ts

@@ -0,0 +1,35 @@
+export const blockClass: string;
+export function NavItem({ activeHref, children, className, current, disabled, element, href, id, label, onClick, tabIndex, ...rest }: {
+    [x: string]: any;
+    activeHref?: string | undefined;
+    children?: any;
+    className: any;
+    current: any;
+    disabled?: boolean | undefined;
+    element?: string | undefined;
+    href: any;
+    id: any;
+    label: any;
+    onClick?: (() => void) | undefined;
+    tabIndex?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace NavItem {
+    export { componentName as displayName };
+    export namespace propTypes {
+        let activeHref: PropTypes.Requireable<string>;
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let className: PropTypes.Requireable<string>;
+        let current: PropTypes.Requireable<string>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let element: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        let href: PropTypes.Requireable<string>;
+        let id: PropTypes.Requireable<string>;
+        let label: PropTypes.Requireable<string>;
+        let link: PropTypes.Requireable<boolean>;
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let tabIndex: PropTypes.Requireable<number>;
+    }
+}
+export default NavItem;
+declare const componentName: "NavItem";
+import PropTypes from 'prop-types';