@pingux/astro 2.54.0-alpha.0 → 2.54.0-alpha.2

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

@@ -39,7 +39,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var breadcrumbsRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
-    var isCurrentItem = idx && (0, _isArray["default"])(children) && (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === _react["default"].Children.toArray(children).length - 1 : true;
     return (0, _react2.jsx)(_react["default"].Fragment, {
       key: "li-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({

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

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

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

@@ -34,13 +34,13 @@ var _default = {
     }
   },
   args: {
-    children: 'Text of the popover right here...'
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, args));
 };
 exports.Default = Default;
@@ -52,7 +52,7 @@ Default.parameters = {
 };
 var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, {
     popoverProps: {
       'data-testid': 'popover-container'
@@ -61,15 +61,15 @@ var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
       'aria-label': 'Help hint'
     },
     direction: "bottom"
-  }, "Text of the popover right here..."));
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };
 exports.WithPopoverAndIconButtonProps = WithPopoverAndIconButtonProps;
 var ContentWithLink = function ContentWithLink() {
   return (0, _react2.jsx)(_index.Box, {
-    p: 70
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, null, (0, _react2.jsx)(_index.Text, {
     variant: "popover"
-  }, "Text of the popover right here... "), (0, _react2.jsx)(_index.Link, {
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"), (0, _react2.jsx)(_index.Link, {
     variant: "popover",
     href: "https://uilibrary.ping-eng.com/",
     target: "_blank"
@@ -84,7 +84,7 @@ ContentWithLink.parameters = {
 };
 var WithDelay = function WithDelay(args) {
   return (0, _react2.jsx)(_index.Box, {
-    p: 50
+    p: 100
   }, (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({}, args, {
     closeDelay: 5000
   })));

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

@@ -277,7 +277,78 @@ declare const _default: {
         height: string;
         outline: string;
     };
-    messageCloseButton: any;
+    messageCloseButton: {
+        p: number;
+        ml: string;
+        outline: string;
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-success': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-warning': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-error': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        width: string;
+        height: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
     modalCloseButton: {
         position: string;
         top: number;

package/lib/cjs/components/Messages/Message.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MessageProps } from '../../types';
+export declare const ARIA_STATUSES: {
+    SUCCESS: string;
+    ERROR: string;
+    WARNING: string;
+};
+declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export default Message;

package/lib/cjs/components/Messages/Message.js

@@ -1,15 +1,9 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 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
@@ -21,17 +15,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
 var _excluded = ["color"];
 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; }
-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) { (0, _defineProperty2["default"])(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; }
 var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -56,28 +47,26 @@ var CloseButton = function CloseButton(_ref) {
     }
   }));
 };
-CloseButton.propTypes = {
-  color: _propTypes["default"].string
-};
 var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var className = _ref2.className,
     item = _ref2.item,
     onClose = _ref2.onClose;
   var key = item.key,
     itemProps = item.props;
-  var children = itemProps.children,
-    _itemProps$status = itemProps.status,
-    status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
-    bg = itemProps.bg,
-    color = itemProps.color,
-    icon = itemProps.icon,
-    _itemProps$isHidden = itemProps.isHidden,
-    isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
-    dataId = itemProps['data-id'];
+  var _ref3 = itemProps,
+    children = _ref3.children,
+    _ref3$status = _ref3.status,
+    status = _ref3$status === void 0 ? _statuses["default"].DEFAULT : _ref3$status,
+    bg = _ref3.bg,
+    color = _ref3.color,
+    icon = _ref3.icon,
+    _ref3$isHidden = _ref3.isHidden,
+    isHidden = _ref3$isHidden === void 0 ? false : _ref3$isHidden,
+    dataId = _ref3['data-id'];
   var _useStatusClasses = (0, _useStatusClasses4["default"])(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
     statusClasses = _useStatusClasses.classNames;
   var onCloseHandler = function onCloseHandler() {
-    if (onClose) {
+    if (onClose && key) {
       onClose(key);
     }
   };
@@ -87,7 +76,8 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     innerHeight = _useState2[0],
     setInnerHeight = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
-    setInnerHeight(innerRef.current.clientHeight);
+    var _innerRef$current$cli, _innerRef$current;
+    setInnerHeight((_innerRef$current$cli = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.clientHeight) !== null && _innerRef$current$cli !== void 0 ? _innerRef$current$cli : 0);
   }, [children]);
   var _useStatusClasses3 = (0, _useStatusClasses4["default"])(className, {
       isHidden: isHidden
@@ -145,25 +135,5 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     color: color
   }))));
 });
