@pingux/astro 1.27.0-alpha.0 → 1.27.0-alpha.10

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -128,44 +128,106 @@ var items = [{
   avatar: _AccountIcon["default"],
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : (0, _react2.jsx)(_index.Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -222,11 +284,7 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
@@ -260,18 +318,15 @@ var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -285,73 +340,33 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
   })), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {

package/lib/cjs/recipes/PageHeader.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/Page Header'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var heading = 'Title of the Page';
+  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)), (0, _react2.jsx)(_index.Box, {
+    mt: "xl"
+  }, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)));
+};
+
+exports.Default = Default;

package/lib/components/ArrayField/ArrayField.stories.js

@@ -182,26 +182,26 @@ export var Controlled = function Controlled() {
       fieldValues = _React$useState2[0],
       setFieldValues = _React$useState2[1];
 
-  function handleOnChange(values) {
+  var handleOnChange = function handleOnChange(values) {
     setFieldValues(values);
-  }
+  };
 
-  function handleOnAdd() {
+  var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
 
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField]);
     });
-  }
+  };
 
-  function handleOnDelete(fieldId) {
+  var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
       return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
         var id = _ref2.id;
         return id !== fieldId;
       });
     });
-  }
+  };
 
   return ___EmotionJSX(ArrayField, {
     value: fieldValues,

package/lib/components/FileInputField/FileInputField.js

@@ -180,7 +180,10 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "boxes.fileInputFieldWrapper"
   }, mergeProps(fieldContainerProps, others), {
     className: classNames
-  }, getRootProps()), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }, getRootProps(), {
+    // to pass accessibility test, this removes focusable dependents
+    role: "none"
+  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -244,8 +247,8 @@ FileInputField.propTypes = {
    * */
   fileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
-    id: PropTypes.string.required,
-    name: PropTypes.string.required,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),
@@ -253,8 +256,8 @@ FileInputField.propTypes = {
   /** Default array of objects for uploaded files. */
   defaultFileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
-    id: PropTypes.string.required,
-    name: PropTypes.string.required,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -131,7 +131,7 @@ LinkSelectField.propTypes = {
    * *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.arrayOf(PropTypes.any),
+  items: PropTypes.arrayOf(PropTypes.shape({})),
 
   /** The label for the select element. */
   label: PropTypes.node,

package/lib/components/ListBox/Option.js

@@ -86,7 +86,10 @@ Option.propTypes = {
   hasVirtualFocus: PropTypes.bool,
   item: PropTypes.shape({
     key: PropTypes.string,
-    props: PropTypes.shape({}),
+    props: PropTypes.shape({
+      'data-id': PropTypes.string,
+      isSeparator: PropTypes.bool
+    }),
     rendered: PropTypes.node
   }),
   state: PropTypes.shape({

package/lib/components/MenuItem/MenuItem.js

@@ -141,7 +141,8 @@ MenuItem.propTypes = {
     key: PropTypes.string,
     props: PropTypes.shape({
       'data-id': PropTypes.string,
-      isSeparator: PropTypes.bool
+      isSeparator: PropTypes.bool,
+      isPressed: PropTypes.bool
     }),
     rendered: PropTypes.node,
     isDisabled: PropTypes.bool

package/lib/components/Messages/Message.js

@@ -141,7 +141,8 @@ Message.propTypes = {
       icon: PropTypes.elementType,
 
       /* Hides the message with an animated transition */
-      isHidden: PropTypes.bool
+      isHidden: PropTypes.bool,
+      'data-id': PropTypes.string
     })
   }),
 

package/lib/components/PageHeader/PageHeader.js

@@ -6,13 +6,20 @@ import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
+/**
+ * A `Page Header` is a composed component using text and icon button.
+ * The component is separated from the body and appears at the top.
+ * For customization,
+ * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, _excluded);
 
-  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/components/SelectField/SelectField.js

@@ -75,7 +75,7 @@ SelectField.propTypes = {
    * *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.arrayOf(PropTypes.any),
+  items: PropTypes.arrayOf(PropTypes.shape({})),
 
   /** The label for the select element. */
   label: PropTypes.node,

package/lib/components/Tab/Tab.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"];
+var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTab } from '@react-aria/tabs';
@@ -38,6 +38,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
       titleAttr = itemProps.titleAttr,
+      title = itemProps.title,
       otherItemProps = _objectWithoutProperties(itemProps, _excluded);
 
   var state = useContext(TabsContext);
@@ -113,9 +114,19 @@ CollectionTab.propTypes = {
   isDisabled: PropTypes.bool,
   item: PropTypes.shape({
     key: PropTypes.string,
-    props: PropTypes.shape({}),
-    rendered: PropTypes.node,
-    tabLineProps: PropTypes.shape({})
+    props: PropTypes.shape({
+      icon: PropTypes.shape({}),
+      isDisabled: PropTypes.bool,
+      textValue: PropTypes.string,
+      tabLineProps: PropTypes.shape({}),
+      tabLabelProps: PropTypes.shape({}),
+      content: PropTypes.shape({}),
+      titleAttr: PropTypes.string,
+      title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.object]),
+      separator: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+      list: PropTypes.arrayOf(PropTypes.shape({}))
+    }),
+    rendered: PropTypes.node
   }),
   mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),

package/lib/components/TabPicker/TabPicker.js

@@ -207,10 +207,10 @@ TabPicker.propTypes = {
   state: PropTypes.shape({
     collection: PropTypes.shape({}),
     selectedKey: PropTypes.string,
-    setSelectedKey: PropTypes["function"],
+    setSelectedKey: PropTypes.func,
     selectionManager: PropTypes.shape({
       focusedKey: PropTypes.string,
-      setFocusedKey: PropTypes["function"]
+      setFocusedKey: PropTypes.func
     })
   })
 };

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -6,7 +6,7 @@ test('default useOverlayPanelState', function () {
   }),
       result = _renderHook.result;
 
-  expect(result.current).toEqual(expect.objectContaining({
+  var obj = {
     state: {
       open: expect.any(Function),
       close: expect.any(Function),
@@ -14,5 +14,6 @@ test('default useOverlayPanelState', function () {
       isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function)
-  }));
+  };
+  expect(result.current).toEqual(obj);
 });

package/lib/hooks/useSelectField/useSelectField.js

@@ -103,7 +103,15 @@ var useSelectField = function useSelectField(props, ref) {
       labelProps = _useSelect.labelProps,
       triggerProps = _useSelect.triggerProps,
       valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps;
+      menuProps = _useSelect.menuProps; // The following props are being passed into multiple
+  // DOM elements that leads to multiple test failures
+  // and these props are never used in any components
+  // that depend on useSelectField
+
+
+  delete menuProps.shouldSelectOnPressUp;
+  delete menuProps.shouldFocusOnHover;
+  delete menuProps.disallowEmptySelection;
 
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
     placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,

package/lib/recipes/CountryPicker.stories.js

@@ -17,6 +17,27 @@ var validatePhoneNumber = function validatePhoneNumber(str) {
   return reg.test(str);
 };
 
+var sx = {
+  wrapperBox: {
+    width: '100%',
+    maxWidth: 500,
+    position: 'relative'
+  },
+  comboBoxFieldWrapperOpen: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '100%'
+  },
+  comboBoxFieldWrapperClose: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '110px'
+  },
+  inputWrapper: {
+    width: '100%',
+    marginLeft: '110px'
+  }
+};
 export var Default = function Default() {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -84,22 +105,14 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
+    sx: sx.wrapperBox
   }, ___EmotionJSX(ComboBoxField, {
     mt: -5,
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
     wrapperProps: {
-      sx: {
-        position: 'absolute',
-        transition: '0.2s width ease',
-        width: isOpen ? '100%' : 110
-      }
+      sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
       'aria-label': 'Country Picker'
@@ -118,8 +131,7 @@ export var Default = function Default() {
       key: item[0]
     }, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
   }), ___EmotionJSX(Box, {
-    width: "100%",
-    ml: 110
+    sx: sx.inputWrapper
   }, ___EmotionJSX(Input, {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,