@react-spectrum/picker 3.0.0-alpha.1 → 3.0.0-nightly-4980928d3-240906

package/dist/main.js

@@ -1,400 +1,27 @@
-require("./main.css");
+var $902e54cfaa4270a9$exports = require("./Picker.main.js");
+var $4FjNO$reactstatelycollections = require("@react-stately/collections");
 
-var _temp = require("@react-stately/collections");
 
-var Item = _temp.Item;
-exports.Item = Item;
-var Section = _temp.Section;
-exports.Section = Section;
-
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
-
-var _babelRuntimeHelpersToConsumableArray = $parcel$interopDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _babelRuntimeHelpersSlicedToArray = $parcel$interopDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
-
-var _spectrumIconsUiAlertMedium = $parcel$interopDefault(require("@spectrum-icons/ui/AlertMedium"));
-
-var _spectrumIconsUiChevronDownMedium = $parcel$interopDefault(require("@spectrum-icons/ui/ChevronDownMedium"));
-
-var _temp2 = require("@react-spectrum/utils");
-
-var classNames = _temp2.classNames;
-var dimensionValue = _temp2.dimensionValue;
-var filterDOMProps = _temp2.filterDOMProps;
-var SlotProvider = _temp2.SlotProvider;
-var unwrapDOMRef = _temp2.unwrapDOMRef;
-var useDOMRef = _temp2.useDOMRef;
-var useMediaQuery = _temp2.useMediaQuery;
-var useStyleProps = _temp2.useStyleProps;
-
-var _temp3 = require("@react-aria/overlays");
-
-var DismissButton = _temp3.DismissButton;
-var useOverlayPosition = _temp3.useOverlayPosition;
-
-var FieldButton = require("@react-spectrum/button").FieldButton;
-
-var FocusScope = require("@react-aria/focus").FocusScope;
-
-var Label = require("@react-spectrum/label").Label;
-
-var _temp4 = require("@react-spectrum/listbox");
-
-var ListBoxBase = _temp4.ListBoxBase;
-var useListBoxLayout = _temp4.useListBoxLayout;
-
-var mergeProps = require("@react-aria/utils").mergeProps;
-
-var _temp5 = require("@react-spectrum/overlays");
-
-var Popover = _temp5.Popover;
-var Tray = _temp5.Tray;
-
-var _react2 = require("react");
-
-var _react = $parcel$interopDefault(_react2);
-
-var useLayoutEffect = _react2.useLayoutEffect;
-var useRef = _react2.useRef;
-var useState = _react2.useState;
-
-var Text = require("@react-spectrum/typography").Text;
-
-var useFormProps = require("@react-spectrum/form").useFormProps;
-
-var useMessageFormatter = require("@react-aria/i18n").useMessageFormatter;
-
-var _temp6 = require("@react-spectrum/provider");
-
-var useProvider = _temp6.useProvider;
-var useProviderProps = _temp6.useProviderProps;
-
-var useSelect = require("@react-aria/select").useSelect;
-
-var useSelectState = require("@react-stately/select").useSelectState;
-
-var VisuallyHidden = require("@react-aria/visually-hidden").VisuallyHidden;
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-// ASSET: /Users/govett/dev/react-spectrum/packages/@react-spectrum/picker/intl/en-US.json
-var $c26e7550a58b9ffe68e498ce4d7522d$exports = {};
-$c26e7550a58b9ffe68e498ce4d7522d$exports = JSON.parse("{\"placeholder\":\"Select an option…\"}");
-// ASSET: /Users/govett/dev/react-spectrum/node_modules/@adobe/spectrum-css-temp/components/fieldlabel/vars.css
-var $ce2ba76b00945bd966a5f95584cdaaee$exports = {};
-$ce2ba76b00945bd966a5f95584cdaaee$exports = {
-  "spectrum-FieldLabel": "_spectrum-FieldLabel_3fb22",
-  "spectrum-FieldLabel--positionSide": "_spectrum-FieldLabel--positionSide_3fb22",
-  "spectrum-FieldLabel-requiredIcon": "_spectrum-FieldLabel-requiredIcon_3fb22",
-  "spectrum-FieldLabel--alignEnd": "_spectrum-FieldLabel--alignEnd_3fb22",
-  "spectrum-Field": "_spectrum-Field_3fb22",
-  "spectrum-Field--positionTop": "_spectrum-Field--positionTop_3fb22",
-  "spectrum-Field-field": "_spectrum-Field-field_3fb22",
-  "spectrum-Field--positionSide": "_spectrum-Field--positionSide_3fb22",
-  "spectrum-Form": "_spectrum-Form_3fb22",
-  "spectrum-Form--positionSide": "_spectrum-Form--positionSide_3fb22",
-  "spectrum-Form--positionTop": "_spectrum-Form--positionTop_3fb22",
-  "spectrum-Form-itemLabel": "_spectrum-Form-itemLabel_3fb22",
-  "is-disabled": "_is-disabled_3fb22"
-};
-// ASSET: /Users/govett/dev/react-spectrum/node_modules/@adobe/spectrum-css-temp/components/dropdown/vars.css
-var $faa3f0de4a06f9c04c097d8a4b588277$exports = {};
-$faa3f0de4a06f9c04c097d8a4b588277$exports = {
-  "spectrum-Dropdown": "_spectrum-Dropdown_8711e",
-  "spectrum-Dropdown-chevron": "_spectrum-Dropdown-chevron_8711e",
-  "spectrum-Dropdown-trigger": "_spectrum-Dropdown-trigger_8711e",
-  "spectrum-Dropdown-label": "_spectrum-Dropdown-label_8711e",
-  "is-placeholder": "_is-placeholder_8711e",
-  "spectrum-Icon": "_spectrum-Icon_8711e",
-  "spectrum-Dropdown-invalidIcon": "_spectrum-Dropdown-invalidIcon_8711e",
-  "spectrum-Dropdown--quiet": "_spectrum-Dropdown--quiet_8711e",
-  "spectrum-Dropdown-popover--quiet": "_spectrum-Dropdown-popover--quiet_8711e",
-  "spectrum-Field": "_spectrum-Field_8711e",
-  "spectrum-Dropdown-fieldWrapper--quiet": "_spectrum-Dropdown-fieldWrapper--quiet_8711e",
-  "is-selected": "_is-selected_8711e",
-  "is-invalid": "_is-invalid_8711e",
-  "is-disabled": "_is-disabled_8711e",
-  "focus-ring": "_focus-ring_8711e"
-};
-// @ts-ignore
-var $b99f6ca70d627c4fa2e6f7141df2ca40$var$intlMessages = {
-  "en-US": _babelRuntimeHelpersInteropRequireDefault($c26e7550a58b9ffe68e498ce4d7522d$exports).default
-};
-var $faa3f0de4a06f9c04c097d8a4b588277$$interop$default = $parcel$interopDefault($faa3f0de4a06f9c04c097d8a4b588277$exports);
-var $ce2ba76b00945bd966a5f95584cdaaee$$interop$default = $parcel$interopDefault($ce2ba76b00945bd966a5f95584cdaaee$exports);
-
-function $b99f6ca70d627c4fa2e6f7141df2ca40$var$Picker(props, ref) {
-  props = useProviderProps(props);
-  props = useFormProps(props);
-  var formatMessage = useMessageFormatter($b99f6ca70d627c4fa2e6f7141df2ca40$var$intlMessages);
-  var _props = props,
-      isDisabled = _props.isDisabled,
-      _props$direction = _props.direction,
-      direction = _props$direction === void 0 ? 'bottom' : _props$direction,
-      _props$align = _props.align,
-      align = _props$align === void 0 ? 'start' : _props$align,
-      _props$shouldFlip = _props.shouldFlip,
-      shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
-      _props$placeholder = _props.placeholder,
-      placeholder = _props$placeholder === void 0 ? formatMessage('placeholder') : _props$placeholder,
-      validationState = _props.validationState,
-      isQuiet = _props.isQuiet,
-      label = _props.label,
-      _props$labelPosition = _props.labelPosition,
-      labelPosition = _props$labelPosition === void 0 ? 'top' : _props$labelPosition,
-      labelAlign = _props.labelAlign,
-      isRequired = _props.isRequired,
-      necessityIndicator = _props.necessityIndicator,
-      menuWidth = _props.menuWidth,
-      name = _props.name;
-
-  var _useStyleProps = useStyleProps(props),
-      styleProps = _useStyleProps.styleProps;
-
-  var state = useSelectState(props);
-  var domRef = useDOMRef(ref);
-  var popoverRef = useRef();
-  var triggerRef = useRef();
-  var listboxRef = useRef(); // We create the listbox layout in Picker and pass it to ListBoxBase below
-  // so that the layout information can be cached even while the listbox is not mounted.
-  // We also use the layout as the keyboard delegate for type to select.
-
-  var layout = useListBoxLayout(state);
-
-  var _useSelect = useSelect(_babelRuntimeHelpersObjectSpread({}, props, {
-    triggerRef: unwrapDOMRef(triggerRef),
-    keyboardDelegate: layout
-  }), state),
-      labelProps = _useSelect.labelProps,
-      triggerProps = _useSelect.triggerProps,
-      valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps;
-
-  var _useOverlayPosition = useOverlayPosition({
-    targetRef: unwrapDOMRef(triggerRef),
-    overlayRef: unwrapDOMRef(popoverRef),
-    scrollRef: listboxRef,
-    placement: "".concat(direction, " ").concat(align),
-    shouldFlip: shouldFlip,
-    isOpen: state.isOpen
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement; // On small screen devices, the listbox is rendered in a tray, otherwise a popover.
-
-
-  var isMobile = useMediaQuery('(max-width: 700px)');
-
-  var listbox = /*#__PURE__*/_react.createElement(FocusScope, {
-    restoreFocus: true
-  }, /*#__PURE__*/_react.createElement(DismissButton, {
-    onDismiss: function onDismiss() {
-      return state.setOpen(false);
-    }
-  }), /*#__PURE__*/_react.createElement(ListBoxBase, {
-    ref: listboxRef,
-    domProps: menuProps,
-    disallowEmptySelection: true,
-    autoFocus: state.focusStrategy,
-    shouldSelectOnPressUp: true,
-    focusOnPointerEnter: true,
-    layout: layout,
-    state: state,
-    width: isMobile ? '100%' : undefined
-  }), /*#__PURE__*/_react.createElement(DismissButton, {
-    onDismiss: function onDismiss() {
-      return state.setOpen(false);
-    }
-  })); // Measure the width of the button to inform the width of the menu (below).
-
-
-  var _useState = useState(null),
-      _useState2 = _babelRuntimeHelpersSlicedToArray(_useState, 2),
-      buttonWidth = _useState2[0],
-      setButtonWidth = _useState2[1];
-
-  var _useProvider = useProvider(),
-      scale = _useProvider.scale;
-
-  useLayoutEffect(function () {
-    if (!isMobile) {
-      var width = triggerRef.current.UNSAFE_getDOMNode().offsetWidth;
-      setButtonWidth(width);
-    }
-  }, [scale, isMobile, triggerRef, state.selectedKey]);
-  var overlay;
-
-  if (isMobile) {
-    overlay = /*#__PURE__*/_react.createElement(Tray, {
-      isOpen: state.isOpen,
-      onClose: state.close,
-      shouldCloseOnBlur: true
-    }, listbox);
-  } else {
-    // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
-    // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
-    // Not using style props for this because they don't support `calc`.
-    var width = isQuiet ? null : buttonWidth;
-
-    var style = _babelRuntimeHelpersObjectSpread({}, overlayProps.style, {
-      width: menuWidth ? dimensionValue(menuWidth) : width,
-      minWidth: isQuiet ? "calc(".concat(buttonWidth, "px + calc(2 * var(--spectrum-dropdown-quiet-offset)))") : buttonWidth
-    });
-
-    overlay = /*#__PURE__*/_react.createElement(Popover, {
-      isOpen: state.isOpen,
-      UNSAFE_style: style,
-      UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown-popover', {
-        'spectrum-Dropdown-popover--quiet': isQuiet
-      }),
-      ref: popoverRef,
-      placement: placement,
-      hideArrow: true,
-      shouldCloseOnBlur: true,
-      onClose: state.close
-    }, listbox);
-  }
-
-  var _useState3 = useState(false),
-      _useState4 = _babelRuntimeHelpersSlicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      onFocusChange = _useState4[1]; // If used in a <form>, use a hidden input so the value can be submitted to a server.
-  // If the collection isn't too big, use a hidden <select> element for this so that browser
-  // autofill will work. Otherwise, use an <input type="hidden">.
-
-
-  var input;
-
-  if (state.collection.size <= 300) {
-    // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
-    // In Firefox, there must be a <label> to identify the <select> whereas other browsers
-    // seem to identify it just by surrounding text.
-    // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
-    // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
-    // non tabbable with tabIndex={-1}.
-    //
-    // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
-    // between fields in a form. These only support native form inputs that are tabbable. In order to
-    // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
-    // except when the button is focused, so that shift tab works properly to go to the actual previous
-    // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
-    // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
-    // prevent Safari from zooming in on the input when it is focused.
-    input = /*#__PURE__*/_react.createElement(VisuallyHidden, {
-      "aria-hidden": "true"
-    }, /*#__PURE__*/_react.createElement("input", {
-      tabIndex: isFocused ? -1 : 0,
-      style: {
-        fontSize: 16
-      },
-      onFocus: function onFocus() {
-        return triggerRef.current.focus();
-      }
-    }), /*#__PURE__*/_react.createElement("label", null, label, /*#__PURE__*/_react.createElement("select", {
-      tabIndex: -1,
-      name: name,
-      value: state.selectedKey,
-      onChange: function onChange(e) {
-        return state.setSelectedKey(e.target.value);
-      }
-    }, _babelRuntimeHelpersToConsumableArray(state.collection.getKeys()).map(function (key) {
-      var item = state.collection.getItem(key);
-
-      if (item.type === 'item') {
-        return (/*#__PURE__*/_react.createElement("option", {
-            key: item.key,
-            value: item.key
-          }, item.textValue)
-        );
-      }
-    }))));
-  } else if (name) {
-    input = /*#__PURE__*/_react.createElement("input", {
-      type: "hidden",
-      name: name,
-      value: state.selectedKey
-    });
-  } // Get the selected item to render in the field button
-
-
-  var selectedItem = state.selectedKey ? state.collection.getItem(state.selectedKey) : null;
-  var contents = selectedItem ? selectedItem.rendered : placeholder;
-
-  if (typeof contents === 'string') {
-    contents = /*#__PURE__*/_react.createElement(Text, null, contents);
-  }
-
-  var picker = /*#__PURE__*/_react.createElement("div", {
-    className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown', {
-      'is-invalid': validationState === 'invalid',
-      'is-disabled': isDisabled,
-      'spectrum-Dropdown--quiet': isQuiet
-    })
-  }, input, /*#__PURE__*/_react.createElement(FieldButton, _babelRuntimeHelpersExtends({}, filterDOMProps(props), triggerProps, {
-    onFocusChange: onFocusChange,
-    ref: triggerRef,
-    isActive: state.isOpen,
-    isQuiet: isQuiet,
-    isDisabled: isDisabled,
-    validationState: validationState,
-    UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown-trigger')
-  }), /*#__PURE__*/_react.createElement(SlotProvider, {
-    slots: {
-      icon: {
-        UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Icon'),
-        size: 'S'
-      },
-      text: _babelRuntimeHelpersObjectSpread({}, valueProps, {
-        UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown-label', {
-          'is-placeholder': !selectedItem
-        })
-      }),
-      description: {
-        isHidden: true
-      }
-    }
-  }, contents), validationState === 'invalid' && /*#__PURE__*/_react.createElement(_spectrumIconsUiAlertMedium, {
-    UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown-invalidIcon')
-  }), /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronDownMedium, {
-    UNSAFE_className: classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Dropdown-chevron')
-  })), overlay);
-
-  if (label) {
-    var labelWrapperClass = classNames($ce2ba76b00945bd966a5f95584cdaaee$$interop$default, 'spectrum-Field', {
-      'spectrum-Field--positionTop': labelPosition === 'top',
-      'spectrum-Field--positionSide': labelPosition === 'side'
-    }, classNames($faa3f0de4a06f9c04c097d8a4b588277$$interop$default, 'spectrum-Field', {
-      'spectrum-Dropdown-fieldWrapper--quiet': isQuiet
-    }), styleProps.className);
-    picker = _react.cloneElement(picker, mergeProps(picker.props, {
-      className: classNames($ce2ba76b00945bd966a5f95584cdaaee$$interop$default, 'spectrum-Field-field')
-    }));
-    return (/*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, styleProps, {
-        ref: domRef,
-        className: labelWrapperClass
-      }), /*#__PURE__*/_react.createElement(Label, _babelRuntimeHelpersExtends({}, labelProps, {
-        labelPosition: labelPosition,
-        labelAlign: labelAlign,
-        isRequired: isRequired,
-        necessityIndicator: necessityIndicator,
-        elementType: "span"
-      }), label), picker)
-    );
-  }
+$parcel$export(module.exports, "Picker", () => $902e54cfaa4270a9$exports.Picker);
+$parcel$export(module.exports, "Item", () => $4FjNO$reactstatelycollections.Item);
+$parcel$export(module.exports, "Section", () => $4FjNO$reactstatelycollections.Section);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
 
-  return _react.cloneElement(picker, mergeProps(picker.props, _babelRuntimeHelpersObjectSpread({}, styleProps, {
-    ref: domRef
-  })));
-} // forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
 
 
-var Picker = _react.forwardRef($b99f6ca70d627c4fa2e6f7141df2ca40$var$Picker);
 
-exports.Picker = Picker;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/picker/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Picker} from './Picker';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumPickerProps} from '@react-types/select';\n"],"names":[],"version":3,"file":"main.js.map"}