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

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

@@ -207,26 +207,26 @@ 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 (0, _concat["default"])(_context = []).call(_context, oldValues, [defaultEmptyField]);
     });
-  }
+  };
 
-  function handleOnDelete(fieldId) {
+  var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
       return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
         var id = _ref2.id;
         return id !== fieldId;
       });
     });
-  }
+  };
 
   return (0, _react2.jsx)(_index.ArrayField, {
     value: fieldValues,

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -230,7 +230,10 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "boxes.fileInputFieldWrapper"
   }, (0, _utils.mergeProps)(fieldContainerProps, others), {
     className: classNames
-  }, getRootProps()), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }, getRootProps(), {
+    // to pass accessibility test, this removes focusable dependents
+    role: "none"
+  }), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -294,8 +297,8 @@ FileInputField.propTypes = {
    * */
   fileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.required,
-    name: _propTypes["default"].string.required,
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),
@@ -303,8 +306,8 @@ FileInputField.propTypes = {
   /** Default array of objects for uploaded files. */
   defaultFileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.required,
-    name: _propTypes["default"].string.required,
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -168,7 +168,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["default"].arrayOf(_propTypes["default"].any),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
 
   /** The label for the select element. */
   label: _propTypes["default"].node,

package/lib/cjs/components/ListBox/Option.js

@@ -124,7 +124,10 @@ Option.propTypes = {
   hasVirtualFocus: _propTypes["default"].bool,
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({}),
+    props: _propTypes["default"].shape({
+      'data-id': _propTypes["default"].string,
+      isSeparator: _propTypes["default"].bool
+    }),
     rendered: _propTypes["default"].node
   }),
   state: _propTypes["default"].shape({

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -174,7 +174,8 @@ MenuItem.propTypes = {
     key: _propTypes["default"].string,
     props: _propTypes["default"].shape({
       'data-id': _propTypes["default"].string,
-      isSeparator: _propTypes["default"].bool
+      isSeparator: _propTypes["default"].bool,
+      isPressed: _propTypes["default"].bool
     }),
     rendered: _propTypes["default"].node,
     isDisabled: _propTypes["default"].bool

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

@@ -184,7 +184,8 @@ Message.propTypes = {
       icon: _propTypes["default"].elementType,
 
       /* Hides the message with an animated transition */
-      isHidden: _propTypes["default"].bool
+      isHidden: _propTypes["default"].bool,
+      'data-id': _propTypes["default"].string
     })
   }),
 

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -38,11 +38,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * 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.
+ */
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

package/lib/cjs/components/SelectField/SelectField.js

@@ -104,7 +104,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["default"].arrayOf(_propTypes["default"].any),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
 
   /** The label for the select element. */
   label: _propTypes["default"].node,

package/lib/cjs/components/Tab/Tab.js

@@ -46,7 +46,7 @@ var _ = require("../..");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"];
+var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
 
 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); }
 
@@ -74,6 +74,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
       titleAttr = itemProps.titleAttr,
+      title = itemProps.title,
       otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
   var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
@@ -149,9 +150,19 @@ CollectionTab.propTypes = {
   isDisabled: _propTypes["default"].bool,
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({}),
-    rendered: _propTypes["default"].node,
-    tabLineProps: _propTypes["default"].shape({})
+    props: _propTypes["default"].shape({
+      icon: _propTypes["default"].shape({}),
+      isDisabled: _propTypes["default"].bool,
+      textValue: _propTypes["default"].string,
+      tabLineProps: _propTypes["default"].shape({}),
+      tabLabelProps: _propTypes["default"].shape({}),
+      content: _propTypes["default"].shape({}),
+      titleAttr: _propTypes["default"].string,
+      title: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].object]),
+      separator: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].bool]),
+      list: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
+    }),
+    rendered: _propTypes["default"].node
   }),
   mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),

package/lib/cjs/components/TabPicker/TabPicker.js

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

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

@@ -12,7 +12,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),
@@ -20,5 +20,6 @@ test('default useOverlayPanelState', function () {
       isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function)
-  }));
+  };
+  expect(result.current).toEqual(obj);
 });

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -143,7 +143,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 = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
     placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,

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

@@ -50,6 +50,28 @@ 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'
+  }
+};
+
 var Default = function Default() {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -117,22 +139,14 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
+    sx: sx.wrapperBox
   }, (0, _react2.jsx)(_ComboBoxField["default"], {
     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'
@@ -151,8 +165,7 @@ var Default = function Default() {
       key: item[0]
     }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
   }), (0, _react2.jsx)(_Box["default"], {
-    width: "100%",
-    ml: 110
+    sx: sx.inputWrapper
   }, (0, _react2.jsx)(_Input["default"], {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,

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

@@ -70,6 +70,48 @@ var inputProps = {
   label: 'Example label',
   ariaLabel: 'Example aria label'
 };
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
@@ -127,6 +169,13 @@ var EditablePreview = function EditablePreview() {
       hasFocus = _useState4[0],
       setFocus = _useState4[1];
 
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
   (0, _react.useEffect)(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -153,8 +202,8 @@ var EditablePreview = function EditablePreview() {
     "aria-hidden": editableContext.isEditing,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    "aria-readonly": "false",
     "aria-label": "Inline editable text field",
+    role: "textbox",
     onFocus: function onFocus() {
       return setFocus(true);
     },
@@ -162,32 +211,7 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
-    sx: {
-      whiteSpace: 'pre-line',
-      backgroundColor: hasFocus ? 'accent.95' : 'white',
-      width: '100%',
-      overflowWrap: 'break-word',
-      minHeight: '45px',
-      paddingLeft: 'xs',
-      justifyContent: 'flex-end',
-      paddingBottom: 'xs',
-      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
-      borderBottomColor: 'active',
-      color: 'neutral.10',
-      fontSize: 'md',
-      fontWeight: 1,
-      lineHeight: '18px',
-      '&:hover': {
-        background: editableContext.isEditing ? 'white' : 'accent.95'
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'focus',
-        borderColor: 'active',
-        borderWidth: '1px',
-        borderStyle: 'solid'
-      }
-    }
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
 /**
@@ -256,10 +280,7 @@ var EditableInput = function EditableInput(props) {
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, (0, _react2.jsx)(_index.TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -270,9 +291,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -323,22 +342,12 @@ var EditableControl = function EditableControl(props) {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
     isRow: true,
-    sx: {
-      position: 'absolute',
-      right: '0',
-      top: '27.5%',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
+    sx: sx.editableControlWrapper
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CheckIcon["default"]
   })), (0, _react2.jsx)(_index.IconButton, {