@renderlesskit/react/dist/esm/select/Select.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

var _excluded = ["menuRole", "hideOnEsc"],
    _excluded2 = ["onClick", "onKeyDown", "onMouseDown"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import * as React from "react";
import { usePopoverDisclosure } from "reakit";
import { useLiveRef } from "reakit-utils/useLiveRef";
import { useShortcut } from "@chakra-ui/hooks";
import { callAllHandlers, getNextItemFromSearch } from "@chakra-ui/utils";
import { createComponent, createHook } from "../system";
import { SELECT_KEYS } from "./__keys";
export var useSelect = createHook({
  name: "Select",
  compose: usePopoverDisclosure,
  keys: SELECT_KEYS,

  useOptions(_ref) {
    var {
      menuRole = "listbox",
      hideOnEsc = true
    } = _ref,
        options = _objectWithoutProperties(_ref, _excluded);

    return _objectSpread({
      menuRole,
      hideOnEsc
    }, options);
  },

  useProps(options, _ref2) {
    var {
      onClick: htmlOnClick,
      onKeyDown: htmlOnKeyDown,
      onMouseDown: htmlOnMouseDown
    } = _ref2,
        htmlProps = _objectWithoutProperties(_ref2, _excluded2);

    var disabled = options.disabled || htmlProps["aria-disabled"];
    var hasPressedMouse = React.useRef(false);
    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
    var onClickRef = useLiveRef(htmlOnClick);
    var onMouseDownRef = useLiveRef(htmlOnMouseDown); // Reference:
    // https://github.com/chakra-ui/chakra-ui/blob/83eec5b140bd9a69821d8e4df3e69bff0768dcca/packages/menu/src/use-menu.ts#L228-L253

    var onCharacterPress = useShortcut({
      preventDefault: event => event.key !== " "
    });
    var onKeyDown = React.useCallback(event => {
      var _onKeyDownRef$current;

      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
      if (event.defaultPrevented) return;

      if (event.key === "Escape") {
        var _options$hide;

        // Doesn't prevent default on Escape, otherwise we can't close
        // dialogs when MenuButton is focused
        (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options);
      } else if (!disabled) {
        var keyMap = {
          Enter: options.first,
          " ": options.first,
          ArrowUp: options.last,
          ArrowDown: options.first
        };
        var action = keyMap[event.key];

        if (action) {
          event.preventDefault();
          event.stopPropagation(); // setTimeout prevents scroll jump

          options.show && setTimeout(options.show);
          if (!options.selectedValue) action();
          return;
        }
      }
    }, // eslint-disable-next-line react-hooks/exhaustive-deps
    [disabled, options.show, options.hide, options.first, options.last, options.selectedValue]);
    var onMouseDown = React.useCallback(event => {
      var _onMouseDownRef$curre;

      // If the Select has been clicked using mouse or keyboard. On mouse click,
      // we don't automatically focus the first menu item.
      hasPressedMouse.current = true;
      (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event); // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    var onClick = React.useCallback(event => {
      var _onClickRef$current, _options$toggle;

      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event);
      if (event.defaultPrevented) return;
      (_options$toggle = options.toggle) === null || _options$toggle === void 0 ? void 0 : _options$toggle.call(options); // Focus the SelectPopover when it's opened with mouse click.

      if (hasPressedMouse.current && !options.visible) {
        var _options$move;

        (_options$move = options.move) === null || _options$move === void 0 ? void 0 : _options$move.call(options, null);
      }

      hasPressedMouse.current = false;
    }, // eslint-disable-next-line react-hooks/exhaustive-deps
    [options.show, options.toggle, options.visible, options.move]);
    return _objectSpread({
      "aria-haspopup": options.menuRole,
      onClick,
      onMouseDown,
      onKeyDown: callAllHandlers(onKeyDown, onCharacterPress(handleCharacterPress(options)))
    }, htmlProps);
  },

  useComposeOptions(options) {
    return _objectSpread(_objectSpread({}, options), {}, {
      // Toggling is handled by Select OnClick above
      toggle: noop
    });
  }

});
export var Select = createComponent({
  as: "button",
  memo: true,
  useHook: useSelect
});

var handleCharacterPress = options => character => {
  /**
   * Typeahead: Based on current character pressed,
   * find the next item to be selected
   */
  var selectedValue = options.values.find(value => {
    var _options$selectedValu;

    return (_options$selectedValu = options.selectedValue) === null || _options$selectedValu === void 0 ? void 0 : _options$selectedValu.includes(value);
  });
  var nextItem = getNextItemFromSearch(options.values, character, item => item !== null && item !== void 0 ? item : "", selectedValue);
  if (nextItem) options.setSelectedValue(nextItem);
};

var noop = () => {};
//# sourceMappingURL=Select.js.map