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

package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.d.ts

@@ -0,0 +1,61 @@
+declare const _default: {
+    containerLi: {
+        flex: string;
+        minWidth: string;
+        '&.is-current': {
+            flex: string;
+        };
+    };
+    containerOl: {
+        alignItems: string;
+        minHeight: number;
+        paddingInlineStart: string;
+        'a.is-hovered.is-current ': {
+            textDecoration: string;
+        };
+    };
+    link: {
+        display: string;
+        minWidth: string;
+        '&.is-current': {
+            color: string;
+            textDecoration: string;
+            cursor: string;
+        };
+        lineHeight: string;
+        textDecoration: string;
+        justifyContent: string;
+        width: string;
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        height: string;
+        padding: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        cursor: string;
+        outline: string;
+        alignItems: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+        textOverflow: string;
+        overflow: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { breadCrumbItemProps } from '../../types';
+export declare const ELEMENT_TYPE: {
+    BUTTON: string;
+    ICON_BUTTON: string;
+    TEXT: string;
+    LINK: string;
+    FRAGMENT: string;
+};
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<breadCrumbItemProps & React.RefAttributes<HTMLElement>>;
+export default BreadcrumbItem;

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -21,7 +21,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _object = require("lodash/object");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
@@ -45,15 +44,11 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     actionKey = props.actionKey,
     isCurrent = props.isCurrent,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var itemRef = (0, _react.useRef)();
+  var itemRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return itemRef.current;
-  });
   var _useBreadcrumbItem = (0, _reactAria.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
-  var ElementType = (0, _react.useMemo)(function () {
+  var BreadcrumbItemElementType = (0, _react.useMemo)(function () {
     switch (elementType) {
       case ELEMENT_TYPE.BUTTON:
         return _index.Button;
@@ -91,23 +86,10 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, elementProps);
   return (0, _react2.jsx)(_index.Box, {
     as: "li",
-    className: isCurrent && 'is-current',
+    className: isCurrent ? 'is-current' : '',
     variant: "variants.breadcrumb.containerLi"
-  }, (0, _react2.jsx)(ElementType, elementVariantProps, children));
+  }, (0, _react2.jsx)(BreadcrumbItemElementType, elementVariantProps, children));
 });
-BreadcrumbItem.propTypes = {
-  actionKey: _propTypes["default"].string,
-  /** Whether the breadcrumb item represents the current page. */
-  isCurrent: _propTypes["default"].bool,
-  /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
-   * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
-   * appropriate component from Astro library.
-   * */
-  elementType: _propTypes["default"].elementType,
-  /** Whether the breadcrumb item is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  onAction: _propTypes["default"].func
-};
 BreadcrumbItem.defaultProps = {
   elementType: 'Link'
 };

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

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

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -16,7 +16,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
@@ -30,20 +29,17 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     iconProps = props.iconProps,
     onAction = props.onAction,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
   // the following filters undefined values passed as a child
   var filteredChildren = (0, _isArray["default"])(children) ? (0, _filter["default"])(children).call(children, function (child) {
     return child;
   }) : children;
   var _useBreadcrumbs = (0, _reactAria.useBreadcrumbs)(props),
     wrapperProps = _useBreadcrumbs.navProps;
-  var breadcrumbsRef = (0, _react.useRef)();
+  var breadcrumbsRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return breadcrumbsRef.current;
-  });
   var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
-    var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = idx && (0, _isArray["default"])(children) && (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return (0, _react2.jsx)(_react["default"].Fragment, {
       key: "li-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
@@ -53,14 +49,15 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onAction: onAction
     }, child.props), child.props.children), icon && !isCurrentItem && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
       "aria-hidden": "true",
-      icon: icon,
       mx: 5,
       size: "xs",
       title: {
         name: 'Breadcrumb Separator'
       }
-    }, iconProps)));
-  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+    }, iconProps, {
+      icon: icon
+    })));
+  }, [(0, _isArray["default"])(children) && children.length, filteredChildren, icon, iconProps, onAction]);
   return (0, _react2.jsx)("nav", {
     "aria-label": "Breadcrumb"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -70,19 +67,6 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "variants.breadcrumb.containerOl"
   }, (0, _reactAria.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
-Breadcrumbs.propTypes = {
-  /** The icon to render in between each node. */
-  icon: _propTypes["default"].elementType,
-  /** Props object passed along to the Icon component. */
-  iconProps: _propTypes["default"].shape({}),
-  /** Whether the Breadcrumbs are disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-  /** Called when an item is acted upon (usually selection via press). */
-  /** (key: Key) => void. */
-  onAction: _propTypes["default"].func
-};
 Breadcrumbs.displayName = 'Breadcrumbs';
 var _default = Breadcrumbs;
 exports["default"] = _default;

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

@@ -0,0 +1,6 @@
+import { StoryFn } from '@storybook/react';
+import { breadCrumbsProps } 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<breadCrumbsProps>;
+export declare const Overflowing: StoryFn;

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

@@ -14,7 +14,7 @@ var _addonActions = require("@storybook/addon-actions");
 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 _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
@@ -50,9 +50,8 @@ var Default = function Default(args) {
   var onAction = function onAction(key) {
     return (0, _addonActions.action)("onPress ".concat(key));
   };
-  return (0, _react2.jsx)(_index.Breadcrumbs, (0, _extends2["default"])({
-    onAction: onAction
-  }, args, {
+  return (0, _react2.jsx)(_index.Breadcrumbs, (0, _extends2["default"])({}, args, {
+    onAction: onAction,
     icon: _ChevronRightIcon["default"]
   }), (0, _react2.jsx)(_reactStately.Item, {
     "aria-label": "home",

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

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

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

@@ -54,10 +54,11 @@ test('should render nodes from the children', function () {
 test('should render correct amount of icons', function () {
   getComponent({
     iconProps: {
-      'data-testid': testIconId
+      'data-testid': testIconId,
+      icon: _ChevronRightIcon["default"]
     }
   });
-  expect(_testWrapper.screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
+  expect(_testWrapper.screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 2);
 });
 test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
   getComponent({}, {

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

@@ -0,0 +1,2 @@
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default } from './Breadcrumbs';

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

@@ -0,0 +1,31 @@
+import { type ElementType } from 'react';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { IconProps } from './icon';
+export interface breadCrumbsProps extends BoxProps, TestingAttributes {
+    /** The icon to render in between each node. */
+    icon?: ElementType;
+    /** Props object passed along to the Icon component. */
+    iconProps?: IconProps;
+    /** Whether the Breadcrumbs are disabled. */
+    isDisabled?: boolean;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Called when an item is acted upon (usually selection via press). */
+    /** (key: Key) => void. */
+    onAction?: (key: unknown) => void;
+}
+export interface breadCrumbItemProps extends BoxProps, TestingAttributes {
+    actionKey?: string;
+    /** Whether the breadcrumb item represents the current page. */
+    isCurrent?: boolean;
+    /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
+     * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
+     * appropriate component from Astro library.
+     * */
+    elementType?: string | ElementType;
+    /** Whether the breadcrumb item is disabled. */
+    isDisabled?: boolean;
+    onAction?: (key: unknown) => void;
+    onPress?: () => void;
+}

package/lib/cjs/types/breadCrumbs.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/cjs/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from './badge';
 export * from './box';
 export * from './bracket';
+export * from './breadCrumbs';
 export * from './button';
 export * from './buttonBar';
 export * from './card';

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;
+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;
 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");
@@ -40,8 +40,19 @@ _forEachInstanceProperty(_context3 = _Object$keys(_bracket)).call(_context3, fun
     }
   });
 });
+var _breadCrumbs = require("./breadCrumbs");
+_forEachInstanceProperty(_context4 = _Object$keys(_breadCrumbs)).call(_context4, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadCrumbs[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _breadCrumbs[key];
+    }
+  });
+});
 var _button = require("./button");
-_forEachInstanceProperty(_context4 = _Object$keys(_button)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_button)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _button[key]) return;
   _Object$defineProperty(exports, key, {
@@ -52,7 +63,7 @@ _forEachInstanceProperty(_context4 = _Object$keys(_button)).call(_context4, func
   });
 });
 var _buttonBar = require("./buttonBar");
-_forEachInstanceProperty(_context5 = _Object$keys(_buttonBar)).call(_context5, function (key) {
+_forEachInstanceProperty(_context6 = _Object$keys(_buttonBar)).call(_context6, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _buttonBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_buttonBar)).call(_context5, f
   });
 });
 var _card = require("./card");
-_forEachInstanceProperty(_context6 = _Object$keys(_card)).call(_context6, function (key) {
+_forEachInstanceProperty(_context7 = _Object$keys(_card)).call(_context7, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _card[key]) return;
   _Object$defineProperty(exports, key, {
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_card)).call(_context6, functi
   });
 });
 var _fieldHelperText = require("./fieldHelperText");
