@mapbox/mr-ui/select/select.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _querySelectorContainsNode = _interopRequireDefault(require("@mapbox/query-selector-contains-node"));
var _styles = require("../utils/styles");
var SelectPrimitive = _interopRequireWildcard(require("@radix-ui/react-select"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
  let {
    onExit,
    onOpenChange,
    children,
    header,
    footer,
    onChange,
    options,
    hasPointer = true,
    hideWhenAnchorIsOffscreen = false,
    allowPlacementAxisChange = true,
    clickOutsideCloses = true,
    escapeCloses = true,
    coloring = 'light',
    placement = 'right',
    alignment = 'center',
    padding = 'medium',
    offsetFromAnchor = 6,
    themeSelectWrapper = '',
    themeSelectItemWrapper = '',
    themeSelectItem = 'transition bg-gray-light-on-active block py6 txt-break-word-soft bg-darken5-on-hover color-blue-on-hover cursor-pointer round px6',
    passthroughProps
  } = _ref;
  const {
    background,
    borderColor,
    color,
    fill
  } = (0, _styles.getTheme)(coloring);
  const triggerRef = (0, _react.useRef)(null);
  const contentClasses = (0, _classnames.default)(`${background} ${borderColor} ${color} border shadow-darken25 round`, {
    'px12 py12': padding === 'medium',
    'px12 py6': padding === 'small',
    [`border border-1 border--${borderColor}`]: borderColor
  });
  const onDown = e => {
    // Don't call onExit if it wasn't provided.
    if (!onExit) {
      return;
    }

    // If event target contains the trigger element, assume onExit is handled
    // on its own so don't re-fire it.
    if (triggerRef.current && triggerRef.current.contains(e.target)) {
      return;
    }

    // Check if the event target contains the following data attribute. If it
    // does, do not call onExit.
    if ((0, _querySelectorContainsNode.default)('[data-popover-ignore-clicks]', e.target)) {
      return;
    }
    onExit();
  };
  const renderOptions = _ref2 => {
    let {
      label,
      value,
      active,
      disabled,
      options
    } = _ref2;
    const itemClasses = (0, _classnames.default)(themeSelectItem, {
      'is-active': active
    });
    if (options) {
      return /*#__PURE__*/_react.default.createElement(SelectPrimitive.Group, null, options.map(renderOptions));
    } else {
      return /*#__PURE__*/_react.default.createElement(SelectPrimitive.Item, {
        className: itemClasses,
        disabled: disabled,
        key: value,
        value: value
      }, label);
    }
  };
  return /*#__PURE__*/_react.default.createElement(SelectPrimitive.Root, {
    onOpenChange: onOpenChange && onOpenChange,
    onValueChange: onChange
  }, /*#__PURE__*/_react.default.createElement(SelectPrimitive.Trigger, {
    ref: forwardedRef,
    asChild: true
  }, children), /*#__PURE__*/_react.default.createElement(SelectPrimitive.Portal, null, /*#__PURE__*/_react.default.createElement(SelectPrimitive.Content, _extends({
    sideOffset: offsetFromAnchor,
    className: contentClasses,
    position: "popper",
    side: placement,
    align: alignment,
    onEscapeKeyDown: escapeCloses && onExit,
    onPointerDownOutside: clickOutsideCloses && onDown,
    hideWhenDetached: hideWhenAnchorIsOffscreen,
    avoidCollisions: allowPlacementAxisChange
  }, passthroughProps), /*#__PURE__*/_react.default.createElement(SelectPrimitive.Viewport, null, /*#__PURE__*/_react.default.createElement("div", {
    className: themeSelectWrapper
  }, header && header, /*#__PURE__*/_react.default.createElement("div", {
    className: themeSelectItemWrapper
  }, options.map(renderOptions)), footer && footer)), hasPointer && /*#__PURE__*/_react.default.createElement(SelectPrimitive.Arrow, {
    width: 12,
    height: 6,
    offset: 6,
    fill: fill
  }))));
});
Select.propTypes = {
  /** An array of objects containing `label` `value` key value pairings to represent each option. An optional `disable` key can be provided to disable the selection of an indiviual `<option>`. If `value` is not present but an `options` array is provided containing the same `label` `value` key value pairings, options will be grouped within a `<optgroup>` element as defined by `label` child key. Note that each `label` value must be unique. */
  // @ts-expect-error
  options: _propTypes.default.arrayOf(_propTypes.default.shape({
    label: _propTypes.default.node.isRequired,
    value: _propTypes.default.string.isRequired,
    disabled: _propTypes.default.bool,
    active: _propTypes.default.bool,
    options: _propTypes.default.arrayOf(_propTypes.default.shape({
      label: _propTypes.default.node.isRequired,
      value: _propTypes.default.string.isRequired,
      disabled: _propTypes.default.bool,
      active: _propTypes.default.bool
    }))
  })).isRequired,
  /**
   * `'light'`, `'dark'`.
   */
  coloring: _propTypes.default.oneOf(['light', 'dark']),
  /**
   * `'medium'`, `'small'`, or `'none'`.
   */
  padding: _propTypes.default.oneOf(['medium', 'small', 'none']),
  /**
   * Whether or not the select container has a triangle pointer.
   */
  hasPointer: _propTypes.default.bool,
  /**
   * If `true`, the select container will hide when its anchor is scrolled offscreen.
   * By default, the select container will follow its anchor wherever it goes.
   *
   * If your anchor is within an internally scrolling area, you may want to
   * use `true`, so the select container doesn't existing in a disembodied state after
   * its anchor is scrolled away.
   */
  hideWhenAnchorIsOffscreen: _propTypes.default.bool,
  /**
   * If `false`, the select container  is *not* allowed to change axes on the 
   * anchor when modifying its position to fit available space. By default, 
   * select containers on the `left` and `right`, for example, might change to `bottom` 
   * is there is neither space on the left nor the right.
   */
  allowPlacementAxisChange: _propTypes.default.bool,
  /**
   * Preferred placement of the select container in relation to the anchor.
   * Adjusted according to available space.
   */
  placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
  /**
   * `'center'`, `'start'`, `'end'` Alignment of the select container edge in relation to the trigger element.
   */
  alignment: _propTypes.default.oneOf(['center', 'start', 'end']),
  /** Called during changes to the input element. */
  onChange: _propTypes.default.func.isRequired,
  /** Assembly classes to apply to the select wrapper */
  themeSelectWrapper: _propTypes.default.string,
  /** Assembly classes to apply to the wrapper containing the select items */
  themeSelectItemWrapper: _propTypes.default.string,
  /** Assembly classes to apply to the select element */
  themeSelectItem: _propTypes.default.string,
  /**
  * If `false`, clicking outside the select container will not close it.
  * By default, it does.
  */
  clickOutsideCloses: _propTypes.default.bool,
  /**
   * If `false`, hitting Escape will not close the select container. By default, it does.
   */
  escapeCloses: _propTypes.default.bool,
  /**
   * A function called when select list open state changes.
   */
  onOpenChange: _propTypes.default.func,
  /**
   * A function called when select container is dismissed.
   */
  onExit: _propTypes.default.func,
  /**
   * Number of pixels by which the select container should be offset from its anchor.
   */
  offsetFromAnchor: _propTypes.default.number,
  /**
   * Props to pass directly to select content options from `@radix-ui/react-select`.
   */
  passthroughProps: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number]))
};
var _default = exports.default = Select;