@procore/core-react/dist/SuperSelect/SuperSelect.components.js

React library of Procore Design Guidelines

var _excluded = ["hoverable"],
  _excluded2 = ["placeholder"],
  _excluded3 = ["children", "isDragging"],
  _excluded4 = ["children", "isDragging"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
import { Check, Clear as ClearIcon, Grip } from '@procore/core-icons';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import React from 'react';
import { FakeCheckbox } from '../Checkbox/Checkbox';
import { Spinner } from '../Spinner/Spinner';
import { Token } from '../Token/Token';
import { Tooltip } from '../Tooltip/Tooltip';
import { Typeahead } from '../Typeahead/Typeahead';
import { useI18nContext } from '../_hooks/I18n';
import { OverflowObserver } from '../_hooks/OverflowObserver';
import { colors } from '../_styles/colors';
import { InternalDragDropContext } from './SuperSelect';
import { draggableOptionIdSymbol } from './SuperSelect.constants';
import { StyledArrow, StyledArrowContainer, StyledArrowFill, StyledArrowOutline, StyledCheckboxContainer, StyledCheckmarkContainer, StyledClearIcon, StyledDraggableWrapper, StyledEmptyMessage, StyledFooter, StyledGrip, StyledGroup, StyledHeader, StyledIndicators, StyledItem, StyledItemLabel, StyledLabel, StyledMultiInput, StyledMultiInputContainer, StyledMultiValue, StyledMultiValueContainer, StyledOptionGroupLabel, StyledOptions, StyledOverlay, StyledSearchContainer, StyledSelectAll, StyledTokenList, StyledTrigger } from './SuperSelect.styles';
import { useSuperSelectContext } from './useSuperSelect';
export var Overlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledOverlay, _extends({
    ref: ref
  }, props));
});
export var SingleTrigger = function SingleTrigger(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref) {
    var isOverflowingX = _ref.isOverflowingX,
      ref = _ref.ref;
    var showTooltip = !ctx.config.disabled && isOverflowingX && !ctx.state.open;
    var label = ctx.state.selectedLabel || ctx.config.placeholder;
    var labelComponent = /*#__PURE__*/React.createElement(ctx.components.Label, _extends({}, props, {
      ref: ref,
      hoverable: showTooltip
    }));
    return /*#__PURE__*/React.createElement(Tooltip, {
      trigger: showTooltip ? 'hover' : 'none',
      overlay: label
    }, labelComponent);
  });
};
export var MultiTrigger = function MultiTrigger(props) {
  var ctx = useSuperSelectContext();
  var i18n = useI18nContext();
  if (ctx.config.multiple && Array.isArray(ctx.state.value)) {
    var selectedLabels = ctx.state.value.map(function (val) {
      var option = ctx.state.sourceOptions.find(function (option) {
        return ctx.option.value(option) === val;
      });
      return option ? ctx.option.label(option) : '';
    }).filter(Boolean).join(', ');
    return /*#__PURE__*/React.createElement(ctx.components.MultiValueContainer, props, selectedLabels && /*#__PURE__*/React.createElement(VisuallyHidden, null, "".concat(i18n.t('core.select.selectedItems'), ": ").concat(selectedLabels)), ctx.state.value.length > 0 && /*#__PURE__*/React.createElement(StyledTokenList, {
      id: ctx.state.tokenListId,
      role: "list",
      "aria-label": i18n.t('core.select.selectedItems')
    }, ctx.state.value.map(function (val, j) {
      var option = ctx.state.sourceOptions.find(function (option) {
        return ctx.option.value(option) === val;
      });
      return option && /*#__PURE__*/React.createElement(ctx.components.MultiValue, {
        key: val,
        index: j,
        option: option
      });
    })), /*#__PURE__*/React.createElement(ctx.components.MultiInputContainer, null, /*#__PURE__*/React.createElement(ctx.components.MultiInput, ctx.props.multiInput())));
  }
  return null;
};
export var TriggerContainer = StyledTrigger;
export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(ctx.components.TriggerContainer, _extends({
    ref: ref
  }, props), ctx.config.multiple ? /*#__PURE__*/React.createElement(ctx.components.MultiTrigger, null) : /*#__PURE__*/React.createElement(ctx.components.SingleTrigger, null), /*#__PURE__*/React.createElement(ctx.components.Indicators, null));
});
export var Indicators = function Indicators(props) {
  var ctx = useSuperSelectContext();
  var hasValue = Array.isArray(ctx.state.value) ? ctx.state.value.length > 0 : ctx.state.value;
  return /*#__PURE__*/React.createElement(StyledIndicators, null, hasValue && /*#__PURE__*/React.createElement(ctx.components.Clear, null), ctx.config.loading ? /*#__PURE__*/React.createElement(ctx.components.Loading, null) : /*#__PURE__*/React.createElement(ctx.components.ArrowContainer, null, /*#__PURE__*/React.createElement(ctx.components.Arrow, {
    up: ctx.state.open,
    down: !ctx.state.open,
    width: 8,
    height: 4
  })));
};
export var Label = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var hoverable = _ref2.hoverable,
    props = _objectWithoutProperties(_ref2, _excluded);
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledLabel, _extends({}, props, ctx.props.label(), {
    ref: ref,
    $hoverable: hoverable
  }), ctx.state.selectedLabel || ctx.config.placeholder);
});
export var Loading = function Loading() {
  return /*#__PURE__*/React.createElement(Spinner, {
    color: "blue50",
    size: "xs"
  });
};
export var ArrowContainer = function ArrowContainer(props) {
  return /*#__PURE__*/React.createElement(StyledArrowContainer, props);
};
export var Arrow = function Arrow(_ref3) {
  var up = _ref3.up,
    down = _ref3.down,
    left = _ref3.left,
    right = _ref3.right,
    _ref3$width = _ref3.width,
    width = _ref3$width === void 0 ? 12 : _ref3$width,
    _ref3$height = _ref3.height,
    height = _ref3$height === void 0 ? 12 : _ref3$height,
    _ref3$border = _ref3.border,
    border = _ref3$border === void 0 ? 0 : _ref3$border;
  var outline = '';
  var fill = '';
  if (up) {
    outline = "0,".concat(height, " ").concat(width, ",").concat(height, " {width / 2},0");
    // prettier-ignore
    fill = "".concat(border, ",").concat(height, " ").concat(width - border, ",").concat(height, " ").concat(width / 2, ",").concat(border * 2);
  } else if (down) {
    outline = "0,0 ".concat(width, ",0 ").concat(width / 2, ",").concat(height);
    // prettier-ignore
    fill = "".concat(border, ",0 ").concat(width - border, ",0 ").concat(width / 2, ",").concat(height - border * 2);
  } else if (left) {
    outline = "".concat(width, ",0 ").concat(width, ",").concat(height, " 0,").concat(height / 2);
    // prettier-ignore
    fill = "".concat(width, ",").concat(border, " ").concat(width, ",").concat(height - border, " ").concat(border * 2, ",").concat(height / 2);
  } else if (right) {
    outline = "0,0 0,".concat(height, " ").concat(width, ",").concat(height / 2);
    // prettier-ignore
    fill = "0,".concat(border, " 0,").concat(height - border, " ").concat(width - border * 2, ",").concat(height / 2);
  }
  return /*#__PURE__*/React.createElement(StyledArrow, null, /*#__PURE__*/React.createElement("svg", {
    height: height,
    width: width,
    focusable: "false"
  }, border > 0 && /*#__PURE__*/React.createElement(StyledArrowOutline, {
    points: outline
  }), /*#__PURE__*/React.createElement(StyledArrowFill, {
    points: fill
  })));
};
export var Clear = function Clear() {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledClearIcon, _extends({}, ctx.props.clear(), {
    size: "sm",
    variant: "tertiary",
    disabled: ctx.config.disabled,
    icon: /*#__PURE__*/React.createElement(ClearIcon, null)
  }));
};
export var MultiInputContainer = function MultiInputContainer(props) {
  return /*#__PURE__*/React.createElement(StyledMultiInputContainer, null, props.children);
};
export var MultiInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var placeholder = props.placeholder,
    rest = _objectWithoutProperties(props, _excluded2);
  var showPlaceholder = Boolean(placeholder);
  return /*#__PURE__*/React.createElement(StyledMultiInput, _extends({
    ref: ref,
    type: "button",
    $placeholder: showPlaceholder
  }, rest), placeholder || null);
});
export var MultiValue = function MultiValue(props) {
  var ctx = useSuperSelectContext();
  var label = ctx.option.label(props.option);
  return /*#__PURE__*/React.createElement(StyledMultiValue, {
    id: "token-".concat(ctx.option.value(props.option))
  }, /*#__PURE__*/React.createElement(Token, {
    tabIndex: -1
  }, /*#__PURE__*/React.createElement(Token.Label, null, label), /*#__PURE__*/React.createElement(Token.Remove, _extends({
    tabIndex: -1
  }, ctx.props.tokenClear(props.index)))));
};
export var MultiValueContainer = function MultiValueContainer(props) {
  return /*#__PURE__*/React.createElement(StyledMultiValueContainer, props);
};
export var SearchContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledSearchContainer, _extends({
    ref: ref
  }, props));
});
export var Search = function Search(props) {
  return /*#__PURE__*/React.createElement(Typeahead, props);
};
export var Header = function Header(props) {
  return /*#__PURE__*/React.createElement(StyledHeader, props);
};
export var Footer = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledFooter, _extends({
    ref: ref
  }, props, {
    padding: "md lg"
  }));
});
export var EmptyMessage = function EmptyMessage(props) {
  return /*#__PURE__*/React.createElement(StyledEmptyMessage, props, props.emptyMessage);
};
export var Options = function Options(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledOptions, _extends({}, props, ctx.props.menu()));
};
export var Group = function Group(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledGroup, _extends({}, props, ctx.props.item(), {
    role: "separator",
    "aria-disabled": true
  }));
};
export var Item = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
  var _props$dataKnownSiz;
  var children = _ref4.children,
    _ref4$isDragging = _ref4.isDragging,
    isDragging = _ref4$isDragging === void 0 ? false : _ref4$isDragging,
    props = _objectWithoutProperties(_ref4, _excluded3);
  var ctx = useSuperSelectContext();
  var _React$useContext = React.useContext(InternalDragDropContext),
    isDraggingOver = _React$useContext.isDraggingOver;
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    size = _React$useState2[0],
    setSize = _React$useState2[1];
  var knownSize = (_props$dataKnownSiz = props['data-known-size']) !== null && _props$dataKnownSiz !== void 0 ? _props$dataKnownSiz : 0;
  React.useEffect(function () {
    setSize(function (prevSize) {
      return knownSize === 0 ? prevSize : knownSize;
    });
  }, [knownSize]);
  var index = props['data-index'];
  var withSelectAllIndex = ctx.config.selectAllEnabled && ctx.config.multiple ? index + 1 : index;
  var option = ctx.state.options[index];
  if (!option) {
    return null;
  }
  var isDisabled = ctx.option.isDisabled(option);
  var isPartiallySelected = ctx.option.isPartiallySelected(option);
  var isSelected = ctx.option.isSelected(option);
  var isOptgroup = ctx.option.isOptgroup(option);
  var value = ctx === null || ctx === void 0 ? void 0 : ctx.option.value(option);
  function setNode(node) {
    if (ctx) {
      ctx.refs.navigationList.current[withSelectAllIndex] = node;
    }
  }
  if (isOptgroup) {
    return /*#__PURE__*/React.createElement(ctx.components.Group, props, children);
  }
  return /*#__PURE__*/React.createElement(StyledItem, _extends({}, props, ctx.props.item({
    onClick: function onClick() {
      return ctx.state.onSelect(option);
    }
  }), {
    $disabled: ctx.option.isDisabled(option),
    $emptyMinHeight: size,
    $highlighted: ctx.state.activeMenuIndex === withSelectAllIndex,
    $isDraggable: !isDisabled,
    $isDragging: isDragging,
    $isDraggingDisabled: Boolean(ctx.state.searchValue),
    $isDraggingOver: isDraggingOver,
    $selected: isSelected,
    "aria-disabled": isDisabled || undefined,
    "aria-posinset": withSelectAllIndex,
    "aria-selected": isSelected,
    "aria-setsize": ctx.state.options.length || 0,
    id: "item-".concat(value),
    ref: setNode,
    role: "option"
  }), ctx.config.selectionStyle === 'checkbox' && /*#__PURE__*/React.createElement(ctx.components.CheckboxContainer, null, isPartiallySelected && !isSelected ? /*#__PURE__*/React.createElement(ctx.components.Checkbox, {
    disabled: isDisabled,
    indeterminate: isPartiallySelected
  }) : /*#__PURE__*/React.createElement(ctx.components.Checkbox, {
    disabled: isDisabled,
    checked: isSelected
  })), children, ctx.config.selectionStyle === 'checkmark' && /*#__PURE__*/React.createElement(ctx.components.CheckmarkContainer, null, isSelected && /*#__PURE__*/React.createElement(ctx.components.Checkmark, null)));
});

