@pingux/astro 2.53.0 → 2.53.1-alpha.0

package/lib/cjs/components/NavBarSection/NavBarItemLink.d.ts

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

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

@@ -17,7 +17,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -54,13 +53,5 @@ var NavBarItemLink = function NavBarItemLink(props) {
     }, props.sx)
   }));
 };
-NavBarItemLink.propTypes = {
-  /**  Specifies the location of the URL */
-  href: _propTypes["default"].string,
-  /**  Handler that is called when the press is released over the target. */
-  onPress: _propTypes["default"].func,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string.isRequired
-};
 var _default = NavBarItemLink;
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavBarSectionProps } from '../../types/navBar';
+/**
+ * Composed component that creates a group
+ * with title, and separator options.
+ *
+ */
+declare const NavBarSection: React.ForwardRefExoticComponent<NavBarSectionProps<object> & React.RefAttributes<HTMLUListElement>>;
+export default NavBarSection;

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

@@ -9,6 +9,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 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 _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
@@ -18,7 +19,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _focus = require("@react-aria/focus");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _NavBarContext = require("../../context/NavBarContext");
 var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
@@ -39,9 +39,12 @@ var NavBarSection = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     items = _ref.items,
     onKeyDown = _ref.onKeyDown,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
-    return item.children || item.href;
-  });
+  var childrenItems;
+  if ((0, _isArray["default"])(items)) {
+    childrenItems = items === null || items === void 0 ? void 0 : (0, _filter["default"])(items).call(items, function (item) {
+      return item.children || item.href;
+    });
+  }
   var state = (0, _NavBarContext.useNavBarContext)();
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
@@ -55,7 +58,7 @@ var NavBarSection = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       padding: 0,
       listStyle: 'none'
     }
