@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -1,16 +1,11 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
@@ -18,57 +13,63 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["icon", "text", "className", "id", "onPress", "iconProps"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var icon = props.icon,
-    text = props.text,
-    className = props.className,
-    key = props.id,
-    onPressCallback = props.onPress,
-    iconProps = props.iconProps,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var navItemRef = (0, _hooks.useLocalOrForwardRef)(null);
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const NavBarItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    icon,
+    text,
+    className,
+    id: key,
+    onPress: onPressCallback,
+    iconProps,
+    ...others
+  } = props;
+  const navItemRef = (0, _hooks.useLocalOrForwardRef)(null);
 
   /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return navItemRef.current;
+  (0, _react.useImperativeHandle)(ref, () => navItemRef.current);
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _interactions.useHover)({});
+  const {
+    focusProps: focusWithinProps
+  } = (0, _reactAria.useFocusRing)({
+    within: true
+  });
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, _reactAria.useFocusRing)();
+  const state = (0, _NavBarContext.useNavBarContext)();
+  const isSelected = state.selectedKey === key;
+  const {
+    onNavPress
+  } = (0, _hooks.useNavBarPress)({
+    key,
+    onPressCallback
+  }, state);
+  const {
+    pressProps,
+    isPressed
+  } = (0, _interactions.usePress)({
+    ref: navItemRef,
+    onPress: onNavPress
+  });
+  const mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
+  const {
+    classNames
+  } = (0, _hooks.useStatusClasses)(className, {
+    isSelected,
+    isHovered,
+    isFocused: isFocusVisible,
+    isPressed
   });
-  var _useHover = (0, _interactions.useHover)({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
-      within: true
-    }),
-    focusWithinProps = _useFocusRing.focusProps;
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
-    focusProps = _useFocusRing2.focusProps,
-    isFocusVisible = _useFocusRing2.isFocusVisible;
-  var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = state.selectedKey === key;
-  var _useNavBarPress = (0, _hooks.useNavBarPress)({
-      key: key,
-      onPressCallback: onPressCallback
-    }, state),
-    onNavPress = _useNavBarPress.onNavPress;
-  var _usePress = (0, _interactions.usePress)({
-      ref: navItemRef,
-      onPress: onNavPress
-    }),
-    pressProps = _usePress.pressProps,
-    isPressed = _usePress.isPressed;
-  var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isSelected: isSelected,
-      isHovered: isHovered,
-      isFocused: isFocusVisible,
-      isPressed: isPressed
-    }),
-    classNames = _useStatusClasses.classNames;
-  var color = isSelected ? 'white' : 'neutral.95';
-  var _useGetTheme = (0, _hooks.useGetTheme)(),
-    navBarIconSize = _useGetTheme.navBarIconSize;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  const color = isSelected ? 'white' : 'neutral.95';
+  const {
+    navBarIconSize
+  } = (0, _hooks.useGetTheme)();
+  return (0, _react2.jsx)(_index.Box, (0, _extends2.default)({
     id: key,
     variant: state.navStyles.navBarItem,
     isRow: true,
@@ -84,7 +85,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: {
       alignItems: 'center'
     }
-  }, icon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+  }, icon && (0, _react2.jsx)(_index.Icon, (0, _extends2.default)({
     icon: icon,
     title: {
       name: text
@@ -92,11 +93,11 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
-      color: color,
+      color,
       fill: color
     }
   }, iconProps)), (0, _react2.jsx)(_index.Text, {
     variant: state.navStyles.navBarItemText
   }, text)));
 });
