@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

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

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_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 _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _select = require("@react-aria/select");
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+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");
+
+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.
+ *
+ * Utilizes [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria
+ * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
+ * React Stately.
+ */
+var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultText = props.defaultText,
+      helperText = props.helperText,
+      label = props.label,
+      name = props.name,
+      placeholder = props.placeholder,
+      status = props.status,
+      slots = props.slots,
+      columnStyleProps = props.columnStyleProps,
+      fieldContainerProps = props.fieldContainerProps,
+      fieldControlProps = props.fieldControlProps,
+      fieldLabelProps = props.fieldLabelProps,
+      isLoadingInitial = props.isLoadingInitial,
+      overlay = props.overlay,
+      state = props.state,
+      trigger = props.trigger,
+      triggerProps = props.triggerProps,
+      triggerRef = props.triggerRef,
+      valueProps = props.valueProps;
+  var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
+    className: fieldControlProps.className,
+    variant: "forms.input.container"
+  }, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+    ref: triggerRef,
+    variant: "forms.select",
+    className: fieldControlProps.className
+  }, triggerProps), (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"], {
+    variant: "placeholder"
+  }, props.labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+    variant: "loader.withinInput"
+  }), (0, _react2.jsx)(_Box["default"], {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _MenuDownIcon["default"],
+    sx: state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    variant: "forms.input.wrapper"
+  }, 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, {
+    state: state,
+    triggerRef: triggerRef,
+    label: label,
+    name: name,
+    isDisabled: true
+  }), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText));
+});
+SelectFieldBase.propTypes = {
+  /** 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({
+    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,
+    selectedItem: _propTypes["default"].shape({
+      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({})
+};
+var _default = SelectFieldBase;
+exports["default"] = _default;