@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/cjs/components/NumberField/NumberField.js

@@ -38,21 +38,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
-var _numberfield = require("@react-aria/numberfield");
-
-var _numberfield2 = require("@react-stately/numberfield");
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _i18n = require("@react-aria/i18n");
+var _reactAria = require("react-aria");
 
-var _utils = require("@react-aria/utils");
+var _reactStately = require("react-stately");
 
-var _omit = _interopRequireDefault(require("lodash/omit"));
+var _i18n = require("@react-aria/i18n");
 
 var _uuid = require("uuid");
 
@@ -60,6 +58,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -89,7 +89,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useLocale = (0, _i18n.useLocale)(),
       locale = _useLocale.locale;
 
-  var state = (0, _numberfield2.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
 
@@ -99,7 +99,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var decRef = _react["default"].useRef();
 
-  var _useNumberField = (0, _numberfield.useNumberField)(props, state, inputRef),
+  var _useNumberField = (0, _reactAria.useNumberField)(props, state, inputRef),
       labelProps = _useNumberField.labelProps,
       groupProps = _useNumberField.groupProps,
       inputProps = _useNumberField.inputProps,
@@ -108,7 +108,8 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useField = (0, _hooks.useField)(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -118,7 +119,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return inputRef.current;
   });
   var ControlArrows = (0, _react2.jsx)(_.Box, {
-    variant: "numberField.arrows"
+    variant: "forms.numberField.arrows"
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "-1",
@@ -138,20 +139,20 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onInputFocus = (0, _react.useCallback)(function (e) {
     e.persist();
-    fieldControlProps.onFocus(e);
+    fieldControlInputProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlProps, inputProps]);
+  }, [fieldControlInputProps, inputProps]);
   var onInputBlur = (0, _react.useCallback)(function (e) {
     e.persist();
-    fieldControlProps.onBlur(e);
+    fieldControlInputProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlProps, inputProps]);
-  var updatedFieldControlProps = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+  }, [fieldControlInputProps, inputProps]);
+  var updatedFieldControlInputProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
       onFocus: onInputFocus,
       onBlur: onInputBlur
     });
-  }, [fieldControlProps, onInputBlur, onInputFocus]);
+  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
 
   var onInputChange = function onInputChange(e) {
     var _context;
@@ -179,18 +180,19 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
-  var helperTextId = (0, _uuid.v4)();
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "numberField.noDefaultArrows"
-  }, groupProps), (0, _react2.jsx)(_.Box, {
-    variant: "numberField.arrowsWrapper",
-    className: fieldControlProps.className
-  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  var helperTextId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.numberField.noDefaultArrows"
+  }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.numberField.arrowsWrapper"
+  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     variant: "forms.input.numberField",
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
+  }, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
@@ -201,7 +203,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 var _default = NumberField;
 exports["default"] = _default;
-NumberField.propTypes = _objectSpread({
+NumberField.propTypes = _objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: _propTypes["default"].string,
@@ -286,4 +288,4 @@ NumberField.propTypes = _objectSpread({
 
   /** The current value (controlled). */
   value: _propTypes["default"].number
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);

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

@@ -36,6 +36,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _NumberField = _interopRequireDefault(require("./NumberField"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -60,7 +62,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -133,7 +135,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/{styles/variants/numberField.js → components/NumberField/NumberField.styles.js}

@@ -26,7 +26,11 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _input = require("../forms/input");
+var _Input = require("../Input/Input.styles");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _objectSpread2;
 
 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; }
 
@@ -44,11 +48,17 @@ var noDefaultArrows = {
   }
 };
 
-var arrowsWrapper = _objectSpread({
+var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
-}, _input.input.container);
+}, _Input.input.fieldControlWrapper), {}, (_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
+  bg: 'critical.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 
 var arrows = {
   position: 'absolute',

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -28,7 +28,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _focus = require("@react-aria/focus");
+var _reactAria = require("react-aria");
 
 var _ = require("../../");
 
@@ -86,16 +86,16 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  return (0, _react2.jsx)(_focus.FocusScope, {
+  return (0, _react2.jsx)(_reactAria.FocusScope, {
     autoFocus: true
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanel",
+    variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), (0, _react2.jsx)(_.Box, {
-    variant: "overlayPanel.overlayPanelBody",
+    variant: "overlayPanel.body",
     className: classNames
   }, children)));
 });

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

@@ -22,8 +22,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _collections = require("@react-stately/collections");
-
 var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
 
 var _ArrowCollapseIcon = _interopRequireDefault(require("mdi-react/ArrowCollapseIcon"));
@@ -147,7 +145,7 @@ var InnerPanel = function InnerPanel(_ref2) {
   };
 
   var inner = (0, _react2.jsx)(_react["default"].Fragment, null, innerState.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
+    variant: "overlayPanel.innerPanel" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {
@@ -158,6 +156,13 @@ var InnerPanel = function InnerPanel(_ref2) {
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
   }, "Children render here."))));
