@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.button = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+var _Badge = require("../Badge/Badge.styles");
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var container = {
+  p: 'sm'
+};
+
+var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+var button = {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+};
+exports.button = button;
+
+var inline = _objectSpread(_objectSpread({}, _Buttons.text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
+var content = {
+  maxWidth: '10em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
+};
+var _default = {
+  container: container,
+  badge: badge,
+  button: button,
+  inline: inline,
+  content: content
+};
+exports["default"] = _default;

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -28,13 +28,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _interactions = require("@react-aria/interactions");
-
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
-var _tooltip = require("@react-aria/tooltip");
+var _reactStately = require("react-stately");
 
-var _tooltip2 = require("@react-stately/tooltip");
+var _interactions = require("@react-aria/interactions");
 
 var _hooks = require("../../hooks");
 
@@ -77,7 +75,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       trigger = _React$Children$toArr2[0],
       tooltip = _React$Children$toArr2[1];
 
-  var state = (0, _tooltip2.useTooltipTriggerState)(props);
+  var state = (0, _reactStately.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
   var tooltipRef = targetRef || tooltipTriggerRef;
@@ -88,14 +86,14 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tooltipRef.current;
   });
 
-  var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
+  var _useTooltipTrigger = (0, _reactAria.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
   }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
     targetRef: tooltipRef,
     overlayRef: overlayRef,

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.ChipWithTooltip = void 0;
+exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.BadgeWithTooltip = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -107,7 +107,7 @@ var IconWithTooltip = function IconWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
-    variant: "tooltipIconButton"
+    variant: "tooltip.button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"]
   })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
@@ -115,11 +115,11 @@ var IconWithTooltip = function IconWithTooltip() {
 
 exports.IconWithTooltip = IconWithTooltip;
 
-var ChipWithTooltip = function ChipWithTooltip() {
+var BadgeWithTooltip = function BadgeWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "tooltipChip",
+    variant: "variants.tooltip.badge",
     bg: "neutral.10"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
@@ -130,13 +130,13 @@ var ChipWithTooltip = function ChipWithTooltip() {
   }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 
-exports.ChipWithTooltip = ChipWithTooltip;
+exports.BadgeWithTooltip = BadgeWithTooltip;
 
 var TextWithTooltip = function TextWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "tooltipInline"
+    variant: "variants.tooltip.inline"
   }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 

package/lib/cjs/hooks/useField/useField.js

@@ -36,14 +36,10 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _noop = _interopRequireDefault(require("lodash/noop"));
 
-var _label = require("@react-aria/label");
+var _reactAria = require("react-aria");
 
 var _interactions = require("@react-aria/interactions");
 
-var _focus = require("@react-aria/focus");
-
-var _utils = require("@react-aria/utils");
-
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -52,7 +48,7 @@ var _hooks = require("../../hooks");
 
 var _constants = require("../../components/Label/constants");
 
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 
 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; }
 
@@ -114,6 +110,7 @@ var useField = function useField() {
       statusClasses = props.statusClasses,
       type = props.type,
       value = props.value,
+      wrapperProps = props.wrapperProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded); // 0 could be a valid input for fields, but null, undefined, and '' are not
 
   var _useState = (0, _react.useState)(!!value || value === 0),
@@ -154,21 +151,42 @@ var useField = function useField() {
     return onChange(e);
   };
 
-  var _useLabel = (0, _label.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
+  var _useLabel = (0, _reactAria.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
       raLabelProps = _useLabel.labelProps,
       raFieldProps = _useLabel.fieldProps;
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread((0, _defineProperty2["default"])({
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    'field-control__wrapper': true,
+    // generates 'field-control__wrapper' class
+    hasNoStatusIndicator: hasNoStatusIndicator,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, "is-".concat(status), true), statusClasses), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.statusClasses)),
+      wrapperClasses = _useStatusClasses.classNames;
+
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    'field-control__input': true,
+    // generates 'field-control__input' class
     hasNoStatusIndicator: hasNoStatusIndicator,
     isFocused: isFocusVisible,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses)),
-      classNames = _useStatusClasses.classNames;
+  }, "is-".concat(status), true), statusClasses), controlProps === null || controlProps === void 0 ? void 0 : controlProps.statusClasses)),
+      inputClasses = _useStatusClasses2.classNames;
+
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    'field-label': true,
+    hasNoStatusIndicator: hasNoStatusIndicator,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, "is-".concat(status), true), statusClasses), labelProps === null || labelProps === void 0 ? void 0 : labelProps.statusClasses)),
+      labelClasses = _useStatusClasses3.classNames;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -184,7 +202,7 @@ var useField = function useField() {
   var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
-  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
     'field-container': true,
     // generates 'field-container' class
     hasValue: hasValue,
@@ -192,21 +210,21 @@ var useField = function useField() {
     isLeftLabel: isLeftLabel,
     isFloatLabel: isFloatLabel,
     isFloatLabelActive: isFloatLabelActive
-  }),
-      containerClasses = _useStatusClasses2.classNames;
+  }, statusClasses), containerProps === null || containerProps === void 0 ? void 0 : containerProps.statusClasses)),
+      containerClasses = _useStatusClasses4.classNames;
 
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _reactAria.mergeProps)(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'
     }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
   });
 
