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

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

@@ -28,11 +28,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 
-var _reactStately = require("react-stately");
+var _overlays = require("@react-aria/overlays");
 
-var _interactions = require("@react-aria/interactions");
+var _tooltip = require("@react-aria/tooltip");
+
+var _tooltip2 = require("@react-stately/tooltip");
 
 var _hooks = require("../../hooks");
 
@@ -75,7 +77,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       trigger = _React$Children$toArr2[0],
       tooltip = _React$Children$toArr2[1];
 
-  var state = (0, _reactStately.useTooltipTriggerState)(props);
+  var state = (0, _tooltip2.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
   var tooltipRef = targetRef || tooltipTriggerRef;
@@ -86,14 +88,14 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tooltipRef.current;
   });
 
-  var _useTooltipTrigger = (0, _reactAria.useTooltipTrigger)({
+  var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
   }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+  var _useOverlayPosition = (0, _overlays.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.BadgeWithTooltip = 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.ChipWithTooltip = 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: "tooltip.button"
+    variant: "tooltipIconButton"
   }, (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 BadgeWithTooltip = function BadgeWithTooltip() {
+var ChipWithTooltip = function ChipWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "variants.tooltip.badge",
+    variant: "tooltipChip",
     bg: "neutral.10"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
@@ -130,13 +130,13 @@ var BadgeWithTooltip = function BadgeWithTooltip() {
   }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 
-exports.BadgeWithTooltip = BadgeWithTooltip;
+exports.ChipWithTooltip = ChipWithTooltip;
 
 var TextWithTooltip = function TextWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "variants.tooltip.inline"
+    variant: "tooltipInline"
   }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 

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

@@ -36,10 +36,14 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _noop = _interopRequireDefault(require("lodash/noop"));
 
-var _reactAria = require("react-aria");
+var _label = require("@react-aria/label");
 
 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"));
@@ -48,7 +52,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", "wrapperProps"];
+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"];
 
 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; }
 
@@ -110,7 +114,6 @@ 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),
@@ -151,42 +154,21 @@ var useField = function useField() {
     return onChange(e);
   };
 
-  var _useLabel = (0, _reactAria.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
+  var _useLabel = (0, _label.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
       raLabelProps = _useLabel.labelProps,
       raFieldProps = _useLabel.fieldProps;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  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
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread((0, _defineProperty2["default"])({
     hasNoStatusIndicator: hasNoStatusIndicator,
     isFocused: isFocusVisible,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }, "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;
+  }, "is-".concat(status), true), statusClasses)),
+      classNames = _useStatusClasses.classNames;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -202,7 +184,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 _useStatusClasses4 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
     'field-container': true,
     // generates 'field-container' class
     hasValue: hasValue,
@@ -210,21 +192,21 @@ var useField = function useField() {
     isLeftLabel: isLeftLabel,
     isFloatLabel: isFloatLabel,
     isFloatLabelActive: isFloatLabelActive
-  }, statusClasses), containerProps === null || containerProps === void 0 ? void 0 : containerProps.statusClasses)),
-      containerClasses = _useStatusClasses4.classNames;
+  }),
+      containerClasses = _useStatusClasses2.classNames;
 
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _reactAria.mergeProps)(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'
     }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
   });
 
-  var fieldControlInputProps = _objectSpread(_objectSpread(_objectSpread({
+  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
     autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
-    className: inputClasses,
+    className: classNames,
     defaultSelected: isDefaultSelected,
     defaultValue: defaultValue,
     disabled: isDisabled,
@@ -241,27 +223,22 @@ var useField = function useField() {
     spellCheck: spellCheck,
     type: type,
     value: value
-  }, ariaProps), raFieldProps), (0, _reactAria.mergeProps)({
+  }, ariaProps), raFieldProps), (0, _utils.mergeProps)({
     onBlur: onBlur,
     onFocus: onFocus
   }, (0, _omit["default"])(controlProps, 'data-testid'), focusProps));
 
   var fieldLabelProps = _objectSpread(_objectSpread({
     children: label,
-    className: labelClasses,
+    className: classNames,
     hintText: hintText,
     isRequired: isRequired,
     mode: labelMode
   }, raLabelProps), labelProps);
 
-  var fieldControlWrapperProps = _objectSpread({
-    className: wrapperClasses
-  }, wrapperProps);
-
   return {
     fieldContainerProps: fieldContainerProps,
-    fieldControlInputProps: fieldControlInputProps,
-    fieldControlWrapperProps: fieldControlWrapperProps,
+    fieldControlProps: fieldControlProps,
     fieldLabelProps: fieldLabelProps
   };
 };

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