-var _default = exports["default"] = NavBarItem;
+var _default = exports.default = NavBarItem;

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -1,68 +1,54 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
-var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
+var _useGetTheme = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _context;
-  var item = _ref.item,
-    onKeyDown = _ref.onKeyDown,
-    className = _ref.className,
-    isExpanded = _ref.isExpanded,
-    isTransitioning = _ref.isTransitioning;
-  var state = (0, _NavBarContext.useNavBarContext)();
-  var _useGetTheme = (0, _useGetTheme2["default"])(),
-    styles = _useGetTheme.styles;
-  var renderSubTitle = function renderSubTitle(child) {
-    var _child$hasSeparator = child.hasSeparator,
-      hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
-      subTitle = child.subTitle;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(({
+  item,
+  onKeyDown,
+  className,
+  isExpanded,
+  isTransitioning
+}, ref) => {
+  const state = (0, _NavBarContext.useNavBarContext)();
+  const {
+    styles
+  } = (0, _useGetTheme.default)();
+  const renderSubTitle = child => {
+    const {
+      hasSeparator = true,
+      subTitle
+    } = child;
     return (0, _react2.jsx)(_react.Fragment, {
-      key: "fragment".concat(subTitle)
+      key: `fragment${subTitle}`
     }, hasSeparator && (0, _react2.jsx)(_index.Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), (0, _react2.jsx)(_index.Text, {
-      key: "text".concat(subTitle),
+      key: `text${subTitle}`,
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
       variant: "variants.navBar.subtitle"
     }, subTitle));
   };
-  var renderChild = function renderChild(child) {
-    return child.subTitle ? renderSubTitle(child) : (0, _react2.jsx)(ChildItemWrapper, {
-      onKeyDown: onKeyDown,
-      key: "item".concat(child.key || child)
-    }, child);
-  };
-  var shouldShowTransition = isExpanded && isTransitioning;
-  var getEstimatedHeight = function getEstimatedHeight() {
-    if (item !== null && item !== void 0 && item.children && typeof (item === null || item === void 0 ? void 0 : item.children.length) === 'number') {
-      var height = (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+  const renderChild = child => child.subTitle ? renderSubTitle(child) : (0, _react2.jsx)(ChildItemWrapper, {
+    onKeyDown: onKeyDown,
+    key: `item${child.key || child}`
+  }, child);
+  const shouldShowTransition = isExpanded && isTransitioning;
+  const getEstimatedHeight = () => {
+    if (item?.children && typeof item?.children.length === 'number') {
+      const height = (item?.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
       /*
         returning Double the max height to address
         UIP-7608: Ensures the last NavBar item is visible when system scrollbars are always shown
@@ -71,37 +57,40 @@ var NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
     return null;
   };
-  var estimatedHeight = getEstimatedHeight();
+  const estimatedHeight = getEstimatedHeight();
   return (0, _react2.jsx)(_index.Box, {
     variant: state.navStyles.navBarItemBody,
     ref: ref,
     className: className,
-    sx: _objectSpread({
-      maxHeight: '0px'
-    }, shouldShowTransition && {
-      marginBottom: 'md',
-      maxHeight: "".concat(estimatedHeight, "px"),
-      transition: 'max-height 300ms ease, margin-bottom 300ms ease'
-    })
-  }, (item === null || item === void 0 ? void 0 : item.children) && (0, _map["default"])(_context = item.children).call(_context, renderChild));
+    sx: {
+      maxHeight: '0px',
+      ...(shouldShowTransition && {
+        marginBottom: 'md',
+        maxHeight: `${estimatedHeight}px`,
+        transition: 'max-height 300ms ease, margin-bottom 300ms ease'
+      })
+    }
+  }, item?.children && item.children.map(renderChild));
 });
-var ChildItemWrapper = function ChildItemWrapper(_ref2) {
-  var children = _ref2.children,
-    _onKeyDown = _ref2.onKeyDown;
-  var childrenKey = (children === null || children === void 0 ? void 0 : children.key) || children;
-  var _useKeyboard = (0, _interactions.useKeyboard)({
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown ? _onKeyDown(e, childrenKey) : undefined;
-      }
-    }),
-    keyboardProps = _useKeyboard.keyboardProps;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+const ChildItemWrapper = ({
+  children,
+  onKeyDown
+}) => {
+  const childrenKey = children?.key || children;
+  const {
+    keyboardProps
+  } = (0, _interactions.useKeyboard)({
+    onKeyDown: e => {
+      return onKeyDown ? onKeyDown(e, childrenKey) : undefined;
+    }
+  });
+  return (0, _react2.jsx)(_index.Box, (0, _extends2.default)({
     width: "100%"
   }, keyboardProps, {
     role: "none"
-  }), (0, _react2.jsx)(_react["default"].Fragment, null, ' ', children && children));
+  }), (0, _react2.jsx)(_react.default.Fragment, null, ' ', children && children));
 };
 ChildItemWrapper.propTypes = {
-  onKeyDown: _propTypes["default"].func
+  onKeyDown: _propTypes.default.func
 };
-var _default = exports["default"] = NavBarItemBody;
+var _default = exports.default = NavBarItemBody;

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -1,36 +1,37 @@
 "use strict";
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "onPress"];
-var NavBarItemButton = function NavBarItemButton(props) {
-  var className = props.className,
-    key = props.id,
-    onPressCallback = props.onPress,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = state.selectedKey === key;
-  var _useNavBarPress = (0, _hooks.useNavBarPress)({
-      key: key,
-      onPressCallback: onPressCallback
-    }, state),
-    onNavPress = _useNavBarPress.onNavPress;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isSelected: isSelected
-    }),
-    classNames = _useStatusClasses.classNames;
-  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+const NavBarItemButton = props => {
+  const {
+    className,
+    id: key,
+    onPress: onPressCallback,
+    ...others
+  } = props;
+  const state = (0, _NavBarContext.useNavBarContext)();
+  const isSelected = state.selectedKey === key;
+  const {
+    onNavPress
+  } = (0, _hooks.useNavBarPress)({
+    key,
+    onPressCallback
+  }, state);
+  const {
+    classNames
+  } = (0, _hooks.useStatusClasses)(className, {
+    isSelected
+  });
+  return (0, _react2.jsx)(_index.Button, (0, _extends2.default)({
     id: key,
     variant: state.navStyles.navBarItemButton,
     onPress: onNavPress,
@@ -38,4 +39,4 @@ var NavBarItemButton = function NavBarItemButton(props) {
     color: isSelected ? 'white' : undefined
   }, others));
 };
-var _default = exports["default"] = NavBarItemButton;
+var _default = exports.default = NavBarItemButton;

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -1,80 +1,84 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
-var _useGetTheme3 = _interopRequireDefault(require("../../hooks/useGetTheme"));
+var _useGetTheme = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var NavBarItemHeader = function NavBarItemHeader(_ref) {
-  var item = _ref.item;
-  var children = item.children,
-    href = item.href;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const NavBarItemHeader = ({
+  item
+}) => {
+  const {
+    children,
+    href
+  } = item;
   return !children && href ? (0, _react2.jsx)(NavBarPrimaryItemHeader, {
     item: item
   }) : (0, _react2.jsx)(NavBarSectionItemHeader, {
     item: item
   });
 };
-var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
-  var _context;
-  var item = _ref2.item;
-  var icon = item.icon,
-    key = item.key,
-    className = item.className,
-    heading = item.heading;
-  var navBarState = (0, _NavBarContext.useNavBarContext)();
-  var _useGetTheme = (0, _useGetTheme3["default"])(),
-    icons = _useGetTheme.icons,
-    navBarIconSize = _useGetTheme.navBarIconSize,
-    isOnyx = _useGetTheme.themeState.isOnyx;
-  var MenuDown = icons.MenuDown,
-    MenuUp = icons.MenuUp;
-  var selectedKey = navBarState.selectedKey,
-    setExpandedKeys = navBarState.setExpandedKeys,
-    expandedKeys = navBarState.expandedKeys,
-    navStyles = navBarState.navStyles;
-  var isExpanded = (0, _includes["default"])(expandedKeys).call(expandedKeys, key);
-  var array = (item === null || item === void 0 ? void 0 : item.children) && (0, _map["default"])(_context = item.children).call(_context, function (i) {
-    return i.key;
-  });
-  var isChildSelected = array && (0, _includes["default"])(array).call(array, navBarState.selectedKey);
-  var _useHover = (0, _interactions.useHover)({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  (0, _react.useEffect)(function () {
+const NavBarSectionItemHeader = ({
+  item
+}) => {
+  const {
+    icon,
+    key,
+    className,
+    heading
+  } = item;
+  const navBarState = (0, _NavBarContext.useNavBarContext)();
+  const {
+    icons,
+    navBarIconSize,
+    themeState: {
+      isOnyx
+    }
+  } = (0, _useGetTheme.default)();
+  const {
+    MenuDown,
+    MenuUp
+  } = icons;
+  const {
+    selectedKey,
+    setExpandedKeys,
+    expandedKeys,
+    navStyles
+  } = navBarState;
+  const isExpanded = expandedKeys.includes(key);
+  const array = item?.children && item.children.map(i => i.key);
+  const isChildSelected = array && array.includes(navBarState.selectedKey);
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _interactions.useHover)({});
+  (0, _react.useEffect)(() => {
     if (isChildSelected && isExpanded === false) {
-      var _context2;
-      setExpandedKeys((0, _concat["default"])(_context2 = []).call(_context2, expandedKeys, [key]));
+      setExpandedKeys([].concat(expandedKeys, [key]));
     }
   }, [selectedKey]);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isSelected: isChildSelected && !isExpanded,
-      isHovered: isHovered
-    }),
-    classNames = _useStatusClasses.classNames;
-  var getIconColor = function getIconColor() {
+  const {
+    classNames
+  } = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isChildSelected && !isExpanded,
+    isHovered
+  });
+  const getIconColor = () => {
     if (navStyles.navBarItemHeader === 'navBar.popUpItemHeaderContainer') {
       return isChildSelected && !isExpanded ? 'white' : 'text.primary';
     }
     return isChildSelected && !isExpanded ? 'white' : 'neutral.95';
   };
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, hoverProps, {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2.default)({}, hoverProps, {
     variant: navStyles.navBarItemHeader,
     className: classNames,
     isRow: true,
@@ -109,16 +113,24 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "aria-hidden": "true"
   })));
 };
-var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
-  var item = _ref3.item;
-  var icon = item.icon,
-    className = item.className,
-    heading = item.heading,
-    customIcon = item.customIcon;
-  var navBarState = (0, _NavBarContext.useNavBarContext)();
-  var navStyles = navBarState.navStyles;
-  var _useGetTheme2 = (0, _useGetTheme3["default"])(),
-    isOnyx = _useGetTheme2.themeState.isOnyx;
+const NavBarPrimaryItemHeader = ({
+  item
+}) => {
+  const {
+    icon,
+    className,
+    heading,
+    customIcon
+  } = item;
+  const navBarState = (0, _NavBarContext.useNavBarContext)();
+  const {
+    navStyles
+  } = navBarState;
+  const {
+    themeState: {
+      isOnyx
+    }
+  } = (0, _useGetTheme.default)();
   return (0, _react2.jsx)(_index.Box, {
     variant: navStyles.navBarItemHeader,
     className: className,
@@ -133,7 +145,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
       fill: 'neutral.95'
     },
     title: {
-      name: "".concat(heading, " Icon")
+      name: `${heading} Icon`
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -156,4 +168,4 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     }
   })));
 };
-var _default = exports["default"] = NavBarItemHeader;
+var _default = exports.default = NavBarItemHeader;