@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -24,10 +24,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
+var _focus = require("@react-aria/focus");
+
 var _index = require("../../index");
 
 var _hooks = require("../../hooks");
@@ -60,12 +62,12 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
@@ -85,7 +87,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       pressProps = _usePress.pressProps,
       isPressed = _usePress.isPressed;
 
-  var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
+  var mergedProps = (0, _utils.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -98,7 +100,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
-    variant: "navBar.item",
+    variant: "navBar.navItem",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -122,7 +124,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "variants.navBar.headerText"
+    variant: "navBarHeaderText"
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -52,7 +52,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       key: "text".concat(subTitle),
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
-      variant: "variants.navBar.subtitle"
+      variant: "text.navBarSubtitle"
     }, subTitle));
   };
 

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -70,7 +70,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: "navItemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -88,7 +88,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "variants.navBar.headerText"
+    variant: "navBarHeaderText"
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -69,7 +69,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: "buttons.navItemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -70,7 +70,7 @@ var NavBarSection = function NavBarSection(_ref) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
   }), title && (0, _react2.jsx)(_.Text, {
-    variant: "variants.navBar.subtitle",
+    variant: "text.navBarSubtitle",
     mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
@@ -170,7 +170,7 @@ var SectionItem = function SectionItem(_ref2) {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     ref: headerButtonRef,
-    variant: "variants.navBar.sectionButton",
+    variant: "navBarSectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }

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

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

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

@@ -36,8 +36,6 @@ 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"));
@@ -62,7 +60,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -135,7 +133,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

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

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

@@ -22,7 +22,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
 
@@ -147,7 +147,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.innerPanel" // applies higher z-index
+    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {
@@ -209,7 +209,7 @@ var InnerPanel = function InnerPanel(_ref2) {
         zIndex: 11
       },
       onClose: toggleMessagesOpen
-    }, (0, _react2.jsx)(_reactStately.Item, {
+    }, (0, _react2.jsx)(_collections.Item, {
       key: "message2",
       status: "success"
     }, "Z Index higher than inner pannel")))
@@ -381,10 +381,10 @@ var Expandable = function Expandable() {
     sx: sx.header.breadcrumbsContainer
   }, (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_collections.Item, {
     key: "home",
     "data-id": "home"
-  }, "Capability"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Capability"), (0, _react2.jsx)(_collections.Item, {
     key: "editGroups",
     variant: "neutralText",
     "data-id": "editGroups"
@@ -424,7 +424,7 @@ var Expandable = function Expandable() {
       hintText: 'Example Hint'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);

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

@@ -46,13 +46,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
 
-var _reactAria = require("react-aria");
+var _overlays = require("@react-aria/overlays");
 
 var _utils = require("@react-aria/utils");
 
@@ -60,8 +60,6 @@ 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"));
@@ -107,11 +105,10 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, others)),
       fieldContainerProps = _hooks$useField.fieldContainerProps,
-      fieldControlInputProps = _hooks$useField.fieldControlInputProps,
-      fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
+      fieldControlProps = _hooks$useField.fieldControlProps,
       fieldLabelProps = _hooks$useField.fieldLabelProps;
 
-  var isFocused = fieldControlInputProps.isFocused;
+  var isFocused = fieldControlProps.isFocused;
   var inputRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
@@ -144,7 +141,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
     isOpen: true,
     overlayRef: popoverRef,
     placement: 'bottom end',
@@ -167,7 +164,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     width: menuWidth
   }, overlayProps.style);
 
-  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
+  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlProps.className, {
     'is-success': status === _statuses["default"].SUCCESS || checkRequirements() && requirements.length > 0
   }),
       classNames = _hooks$useStatusClass.classNames;
@@ -189,15 +186,14 @@ 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.fieldContainer"
-  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.input.fieldControlWrapper",
-    isRow: true
-  }, fieldControlWrapperProps, {
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
+    variant: "forms.input.container",
+    isRow: true,
     className: classNames
-  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: inputRef
-  }, fieldControlInputProps, {
+  }, fieldControlProps, {
     type: isVisible ? 'text' : 'password',
     sx: {
       pr: '43px'
@@ -207,7 +203,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.input.containedIcon"
   }, (0, _react2.jsx)(_.IconButton, {
     "aria-label": toggleShowPasswordAriaLabel,
-    isDisabled: fieldControlInputProps.disabled,
+    isDisabled: fieldControlProps.disabled,
     onPress: handleToggleShowPassword,
     size: 28
   }, (0, _react2.jsx)(_.Icon, {
@@ -227,7 +223,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = _objectSpread(_objectSpread({
+PasswordField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -309,6 +305,15 @@ PasswordField.propTypes = _objectSpread(_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,
 
@@ -320,7 +325,7 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
     name: _propTypes["default"].string.isRequired,
     status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error'])
   }))
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -42,8 +42,6 @@ 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");
@@ -66,7 +64,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     status: {
       control: {
         type: 'select',
@@ -79,7 +77,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

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

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

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