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

package/lib/cjs/components/NavSideBar/NavSideBar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/lib/cjs/components/NavSideBar/NavSideBarHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavSideBarHeaderProps } from '../../types';
+declare const NavSideBarHeader: React.ForwardRefExoticComponent<NavSideBarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default NavSideBarHeader;

package/lib/cjs/components/NavSideBar/NavSideBarHeader.js

@@ -0,0 +1,33 @@
+"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", {
+  value: true
+});
+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 _hooks = require("../../hooks");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["linkProps", "logo"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NavSideBarHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var linkProps = props.linkProps,
+    logo = props.logo,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var NavSideBarHeaderRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    p: "md"
+  }, others, {
+    ref: NavSideBarHeaderRef
+  }), (0, _react2.jsx)(_index.Link, linkProps, logo));
+});
+var _default = NavSideBarHeader;
+exports["default"] = _default;

package/lib/cjs/components/NavSideBar/NavSideBarItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavSideBarItemProps } from '../../types';
+declare const NavSideBarItem: (props: NavSideBarItemProps) => React.JSX.Element;
+export default NavSideBarItem;

package/lib/cjs/components/NavSideBar/NavSideBarItem.js

@@ -0,0 +1,112 @@
+"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", {
+  value: true
+});
+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");
+var _NavBarContext = require("../../context/NavBarContext");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "icon", "className", "id", "onPress", "customIcon", "iconProps", "customIconProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NavSideBarItem = function NavSideBarItem(props) {
+  var children = props.children,
+    linkProps = props.linkProps;
+  if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
+    return (0, _react2.jsx)(_index.Link, linkProps, (0, _react2.jsx)(ChildWrapper, props, children));
+  }
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    sx: {
+      width: '100%',
+      display: 'block'
+    }
+  }, (0, _react2.jsx)(ChildWrapper, props, children));
+};
+var ChildWrapper = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var navItemRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  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, {
+      isPressed: isPressed,
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    id: key,
+    variant: state.navStyles.navBarItem,
+    isRow: true,
+    alignItems: "center",
+    className: classNames,
+    ref: navItemRef
+  }, mergedProps, {
+    sx: {
+      flexGrow: 0
+    },
+    role: "none"
+  }), icon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: icon,
+    title: {
+      name: children
+    },
+    size: state.navStyles.navBarItemHeaderIconSize,
+    variant: isSelected ? state.navStyles.navBarItemIconSelected : state.navStyles.navBarItemIcon
+  }, iconProps)), (0, _react2.jsx)(_index.Text, {
+    variant: state.navStyles.navBarItemText
+  }, children), customIcon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: customIcon,
+    size: state.navStyles.navBarItemHeaderIconSize,
+    variant: isSelected ? state.navStyles.navBarItemCustomIconSelected : state.navStyles.navBarItemCustomIcon
+  }, customIconProps, {
+    title: {
+      name: 'Action Icon'
+    }
+  })));
+});
+var _default = NavSideBarItem;
+exports["default"] = _default;

package/lib/cjs/components/NavSideBar/NavSideBarSection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavSideBarSectionProps } from '../../types';
+declare const NavSideBarSection: React.ForwardRefExoticComponent<NavSideBarSectionProps & React.RefAttributes<HTMLUListElement>>;
+export default NavSideBarSection;

package/lib/cjs/components/NavSideBar/NavSideBarSection.js

@@ -0,0 +1,122 @@
+"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", {
+  value: true
+});
+exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
+var _NavBarContext = require("../../context/NavBarContext");
+var _index = require("../../index");
+var _NavSideBarSectionHeader = _interopRequireDefault(require("./NavSideBarSectionHeader"));
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "title", "icon", "id", "onKeyDown", "headerProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NavSideBarSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    title = props.title,
+    icon = props.icon,
+    id = props.id,
+    onKeyDownProp = props.onKeyDown,
+    headerProps = props.headerProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var navBarState = (0, _NavBarContext.useNavBarContext)();
+  var isAutoСollapsible = navBarState.isAutoСollapsible,
+    expandedKeys = navBarState.expandedKeys,
+    setExpandedKeys = navBarState.setExpandedKeys;
+  var isExpanded = (0, _includes["default"])(expandedKeys).call(expandedKeys, id);
+  var firstChildKey = (0, _isArray["default"])(children) && children.length && children[0].key !== undefined ? children[0].key : null;
+  var lastChildKey = (0, _isArray["default"])(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] : (0, _concat["default"])(_context = []).call(_context, expandedKeys, [id]);
+    } else {
+      newArray = (0, _filter["default"])(expandedKeys).call(expandedKeys, function (thisKey) {
+        return thisKey !== id;
+      });
+    }
+    setExpandedKeys(newArray);
+  };
+  var focusManager = (0, _focus.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 = (0, _interactions.useKeyboard)({
+      onKeyDown: function onKeyDown(e) {
+        _onKeyDown(e, undefined);
+        e.continuePropagation();
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
+  var expendedBoxId = "expanded-container-".concat(id);
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavSideBarSectionHeader["default"], (0, _extends2["default"])({
+    items: children,
+    id: id,
+    "aria-controls": isExpanded ? expendedBoxId : undefined,
+    icon: icon
+  }, keyboardProps, {
+    onExpandedChange: onExpandedChange
+  }, headerProps), title), isExpanded && (0, _react2.jsx)(_index.Box, {
+    id: expendedBoxId,
+    role: "region"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    as: "ul",
+    ref: ref,
+    variant: navBarState.navStyles.navBarSectionList
+  }, others), (0, _map["default"])(_react.Children).call(_react.Children, children, function (child) {
+    return (0, _react2.jsx)(_index.Box, {
+      as: "li",
+      variant: navBarState.navStyles.navBarItemHeaderListItem
+    }, /*#__PURE__*/_react["default"].isValidElement(child) ? /*#__PURE__*/_react["default"].cloneElement(child, {
+      onKeyDown: _onKeyDown,
+      id: child.key
+    }) : child);
+  }))));
+});
+var _default = NavSideBarSection;
+exports["default"] = _default;

package/lib/cjs/components/NavSideBar/NavSideBarSectionHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavSideBarSectionHeaderProps } from '../../types';
+declare const NavSideBarSectionHeader: (props: NavSideBarSectionHeaderProps) => React.JSX.Element;
+export default NavSideBarSectionHeader;