@pingux/astro 2.81.0-alpha.0 → 2.81.0-alpha.1

package/lib/components/NavSideBar/NavSideBar.test.js

@@ -0,0 +1,308 @@
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Box, NavSideBarHeader, NavSideBarItem, NavSideBarSection, NavSideBarSectionItem, Separator } from '../../index';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { Earth, EmoticonHappy, Fingerprint, GlobeIcon, Logo, OpenInNew, ViewDashboard, ViewGridPlusOutline } from './icons';
+import NavSideBar from './NavSideBar';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var onKeyDownProp = jest.fn();
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NavSideBar, props, ___EmotionJSX(NavSideBarHeader, {
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank'
+    },
+    logo: Logo
+  }), ___EmotionJSX(Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, ___EmotionJSX(NavSideBarItem, {
+    key: "Overview",
+    icon: GlobeIcon,
+    id: "Overview",
+    "data-testid": "navItem"
+  }, "Overview"), ___EmotionJSX(NavSideBarSection, {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: ViewDashboard
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    "data-testid": "navItemLink"
+  }, "Group"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Populations",
+    "data-testid": "navItemButton"
+  }, "Populations")), ___EmotionJSX(NavSideBarSection, {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: Fingerprint
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "PingOne Services"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Group"
+  }, "Group Test")), ___EmotionJSX(NavSideBarItem, {
+    key: "DaVinci",
+    id: "DaVinci",
+    "data-testid": "navBarItemLink",
+    icon: ViewGridPlusOutline,
+    customIcon: OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "DaVinci"), ___EmotionJSX(NavSideBarSection, {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: Earth
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    "data-testid": "Credentials",
+    icon: EmoticonHappy,
+    onKeyDown: onKeyDownProp
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Group"
+  }, "Group")))));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(NavSideBar, props, ___EmotionJSX(NavSideBarItem, {
+      key: "Overview",
+      icon: GlobeIcon,
+      id: "Overview"
+    }, "Overview"));
+  }
+});
+var clickHeaderButtons = function clickHeaderButtons() {
+  var headerButtons = screen.getAllByRole('button');
+  _forEachInstanceProperty(headerButtons).call(headerButtons, function (button) {
+    return userEvent.click(button);
+  });
+};
+test('should render basic nav with children', function () {
+  getComponent();
+  expect(screen.queryByRole('navigation')).toBeInTheDocument();
+});
+test('should render title for sections that have titles', function () {
+  getComponent();
+  expect(screen.getByText('Dashboard')).toBeInTheDocument();
+});
+test('should select NavItemLink', function () {
+  getComponent();
+  clickHeaderButtons();
+  var link = screen.getByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  userEvent.click(link);
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItemLink on space key press', function () {
+  getComponent();
+  clickHeaderButtons();
+  var link = screen.getByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItem', function () {
+  getComponent();
+  var item;
+  item = screen.queryByTestId('navItem');
+  expect(item).toBeInTheDocument();
+  userEvent.click(item);
+  item = screen.queryByTestId('navItem');
+  expect(item).toHaveClass('is-selected');
+});
+test('should select NavItemButton', function () {
+  getComponent();
+  clickHeaderButtons();
+  var button = screen.getByTestId('navItemButton');
+  expect(button).toBeInTheDocument();
+  userEvent.click(button);
+  expect(button).toHaveClass('is-selected');
+});
+test('should collapse NavItemBody', function () {
+  getComponent();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+  clickHeaderButtons();
+  expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
+  clickHeaderButtons();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+});
+test('should collapse NavItemBody on Escape key press', function () {
+  getComponent();
+  clickHeaderButtons();
+  expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
+  var headerButtons = screen.getAllByRole('button');
+  _forEachInstanceProperty(headerButtons).call(headerButtons, function (headerButton) {
+    return fireEvent.keyDown(headerButton, {
+      key: 'Escape',
+      keyCode: 27
+    });
+  });
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+});
+test('should change focus between NavBarItemHeader on arrow key press', function () {
+  getComponent();
+  var headerButtons = screen.getAllByRole('button');
+  expect(headerButtons[0]).toBeInTheDocument();
+  headerButtons[0].focus();
+  expect(headerButtons[0]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(headerButtons[1]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(headerButtons[2]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(headerButtons[1]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(headerButtons[0]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'Shift',
+    keyCode: 16
+  });
+  expect(headerButtons[0]).toHaveClass('is-focused');
+});
+test('should not change focus from NavItemBody to NavBarItemHeader on up/down arrow key press', function () {
+  getComponent();
+  var headerButtons = screen.getAllByRole('button');
+  expect(headerButtons[1]).toBeInTheDocument();
+  headerButtons[1].click();
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+  expect(document.activeElement).toHaveTextContent('Group');
+  fireEvent.keyDown(screen.getByTestId('navItemLink'), {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+  expect(document.activeElement).toHaveTextContent('Group');
+  fireEvent.keyDown(screen.getByTestId('navItemLink'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+  expect(document.activeElement).toHaveTextContent('Populations');
+  fireEvent.keyDown(screen.getByTestId('navItemButton'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+  expect(document.activeElement).toHaveTextContent('Populations');
+});
+test('should not change focus from NavItemBody to NavBarItemHeader on left/right arrow key press', function () {
+  getComponent();
+  var headerButtons = screen.getAllByRole('button');
+  expect(headerButtons[1]).toBeInTheDocument();
+  headerButtons[1].click();
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemLink'), {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemLink'), {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemButton'), {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+});
+test('passing in a string into defaultSelectedKeys makes the key selected by default, and the parent expanded by default ', function () {
+  getComponent({
+    defaultSelectedKey: 'Dashboard Link Populations'
+  });
+  var child = screen.getByTestId('navItemButton');
+  expect(child).toBeInTheDocument();
+  expect(child).toHaveClass('is-selected');
+});
+test('expand only one item', function () {
+  getComponent({
+    isAutoСollapsible: true
+  });
+  expect(screen.queryByText('Group')).not.toBeInTheDocument();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+  var headerButtons = screen.getAllByRole('button');
+  userEvent.click(headerButtons[1]);
+  expect(screen.queryByText('Group')).toBeInTheDocument();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+  userEvent.click(headerButtons[2]);
+  expect(screen.queryByText('Group')).not.toBeInTheDocument();
+  expect(screen.queryByText('Users')).toBeInTheDocument();
+});
+test('default expended keys', function () {
+  getComponent({
+    isAutoСollapsible: true,
+    defaultExpandedKeys: ['Dashboard']
+  });
+  expect(screen.getByTestId('navItemLink')).toBeInTheDocument();
+  expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
+});
+test('when a child is selected, and the parent is collapsed, the parent has the is-selected class', function () {
+  getComponent({
+    defaultSelectedKey: 'Dashboard Link Populations'
+  });
+  var child = screen.getByTestId('navItemButton');
+  expect(child).toBeInTheDocument();
+  expect(child).toHaveClass('is-selected');
+  var parent = screen.getByTestId('Dashboard');
+  expect(parent).not.toHaveClass('is-selected');
+  userEvent.click(parent);
+  var parentDiv = screen.getByTestId('Dashboard').firstElementChild;
+  expect(parentDiv).toHaveClass('is-selected');
+});
+test('calls onKeyDownProp when a key is pressed', function () {
+  getComponent();
+  var header = screen.getByText('Credentials');
+  fireEvent.keyDown(header, {
+    key: 'Enter'
+  });
+  expect(onKeyDownProp).toHaveBeenCalled();
+});

package/lib/components/NavSideBar/NavSideBarHeader.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["linkProps", "logo"];
+import React, { forwardRef } from 'react';
+import { useLocalOrForwardRef } from '../../hooks';
+import { Box, Link } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavSideBarHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var linkProps = props.linkProps,
+    logo = props.logo,
+    others = _objectWithoutProperties(props, _excluded);
+  var NavSideBarHeaderRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(Box, _extends({
+    p: "md"
+  }, others, {
+    ref: NavSideBarHeaderRef
+  }), ___EmotionJSX(Link, linkProps, logo));
+});
+export default NavSideBarHeader;

package/lib/components/NavSideBar/NavSideBarItem.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "icon", "className", "id", "onPress", "customIcon", "iconProps", "customIconProps"];
+import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { useLocalOrForwardRef, useNavBarPress, useStatusClasses } from '../../hooks';
+import { Box, Button, Icon, Link, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavSideBarItem = function NavSideBarItem(props) {
+  var children = props.children,
+    linkProps = props.linkProps;
+  if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
+    return ___EmotionJSX(Link, linkProps, ___EmotionJSX(ChildWrapper, props, children));
+  }
+  return ___EmotionJSX(Button, {
+    variant: "link",
+    sx: {
+      width: '100%',
+      display: 'block'
+    }
+  }, ___EmotionJSX(ChildWrapper, props, children));
+};
+var ChildWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    icon = props.icon,
+    className = props.className,
+    key = props.id,
+    onPressCallback = props.onPress,
+    customIcon = props.customIcon,
+    iconProps = props.iconProps,
+    customIconProps = props.customIconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var navItemRef = useLocalOrForwardRef(ref);
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps;
+  var _useFocusRing2 = useFocusRing(),
+    focusProps = _useFocusRing2.focusProps,
+    isFocusVisible = _useFocusRing2.isFocusVisible;
+  var state = useNavBarContext();
+  var isSelected = state.selectedKey === key;
+  var _useNavBarPress = useNavBarPress({
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
+  var _usePress = usePress({
+      ref: navItemRef,
+      onPress: onNavPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var mergedProps = mergeProps(pressProps, hoverProps, focusWithinProps, focusProps, others);
+  var _useStatusClasses = useStatusClasses(className, {
+      isPressed: isPressed,
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    id: key,
+    variant: state.navStyles.navBarItem,
+    isRow: true,
+    alignItems: "center",
+    className: classNames,
+    ref: navItemRef
+  }, mergedProps, {
+    sx: {
+      flexGrow: 0
+    },
+    role: "none"
+  }), icon && ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    title: {
+      name: children
+    },
+    size: state.navStyles.navBarItemHeaderIconSize,
+    variant: isSelected ? state.navStyles.navBarItemIconSelected : state.navStyles.navBarItemIcon
+  }, iconProps)), ___EmotionJSX(Text, {
+    variant: state.navStyles.navBarItemText
+  }, children), customIcon && ___EmotionJSX(Icon, _extends({
+    icon: customIcon,
+    size: state.navStyles.navBarItemHeaderIconSize,
+    variant: isSelected ? state.navStyles.navBarItemCustomIconSelected : state.navStyles.navBarItemCustomIcon
+  }, customIconProps, {
+    title: {
+      name: 'Action Icon'
+    }
+  })));
+});
+export default NavSideBarItem;

package/lib/components/NavSideBar/NavSideBarSection.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "title", "icon", "id", "onKeyDown", "headerProps"];
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Children, forwardRef } from 'react';
+import { useFocusManager } from '@react-aria/focus';
+import { useKeyboard } from '@react-aria/interactions';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { Box } from '../../index';
+import NavSideBarSectionHeader from './NavSideBarSectionHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavSideBarSection = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    title = props.title,
+    icon = props.icon,
+    id = props.id,
+    onKeyDownProp = props.onKeyDown,
+    headerProps = props.headerProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var navBarState = useNavBarContext();
+  var isAutoСollapsible = navBarState.isAutoСollapsible,
+    expandedKeys = navBarState.expandedKeys,
+    setExpandedKeys = navBarState.setExpandedKeys;
+  var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, id);
+  var firstChildKey = _Array$isArray(children) && children.length && children[0].key !== undefined ? children[0].key : null;
+  var lastChildKey = _Array$isArray(children) && children.length && children[children.length - 1].key !== undefined ? children[children.length - 1].key : null;
+  var onExpandedChange = function onExpandedChange(isOpen) {
+    var newArray;
+    if (isOpen) {
+      var _context;
+      newArray = isAutoСollapsible ? [id] : _concatInstanceProperty(_context = []).call(_context, expandedKeys, [id]);
+    } else {
+      newArray = _filterInstanceProperty(expandedKeys).call(expandedKeys, function (thisKey) {
+        return thisKey !== id;
+      });
+    }
+    setExpandedKeys(newArray);
+  };
+  var focusManager = useFocusManager();
+  var _onKeyDown = function onKeyDown(e, childKey) {
+    var _e$target;
+    switch (e.which) {
+      case 37:
+      case 38:
+        if (firstChildKey && childKey !== firstChildKey) {
+          focusManager.focusPrevious();
+        }
+        e.preventDefault();
+        break;
+      case 39:
+      case 40:
+        if (lastChildKey && childKey !== lastChildKey) {
+          focusManager.focusNext();
+        }
+        e.preventDefault();
+        break;
+      case 27:
+        onExpandedChange(false);
+        break;
+      case 32:
+        if (childKey && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.href) {
+          e.target.click();
+        }
+        break;
+      default:
+        break;
+    }
+    if (onKeyDownProp) {
+      onKeyDownProp(e);
+    }
+  };
+  var _useKeyboard = useKeyboard({
+      onKeyDown: function onKeyDown(e) {
+        _onKeyDown(e, undefined);
+        e.continuePropagation();
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
+  var expendedBoxId = "expanded-container-".concat(id);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NavSideBarSectionHeader, _extends({
+    items: children,
+    id: id,
+    "aria-controls": isExpanded ? expendedBoxId : undefined,
+    icon: icon
+  }, keyboardProps, {
+    onExpandedChange: onExpandedChange
+  }, headerProps), title), isExpanded && ___EmotionJSX(Box, {
+    id: expendedBoxId,
+    role: "region"
+  }, ___EmotionJSX(Box, _extends({
+    as: "ul",
+    ref: ref,
+    variant: navBarState.navStyles.navBarSectionList
+  }, others), _mapInstanceProperty(Children).call(Children, children, function (child) {
+    return ___EmotionJSX(Box, {
+      as: "li",
+      variant: navBarState.navStyles.navBarItemHeaderListItem
+    }, /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+      onKeyDown: _onKeyDown,
+      id: child.key
+    }) : child);
+  }))));
+});
+export default NavSideBarSection;