-_forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_context7, function (key) {
+_forEachInstanceProperty(_context8 = _Object$keys(_fieldHelperText)).call(_context8, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _fieldHelperText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_conte
   });
 });
 var _helpHint = require("./helpHint");
-_forEachInstanceProperty(_context8 = _Object$keys(_helpHint)).call(_context8, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_helpHint)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _helpHint[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_helpHint)).call(_context8, fu
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context9 = _Object$keys(_icon)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_icon)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_icon)).call(_context9, functi
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context10 = _Object$keys(_iconBadge)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_iconBadge)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_iconBadge)).call(_context10,
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context11 = _Object$keys(_iconButton)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_iconButton)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_iconButton)).call(_context11
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context12 = _Object$keys(_input)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_input)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_input)).call(_context12, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context13 = _Object$keys(_item)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_item)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_item)).call(_context13, func
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context14 = _Object$keys(_link)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_link)).call(_context14, func
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context15 = _Object$keys(_listItem)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_listItem)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_listItem)).call(_context15,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_loader)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context17 = _Object$keys(_menu)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_menu)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_menu)).call(_context17, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context18 = _Object$keys(_menuItem)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_menuItem)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_menuItem)).call(_context18,
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context19 = _Object$keys(_overlayPanel)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_overlayPanel)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context20 = _Object$keys(_popoverContainer)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_popoverContainer)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context21 = _Object$keys(_popoverMenu)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_popoverMenu)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context22 = _Object$keys(_requirementsList)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_requirementsList)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context23 = _Object$keys(_rockerButtonGroup)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_rockerButtonGroup)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context24 = _Object$keys(_scrollBox)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_scrollBox)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_scrollBox)).call(_context24,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context25 = _Object$keys(_separator)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_separator)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_separator)).call(_context25,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context26 = _Object$keys(_shared)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_shared)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_shared)).call(_context26, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context27 = _Object$keys(_table)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_table)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_table)).call(_context27, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context28 = _Object$keys(_text)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_text)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_text)).call(_context28, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context29 = _Object$keys(_tooltipTrigger)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_tooltipTrigger)).call(_context30, 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/item.d.ts

@@ -31,6 +31,8 @@ declare module '@react-types/shared' {
         slots?: {
             postHeading: React.ReactNode;
         };
+        /** isCurrent for the Breadcrumbs item. */
+        isCurrent?: boolean;
     }
 }
 export default ItemProps;

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -12,11 +12,10 @@ var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, Fragment, useCallback, useMemo } from 'react';
 import { mergeProps, useBreadcrumbItem } from 'react-aria';
 import { omit } from 'lodash/object';