-  }, others), (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
+  }, others), childrenItems && (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
     return (0, _react2.jsx)(_.Box, {
       as: "li",
       key: item.key,
@@ -73,16 +76,17 @@ var NavBarSection = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 var SectionItem = function SectionItem(_ref2) {
   var item = _ref2.item,
     onKeyDownProp = _ref2.onKeyDown;
-  var key = item.key,
-    children = item.children,
-    others = (0, _objectWithoutProperties2["default"])(item, _excluded2);
+  var _ref3 = item,
+    key = _ref3.key,
+    children = _ref3.children,
+    others = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
   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, key);
-  var firstChildKey = children.length ? children[0].key : null;
-  var lastChildKey = children.length ? children[children.length - 1].key : null;
+  var firstChildKey = children && children.length ? children[0].key : null;
+  var lastChildKey = children && children.length ? children[children.length - 1].key : null;
   var onExpandedChange = function onExpandedChange(isOpen) {
     var newArray;
     if (isOpen) {
@@ -130,7 +134,7 @@ var SectionItem = function SectionItem(_ref2) {
   };
   var _useKeyboard = (0, _interactions.useKeyboard)({
       onKeyDown: function onKeyDown(e) {
-        _onKeyDown(e);
+        _onKeyDown(e, undefined);
         e.continuePropagation();
       }
     }),
@@ -147,12 +151,12 @@ var SectionItem = function SectionItem(_ref2) {
     onKeyDown: _onKeyDown
   }));
 };
-var PrimaryItem = function PrimaryItem(_ref3) {
-  var item = _ref3.item;
+var PrimaryItem = function PrimaryItem(_ref4) {
+  var item = _ref4.item;
   var state = (0, _NavBarContext.useNavBarContext)();
   return (0, _react2.jsx)(_.Link, {
     variant: state.navStyles.primaryItem,
-    href: item.href,
+    href: item && item.href,
     target: "_blank"
   }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
     item: item
@@ -161,41 +165,5 @@ var PrimaryItem = function PrimaryItem(_ref3) {
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
-NavBarSection.propTypes = {
-  /** If true, a separator will render at the end of the section */
-  hasSeparator: _propTypes["default"].bool,
-  /** callback that runs on key down */
-  onKeyDown: _propTypes["default"].func,
-  /** If present, this string will render at the top of the section */
-  title: _propTypes["default"].string,
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-};
-SectionItem.propTypes = {
-  onKeyDown: _propTypes["default"].func,
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
-    'aria-label': _propTypes["default"].string
-  }),
-  state: _propTypes["default"].shape({
-    collection: _propTypes["default"].shape({}),
-    selectedKey: _propTypes["default"].string,
-    setSelectedKey: _propTypes["default"].func,
-    selectionManager: _propTypes["default"].shape({
-      focusedKey: _propTypes["default"].string,
-      setFocusedKey: _propTypes["default"].func
-    })
-  }),
-  menuProps: _propTypes["default"].shape({})
-};
-PrimaryItem.propTypes = {
-  item: _propTypes["default"].shape({
-    href: _propTypes["default"].string
-  })
-};
 var _default = NavBarSection;
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/index.d.ts

@@ -0,0 +1,4 @@
+export { default as NavBarItem } from './NavBarItem';
+export { default as NavBarItemButton } from './NavBarItemButton';
+export { default as NavBarItemLink } from './NavBarItemLink';
+export { default } from './NavBarSection';

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.d.ts

@@ -8,7 +8,7 @@ interface UseNavBarPress {
      * @callback props.onPressCallback The callback that will be called only if provided
      */
     (params: {
-        key: string;
+        key: string | undefined;
         onPressCallback?: () => void;
     }, state: {
         setSelectedKey: (key: string) => void;

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.js

@@ -10,9 +10,11 @@ var useNavBarPress = function useNavBarPress(_ref, state) {
     onPressCallback = _ref.onPressCallback;
   var setSelectedKey = state.setSelectedKey;
   var onNavPress = function onNavPress() {
-    setSelectedKey(key);
-    if (onPressCallback) {
-      onPressCallback();
+    if (key) {
+      setSelectedKey(key);
+      if (onPressCallback) {
+        onPressCallback();
+      }
     }
   };
   return {

package/lib/cjs/types/index.d.ts

@@ -22,6 +22,7 @@ export * from './loader';
 export * from './menu';
 export * from './menuItem';
 export * from './Modal';
+export * from './navBar';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -271,8 +271,19 @@ _forEachInstanceProperty(_context24 = _Object$keys(_Modal)).call(_context24, fun
     }
   });
 });
+var _navBar = require("./navBar");
+_forEachInstanceProperty(_context25 = _Object$keys(_navBar)).call(_context25, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _navBar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _navBar[key];
+    }
+  });
+});
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context25 = _Object$keys(_overlayPanel)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_overlayPanel)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context26 = _Object$keys(_popoverContainer)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_popoverContainer)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context27 = _Object$keys(_popoverMenu)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_popoverMenu)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context28 = _Object$keys(_requirementsList)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_requirementsList)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context29 = _Object$keys(_rockerButtonGroup)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_rockerButtonGroup)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context30 = _Object$keys(_scrollBox)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_scrollBox)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_scrollBox)).call(_context30,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context31 = _Object$keys(_separator)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_separator)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_separator)).call(_context31,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context32 = _Object$keys(_shared)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_shared)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_shared)).call(_context32, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context33 = _Object$keys(_table)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_table)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_table)).call(_context33, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context34 = _Object$keys(_text)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_text)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_text)).call(_context34, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context35 = _Object$keys(_tooltipTrigger)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_tooltipTrigger)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/link.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
 import { TestingAttributes } from './shared/test';
 type AS = Extract<keyof JSX.IntrinsicElements, 'a' | 'span'> | undefined;
 export interface LinkProps extends TestingAttributes {
@@ -18,5 +19,8 @@ export interface LinkProps extends TestingAttributes {
     isSafariCompatible?: boolean;
     className?: string;
     children?: React.ReactNode;
+    sx?: ThemeUICSSObject;
+    id?: string;
+    color?: string;
 }
 export {};

package/lib/cjs/types/navBar.d.ts

@@ -0,0 +1,136 @@
+import React, { Key } from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
+import { IconTypeExtended } from './icon';
+import { DOMAttributes, StyleProps } from './shared';
+export interface NavBarProps extends StyleProps, DOMAttributes {
+    /** Allows only one item to be expanded. */
+    isAutoСollapsible?: boolean;
+    /** This applies a style to the entire nav tree. the options are default and popup. */
+    variant?: 'default' | 'popupNav';
+    /** Whether or not the focus will return to the previously focused element upon unmount. */
+    hasRestoreFocus?: boolean;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: string;
+    /** The initial expanded keys in the collection (uncontrolled). */
+    defaultExpandedKeys?: Iterable<Key>;
+    /** The selected key in the collection (controlled). */
+    selectedKey?: Iterable<Key>;
+    /**
+     * Callback function that fires when the selected key changes.
+     *
+     * `(selectedKey: String) => void`
+     */
+    setSelectedKey?: React.Dispatch<React.SetStateAction<string>>;
+    children?: React.ReactNode;
+}
+export interface NavBarItemProps extends StyleProps, DOMAttributes {
+    /**  Handler that is called when the press is released over the target. */
+    onPress?: () => void;
+    /** The icon to render in between each node. */
+    icon?: IconTypeExtended;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** Text that will render within the component */
+    text?: string;
+    className?: string;
+}
+export interface NavBarItemBodyProps {
+    item?: {
+        children?: string[] | object[];
+        key?: string;
+    };
+    onKeyDown?: (...args: unknown[]) => void;
+}
+export interface ChildItemWrapperProps {
+    children?: {
+        [key: string]: string[] | object[] | React.ReactNode;
+    };
+    onKeyDown?: (...args: unknown[]) => void;
+}
+export interface NavBarItemButtonProps {
+    /**  Handler that is called when the press is released over the target. */
+    onPress?: () => void;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id: string;
+    className?: string;
+    sx?: ThemeUICSSObject;
+    children?: React.ReactNode;
+}
+export interface NavBarItemHeaderProps {
+    item: {
+        children?: string[] | object[];
+        href?: string;
+    };
+}
+export interface NavBarSectionItemHeaderProps {
+    item: {
+        heading?: string;
+        icon?: IconTypeExtended;
+        className?: string;
+        children?: string[] | object[];
+        key?: string;
+        href?: string;
+    };
+}
+export interface NavBarPrimaryItemHeaderProps {
+    item: {
+        heading?: string;
+        icon?: IconTypeExtended;
+        className?: string;
+        customIcon?: IconTypeExtended;
+        children?: string[] | object[] | undefined;
+        href?: string | undefined;
+    };
+}
+export interface NavBarItemLinkProps {
+    /**  Specifies the location of the URL */
+    href?: string;
+    /**  Handler that is called when the press is released over the target. */
+    onPress?: () => void;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id: string;
+    className?: string;
+    sx?: ThemeUICSSObject;
+    children?: React.ReactNode | string;
+    variant?: string;
+    onClick?: (e: Event) => void;
+}
+export interface NavBarSectionProps<T> {
+    /** If true, a separator will render at the end of the section */
+    hasSeparator?: boolean;
+    /** callback that runs on key down */
+    onKeyDown?: () => void;
+    /** If present, this string will render at the top of the section */
+    title?: string;
+    /**
+     * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+     * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+     */
+    items?: Iterable<T>;
+}
+export interface ChildrenProps {
+    key?: string;
+}
+export interface SectionItemProps<T> {
+    onKeyDown?: (...arg: unknown[]) => void;
+    item?: {
+        key?: string;
+        children?: Array<ChildrenProps>;
+        'aria-label'?: string;
+    };
+    state?: {
+        collection?: Iterable<T>;
+        selectedKey?: string;
+        setSelectedKey?: () => void;
+        selectionManager?: {
+            focusedKey?: string;
+            setFocusedKey?: () => void;
+        };
+    };
+    menuProps?: StyleProps;
+}
+export interface PrimaryItemProps {
+    item: {
+        href?: string;
+    };
+}

package/lib/cjs/types/navBar.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/NavBar/NavBar.js

@@ -6,14 +6,13 @@ 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 React, { forwardRef, useMemo, useState } from 'react';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
-import PropTypes from 'prop-types';
 import { NavBarContext } from '../../context/NavBarContext';
 import useNavBarStyling from '../../hooks/useNavBarStyling/useNavBarStyling';
 import useProgressiveState from '../../hooks/useProgressiveState';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _children$;
   var isAutoСollapsible = props.isAutoСollapsible,
     defaultSelectedKey = props.defaultSelectedKey,
     selectedKeyProp = props.selectedKey,
@@ -23,7 +22,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     variant = props.variant,
     others = _objectWithoutProperties(props, _excluded);
-  var initialExpandedKeys = isAutoСollapsible && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
+  var initialExpandedKeys = isAutoСollapsible && _Array$isArray(defaultExpandedKeys) && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
   var _useState = useState(initialExpandedKeys),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
@@ -40,7 +39,7 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   }) : [{
     item: children,
-    key: children.key
+    key: !children ? '' : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.key
   }];
   var contextValue = useMemo(function () {
     return {
@@ -61,11 +60,11 @@ var NavBar = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "nav"
   }, others), items.length ? ___EmotionJSX(FocusScope, {
     restoreFocus: hasRestoreFocus
-  }, _mapInstanceProperty(items).call(items, function (_ref) {
+  }, _mapInstanceProperty(items).call(items, function (_ref, index) {
     var item = _ref.item,
       key = _ref.key;
     return ___EmotionJSX(FocusableItem, {
-      key: key
+      key: key || "key".concat(index)
     }, item);
   })) : null));
 });