-  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
+  var fieldControlInputProps = _objectSpread(_objectSpread(_objectSpread({
     autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
-    className: classNames,
+    className: inputClasses,
     defaultSelected: isDefaultSelected,
     defaultValue: defaultValue,
     disabled: isDisabled,
@@ -223,22 +241,27 @@ var useField = function useField() {
     spellCheck: spellCheck,
     type: type,
     value: value
-  }, ariaProps), raFieldProps), (0, _utils.mergeProps)({
+  }, ariaProps), raFieldProps), (0, _reactAria.mergeProps)({
     onBlur: onBlur,
     onFocus: onFocus
   }, (0, _omit["default"])(controlProps, 'data-testid'), focusProps));
 
   var fieldLabelProps = _objectSpread(_objectSpread({
     children: label,
-    className: classNames,
+    className: labelClasses,
     hintText: hintText,
     isRequired: isRequired,
     mode: labelMode
   }, raLabelProps), labelProps);
 
+  var fieldControlWrapperProps = _objectSpread({
+    className: wrapperClasses
+  }, wrapperProps);
+
   return {
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps
   };
 };

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

@@ -38,10 +38,16 @@ var defaultProps = {
   autoComplete: 'off',
   className: 'test',
   containerProps: {
-    id: 'test'
+    id: 'test',
+    statusClasses: {
+      isContainer: true
+    }
   },
   controlProps: {
-    id: 'test'
+    id: 'test',
+    statusClasses: {
+      isControlInput: true
+    }
   },
   defaultValue: 'test',
   hasAutoFocus: true,
@@ -52,6 +58,11 @@ var defaultProps = {
   isRequired: true,
   isSelected: true,
   label: 'test',
+  labelProps: {
+    statusClasses: {
+      isFieldLabel: true
+    }
+  },
   name: 'test',
   placeholder: 'test',
   role: 'test',
@@ -59,7 +70,13 @@ var defaultProps = {
     isTested: true
   },
   type: 'test',
-  value: 'test'
+  value: 'test',
+  wrapperProps: {
+    id: 'test',
+    statusClasses: {
+      isControlWrapper: true
+    }
+  }
 };
 test('default useField', function () {
   (0, _reactHooks.renderHook)(function () {
@@ -76,26 +93,32 @@ test('should return props objects for field components', function () {
 
   var _result$current = result.current,
       fieldContainerProps = _result$current.fieldContainerProps,
-      fieldControlProps = _result$current.fieldControlProps,
+      fieldControlInputProps = _result$current.fieldControlInputProps,
+      fieldControlWrapperProps = _result$current.fieldControlWrapperProps,
       fieldLabelProps = _result$current.fieldLabelProps;
   expect(fieldContainerProps).toEqual({
-    className: 'field-container has-value',
+    className: 'field-container has-value is-tested is-container',
     id: defaultProps.containerProps.id,
     onBlur: expect.any(Function),
     onFocus: expect.any(Function),
     sx: expect.objectContaining({
       position: 'relative'
-    })
+    }),
+    statusClasses: {
+      isContainer: true
+    }
   });
-  expect(fieldControlProps).toEqual({
+  expect(fieldControlInputProps).toEqual({
     autoComplete: defaultProps.autoComplete,
+    autoCorrect: undefined,
     autoFocus: defaultProps.hasAutoFocus,
-    className: (0, _concat["default"])(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, _statuses["default"].DEFAULT, " is-tested"),
+    className: (0, _concat["default"])(_context = "".concat(defaultProps.className, " field-control-input is-disabled is-read-only is-")).call(_context, _statuses["default"].DEFAULT, " is-tested is-control-input"),
     defaultSelected: true,
     defaultValue: defaultProps.defaultValue,
     disabled: true,
     id: defaultProps.id,
     isFocused: false,
+    maxLength: undefined,
     readOnly: true,
     required: true,
     onBlur: expect.any(Function),
@@ -104,6 +127,10 @@ test('should return props objects for field components', function () {
     name: defaultProps.name,
     placeholder: defaultProps.placeholder,
     role: defaultProps.role,
+    spellCheck: undefined,
+    statusClasses: {
+      isControlInput: true
+    },
     type: defaultProps.type,
     value: defaultProps.value,
     'aria-label': undefined,
@@ -111,10 +138,22 @@ test('should return props objects for field components', function () {
   });
   expect(fieldLabelProps).toEqual({
     children: defaultProps.label,
-    className: (0, _concat["default"])(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, _statuses["default"].DEFAULT, " is-tested"),
+    className: (0, _concat["default"])(_context2 = "".concat(defaultProps.className, " field-label is-disabled is-read-only is-")).call(_context2, _statuses["default"].DEFAULT, " is-tested is-field-label"),
+    hintText: undefined,
     id: expect.any(String),
     htmlFor: expect.any(String),
-    isRequired: true
+    isRequired: true,
+    mode: undefined,
+    statusClasses: {
+      isFieldLabel: true
+    }
+  });
+  expect(fieldControlWrapperProps).toEqual({
+    className: "".concat(defaultProps.className, " field-control-wrapper is-disabled is-read-only is-default is-tested is-control-wrapper"),
+    id: expect.any(String),
+    statusClasses: {
+      isControlWrapper: true
+    }
   });
 });
 test('should support autocomplete additionally', function () {
@@ -129,8 +168,8 @@ test('should support autocomplete additionally', function () {
   }),
       result = _renderHook2.result;
 
-  var fieldControlProps = result.current.fieldControlProps;
-  expect(fieldControlProps).toMatchObject({
+  var fieldControlInputProps = result.current.fieldControlInputProps;
+  expect(fieldControlInputProps).toMatchObject({
     autoComplete: 'new-password'
   });
 });
@@ -154,7 +193,7 @@ test('should return isFloatLabelActive class for container', function () {
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the value is invalid
 
   (0, _reactHooks.act)(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: undefined
       }
@@ -219,7 +258,7 @@ test('should return hasValue class for container when onChange updates internal
   expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value
 
   (0, _reactHooks.act)(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: 0
       }
@@ -229,7 +268,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // undefined is not a valid value
 
   (0, _reactHooks.act)(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: undefined
       }
@@ -239,7 +278,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // a non-empty string is a valid value
 
   (0, _reactHooks.act)(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: 'a'
       }

package/lib/cjs/hooks/useModalState/useModalState.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _overlays = require("@react-stately/overlays");
+var _reactStately = require("react-stately");
 
 /**
  * Returns state-related data and functions for use with a Modal component.
@@ -24,7 +24,7 @@ var useModalState = function useModalState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  return (0, _overlays.useOverlayTriggerState)({
+  return (0, _reactStately.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _overlays = require("@react-stately/overlays");
+var _reactStately = require("react-stately");
 
 /**
  * Returns state-related data and functions for use with a Modal component.
@@ -24,7 +24,7 @@ var useOverlayPanelState = function useOverlayPanelState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  var state = (0, _overlays.useOverlayTriggerState)({
+  var state = (0, _reactStately.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange

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

@@ -17,7 +17,8 @@ test('default useOverlayPanelState', function () {
       open: expect.any(Function),
       close: expect.any(Function),
       toggle: expect.any(Function),
-      isOpen: expect.any(Boolean)
+      isOpen: expect.any(Boolean),
+      setOpen: expect.any(Function)
     },
     onClose: expect.any(Function)
   };

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

@@ -38,16 +38,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _focus = require("@react-aria/focus");
+var _reactAria = require("react-aria");
 
-var _overlays = require("@react-aria/overlays");
-
-var _select = require("@react-aria/select");
+var _reactStately = require("react-stately");
 
 var _utils = require("@react-aria/utils");
 
-var _select2 = require("@react-stately/select");
-
 var _ = require("..");
 
 var _ListBox = _interopRequireDefault(require("../../components/ListBox"));
@@ -126,7 +122,7 @@ var useSelectField = function useSelectField(props, ref) {
   }, controlProps); // Create state based on the incoming props
 
 
-  var state = (0, _select2.useSelectState)(selectProps);
+  var state = (0, _reactStately.useSelectState)(selectProps);
   var popoverRef = (0, _react.useRef)();
   var triggerRef = (0, _react.useRef)();
   var listBoxRef = (0, _react.useRef)();
@@ -139,7 +135,7 @@ var useSelectField = function useSelectField(props, ref) {
     isActive: !!defaultText
   }); // Get props for child elements from useSelect
 
-  var _useSelect = (0, _select.useSelect)(selectProps, state, triggerRef),
+  var _useSelect = (0, _reactAria.useSelect)(selectProps, state, triggerRef),
       labelProps = _useSelect.labelProps,
       triggerProps = _useSelect.triggerProps,
       valueProps = _useSelect.valueProps,
@@ -161,10 +157,11 @@ var useSelectField = function useSelectField(props, ref) {
     }, props.containerProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: triggerRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
@@ -220,9 +217,9 @@ var useSelectField = function useSelectField(props, ref) {
   // <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
 
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, {
+  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  }, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }
@@ -234,7 +231,7 @@ var useSelectField = function useSelectField(props, ref) {
     variant: "listBox.selectField",
     isLoading: isLoadingMore,
     onLoadMore: onLoadMore
-  }, menuProps)), (0, _react2.jsx)(_overlays.DismissButton, {
+  }, menuProps)), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }
@@ -252,7 +249,8 @@ var useSelectField = function useSelectField(props, ref) {
   return {
     columnStyleProps: columnStyleProps,
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps,
     isLoadingInitial: isLoadingInitial,
     listBoxRef: listBoxRef,