@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var React = require('react');
 var index = require('../../_virtual/index.js');
@@ -18,35 +17,36 @@ var cx = require('classnames');
 var InterstitialScreen = require('./InterstitialScreen.js');
 var useId = require('../../global/js/utils/useId.js');
 
-var InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(function (props) {
+const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
   var _h, _h2;
-  var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    headerTitle = props.headerTitle,
-    headerSubTitle = props.headerSubTitle,
-    closeIconDescription = props.closeIconDescription,
-    hideProgressIndicator = props.hideProgressIndicator,
-    children = props.children;
-  var _React$useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
-    bodyChildrenData = _React$useContext.bodyChildrenData,
-    isFullScreen = _React$useContext.isFullScreen,
-    progStep = _React$useContext.progStep,
-    handleClose = _React$useContext.handleClose;
-  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
-  var headerBlockClass = "".concat(blockClass, "--internal-header");
-  var _useId = useId.useId();
-  var headerContent = function headerContent() {
+  const {
+    className = '',
+    headerTitle,
+    headerSubTitle,
+    closeIconDescription,
+    hideProgressIndicator,
+    children
+  } = props;
+  const {
+    bodyChildrenData,
+    isFullScreen,
+    progStep,
+    handleClose
+  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
+  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+  const headerBlockClass = `${blockClass}--internal-header`;
+  const _useId = useId.useId();
+  const headerContent = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--titleContainer")
+      className: `${blockClass}--titleContainer`
     }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h2", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h3", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--progress")
+      className: `${blockClass}--progress`
     }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
       vertical: false,
       currentIndex: progStep
-    }, bodyChildrenData === null || bodyChildrenData === void 0 ? void 0 : bodyChildrenData.map(function (child, idx) {
+    }, bodyChildrenData?.map((child, idx) => {
       if (/*#__PURE__*/React.isValidElement(child)) {
-        var _child$props;
-        var stepKey = "".concat(_useId, "_").concat(((_child$props = child.props) === null || _child$props === void 0 || (_child$props = _child$props.stepTitle) === null || _child$props === void 0 ? void 0 : _child$props.replace(/\s+/g, '')) || idx);
+        const stepKey = `${_useId}_${child.props?.stepTitle?.replace(/\s+/g, '') || idx}`;
         return /*#__PURE__*/React.createElement(react.ProgressStep, {
           key: stepKey,
           label: child.props.stepTitle || '',
@@ -56,9 +56,13 @@ var InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(function (props) {
     }))));
   };
   return isFullScreen ? /*#__PURE__*/React.createElement("header", {
-    className: cx(headerBlockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerBlockClass, "--has-title"), headerTitle || headerSubTitle || children))
+    className: cx(headerBlockClass, className, {
+      [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
+    })
   }, headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, {
-    className: cx(headerBlockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerBlockClass, "--has-title"), headerTitle || headerSubTitle || children)),
+    className: cx(headerBlockClass, className, {
+      [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
+    }),
     closeModal: handleClose,
     iconDescription: closeIconDescription
   }, headerContent());

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -14,16 +14,14 @@ var index = require('../../_virtual/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var componentName = 'MultiAddSelect';
+const componentName = 'MultiAddSelect';
 /**
  * Used to add or select multiple or more items from larger lists or hierarchies.
  */
-exports.MultiAddSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(AddSelect.AddSelect, _rollupPluginBabelHelpers.extends({}, props, {
-    multi: true,
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName)));
-});
+exports.MultiAddSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AddSelect.AddSelect, _rollupPluginBabelHelpers.extends({}, props, {
+  multi: true,
+  ref: ref
+}, devtools.getDevtoolsProps(componentName))));
 exports.MultiAddSelect = settings.pkg.checkComponentEnabled(exports.MultiAddSelect, componentName);
 exports.MultiAddSelect.propTypes = {
   /**

package/lib/components/Nav/Nav.js

@@ -16,30 +16,29 @@ var NavItem = require('./NavItem.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["activeHref", "className", "children", "heading", "label"];
-var componentName = 'Nav';
-var blockClass = "".concat(settings.pkg.prefix, "--nav");
+const componentName = 'Nav';
+const blockClass = `${settings.pkg.prefix}--nav`;
 
 /**
  * @deprecated This component is deprecated
  */
-exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var activeHref = _ref.activeHref,
-    className = _ref.className,
-    children = _ref.children,
-    heading = _ref.heading,
-    label = _ref.label,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(activeHref),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    _activeHref = _useState2[0],
-    setActiveHref = _useState2[1];
-  var navigationLists = React.useRef({});
-  React.useEffect(function () {
+exports.Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeHref,
+    className,
+    children,
+    heading,
+    label,
+    ...rest
+  } = _ref;
+  const [_activeHref, setActiveHref] = React.useState(activeHref);
+  const navigationLists = React.useRef({});
+  React.useEffect(() => {
     if (!_activeHref && window.location) {
-      var _window$location = window.location,
-        hash = _window$location.hash,
-        pathname = _window$location.pathname;
+      const {
+        hash,
+        pathname
+      } = window.location;
       setActiveHref(pathname + hash);
     }
   }, [_activeHref]);
@@ -50,14 +49,12 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * @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(NavItem.blockClass, "--").concat(index);
+  const buildNewItemChild = (child, index) => {
+    const key = `${NavItem.blockClass}--${index}`;
     return /*#__PURE__*/React.createElement(NavItem.NavItem, _rollupPluginBabelHelpers.extends({}, child.props, {
       activeHref: _activeHref,
       key: key,
-      onClick: function onClick(event, href) {
-        return handleItemClick(event, href, child.props.onClick);
-      }
+      onClick: (event, href) => handleItemClick(event, href, child.props.onClick)
     }));
   };
 
@@ -67,17 +64,15 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * @param {number} index The index of the child list.
    * @returns {NavList} The new child list.
    */
-  var buildNewListChild = function buildNewListChild(child, index) {
-    var key = "".concat(NavList.blockClass, "--").concat(index);
+  const buildNewListChild = (child, index) => {
+    const key = `${NavList.blockClass}--${index}`;
     return /*#__PURE__*/React.createElement(NavList.NavList, _rollupPluginBabelHelpers.extends({}, child.props, {
       activeHref: _activeHref,
       id: key,
       key: key,
       onListClick: handleListClick,
       onItemClick: handleItemClick,
-      ref: function ref(el) {
-        return navigationLists.current[key] = el;
-      }
+      ref: el => navigationLists.current[key] = el
     }));
   };
 
@@ -86,14 +81,16 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * @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) {
+  const handleItemClick = (event, href, onClick) => {
     event.stopPropagation();
-    var type = event.type,
-      which = event.which;
+    const {
+      type,
+      which
+    } = event;
 
     // Enter (13) and spacebar (32).
-    var acceptableEvent = which === 13 || which === 32 || type === 'click';
-    var diffHref = href !== _activeHref;
+    const acceptableEvent = which === 13 || which === 32 || type === 'click';
+    const diffHref = href !== _activeHref;
     if (acceptableEvent && diffHref) {
       setActiveHref(href);
     }
@@ -106,8 +103,8 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * 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) {
+  const handleListClick = id => {
+    Object.keys(navigationLists.current).forEach(key => {
       if (key !== id && !navigationLists.current[key].isExpandedOnPageLoad) {
         navigationLists.current[key].close();
       }
@@ -118,18 +115,17 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": label,
     ref: ref
   }, devtools.getDevtoolsProps(componentName), rest), heading && /*#__PURE__*/React.createElement("h1", {
-    className: "".concat(blockClass, "__heading")
+    className: `${blockClass}__heading`
   }, heading), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(blockClass, "__wrapper"),
+    className: `${blockClass}__wrapper`,
     role: "menubar"
-  }, React.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.NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
+  }, React.Children.map(children, (child, index) => {
+    return child?.type?.displayName === NavList.NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
 exports.Nav.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 exports.Nav.propTypes = {
   /**

package/lib/components/Nav/NavItem.js

@@ -18,85 +18,78 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var NavItemLink = require('./NavItemLink.js');
 var bucket10 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-10.js');
 
-var _excluded = ["activeHref", "children", "className", "current", "disabled", "element", "href", "id", "label", "onClick", "tabIndex"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--nav-item");
-var componentName = 'NavItem';
+const blockClass = `${settings.pkg.prefix}--nav-item`;
+const componentName = 'NavItem';
 
 // Default values for props
-var defaults = {
+const defaults = {
   activeHref: '#',
   disabled: false,
   element: 'a',
-  onClick: function onClick() {},
+  onClick: () => {},
   tabIndex: 0
 };
 
 /**
  * Navigation item component.
  */
-exports.default = function NavItem(_ref) {
-  var _ref$activeHref = _ref.activeHref,
-    activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? defaults.children : _ref$children,
-    className = _ref.className,
-    current = _ref.current,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? defaults.disabled : _ref$disabled,
-    _ref$element = _ref.element,
-    element = _ref$element === void 0 ? defaults.element : _ref$element,
-    href = _ref.href,
-    id = _ref.id,
-    label = _ref.label,
-    _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    hrefHasDifferentHost = _useState2[0],
-    setHrefHasDifferentHost = _useState2[1];
-  React.useEffect(function () {
-    if ((href === null || href === void 0 ? void 0 : href.indexOf(window.location.host)) === -1) {
+exports.default = _ref => {
+  let {
+    activeHref = defaults.activeHref,
+    children = defaults.children,
+    className,
+    current,
+    disabled = defaults.disabled,
+    element = defaults.element,
+    href,
+    id,
+    label,
+    onClick = defaults.onClick,
+    tabIndex = defaults.tabIndex,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [hrefHasDifferentHost, setHrefHasDifferentHost] = React.useState(false);
+  React.useEffect(() => {
+    if (href?.indexOf(window.location.host) === -1) {
       setHrefHasDifferentHost(true);
     }
   }, [href]);
-  var internalId = React.useRef(uuidv4.default());
-  var instanceId = "".concat(blockClass, "__").concat(internalId.current);
-  var navItemId = id || instanceId;
-  var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
-  var externalLink = isAbsoluteLink.test(href) && hrefHasDifferentHost;
-  var linkClassName = "".concat(blockClass, "__link");
-  var handleDisabled = function handleDisabled(action) {
-    var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const internalId = React.useRef(uuidv4.default());
+  const instanceId = `${blockClass}__${internalId.current}`;
+  const navItemId = id || instanceId;
+  const isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
+  const externalLink = isAbsoluteLink.test(href) && hrefHasDifferentHost;
+  const linkClassName = `${blockClass}__link`;
+  const handleDisabled = function (action) {
+    let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return !disabled ? action : defaultValue;
   };
-  var navItemTabIndex = handleDisabled(tabIndex, -1);
-  var externalLinkProps = externalLink && {
+  const navItemTabIndex = handleDisabled(tabIndex, -1);
+  const externalLinkProps = externalLink && {
     rel: 'noopener noreferrer',
     target: '_blank'
   };
   return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--active"), current !== null && current === navItemId || activeHref !== undefined && activeHref === href && !externalLink), "".concat(blockClass, "--disabled"), disabled)),
+    className: cx(blockClass, className, {
+      [`${blockClass}--active`]: current !== null && current === navItemId || activeHref !== undefined && activeHref === href && !externalLink,
+      [`${blockClass}--disabled`]: disabled
+    }),
     label: label,
-    onClick: function onClick(event) {
-      return handleDisabled(_onClick(event, href));
-    },
-    onKeyDown: function onKeyDown(event) {
-      return handleDisabled(_onClick(event, href));
-    },
+    onClick: event => handleDisabled(onClick(event, href)),
+    onKeyDown: event => handleDisabled(onClick(event, href)),
     role: "menuitem"
   }), /*#__PURE__*/React.createElement(NavItemLink.default, _rollupPluginBabelHelpers.extends({
     id: navItemId,
-    className: cx(linkClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__link--external"), externalLink)),
+    className: cx(linkClassName, {
+      [`${blockClass}__link--external`]: externalLink
+    }),
     element: element,
     href: href,
     tabIndex: navItemTabIndex
   }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React.createElement(bucket10.Launch, {
-    className: "".concat(blockClass, "__link--external__icon")
+    className: `${blockClass}__link--external__icon`
   })));
 };
 

package/lib/components/Nav/NavItemLink.js

@@ -9,17 +9,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../_virtual/index.js');
 var React = require('react');
 
-var _excluded = ["element"];
-var NavItemLink = /*#__PURE__*/React.forwardRef(function NavItemLink(props, ref) {
-  var element = props.element,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(element, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    ref: ref
-  }));
+const NavItemLink = /*#__PURE__*/React.forwardRef(function NavItemLink(props, ref) {
+  const {
+    element,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(element, {
+    ...rest,
+    ref
+  });
 });
 NavItemLink.displayName = 'NavItemLink';
 NavItemLink.propTypes = {

package/lib/components/Nav/NavList.js

@@ -17,56 +17,48 @@ var NavItem = require('./NavItem.js');
 var settings = require('../../settings.js');
 var bucket3 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
-var componentName = 'NavList';
-var blockClass = "".concat(settings.pkg.prefix, "--nav-list");
+const componentName = 'NavList';
+const blockClass = `${settings.pkg.prefix}--nav-list`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   activeHref: '#',
   className: '',
   children: null,
   id: '',
   isExpandedOnPageLoad: false,
-  onItemClick: function onItemClick() {},
-  onListClick: function onListClick() {},
+  onItemClick: () => {},
+  onListClick: () => {},
   tabIndex: 0,
   title: '',
   icon: '',
   navigationItemTitle: ''
 };
-exports.default = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$activeHref = _ref.activeHref,
-    activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? defaults.children : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? defaults.className : _ref$className,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? defaults.id : _ref$id,
-    _ref$isExpandedOnPage = _ref.isExpandedOnPageLoad,
-    isExpandedOnPageLoad = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageLoad : _ref$isExpandedOnPage,
-    _ref$navigationItemTi = _ref.navigationItemTitle,
-    navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
-    _ref$onItemClick = _ref.onItemClick,
-    onItemClick = _ref$onItemClick === void 0 ? defaults.onItemClick : _ref$onItemClick,
-    _ref$onListClick = _ref.onListClick,
-    onListClick = _ref$onListClick === void 0 ? defaults.onListClick : _ref$onListClick,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? defaults.title : _ref$title;
-  var _useState = React.useState(isExpandedOnPageLoad),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  React.useEffect(function () {
-    var hrefs = React.Children.toArray(children).filter(function (_ref2) {
-      var childProps = _ref2.props;
+exports.default = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeHref = defaults.activeHref,
+    children = defaults.children,
+    className = defaults.className,
+    icon = defaults.icon,
+    id = defaults.id,
+    isExpandedOnPageLoad = defaults.isExpandedOnPageLoad,
+    navigationItemTitle = defaults.navigationItemTitle,
+    onItemClick = defaults.onItemClick,
+    onListClick = defaults.onListClick,
+    tabIndex = defaults.tabIndex,
+    title = defaults.title
+  } = _ref;
+  const [open, setOpen] = React.useState(isExpandedOnPageLoad);
+  React.useEffect(() => {
+    const hrefs = React.Children.toArray(children).filter(_ref2 => {
+      let {
+        props: childProps
+      } = _ref2;
       return childProps.href && childProps.href.length > 0;
-    }).map(function (_ref3) {
-      var childProps = _ref3.props;
+    }).map(_ref3 => {
+      let {
+        props: childProps
+      } = _ref3;
       return childProps.href;
     });
     setOpen(hrefs.includes(activeHref) || isExpandedOnPageLoad);
@@ -76,7 +68,7 @@ exports.default = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   /**
    * Closes the list.
    */
-  var close = function close() {
+  const close = () => {
     if (open) {
       setOpen(false);
     }
@@ -86,9 +78,11 @@ exports.default = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * Handles toggling the list.
    * @param {SyntheticEvent} event The event fired when the list is toggled.
    */
-  var toggle = function toggle(event) {
-    var which = event.which,
-      type = event.type;
+  const toggle = event => {
+    const {
+      which,
+      type
+    } = event;
 
     // Enter (13) and spacebar (32).
     if (which === 13 || which === 32 || type === 'click') {
@@ -100,45 +94,42 @@ exports.default = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   // Expose external function calls to the parent component
-  React.useImperativeHandle(ref, function () {
-    return {
-      close: close,
-      isExpandedOnPageLoad: isExpandedOnPageLoad
-    };
-  });
-  var newChildren = React.Children.map(children, function (child, index) {
-    return /*#__PURE__*/React.createElement(NavItem.NavItem, _rollupPluginBabelHelpers.extends({}, child.props, {
-      key: "".concat(NavItem.blockClass, "--").concat(index),
-      onClick: function onClick(event, href) {
-        var _child$props$onClick, _child$props;
-        onItemClick(event, href);
-        (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 || _child$props$onClick.call(_child$props, event);
-      },
-      activeHref: activeHref,
-      tabIndex: open ? 0 : -1
-    }));
-  });
+  React.useImperativeHandle(ref, () => ({
+    close,
+    isExpandedOnPageLoad
+  }));
+  const newChildren = React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(NavItem.NavItem, _rollupPluginBabelHelpers.extends({}, child.props, {
+    key: `${NavItem.blockClass}--${index}`,
+    onClick: (event, href) => {
+      onItemClick(event, href);
+      child.props.onClick?.(event);
+    },
+    activeHref: activeHref,
+    tabIndex: open ? 0 : -1
+  })));
   return /*#__PURE__*/React.createElement("li", {
     ref: ref,
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(NavItem.blockClass, "--expanded"), open)),
+    className: cx(blockClass, className, {
+      [`${NavItem.blockClass}--expanded`]: open
+    }),
     tabIndex: tabIndex,
     onClick: toggle,
     onKeyDown: toggle,
     role: "menuitem"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(NavItem.blockClass, "__link")
+    className: `${NavItem.blockClass}__link`
   }, icon && /*#__PURE__*/React.createElement("img", {
     alt: navigationItemTitle,
-    className: "".concat(NavItem.blockClass, "__img"),
+    className: `${NavItem.blockClass}__img`,
     src: icon
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(NavItem.blockClass, "__content")
+    className: `${NavItem.blockClass}__content`
   }, title), /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
-    className: "".concat(blockClass, "__icon")
+    className: `${blockClass}__icon`
   })), /*#__PURE__*/React.createElement("ul", {
     "aria-label": title,
     "aria-hidden": !open,
-    className: "".concat(blockClass, " ").concat(blockClass, "--nested"),
+    className: `${blockClass} ${blockClass}--nested`,
     role: "menu"
   }, newChildren));
 });