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

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, {

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,

package/lib/recipes/EditableInput.stories.js

@@ -37,6 +37,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'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Editable, {
     value: "Some value..."
@@ -90,6 +132,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'
+    }
+  };
   useEffect(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -116,8 +165,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);
     },
@@ -125,32 +174,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);
 };
 /**
@@ -219,10 +243,7 @@ var EditableInput = function EditableInput(props) {
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, ___EmotionJSX(TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -233,9 +254,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -286,22 +305,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
   }, ___EmotionJSX(IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, ___EmotionJSX(Icon, {
     icon: CheckIcon
   })), ___EmotionJSX(IconButton, {

package/lib/recipes/PageHeader.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Box, Button, IconButton, Icon, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Page Header'
+};
+export 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 ___EmotionJSX(Box, null, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description)), ___EmotionJSX(Box, {
+    mt: "xl"
+  }, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13
+  }))), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description)));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.0",
+  "version": "1.27.0-alpha.2",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -137,7 +137,7 @@
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",