@renderlesskit/react/dist/cjs/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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSelect = exports.Select = void 0;

var React = _interopRequireWildcard(require("react"));

var _reakit = require("reakit");

var _useLiveRef = require("reakit-utils/useLiveRef");

var _hooks = require("@chakra-ui/hooks");

var _utils = require("@chakra-ui/utils");

var _system = require("../system");

var _keys = require("./__keys");

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

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 = 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; }

var useSelect = (0, _system.createHook)({
  name: "Select",
  compose: _reakit.usePopoverDisclosure,
  keys: _keys.SELECT_KEYS,
  useOptions: function useOptions(_ref) {
    var _ref$menuRole = _ref.menuRole,
        menuRole = _ref$menuRole === void 0 ? "listbox" : _ref$menuRole,
        _ref$hideOnEsc = _ref.hideOnEsc,
        hideOnEsc = _ref$hideOnEsc === void 0 ? true : _ref$hideOnEsc,
        options = _objectWithoutProperties(_ref, _excluded);

    return _objectSpread({
      menuRole: menuRole,
      hideOnEsc: hideOnEsc
    }, options);
  },
  useProps: function useProps(options, _ref2) {
    var htmlOnClick = _ref2.onClick,
        htmlOnKeyDown = _ref2.onKeyDown,
        htmlOnMouseDown = _ref2.onMouseDown,
        htmlProps = _objectWithoutProperties(_ref2, _excluded2);

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

    var onCharacterPress = (0, _hooks.useShortcut)({
      preventDefault: function preventDefault(event) {
        return event.key !== " ";
      }
    });
    var onKeyDown = React.useCallback(function (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(function (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(function (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: onClick,
      onMouseDown: onMouseDown,
      onKeyDown: (0, _utils.callAllHandlers)(onKeyDown, onCharacterPress(handleCharacterPress(options)))
    }, htmlProps);
  },
  useComposeOptions: function useComposeOptions(options) {
    return _objectSpread(_objectSpread({}, options), {}, {
      // Toggling is handled by Select OnClick above
      toggle: noop
    });
  }
});
exports.useSelect = useSelect;
var Select = (0, _system.createComponent)({
  as: "button",
  memo: true,
  useHook: useSelect
});
exports.Select = Select;

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

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

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