@@ -92,26 +91,6 @@ var FocusableItem = function FocusableItem(props) {
   });
   return childWithFocusHandle;
 };
-NavBar.propTypes = {
-  /** Allows only one item to be expanded. */
-  isAutoСollapsible: PropTypes.bool,
-  /** This applies a style to the entire nav tree. the options are default and popup. */
-  variant: PropTypes.oneOf(['default', 'popupNav']),
-  /** Whether or not the focus will return to the previously focused element upon unmount. */
-  hasRestoreFocus: PropTypes.bool,
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: PropTypes.string,
-  /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: isIterableProp,
-  /** The selected key in the collection (controlled). */
-  selectedKey: isIterableProp,
-  /**
-  * Callback function that fires when the selected key changes.
-  *
-  * `(selectedKey: String) => void`
-  */
-  setSelectedKey: PropTypes.func
-};
 NavBar.defaultProps = {
   isAutoСollapsible: false,
   defaultSelectedKey: '',

package/lib/components/NavBar/NavBar.stories.js

@@ -14,7 +14,7 @@ import ViewGridPlusOutline from '@pingux/mdi-react/ViewGridPlusOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import NavBarReadme from './NavBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/NavBarSection/NavBarItem.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["icon", "text", "className", "id", "onPress"];
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
-import { useNavBarPress, useStatusClasses } from '../../hooks';
+import { useLocalOrForwardRef, useNavBarPress, useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -16,7 +15,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     key = props.id,
     onPressCallback = props.onPress,
     others = _objectWithoutProperties(props, _excluded);
-  var navItemRef = useRef();
+  var navItemRef = useLocalOrForwardRef(null);
 
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -85,14 +84,4 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: state.navStyles.navBarItemText
   }, text)));
 });