-Message.propTypes = {
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-      /* Background color */
-      bg: _propTypes["default"].string,
-      /* Text color */
-      color: _propTypes["default"].string,
-      /* Message icon */
-      icon: _propTypes["default"].elementType,
-      /* Hides the message with an animated transition */
-      isHidden: _propTypes["default"].bool,
-      'data-id': _propTypes["default"].string,
-      status: _objectSpread({}, _statusProp.statusPropTypes).status
-    })
-  }),
-  /* Callback for clicking the message's close button */
-  onClose: _propTypes["default"].func
-};
 var _default = Message;
 exports["default"] = _default;

package/lib/cjs/components/Messages/Message.styles.d.ts

@@ -0,0 +1,151 @@
+export declare const messageCloseButton: {
+    p: number;
+    ml: string;
+    outline: string;
+    path: {
+        fill: string;
+    };
+    '&.is-hovered': {
+        bg: string;
+        boxShadow: string;
+    };
+    '&.is-pressed': {
+        boxShadow: string;
+        bg: string;
+        path: {
+            fill: string;
+        };
+    };
+    '&.is-success': {
+        path: {
+            fill: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+    '&.is-warning': {
+        path: {
+            fill: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+    '&.is-error': {
+        path: {
+            fill: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+};
+declare const _default: {
+    wrapper: {
+        position: string;
+        right: string;
+        bottom: string;
+        left: string;
+        alignItems: string;
+        pointerEvents: string;
+    };
+    transition: {
+        transition: string;
+        opacity: number;
+        '&.is-hidden': {
+            opacity: number;
+        };
+    };
+    item: {
+        maxWidth: number;
+        pointerEvents: string;
+        mb: string;
+        p: string;
+        wordBreak: string;
+        alignItems: string;
+        bg: string;
+        color: string;
+        borderRadius: number;
+        '&.is-success, > .is-success': {
+            bg: string;
+            color: string;
+        };
+        '&.is-warning, > .is-warning': {
+            bg: string;
+            color: string;
+        };
+        '&.is-error, > .is-error': {
+            bg: string;
+            color: string;
+        };
+    };
+    messageCloseButton: {
+        p: number;
+        ml: string;
+        outline: string;
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            boxShadow: string;
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-success': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-warning': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        '&.is-error': {
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                boxShadow: string;
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

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

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

package/lib/cjs/components/Messages/Messages.js

@@ -26,19 +26,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _collections = require("@react-stately/collections");
 var _list = require("@react-stately/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Message = _interopRequireDefault(require("./Message"));
 var _react2 = require("@emotion/react");
-var _excluded = ["items", "onClose"];
+var _excluded = ["onClose"];
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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) { (0, _defineProperty2["default"])(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; }
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var items = props.items,
-    onClose = props.onClose,
+  var onClose = props.onClose,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -82,16 +79,6 @@ var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }));
 });
-Messages.propTypes = {
-  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(_objectSpread({
-    key: _propTypes["default"].string,
-    text: _propTypes["default"].string,
-    node: _propTypes["default"].node
-  }, _statusProp.statusPropTypes))),
-  /* Callback for clicking the message's close button */
-  onClose: _propTypes["default"].func
-};
 Messages.defaultProps = {
   items: []
 };

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import { MessageItem } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../index").MessagesProps<MessageItem> & React.RefAttributes<HTMLDivElement>>;
+    decorators: ((...args: any) => any)[];
+    argTypes: {
+        items: {
+            control: {
+                type: string;
+            };
+        };
+        onClose: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const DefaultDynamic: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Controlled: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const ControlledWithButton: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithCustomColorsAndIcons: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const UseReducer: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const UseReducerWithMultipleContainers: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithTextStyling: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};