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

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -23,15 +23,15 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import Clear from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
-import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
+import Clear from 'mdi-react/CloseIcon';
+import { FocusScope } from '@react-aria/focus';
 import { useFilter } from '@react-aria/i18n';
+import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
-import { Box, Badge, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
+import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { usePropWarning } from '../../hooks';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -347,11 +347,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
 
     if (item) {
-      return ___EmotionJSX(Badge, {
+      return ___EmotionJSX(Chip, {
         key: item.key,
         role: "presentation",
         label: item.name,
-        variant: "readOnlyBadge",
+        variant: "variants.boxes.readOnlyChip",
         bg: "white",
         textProps: {
           sx: {
@@ -365,10 +365,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 
   var multivaluesFieldChip = function multivaluesFieldChip(item) {
-    return ___EmotionJSX(Badge, _extends({
+    return ___EmotionJSX(Chip, _extends({
       key: item.key,
       role: "presentation",
-      variant: "selectedItemBadge",
+      variant: "variants.boxes.selectedItemChip",
       bg: "active",
       label: item.name,
       slots: item.slots
@@ -377,7 +377,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       onPress: function onPress() {
         return deleteItem(item.key);
       },
-      variant: "badge.deleteButton"
+      variant: "buttons.chipDeleteButton"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
       color: "white",
@@ -473,7 +473,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = _objectSpread(_objectSpread({
+MultivaluesField.propTypes = _objectSpread({
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: PropTypes.shape({}),
+
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: isIterableProp,
 
@@ -596,7 +599,7 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread({
 
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -17,13 +17,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import { Box, Item, MultivaluesField, OverlayProvider, Icon } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -70,7 +69,7 @@ export default {
         type: 'text'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
+  }, ariaAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -215,11 +214,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -232,11 +231,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -249,11 +248,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'itemBadgeWithSlot',
+    variant: 'variants.boxes.itemChipWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'buttons.chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -467,10 +467,10 @@ test('default selected keys', function () {
   });
   var listbox = screen.queryByRole('listbox');
   expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  expect(firstBadge).toBeInTheDocument();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
 });
 test('selected keys', function () {
   getComponent({
@@ -478,10 +478,10 @@ test('selected keys', function () {
   });
   var listbox = screen.queryByRole('listbox');
   expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  expect(firstBadge).toBeInTheDocument();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
 });
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
   var _getComponent, container, results;
@@ -512,13 +512,13 @@ test('read only keys', function () {
   });
   var listbox = screen.queryByRole('listbox');
   expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  var deleteButton1 = firstBadge.nextSibling;
-  expect(firstBadge).toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
   expect(deleteButton1).toBeNull();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
-  var deleteButton2 = firstBadge.nextSibling;
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
   expect(deleteButton2).toBeNull();
 });
 test('passing helper text should display it and correct aria attributes on input', function () {

package/lib/components/NavBar/NavBar.stories.js

@@ -112,7 +112,7 @@ var data = [{
   children: [___EmotionJSX(NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
-    variant: "variants.navBar.itemButton",
+    variant: "buttons.navItemButton",
     href: "https://pingidentity.com/"
   }, "Group"), ___EmotionJSX(NavBarItemButton, {
     key: "Dashboard Link Populations",

package/lib/components/NavBarSection/NavBarItem.js

@@ -3,8 +3,9 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["icon", "text", "className", "id", "onPress"];
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-aria/focus';
 import { Box, Icon, Text } from '../../index';
 import { useStatusClasses, useNavBarPress } from '../../hooks';
 import { useNavBarContext } from '../../context/NavBarContext';
@@ -66,7 +67,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
-    variant: "navBar.item",
+    variant: "navBar.navItem",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -90,7 +91,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: color
     }
   }), ___EmotionJSX(Text, {
-    variant: "variants.navBar.headerText"
+    variant: "navBarHeaderText"
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -24,7 +24,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/components/NavBarSection/NavBarItemButton.js

@@ -45,7 +45,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   return ___EmotionJSX(Button, _extends({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: "navItemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined

package/lib/components/NavBarSection/NavBarItemHeader.js

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

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -44,7 +44,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   return ___EmotionJSX(Link, _extends({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: "buttons.navItemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

package/lib/components/NavBarSection/NavBarSection.js

@@ -37,7 +37,7 @@ var NavBarSection = function NavBarSection(_ref) {
   return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"
   }), title && ___EmotionJSX(Text, {
-    variant: "variants.navBar.subtitle",
+    variant: "text.navBarSubtitle",
     mt: hasSeparator ? '0' : undefined
   }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
@@ -141,7 +141,7 @@ var SectionItem = function SectionItem(_ref2) {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({
     ref: headerButtonRef,
-    variant: "variants.navBar.sectionButton",
+    variant: "navBarSectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }

package/lib/components/NumberField/NumberField.js

@@ -16,17 +16,17 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
-import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { mergeProps, useNumberField } from 'react-aria';
-import { useNumberFieldState } from 'react-stately';
+import MenuDown from 'mdi-react/MenuDownIcon';
+import { useNumberField } from '@react-aria/numberfield';
+import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
+import { mergeProps } from '@react-aria/utils';
+import omit from 'lodash/omit';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 /**
@@ -62,8 +62,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useField = useField(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -74,7 +73,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var ControlArrows = ___EmotionJSX(Box, {
-    variant: "forms.numberField.arrows"
+    variant: "numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "-1",
@@ -95,20 +94,20 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onInputFocus = useCallback(function (e) {
     e.persist();
-    fieldControlInputProps.onFocus(e);
+    fieldControlProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlInputProps, inputProps]);
+  }, [fieldControlProps, inputProps]);
   var onInputBlur = useCallback(function (e) {
     e.persist();
-    fieldControlInputProps.onBlur(e);
+    fieldControlProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlInputProps, inputProps]);
-  var updatedFieldControlInputProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
       onFocus: onInputFocus,
       onBlur: onInputBlur
     });
-  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
 
   var onInputChange = function onInputChange(e) {
     var _context;
@@ -137,19 +136,18 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
-  var helperTextId = useMemo(function () {
-    return uuid();
-  }, []);
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
-    variant: "forms.numberField.noDefaultArrows"
-  }, groupProps), ___EmotionJSX(Box, _extends({
-    variant: "forms.numberField.arrowsWrapper"
-  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
+    variant: "numberField.noDefaultArrows"
+  }, groupProps), ___EmotionJSX(Box, {
+    variant: "numberField.arrowsWrapper",
+    className: fieldControlProps.className
+  }, ___EmotionJSX(Input, _extends({
     variant: "forms.input.numberField",
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
+  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
@@ -159,7 +157,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText)));
 });
 export default NumberField;
-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.string,
@@ -244,4 +242,4 @@ NumberField.propTypes = _objectSpread(_objectSpread({
 
   /** The current value (controlled). */
   value: PropTypes.number
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);

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

@@ -15,7 +15,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useState } from 'react';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import NumberField from './NumberField';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -102,7 +101,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -5,7 +5,7 @@ var _excluded = ["children", "isOpen", "onClose", "className", "state", "size",
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { FocusScope } from 'react-aria';
+import { FocusScope } from '@react-aria/focus';
 import { Box } from '../../';
 import { useStatusClasses, useOverlayPanelState } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
@@ -56,13 +56,13 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(FocusScope, {
     autoFocus: true
   }, ___EmotionJSX(Box, _extends({
-    variant: "overlayPanel.container",
+    variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), ___EmotionJSX(Box, {
-    variant: "overlayPanel.body",
+    variant: "overlayPanel.overlayPanelBody",
     className: classNames
   }, children)));
 });

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState, useRef } from 'react';
-import { Item } from 'react-stately';
+import { Item } from '@react-stately/collections';
 import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
@@ -105,7 +105,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
   };
 
   var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
-    variant: "overlayPanel.innerPanel" // applies higher z-index
+    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {

package/lib/components/PasswordField/PasswordField.js

@@ -20,14 +20,13 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useRef, useImperativeHandle, useState, useCallback } from 'react';
-import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import PropTypes from 'prop-types';
-import { useOverlayPosition } from 'react-aria';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import { useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import * as hooks from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -60,11 +59,10 @@ var PasswordField = /*#__PURE__*/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 = useRef();
   var popoverRef = useRef();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
@@ -120,7 +118,7 @@ var PasswordField = /*#__PURE__*/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.SUCCESS || checkRequirements() && requirements.length > 0
   }),
       classNames = _hooks$useStatusClass.classNames;
@@ -142,15 +140,14 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
-    variant: "forms.input.fieldContainer"
-  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
-    variant: "forms.input.fieldControlWrapper",
-    isRow: true
-  }, fieldControlWrapperProps, {
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
+    variant: "forms.input.container",
+    isRow: true,
     className: classNames
-  }), ___EmotionJSX(Input, _extends({
+  }, ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlInputProps, {
+  }, fieldControlProps, {
     type: isVisible ? 'text' : 'password',
     sx: {
       pr: '43px'
@@ -160,7 +157,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.input.containedIcon"
   }, ___EmotionJSX(IconButton, {
     "aria-label": toggleShowPasswordAriaLabel,
-    isDisabled: fieldControlInputProps.disabled,
+    isDisabled: fieldControlProps.disabled,
     onPress: handleToggleShowPassword,
     size: 28
   }, ___EmotionJSX(Icon, {
@@ -180,7 +177,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = _objectSpread(_objectSpread({
+PasswordField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -262,6 +259,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.string,
 
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the input element. */
+  controlProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the label element. */
+  labelProps: PropTypes.shape({}),
+
   /** @ignore Prop that allows testing of the icon button. */
   viewHiddenIconTestId: PropTypes.string,
 
@@ -273,7 +279,7 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
   }))
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -18,7 +18,6 @@ import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import PasswordField from '.';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -31,7 +30,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     status: {
       control: {
         type: 'select',
@@ -44,7 +43,7 @@ export default {
         type: 'text'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PasswordField, _extends({

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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"];
 
@@ -19,7 +19,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, OverlayContainer, useModal, useOverlay } from 'react-aria';
+import { useModal, useOverlay, OverlayContainer } from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 /**
@@ -29,10 +30,32 @@ import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverContainer = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(PopoverWrapper, _extends({
-    ref: ref
+    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 = {