+  var items = [{
+    id: 1,
+    name: 'Form 1'
+  }, {
+    id: 2,
+    name: 'Form 2'
+  }];
   var outer = // should have higher z-index applied
   (0, _react2.jsx)(_react["default"].Fragment, null, state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
     isOpen: state.isOpen,
@@ -177,21 +182,17 @@ var InnerPanel = function InnerPanel(_ref2) {
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
     mb: "24px"
-  }, "Children render here."), (0, _react2.jsx)(_index.List, null, (0, _react2.jsx)(_index.ListItem, null, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 1")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 2"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 2")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+  }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.id
+    }, (0, _react2.jsx)(_index.Text, {
+      variant: "itemTitle",
+      alignSelf: "center",
+      mr: "auto"
+    }, item.name));
+  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     ref: innerTriggerRef,
@@ -209,7 +210,7 @@ var InnerPanel = function InnerPanel(_ref2) {
         zIndex: 11
       },
       onClose: toggleMessagesOpen
-    }, (0, _react2.jsx)(_collections.Item, {
+    }, (0, _react2.jsx)(_index.Item, {
       key: "message2",
       status: "success"
     }, "Z Index higher than inner pannel")))
@@ -381,10 +382,10 @@ var Expandable = function Expandable() {
     sx: sx.header.breadcrumbsContainer
   }, (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "home",
     "data-id": "home"
-  }, "Capability"), (0, _react2.jsx)(_collections.Item, {
+  }, "Capability"), (0, _react2.jsx)(_index.Item, {
     key: "editGroups",
     variant: "neutralText",
     "data-id": "editGroups"
@@ -424,7 +425,7 @@ var Expandable = function Expandable() {
       hintText: 'Example Hint'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);

package/lib/cjs/{styles/variants/overlayPanel.js → components/OverlayPanel/OverlayPanel.styles.js}

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports["default"] = void 0;
-var overlayPanel = {
+var container = {
   position: 'fixed',
   overflowY: 'scroll',
   zIndex: 10,
@@ -40,7 +40,7 @@ var overlayPanel = {
     right: 0
   }
 };
-var overlayPanelInner = {
+var innerPanel = {
   position: 'absolute',
   zIndex: 9,
   bottom: 0,
@@ -57,7 +57,7 @@ var overlayPanelInner = {
   p: '25px',
   backgroundColor: 'accent.99'
 };
-var overlayPanelBody = {
+var body = {
   display: 'none',
   height: '100%',
   width: '100%',
@@ -66,8 +66,8 @@ var overlayPanelBody = {
   }
 };
 var _default = {
-  overlayPanel: overlayPanel,
-  overlayPanelBody: overlayPanelBody,
-  overlayPanelInner: overlayPanelInner
+  container: container,
+  body: body,
+  innerPanel: innerPanel
 };
 exports["default"] = _default;

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -46,13 +46,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
 
 var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
 
-var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
 var _utils = require("@react-aria/utils");
 
@@ -60,6 +60,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var hooks = _interopRequireWildcard(require("../../hooks"));
@@ -105,10 +107,11 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, others)),
       fieldContainerProps = _hooks$useField.fieldContainerProps,
-      fieldControlProps = _hooks$useField.fieldControlProps,
+      fieldControlInputProps = _hooks$useField.fieldControlInputProps,
+      fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
       fieldLabelProps = _hooks$useField.fieldLabelProps;
 
-  var isFocused = fieldControlProps.isFocused;
+  var isFocused = fieldControlInputProps.isFocused;
   var inputRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
@@ -141,7 +144,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     isOpen: true,
     overlayRef: popoverRef,
     placement: 'bottom end',
@@ -164,7 +167,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     width: menuWidth
   }, overlayProps.style);
 
-  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlProps.className, {
+  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
     'is-success': status === _statuses["default"].SUCCESS || checkRequirements() && requirements.length > 0
   }),
       classNames = _hooks$useStatusClass.classNames;
@@ -186,14 +189,15 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.input.wrapper"
-  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
-    variant: "forms.input.container",
-    isRow: true,
+    variant: "forms.input.fieldContainer"
+  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.input.fieldControlWrapper",
+    isRow: true
+  }, fieldControlWrapperProps, {
     className: classNames
-  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     type: isVisible ? 'text' : 'password',
     sx: {
       pr: '43px'
@@ -203,7 +207,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.input.containedIcon"
   }, (0, _react2.jsx)(_.IconButton, {
     "aria-label": toggleShowPasswordAriaLabel,
-    isDisabled: fieldControlProps.disabled,
+    isDisabled: fieldControlInputProps.disabled,
     onPress: handleToggleShowPassword,
     size: 28
   }, (0, _react2.jsx)(_.Icon, {
@@ -223,7 +227,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = _objectSpread({
+PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -305,15 +309,6 @@ PasswordField.propTypes = _objectSpread({
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: _propTypes["default"].string,
 
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({}),
-
   /** @ignore Prop that allows testing of the icon button. */
   viewHiddenIconTestId: _propTypes["default"].string,
 
@@ -325,7 +320,7 @@ PasswordField.propTypes = _objectSpread({
     name: _propTypes["default"].string.isRequired,
     status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error'])
   }))
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -42,6 +42,8 @@ var _ = _interopRequireDefault(require("."));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -64,7 +66,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     status: {
       control: {
         type: 'select',
@@ -77,7 +79,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/components/PopoverContainer/PopoverContainer.js

@@ -38,9 +38,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _overlays = require("@react-aria/overlays");
-
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
 var _hooks = require("../../hooks");
 
@@ -48,7 +46,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "placement", "arrowProps", "arrowCrossOffset", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction"],
+var _excluded = ["children"],
     _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
     _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 
@@ -65,31 +63,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 */
 var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
-      placement = props.placement,
-      arrowProps = props.arrowProps,
-      arrowCrossOffset = props.arrowCrossOffset,
-      onClose = props.onClose,
-      isNotClosedOnBlur = props.isNotClosedOnBlur,
-      hasNoArrow = props.hasNoArrow,
-      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
-      isNonModal = props.isNonModal,
-      isDismissable = props.isDismissable,
-      width = props.width,
-      direction = props.direction,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(PopoverWrapper, (0, _extends2["default"])({
-    ref: ref,
-    placement: placement,
-    arrowProps: arrowProps,
-    onClose: onClose,
-    isNotClosedOnBlur: isNotClosedOnBlur,
-    isKeyboardDismissDisabled: isKeyboardDismissDisabled,
-    hasNoArrow: hasNoArrow,
-    isNonModal: isNonModal,
-    isDismissable: isDismissable,
-    arrowCrossOffset: arrowCrossOffset,
-    width: width,
-    direction: direction
+  return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(PopoverWrapper, (0, _extends2["default"])({
+    ref: ref
   }, others), children));
 });
 PopoverContainer.propTypes = {
@@ -128,12 +104,12 @@ var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return popoverRef.current;
   });
 
-  var _useOverlay = (0, _overlays.useOverlay)(_objectSpread(_objectSpread({}, props), {}, {
+  var _useOverlay = (0, _reactAria.useOverlay)(_objectSpread(_objectSpread({}, props), {}, {
     shouldCloseOnBlur: !isNotClosedOnBlur
   }), popoverRef),
       overlayProps = _useOverlay.overlayProps;
 
-  var _useModal = (0, _overlays.useModal)({
+  var _useModal = (0, _reactAria.useModal)({
     isDisabled: isNonModal
   }),
       modalProps = _useModal.modalProps;
@@ -143,7 +119,7 @@ var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
-  return (0, _react2.jsx)(_react["default"].Fragment, null, isOpen && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(others, overlayProps, modalProps), {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, isOpen && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(others, overlayProps, modalProps), {
     variant: "popoverMenu.container",
     ref: popoverRef,
     className: classNames,

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -40,16 +40,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _reactStately = require("react-stately");
 
 var _interactions = require("@react-aria/interactions");
 
-var _menu = require("@react-aria/menu");
-
-var _menu2 = require("@react-stately/menu");
-
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
 
 var _MenuContext = require("../../context/MenuContext");
@@ -95,17 +91,17 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       menuTrigger = _React$Children$toArr2[0],
       menu = _React$Children$toArr2[1];
 
-  var state = (0, _menu2.useMenuTriggerState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _reactStately.useMenuTriggerState)(_objectSpread(_objectSpread({}, props), {}, {
     defaultOpen: isDefaultOpen,
     closeOnSelect: !isNotClosedOnSelect,
     shouldFlip: !isNotFlippable
   }));
 
-  var _useMenuTrigger = (0, _menu.useMenuTrigger)({}, state, triggerRef),
+  var _useMenuTrigger = (0, _reactAria.useMenuTrigger)({}, state, triggerRef),
       menuTriggerProps = _useMenuTrigger.menuTriggerProps,
       menuProps = _useMenuTrigger.menuProps;
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: triggerRef,
     overlayRef: menuPopoverRef,
     scrollRef: menuRef,
@@ -128,12 +124,12 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     autoFocus: state.focusStrategy || true
   });
 
-  var contents = (0, _react2.jsx)(_focus.FocusScope, {
+  var contents = (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     contain: isContainFocus
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  }, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
-  }), menu, (0, _react2.jsx)(_overlays.DismissButton, {
+  }), menu, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   }));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_interactions.PressResponder, (0, _extends2["default"])({}, menuTriggerProps, {