-import PropTypes from 'prop-types';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Button, IconButton, Link, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ELEMENT_TYPE = {
@@ -33,15 +32,11 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
     actionKey = props.actionKey,
     isCurrent = props.isCurrent,
     others = _objectWithoutProperties(props, _excluded);
-  var itemRef = useRef();
+  var itemRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return itemRef.current;
-  });
   var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
-  var ElementType = useMemo(function () {
+  var BreadcrumbItemElementType = useMemo(function () {
     switch (elementType) {
       case ELEMENT_TYPE.BUTTON:
         return Button;
@@ -79,23 +74,10 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, elementProps);
   return ___EmotionJSX(Box, {
     as: "li",
-    className: isCurrent && 'is-current',
+    className: isCurrent ? 'is-current' : '',
     variant: "variants.breadcrumb.containerLi"
-  }, ___EmotionJSX(ElementType, elementVariantProps, children));
+  }, ___EmotionJSX(BreadcrumbItemElementType, elementVariantProps, children));
 });
-BreadcrumbItem.propTypes = {
-  actionKey: PropTypes.string,
-  /** Whether the breadcrumb item represents the current page. */
-  isCurrent: PropTypes.bool,
-  /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
-   * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
-   * appropriate component from Astro library.
-   * */
-  elementType: PropTypes.elementType,
-  /** Whether the breadcrumb item is disabled. */
-  isDisabled: PropTypes.bool,
-  onAction: PropTypes.func
-};
 BreadcrumbItem.defaultProps = {
   elementType: 'Link'
 };

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -4,10 +4,9 @@ var _excluded = ["children", "icon", "iconProps", "onAction"];
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import { mergeProps, useBreadcrumbs } from 'react-aria';
-import PropTypes from 'prop-types';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Icon } from '../../index';
 import BreadcrumbItem from './BreadcrumbItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,20 +16,17 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     iconProps = props.iconProps,
     onAction = props.onAction,
     others = _objectWithoutProperties(props, _excluded);