package/lib/components/NavSideBar/NavSideBarSectionHeader.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "icon", "items", "id", "className", "onExpandedChange"];
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useEffect } from 'react';
+import MenuDown from '@pingux/mdi-react/MenuDownIcon';
+import MenuUp from '@pingux/mdi-react/MenuUpIcon';
+import { useNavBarContext } from '../../context/NavBarContext';
+import { useStatusClasses } from '../../hooks';
+import { Box, Button, Icon, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
+  var _context;
+  var children = props.children,
+    icon = props.icon,
+    items = props.items,
+    id = props.id,
+    className = props.className,
+    onExpandedChange = props.onExpandedChange,
+    others = _objectWithoutProperties(props, _excluded);
+  var navBarState = useNavBarContext();
+  var expandedKeys = navBarState.expandedKeys,
+    setExpandedKeys = navBarState.setExpandedKeys,
+    navStyles = navBarState.navStyles,
+    selectedKey = navBarState.selectedKey;
+  var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, id);
+  var childSelected = _Array$isArray(items) && _includesInstanceProperty(_context = _mapInstanceProperty(items).call(items, function (i) {
+    return i.key;
+  })).call(_context, selectedKey);
+  useEffect(function () {
+    if (childSelected && isExpanded === false) {
+      var _context2;
+      setExpandedKeys(_concatInstanceProperty(_context2 = []).call(_context2, expandedKeys, [id]));
+    }
+  }, []);
+  var _useStatusClasses = useStatusClasses(className, {
+      isSelected: childSelected && !isExpanded
+    }),
+    classNames = _useStatusClasses.classNames;
+  var variant = childSelected && !isExpanded ? navStyles.navBarItemIcon : navStyles.navBarItemIconSelected;
+  var handleButtonPress = function handleButtonPress() {
+    onExpandedChange(!isExpanded);
+    if (childSelected && isExpanded === false) {
+      var _context3;
+      setExpandedKeys(_concatInstanceProperty(_context3 = []).call(_context3, expandedKeys, [id]));
+    }
+  };
+  return ___EmotionJSX(Button, _extends({
+    variant: navStyles.sectionItem,
+    onPress: handleButtonPress,
+    "data-testid": children,
+    "aria-expanded": isExpanded
+  }, others), ___EmotionJSX(Box, {
+    variant: navStyles.navBarItemHeader,
+    className: classNames,
+    isRow: true
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: navStyles.navBarItemHeaderIconSize,
+    variant: variant,
+    "aria-hidden": "true"
+  }), ___EmotionJSX(Text, {
+    variant: navStyles.navBarItemHeaderText
+  }, children), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: isExpanded ? MenuUp : MenuDown,
+    size: navStyles.navBarItemHeaderIconSize,
+    variant: variant,
+    mr: "0",
+    title: {
+      name: isExpanded ? 'Menu up' : 'Menu down'
+    },
+    "aria-label": isExpanded ? 'menu up' : 'menu down'
+  }))));
+};
+export default NavSideBarSectionHeader;