@pingux/astro 2.53.0 → 2.53.1-alpha.1

package/lib/cjs/components/Label/Label.styles.js

@@ -73,7 +73,7 @@ label.checkbox = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   div: {
     flexShrink: 0
   },
-  width: 'auto',
+  width: 'max-content',
   alignItems: 'center',
   cursor: 'pointer'
 });

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

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

package/lib/cjs/components/NavBar/NavBar.js

@@ -16,17 +16,16 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _focus = require("@react-aria/focus");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _useNavBarStyling = _interopRequireDefault(require("../../hooks/useNavBarStyling/useNavBarStyling"));
 var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Box = _interopRequireDefault(require("../Box/Box"));
 var _react2 = require("@emotion/react");
 var _excluded = ["isAuto\u0421ollapsible", "defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "variant"];
 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 NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _children$;
   var isAutoСollapsible = props.isAutoСollapsible,
     defaultSelectedKey = props.defaultSelectedKey,
     selectedKeyProp = props.selectedKey,
@@ -36,7 +35,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     children = props.children,
     variant = props.variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var initialExpandedKeys = isAutoСollapsible && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
+  var initialExpandedKeys = isAutoСollapsible && (0, _isArray["default"])(defaultExpandedKeys) && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
   var _useState = (0, _react.useState)(initialExpandedKeys),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     expandedKeys = _useState2[0],
@@ -53,7 +52,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   }) : [{
     item: children,
-    key: children.key
+    key: !children ? '' : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.key
   }];
   var contextValue = (0, _react.useMemo)(function () {
     return {
@@ -74,11 +73,11 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     as: "nav"
   }, others), items.length ? (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: hasRestoreFocus
-  }, (0, _map["default"])(items).call(items, function (_ref) {
+  }, (0, _map["default"])(items).call(items, function (_ref, index) {
     var item = _ref.item,
       key = _ref.key;
     return (0, _react2.jsx)(FocusableItem, {
-      key: key
+      key: key || "key".concat(index)
     }, item);
   })) : null));
 });
@@ -105,26 +104,6 @@ var FocusableItem = function FocusableItem(props) {
   });
   return childWithFocusHandle;
 };
-NavBar.propTypes = {
-  /** Allows only one item to be expanded. */
-  isAutoСollapsible: _propTypes["default"].bool,
-  /** This applies a style to the entire nav tree. the options are default and popup. */
-  variant: _propTypes["default"].oneOf(['default', 'popupNav']),
-  /** Whether or not the focus will return to the previously focused element upon unmount. */
-  hasRestoreFocus: _propTypes["default"].bool,
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: _propTypes["default"].string,
-  /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: _isIterable.isIterableProp,
-  /** The selected key in the collection (controlled). */
-  selectedKey: _isIterable.isIterableProp,
-  /**
-  * Callback function that fires when the selected key changes.
-  *
-  * `(selectedKey: String) => void`
-  */
-  setSelectedKey: _propTypes["default"].func
-};
 NavBar.defaultProps = {
   isAutoСollapsible: false,
   defaultSelectedKey: '',

package/lib/cjs/components/NavBar/NavBar.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import { NavBarProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<NavBarProps>;
+export declare const Controlled: StoryFn<NavBarProps>;
+export declare const AutoCollapse: StoryFn<NavBarProps>;

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

@@ -25,7 +25,7 @@ var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _NavBar = _interopRequireDefault(require("./NavBar.mdx"));
 var _react2 = require("@emotion/react");
 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); }

package/lib/cjs/components/NavBar/NavBar.styles.d.ts

