@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -1,83 +1,45 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _select = require("@react-aria/select");
-
+var _reactAria = require("react-aria");
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _Box = _interopRequireDefault(require("../Box"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _Label = _interopRequireDefault(require("../Label"));
-
 var _constants = require("../Label/constants");
-
 var _Loader = _interopRequireDefault(require("../Loader"));
-
 var _Text = _interopRequireDefault(require("../Text"));
-
 var _react2 = require("@emotion/react");
-
-var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
-
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
-
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -87,39 +49,40 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var columnStyleProps = _ref.columnStyleProps,
-      defaultText = _ref.defaultText,
-      fieldContainerProps = _ref.fieldContainerProps,
-      fieldControlProps = _ref.fieldControlProps,
-      fieldLabelProps = _ref.fieldLabelProps,
-      helperText = _ref.helperText,
-      isLoadingInitial = _ref.isLoadingInitial,
-      label = _ref.label,
-      labelMode = _ref.labelMode,
-      name = _ref.name,
-      overlay = _ref.overlay,
-      placeholder = _ref.placeholder,
-      slots = _ref.slots,
-      state = _ref.state,
-      status = _ref.status,
-      trigger = _ref.trigger,
-      triggerProps = _ref.triggerProps,
-      triggerRef = _ref.triggerRef,
-      valueProps = _ref.valueProps,
-      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
+    defaultText = _ref.defaultText,
+    fieldContainerProps = _ref.fieldContainerProps,
+    fieldControlInputProps = _ref.fieldControlInputProps,
+    fieldControlWrapperProps = _ref.fieldControlWrapperProps,
+    fieldLabelProps = _ref.fieldLabelProps,
+    helperText = _ref.helperText,
+    isLoadingInitial = _ref.isLoadingInitial,
+    label = _ref.label,
+    labelMode = _ref.labelMode,
+    name = _ref.name,
+    overlay = _ref.overlay,
+    placeholder = _ref.placeholder,
+    slots = _ref.slots,
+    state = _ref.state,
+    status = _ref.status,
+    trigger = _ref.trigger,
+    triggerProps = _ref.triggerProps,
+    triggerRef = _ref.triggerRef,
+    valueProps = _ref.valueProps,
+    others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
-      ariaProps = _getAriaAttributeProp.ariaProps;
-
-  var helperTextId = (0, _uuid.v4)();
-  var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
-    className: fieldControlProps.className,
-    variant: "forms.input.container"
-  }, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
-    className: fieldControlProps.className,
+    ariaProps = _getAriaAttributeProp.ariaProps;
+  var helperTextId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  var defaultTrigger = (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, fieldControlWrapperProps, {
+    variant: "forms.input.fieldControlWrapper"
+  }), (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+    className: fieldControlInputProps.className,
     ref: triggerRef,
-    variant: "forms.select",
+    variant: "forms.select"
+  }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }, triggerProps, ariaProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "span",
     variant: "forms.select.currentValue"
   }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
@@ -138,10 +101,10 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
-  }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_select.HiddenSelect, {
+  }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_reactAria.HiddenSelect, {
     state: state,
     triggerRef: triggerRef,
     label: label,
@@ -155,47 +118,34 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 SelectFieldBase.propTypes = _objectSpread({
   /** Default text rendered if no option is selected. Deprecated. */
   defaultText: _propTypes["default"].string,
-
   /** Text rendered below the input. */
   helperText: _propTypes["default"].node,
-
   /** The label for the select element. */
   label: _propTypes["default"].node,
-
   /** Determines the textarea status indicator and helper text styling. Eg. float. */
   labelMode: _propTypes["default"].oneOf((0, _values["default"])(_constants.modes)),
-
   /** The name for the select element, used when submitting a form. */
   name: _propTypes["default"].string,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
-
   /** Determines the type of label applied to the component. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-
   /** Determines whether to use column styles. */
   columnStyleProps: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({})]),
-
   /** Determines props that applied to root container. */
   fieldContainerProps: _propTypes["default"].shape({
     sx: _propTypes["default"].shape({})
   }),
-
   /** Determines props that applied to control field. */
-  fieldControlProps: _propTypes["default"].shape({
+  fieldControlInputProps: _propTypes["default"].shape({
     className: _propTypes["default"].string
   }),
-
   /** Determines props that applied to label of field. */
   fieldLabelProps: _propTypes["default"].shape({}),
-
   /** Determines whether elements are loading and whether they haven't already appeared in list. */
   isLoadingInitial: _propTypes["default"].bool,
-
   /** Container for list with options */
   overlay: _propTypes["default"].node,
-
   /** State returned by useSelectState */
   state: _propTypes["default"].shape({
     isOpen: _propTypes["default"].bool,
@@ -203,22 +153,17 @@ SelectFieldBase.propTypes = _objectSpread({
       rendered: _propTypes["default"].node
     })
   }),
-
   /** Provides a way to insert markup in specified places. */
   slots: _propTypes["default"].shape({
     /** The given node will be inserted into the field container. */
     inContainer: _propTypes["default"].node
   }),
-
   /** Control for interaction with SelectField */
   trigger: _propTypes["default"].node,
-
   /** Props for the popup trigger element. */
   triggerProps: _propTypes["default"].shape({}),
-
   /** Determines ref that applied to control */
   triggerRef: _propTypes["default"].shape({}),
-
   /** Props for the element representing the selected value. */
   valueProps: _propTypes["default"].shape({})
 }, _ariaAttributes.ariaAttributesBasePropTypes);