// NOTE: SelectAll Implementation Details
// ====================================
// The team wanted wanted to keep the Item component fairly untouched and make SelectAll its own
// standalone component. This separation required modifications to several functions to ensure proper keyboard
// navigation and mouse hover behavior work seamlessly between SelectAll and the virtualized options.
//
// Key functions that were modified due to this separation:
// 1. allOptionsWithSelectAll - Creates combined list for navigation calculations
// 2. groupIndices - Adjusted to account for SelectAll at index 0
// 3. selectedIndex - Modified to reference absolute positions including SelectAll
// 4. selectedOption - Updated to search complete list including SelectAll
// 5. onKeyboardSelect - Uses combined list for proper option selection
// 6. navigationList.current length - Adjusted to include SelectAll in navigation array
// 7. virtuoso scrollIntoView - Index adjustment to handle SelectAll being rendered separately
// 8. SuperSelect.components.tsx SelectAll - Added onMouseMove handler for hover detection
// 9. SuperSelect.tsx itemContent - Index adjustment to prevent data-index conflicts
//
// Without these modifications, keyboard navigation would skip SelectAll, hover states wouldn't
// work properly, and there would be index mismatches between the navigation system and the
// actual rendered options.
export var SelectAll = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
  var _props$dataKnownSiz2;
  var children = _ref5.children,
    _ref5$isDragging = _ref5.isDragging,
    isDragging = _ref5$isDragging === void 0 ? false : _ref5$isDragging,
    props = _objectWithoutProperties(_ref5, _excluded4);
  var ctx = useSuperSelectContext();
  var _React$useState3 = React.useState(0),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    size = _React$useState4[0],
    setSize = _React$useState4[1];
  var knownSize = (_props$dataKnownSiz2 = props['data-known-size']) !== null && _props$dataKnownSiz2 !== void 0 ? _props$dataKnownSiz2 : 0;

  // TODO: There is a conflict with data-index. The index for select all is 0
  // and the first item in the options list is also 0. This causes DOM conflicts
  // where two elements have the same data-index attribute, which can confuse
  // the navigation system and cause hover/selection issues.
  var index = props['data-index']; // Select all should always be index 0
  var selectableOptions = ctx.state.options.filter(function (opt) {
    return !ctx.option.isOptgroup(opt);
  });
  var isSelected = ctx.option.selectAll.isSelectAllSelected(selectableOptions) && selectableOptions.length > 0;
  var isPartiallySelected = ctx.option.selectAll.isSelectAllPartiallySelected(selectableOptions);
  var isDisabled = ctx.config.loading || !selectableOptions.length;
  function setNode(node) {
    if (ctx) {
      ctx.refs.navigationList.current[index] = node;
    }
  }
  React.useEffect(function () {
    setSize(function (prevSize) {
      return knownSize === 0 ? prevSize : knownSize;
    });
  }, [knownSize]);
  var handleClick = function handleClick() {
    !isDisabled && ctx.state.onSelect(ctx.state.selectAllOption);
  };
  return /*#__PURE__*/React.createElement(StyledSelectAll, null, /*#__PURE__*/React.createElement(StyledItem, _extends({}, props, ctx.props.item({
    onClick: handleClick,
    onMouseMove: function onMouseMove(event) {
      // Update the active menu index when hovering over SelectAll
      if (ctx.state.activeMenuIndex !== index) {
        ctx.state.setActiveMenuIndex(index);
      }
    }
  }), {
    $disabled: isDisabled,
    $emptyMinHeight: size,
    $highlighted: ctx.state.activeMenuIndex === index,
    $selected: isSelected,
    "aria-disabled": isDisabled || undefined,
    "aria-posinset": index,
    "aria-selected": isSelected,
    "aria-setsize": ctx.state.options.length || 0,
    id: "item-".concat(ctx.state.selectAllOption.id),
    ref: setNode,
    role: "option"
  }), ctx.config.selectionStyle === 'checkbox' && /*#__PURE__*/React.createElement(ctx.components.CheckboxContainer, null, isPartiallySelected && !isSelected ? /*#__PURE__*/React.createElement(ctx.components.Checkbox, {
    disabled: isDisabled,
    indeterminate: isPartiallySelected
  }) : /*#__PURE__*/React.createElement(ctx.components.Checkbox, {
    disabled: isDisabled,
    checked: isSelected
  })), children, ctx.config.selectionStyle === 'checkmark' && /*#__PURE__*/React.createElement(ctx.components.CheckmarkContainer, null, isSelected && /*#__PURE__*/React.createElement(ctx.components.Checkmark, null))));
});
export var OptionGroupHeader = function OptionGroupHeader(_ref6) {
  var optgroup = _ref6.optgroup;
  return /*#__PURE__*/React.createElement(StyledOptionGroupLabel, null, optgroup.label);
};
export var OptionLabel = function OptionLabel(_ref7) {
  var option = _ref7.option;
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledItemLabel, {
    $draggable: ctx.config.draggable
  }, ctx.option.label(option));
};
export var OptionContent = function OptionContent(_ref8) {
  var option = _ref8.option;
  var ctx = useSuperSelectContext();
  if (ctx.option.isOptgroup(option)) {
    return /*#__PURE__*/React.createElement(ctx.components.OptionGroupHeader, {
      optgroup: option
    });
  }
  return /*#__PURE__*/React.createElement(ctx.components.OptionLabel, {
    option: option
  });
};
export var DraggableOptionContent = function DraggableOptionContent(_ref9) {
  var index = _ref9.index,
    option = _ref9.option;
  var ctx = useSuperSelectContext();
  var disabled = ctx.option.isDisabled(option);
  var isOptgroup = ctx.option.isOptgroup(option);
  var optionId = isOptgroup ? option.id : option[draggableOptionIdSymbol];
  return /*#__PURE__*/React.createElement(Draggable, {
    draggableId: optionId,
    index: index,
    key: optionId,
    isDragDisabled: isOptgroup || disabled || Boolean(ctx.state.searchValue)
  }, function (provided) {
    return /*#__PURE__*/React.createElement(StyledDraggableWrapper, _extends({
      ref: provided.innerRef
    }, provided.draggableProps, provided.dragHandleProps), !isOptgroup && /*#__PURE__*/React.createElement(ctx.components.DragHandle, null), /*#__PURE__*/React.createElement(ctx.components.OptionContent, {
      index: index,
      option: option
    }));
  });
};
export var DragHandle = function DragHandle(props) {
  return /*#__PURE__*/React.createElement(StyledGrip, props, /*#__PURE__*/React.createElement(Grip, {
    color: colors.gray45
  }));
};
export var CheckboxContainer = function CheckboxContainer(props) {
  return /*#__PURE__*/React.createElement(StyledCheckboxContainer, props);
};
export var Checkbox = function Checkbox(props) {
  return /*#__PURE__*/React.createElement(FakeCheckbox, props);
};
export var CheckmarkContainer = function CheckmarkContainer(props) {
  return /*#__PURE__*/React.createElement(StyledCheckmarkContainer, props);
};
export var Checkmark = function Checkmark(props) {
  return /*#__PURE__*/React.createElement(Check, _extends({}, props, {
    size: "sm"
  }));
};
//# sourceMappingURL=SuperSelect.components.js.map