@@ -0,0 +1,364 @@
+declare const _default: {
+    container: {
+        height: string;
+        width: string;
+        position: string;
+        zIndex: string;
+        top: string;
+        left: string;
+        backgroundColor: string;
+        overflowY: string;
+    };
+    popUpContainer: {
+        minWidth: string;
+        maxWidth: string;
+        width: string;
+        backgroundColor: string;
+        borderRight: string;
+        borderRightColor: string;
+        height: string;
+        position: string;
+        zIndex: string;
+        top: string;
+        left: string;
+        overflowY: string;
+    };
+    itemHeaderContainer: {
+        flexGrow: number;
+        alignItems: string;
+        maxWidth: string;
+        py: string;
+        px: string;
+        cursor: string;
+        minHeight: string;
+        '&.is-selected': {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+    };
+    popUpItemHeaderContainer: {
+        minHeight: string;
+        maxWidth: string;
+        pl: string;
+        pr: string;
+        '&.is-selected': {
+            backgroundColor: string;
+        };
+        flexGrow: number;
+        alignItems: string;
+        py: string;
+        px: string;
+        cursor: string;
+    };
+    popUpItemListItem: {
+        borderBottom: string;
+    };
+    sectionContainer: {
+        pt: string;
+        height: string;
+        maxHeight: string;
+        overflowY: string;
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar': {
+            width: number;
+        };
+        '&::-webkit-scrollbar-track': {
+            backgroundColor: string;
+        };
+        scrollbarColor: string;
+        '&:hover': {
+            '&::-webkit-scrollbar-thumb': {
+                backgroundColor: string;
+                borderRadius: string;
+            };
+            '&::-webkit-scrollbar-track': {
+                backgroundColor: string;
+            };
+            scrollbarColor: string;
+        };
+    };
+    popUpSectionContainer: {
+        height: string;
+        maxHeight: string;
+        overflowY: string;
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar': {
+            width: number;
+        };
+        '&::-webkit-scrollbar-track': {
+            backgroundColor: string;
+        };
+        scrollbarColor: string;
+        '&:hover': {
+            '&::-webkit-scrollbar-thumb': {
+                backgroundColor: string;
+                borderRadius: string;
+            };
+            '&::-webkit-scrollbar-track': {
+                backgroundColor: string;
+            };
+            scrollbarColor: string;
+        };
+    };
+    sectionBody: any;
+    sectionButton: {
+        width: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+        };
+        all: string;
+        display: string;
+    };
+    popUpSectionButton: {
+        width: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-pressed > div > div > svg > path': {
+            fill: string;
+        };
+        all: string;
+        display: string;
+    };
+    itemButton: {
+        textDecoration: string;
+        outline: string;
+        cursor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        paddingTop: string;
+        paddingBottom: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flexGrow: string;
+        width: string;
+        textAlign: string;
+        whiteSpace: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        paddingLeft: string;
+        paddingRight: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+        };
+    };
+    popUpItemButton: {
+        fontSize: string;
+        px: string;
+        color: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            color: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            color: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            color: string;
+        };
+        textDecoration: string;
+        outline: string;
+        cursor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        paddingTop: string;
+        paddingBottom: string;
+        display: string;
+        fontWeight: number;
+        flexGrow: string;
+        width: string;
+        textAlign: string;
+        whiteSpace: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        paddingLeft: string;
+        paddingRight: string;
+    };
+    subtitle: {
+        ml: string;
+        my: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+        zIndex: string;
+    };
+    headerText: {
+        whiteSpace: string;
+        lineHeight: number;
+        fontSize: string;
+        fontWeight: number;
+        maxWidth: string;
+        color: string;
+        '.is-selected &': {
+            color: string;
+        };
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    popUpHeaderText: {
+        fontWeight: number;
+        color: string;
+        '.is-pressed &': {
+            color: string;
+        };
+        '.is-selected &': {
+            color: string;
+        };
+        whiteSpace: string;
+        lineHeight: number;
+        fontSize: string;
+        maxWidth: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    headerNav: {
+        cursor: string;
+        minHeight: string;
+        lineHeight: string;
+        outline: string;
+        display: string;
+        justifyContent: string;
+        flexShrink: number;
+        wordBreak: string;
+        whiteSpace: string;
+        color: string;
+        flexGrow: number;
+        fontWeight: number;
+        fontSize: string;
+        '&.is-focused': {
+            outline: string;
+            boxShadow: string;
+            WebkitBoxShadow: string;
+            MozBoxShadow: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+        };
+    };
+    item: {
+        py: string;
+        px: string;
+        '&.is-selected': {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        cursor: string;
+        minHeight: string;
+        lineHeight: string;
+        outline: string;
+        display: string;
+        justifyContent: string;
+        flexShrink: number;
+        wordBreak: string;
+        whiteSpace: string;
+        color: string;
+        flexGrow: number;
+        fontWeight: number;
+        fontSize: string;
+        '&.is-focused': {
+            outline: string;
+            boxShadow: string;
+            WebkitBoxShadow: string;
+            MozBoxShadow: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+        };
+    };
+    popUpItem: {
+        py: string;
+        px: string;
+        '&.is-selected': {
+            boxShadow: string;
+        };
+        cursor: string;
+        minHeight: string;
+        lineHeight: string;
+        outline: string;
+        display: string;
+        justifyContent: string;
+        flexShrink: number;
+        wordBreak: string;
+        whiteSpace: string;
+        color: string;
+        flexGrow: number;
+        fontWeight: number;
+        fontSize: string;
+        '&.is-focused': {
+            outline: string;
+            boxShadow: string;
+            WebkitBoxShadow: string;
+            MozBoxShadow: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+        };
+    };
+    navBarItemBody: {
+        alignItems: string;
+        mb: string;
+    };
+    popUpNavBarItemBody: {
+        mb: number;
+        alignItems: string;
+    };
+};
+export default _default;

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

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

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

@@ -0,0 +1 @@
+export { default } from './NavBar';

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

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

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

@@ -14,7 +14,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -29,7 +28,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     key = props.id,
     onPressCallback = props.onPress,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var navItemRef = (0, _react.useRef)();
+  var navItemRef = (0, _hooks.useLocalOrForwardRef)(null);
 
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -98,15 +97,5 @@ var NavBarItem = /*#__PURE__*/(0, _react.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["default"].func,
-  /** The icon to render in between each node. */
-  icon: _propTypes["default"].elementType,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Text that will render within the component */
-  text: _propTypes["default"].string
-};
 var _default = NavBarItem;
 exports["default"] = _default;

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

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

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

@@ -48,28 +48,23 @@ var NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return (0, _react2.jsx)(_index.Box, {
     variant: state.navStyles.navBarItemBody,
     ref: ref
-  }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
+  }, (item === null || item === void 0 ? void 0 : item.children) && (0, _map["default"])(_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 = (0, _interactions.useKeyboard)({
       onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e, childrenKey);
+        return _onKeyDown ? _onKeyDown(e, childrenKey) : undefined;
       }
     }),
     keyboardProps = _useKeyboard.keyboardProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     width: "100%"
-  }, keyboardProps), children);
-};
-NavBarItemBody.propTypes = {
-  item: _propTypes["default"].shape({
-    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
-    key: _propTypes["default"].string
-  }),
-  onKeyDown: _propTypes["default"].func
+  }, keyboardProps, {
+    role: "none"
+  }), (0, _react2.jsx)(_react["default"].Fragment, null, ' ', children && children));
 };
 ChildItemWrapper.propTypes = {
   onKeyDown: _propTypes["default"].func

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

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

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

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

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

@@ -9,7 +9,6 @@ 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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -40,11 +39,5 @@ var NavBarItemButton = function NavBarItemButton(props) {
     color: isSelected ? 'white' : undefined
   }, others));
 };
-NavBarItemButton.propTypes = {
-  /**  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 = NavBarItemButton;
 exports["default"] = _default;

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

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