+
   // the following filters undefined values passed as a child
   var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
     return child;
   }) : children;
   var _useBreadcrumbs = useBreadcrumbs(props),
     wrapperProps = _useBreadcrumbs.navProps;
-  var breadcrumbsRef = useRef();
+  var breadcrumbsRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return breadcrumbsRef.current;
-  });
   var createBreadcrumb = useCallback(function (child, idx) {
-    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = idx && _Array$isArray(children) && _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return ___EmotionJSX(React.Fragment, {
       key: "li-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
@@ -40,14 +36,15 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       onAction: onAction
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
-      icon: icon,
       mx: 5,
       size: "xs",
       title: {
         name: 'Breadcrumb Separator'
       }
-    }, iconProps)));
-  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+    }, iconProps, {
+      icon: icon
+    })));
+  }, [_Array$isArray(children) && children.length, filteredChildren, icon, iconProps, onAction]);
   return ___EmotionJSX("nav", {
     "aria-label": "Breadcrumb"
   }, ___EmotionJSX(Box, _extends({
@@ -57,18 +54,5 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "variants.breadcrumb.containerOl"
   }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
-Breadcrumbs.propTypes = {
-  /** The icon to render in between each node. */
-  icon: PropTypes.elementType,
-  /** Props object passed along to the Icon component. */
-  iconProps: PropTypes.shape({}),
-  /** Whether the Breadcrumbs are disabled. */
-  isDisabled: PropTypes.bool,
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Called when an item is acted upon (usually selection via press). */
-  /** (key: Key) => void. */
-  onAction: PropTypes.func
-};
 Breadcrumbs.displayName = 'Breadcrumbs';
 export default Breadcrumbs;

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Breadcrumbs } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -41,9 +41,8 @@ export var Default = function Default(args) {
   var onAction = function onAction(key) {
     return action("onPress ".concat(key));
   };
-  return ___EmotionJSX(Breadcrumbs, _extends({
-    onAction: onAction
-  }, args, {
+  return ___EmotionJSX(Breadcrumbs, _extends({}, args, {
+    onAction: onAction,
     icon: ChevronRightIcon
   }), ___EmotionJSX(Item, {
     "aria-label": "home",

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -51,10 +51,11 @@ test('should render nodes from the children', function () {
 test('should render correct amount of icons', function () {
   getComponent({
     iconProps: {
-      'data-testid': testIconId
+      'data-testid': testIconId,
+      icon: ChevronRightIcon
     }
   });
-  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
+  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 2);
 });
 test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
   getComponent({}, {

package/lib/types/breadCrumbs.js

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

package/lib/types/index.js

@@ -1,6 +1,7 @@
 export * from './badge';
 export * from './box';
 export * from './bracket';
+export * from './breadCrumbs';
 export * from './button';
 export * from './buttonBar';
 export * from './card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.50.0-alpha.0",
+  "version": "2.50.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",