@@ -38,16 +38,10 @@ var defaultProps = {
   autoComplete: 'off',
   className: 'test',
   containerProps: {
-    id: 'test',
-    statusClasses: {
-      isContainer: true
-    }
+    id: 'test'
   },
   controlProps: {
-    id: 'test',
-    statusClasses: {
-      isControlInput: true
-    }
+    id: 'test'
   },
   defaultValue: 'test',
   hasAutoFocus: true,
@@ -58,11 +52,6 @@ var defaultProps = {
   isRequired: true,
   isSelected: true,
   label: 'test',
-  labelProps: {
-    statusClasses: {
-      isFieldLabel: true
-    }
-  },
   name: 'test',
   placeholder: 'test',
   role: 'test',
@@ -70,13 +59,7 @@ var defaultProps = {
     isTested: true
   },
   type: 'test',
-  value: 'test',
-  wrapperProps: {
-    id: 'test',
-    statusClasses: {
-      isControlWrapper: true
-    }
-  }
+  value: 'test'
 };
 test('default useField', function () {
   (0, _reactHooks.renderHook)(function () {
@@ -93,32 +76,26 @@ test('should return props objects for field components', function () {
 
   var _result$current = result.current,
       fieldContainerProps = _result$current.fieldContainerProps,
-      fieldControlInputProps = _result$current.fieldControlInputProps,
-      fieldControlWrapperProps = _result$current.fieldControlWrapperProps,
+      fieldControlProps = _result$current.fieldControlProps,
       fieldLabelProps = _result$current.fieldLabelProps;
   expect(fieldContainerProps).toEqual({
-    className: 'field-container has-value is-tested is-container',
+    className: 'field-container has-value',
     id: defaultProps.containerProps.id,
     onBlur: expect.any(Function),
     onFocus: expect.any(Function),
     sx: expect.objectContaining({
       position: 'relative'
-    }),
-    statusClasses: {
-      isContainer: true
-    }
+    })
   });
-  expect(fieldControlInputProps).toEqual({
+  expect(fieldControlProps).toEqual({
     autoComplete: defaultProps.autoComplete,
-    autoCorrect: undefined,
     autoFocus: defaultProps.hasAutoFocus,
-    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"),
+    className: (0, _concat["default"])(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, _statuses["default"].DEFAULT, " is-tested"),
     defaultSelected: true,
     defaultValue: defaultProps.defaultValue,
     disabled: true,
     id: defaultProps.id,
     isFocused: false,
-    maxLength: undefined,
     readOnly: true,
     required: true,
     onBlur: expect.any(Function),
@@ -127,10 +104,6 @@ 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,
@@ -138,22 +111,10 @@ test('should return props objects for field components', function () {
   });
   expect(fieldLabelProps).toEqual({
     children: defaultProps.label,
-    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,
+    className: (0, _concat["default"])(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, _statuses["default"].DEFAULT, " is-tested"),
     id: expect.any(String),
     htmlFor: expect.any(String),
-    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
-    }
+    isRequired: true
   });
 });
 test('should support autocomplete additionally', function () {
@@ -168,8 +129,8 @@ test('should support autocomplete additionally', function () {
   }),
       result = _renderHook2.result;
 
-  var fieldControlInputProps = result.current.fieldControlInputProps;
-  expect(fieldControlInputProps).toMatchObject({
+  var fieldControlProps = result.current.fieldControlProps;
+  expect(fieldControlProps).toMatchObject({
     autoComplete: 'new-password'
   });
 });
@@ -193,7 +154,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.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: undefined
       }
@@ -258,7 +219,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.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: 0
       }
@@ -268,7 +229,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.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: undefined
       }
@@ -278,7 +239,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.fieldControlInputProps.onChange({
+    return result.current.fieldControlProps.onChange({
       target: {
         value: 'a'
       }

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _reactStately = require("react-stately");
+var _overlays = require("@react-stately/overlays");
 
 /**
  * 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, _reactStately.useOverlayTriggerState)({
+  return (0, _overlays.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 _reactStately = require("react-stately");
+var _overlays = require("@react-stately/overlays");
 
 /**
  * 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, _reactStately.useOverlayTriggerState)({
+  var state = (0, _overlays.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange

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

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

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

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