text: "use strict";
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = void 0;
  
  var _classnames = _interopRequireDefault(require("classnames"));
  
  var _react = _interopRequireDefault(require("react"));
  
  var _build = _interopRequireDefault(require("boundless-arrow-key-navigation/build"));
  
  var _styleStyle = _interopRequireDefault(require("part:@sanity/components/selects/style-style"));
  
  var _angleDownIcon = _interopRequireDefault(require("part:@sanity/base/angle-down-icon"));
  
  var _checkIcon = _interopRequireDefault(require("part:@sanity/base/check-icon"));
  
  var _default2 = require("part:@sanity/components/lists/default");
  
  var _poppable = _interopRequireDefault(require("part:@sanity/components/utilities/poppable"));
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  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; }
  
  var modifiers = [{
    name: 'preventOverflow',
    options: {
      rootBoundary: 'viewport',
      padding: 0
    }
  }, {
    name: 'offset',
    options: {
      offset: [0, 0]
    }
  }, {
    name: 'flip',
    options: {
      enabled: false
    }
  }, {
    name: 'maxHeight',
    enabled: true,
    phase: 'beforeWrite',
    requires: ['computeStyles'],
  
    fn(params) {
      var state = params.state;
      var refElement = state.scrollParents.reference[0];
  
      if (refElement && refElement.nodeType === Node.ELEMENT_NODE) {
        var offsetHeight = refElement.offsetHeight;
        state.styles.popper.maxHeight = "".concat(offsetHeight - 3 * 16, "px");
      }
    }
  
  }];
  
  var StyleSelectList = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_default2.List, {
    className: _styleStyle.default.list,
    ref: ref
  }, props.children));
  
  StyleSelectList.displayName = 'StyleSelectList';
  
  class StyleSelect extends _react.default.PureComponent {
    constructor() {
      super(...arguments);
  
      _defineProperty(this, "state", {
        showList: false
      });
  
      _defineProperty(this, "buttonElement", /*#__PURE__*/_react.default.createRef());
  
      _defineProperty(this, "firstItemElement", /*#__PURE__*/_react.default.createRef());
  
      _defineProperty(this, "keyboardNavigation", false);
  
      _defineProperty(this, "menuHasKeyboardFocus", false);
  
      _defineProperty(this, "handleItemClick", event => {
        event.preventDefault();
        event.stopPropagation();
        this.handleSelect(Number(event.currentTarget.dataset.index));
      });
  
      _defineProperty(this, "handleSelect", index => {
        var item = this.props.items[index];
        if (!item) return;
        this.props.onChange(item);
        this.handleCloseList();
        this.keyboardNavigation = false;
      });
  
      _defineProperty(this, "handleOpenList", () => {
        if (this.props.disabled) {
          return;
        }
  
        this.setState({
          showList: true
        }, () => {
          this.menuHasKeyboardFocus = true;
          this.keyboardNavigation = true;
  
          if (this.firstItemElement.current) {
            this.firstItemElement.current.focus();
          }
  
          this.props.onOpen();
        });
      });
  
      _defineProperty(this, "handleCloseList", () => {
        if (this.buttonElement.current) {
          this.buttonElement.current.focus();
        }
  
        this.setState({
          showList: false
        }, () => {
          this.props.onClose();
        });
      });
  
      _defineProperty(this, "handleButtonClick", event => {
        if (this.state.showList) {
          this.handleCloseList();
        } else {
          this.handleOpenList();
        }
  
        this.keyboardNavigation = event.detail == 0;
      });
  
      _defineProperty(this, "handleButtonKeyDown", event => {
        if (event.key == 'Enter') {
          this.handleOpenList();
        }
      });
  
      _defineProperty(this, "handleButtonBlur", () => {
        if (this.state.showList && !this.menuHasKeyboardFocus && this.keyboardNavigation) {
          this.handleCloseList();
        }
      });
  
      _defineProperty(this, "handleMenuBlur", () => {
        this.menuHasKeyboardFocus = false;
  
        if (this.buttonElement.current) {
          this.buttonElement.current.focus();
        }
  
        this.handleCloseList();
      });
  
      _defineProperty(this, "handleItemKeyPress", event => {
        if (event.key === 'Enter') {
          event.stopPropagation();
          this.handleSelect(Number(event.currentTarget.dataset.index));
        }
      });
    }
  
    render() {
      var _this$props = this.props,
          disabled = _this$props.disabled,
          value = _this$props.value,
          items = _this$props.items,
          classNameProp = _this$props.className,
          padding = _this$props.padding,
          placeholder = _this$props.placeholder,
          renderItem = _this$props.renderItem,
          transparent = _this$props.transparent;
      var showList = this.state.showList;
      var className = (0, _classnames.default)(classNameProp, _styleStyle.default.root, transparent && _styleStyle.default.transparent, padding && _styleStyle.default["padding_".concat(padding)]);
      return /*#__PURE__*/_react.default.createElement("div", {
        className: className,
        onClick: this.handleButtonClick,
        onBlur: this.handleButtonBlur,
        onKeyPress: this.handleButtonKeyDown,
        tabIndex: 0
      }, /*#__PURE__*/_react.default.createElement("button", {
        className: _styleStyle.default.button,
        disabled: disabled,
        ref: this.buttonElement,
        type: "button"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: _styleStyle.default.buttonInner
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: _styleStyle.default.title
      }, value && value.length > 1 && 'Multiple', value && value.length == 1 && value[0].title, !value && placeholder), /*#__PURE__*/_react.default.createElement("span", {
        className: _styleStyle.default.arrow
      }, /*#__PURE__*/_react.default.createElement(_angleDownIcon.default, null)))), showList && /*#__PURE__*/_react.default.createElement(_poppable.default, {
        onEscape: this.handleCloseList,
        modifiers: modifiers,
        onClickOutside: this.handleCloseList,
        popperClassName: _styleStyle.default.popper
      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_build.default, {
        component: StyleSelectList
      }, items.map((item, index) => {
        var isSemiSelected = value && value.length > 1 && value.includes(item);
        var isSelected = value && value.length === 1 && value[0].key == item.key;
  
        var _classNames = "\n                    ".concat(isSelected ? _styleStyle.default.itemSelected : _styleStyle.default.item, "\n                    ").concat(isSemiSelected ? _styleStyle.default.itemSemiSelected : '', "\n                  ");
  
        return /*#__PURE__*/_react.default.createElement("li", {
          key: "".concat(item.key, "_").concat(String(index))
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: _classNames,
          "data-index": index,
          onClick: this.handleItemClick,
          onKeyPress: this.handleItemKeyPress,
          ref: index === 0 ? this.firstItemElement : undefined,
          title: item.title
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: _styleStyle.default.itemContent
        }, renderItem(item)), /*#__PURE__*/_react.default.createElement("div", {
          className: _styleStyle.default.itemIcon
        }, (isSelected || isSemiSelected) && /*#__PURE__*/_react.default.createElement(_checkIcon.default, null))));
      })), /*#__PURE__*/_react.default.createElement("div", {
        tabIndex: 0,
        onFocus: this.handleMenuBlur
      }))));
    }
  
  }
  
  _defineProperty(StyleSelect, "defaultProps", {
    className: '',
    onChange: () => undefined,
    onOpen: () => undefined,
    onClose: () => undefined,
    items: [],
    padding: 'default',
    placeholder: undefined,
    transparent: false,
    value: undefined
  });
  
  var _default = StyleSelect;
  exports.default = _default;