-NavBarItem.propTypes = {
-  /**  Handler that is called when the press is released over the target. */
-  onPress: PropTypes.func,
-  /** The icon to render in between each node. */
-  icon: PropTypes.elementType,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Text that will render within the component */
-  text: PropTypes.string
-};
 export default NavBarItem;

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -35,28 +35,23 @@ var NavBarItemBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(Box, {
     variant: state.navStyles.navBarItemBody,
     ref: ref
-  }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
+  }, (item === null || item === void 0 ? void 0 : item.children) && _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 });
 var ChildItemWrapper = function ChildItemWrapper(_ref2) {
   var children = _ref2.children,
     _onKeyDown = _ref2.onKeyDown;
-  var childrenKey = children.key || children;
+  var childrenKey = (children === null || children === void 0 ? void 0 : children.key) || children;
   var _useKeyboard = useKeyboard({
       onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e, childrenKey);
+        return _onKeyDown ? _onKeyDown(e, childrenKey) : undefined;
       }
     }),
     keyboardProps = _useKeyboard.keyboardProps;
   return ___EmotionJSX(Box, _extends({
     width: "100%"
-  }, keyboardProps), children);
-};
-NavBarItemBody.propTypes = {
-  item: PropTypes.shape({
-    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
-    key: PropTypes.string
-  }),
-  onKeyDown: PropTypes.func
+  }, keyboardProps, {
+    role: "none"
+  }), ___EmotionJSX(React.Fragment, null, ' ', children && children));
 };
 ChildItemWrapper.propTypes = {
   onKeyDown: PropTypes.func