@procore/core-react 11.22.0 → 11.23.0

package/dist/SuperSelect/SuperSelect.components.js

@@ -1,25 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+var _excluded = ["hoverable"],
+  _excluded2 = ["children", "isDragging"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+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); }
 import { Check, Clear as ClearIcon, Grip } from '@procore/core-icons';
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
@@ -32,218 +21,307 @@ 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, StyledTrigger, } from './SuperSelect.styles';
+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, StyledTrigger } from './SuperSelect.styles';
 import { useSuperSelectContext } from './useSuperSelect';
-export var Overlay = React.forwardRef(function (props, ref) {
-    return React.createElement(StyledOverlay, __assign({ ref: ref }, props));
+export var Overlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(StyledOverlay, _extends({
+    ref: ref
+  }, props));
 });
-export var SingleTrigger = function (props) {
-    var ctx = useSuperSelectContext();
-    return (React.createElement(OverflowObserver, null, function (_a) {
-        var isOverflowingX = _a.isOverflowingX, ref = _a.ref;
-        var showTooltip = !ctx.config.disabled && isOverflowingX && !ctx.state.open;
-        var label = ctx.state.selectedLabel || ctx.config.placeholder;
-        var labelComponent = (React.createElement(ctx.components.Label, __assign({}, props, { ref: ref, hoverable: showTooltip })));
-        return (React.createElement(Tooltip, { trigger: showTooltip ? 'hover' : 'none', overlay: label }, labelComponent));
+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 (props) {
-    var _a;
-    var ctx = useSuperSelectContext();
-    if (ctx.config.multiple && Array.isArray(ctx.state.value)) {
-        return (React.createElement(ctx.components.MultiValueContainer, __assign({}, props), (_a = ctx.state.value) === null || _a === void 0 ? void 0 :
-            _a.map(function (val, j) {
-                var option = ctx.state.sourceOptions.find(function (o) { return ctx.option.value(o) === val; });
-                return (option && React.createElement(ctx.components.MultiValue, { index: j, option: option }));
-            }),
-            React.createElement(ctx.components.MultiInputContainer, null,
-                React.createElement(ctx.components.MultiInput, __assign({}, ctx.props.multiInput())))));
-    }
-    return null;
+export var MultiTrigger = function MultiTrigger(props) {
+  var ctx = useSuperSelectContext();
+  if (ctx.config.multiple && Array.isArray(ctx.state.value)) {
+    var _ctx$state$value;
+    return /*#__PURE__*/React.createElement(ctx.components.MultiValueContainer, props, (_ctx$state$value = ctx.state.value) === null || _ctx$state$value === void 0 ? void 0 : _ctx$state$value.map(function (val, j) {
+      var option = ctx.state.sourceOptions.find(function (o) {
+        return ctx.option.value(o) === val;
+      });
+      return option && /*#__PURE__*/React.createElement(ctx.components.MultiValue, {
+        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 = React.forwardRef(function (props, ref) {
-    var ctx = useSuperSelectContext();
-    var searchRef = React.useRef(null);
-    React.useEffect(function () {
-        var _a;
-        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [ctx.state.value]);
-    return (React.createElement(ctx.components.TriggerContainer, __assign({ ref: ref }, props),
-        ctx.config.multiple ? (React.createElement(ctx.components.MultiTrigger, null)) : (React.createElement(ctx.components.SingleTrigger, null)),
-        React.createElement(ctx.components.Indicators, null)));
+export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var ctx = useSuperSelectContext();
+  var searchRef = React.useRef(null);
+  React.useEffect(function () {
+    var _searchRef$current;
+    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus();
+  }, [ctx.state.value]);
+  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 (props) {
-    var ctx = useSuperSelectContext();
-    var hasValue = Array.isArray(ctx.state.value)
-        ? ctx.state.value.length > 0
-        : ctx.state.value;
-    return (React.createElement(StyledIndicators, null,
-        hasValue && React.createElement(ctx.components.Clear, null),
-        ctx.config.loading ? (React.createElement(ctx.components.Loading, null)) : (React.createElement(ctx.components.ArrowContainer, null,
-            React.createElement(ctx.components.Arrow, { up: ctx.state.open, down: !ctx.state.open, width: 8, height: 4 })))));
-};
-export var Label = React.forwardRef(function (_a, ref) {
-    var hoverable = _a.hoverable, props = __rest(_a, ["hoverable"]);
-    var ctx = useSuperSelectContext();
-    return (React.createElement(StyledLabel, __assign({}, props, ctx.props.label(), { ref: ref, "$hoverable": hoverable }), ctx.state.selectedLabel || ctx.config.placeholder));
+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 () {
-    return React.createElement(Spinner, { color: "blue50", size: "xs" });
-};
-export var ArrowContainer = function (props) {
-    return React.createElement(StyledArrowContainer, __assign({}, props));
-};
-export var Arrow = function (_a) {
-    var up = _a.up, down = _a.down, left = _a.left, right = _a.right, _b = _a.width, width = _b === void 0 ? 12 : _b, _c = _a.height, height = _c === void 0 ? 12 : _c, _d = _a.border, border = _d === void 0 ? 0 : _d;
-    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 (React.createElement(StyledArrow, null,
-        React.createElement("svg", { height: height, width: width, focusable: "false" },
-            border > 0 && React.createElement(StyledArrowOutline, { points: outline }),
-            React.createElement(StyledArrowFill, { points: fill }))));
+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 Clear = function () {
-    var ctx = useSuperSelectContext();
-    return (React.createElement(StyledClearIcon, __assign({}, ctx.props.clear(), { size: "sm", variant: "tertiary", disabled: ctx.config.disabled, icon: React.createElement(ClearIcon, null), tabIndex: -1 })));
+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 MultiInputContainer = function (props) {
-    return React.createElement(StyledMultiInputContainer, null, props.children);
+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),
+    tabIndex: -1 // TODO revisit this accessibility
+  }));
 };
-export var MultiInput = React.forwardRef(function (props, ref) {
-    return React.createElement(StyledMultiInput, __assign({ ref: ref }, props));
+
+export var MultiInputContainer = function MultiInputContainer(props) {
+  return /*#__PURE__*/React.createElement(StyledMultiInputContainer, null, props.children);
+};
+export var MultiInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(StyledMultiInput, _extends({
+    ref: ref
+  }, props));
 });
-export var MultiValue = function (props) {
-    var ctx = useSuperSelectContext();
-    return (React.createElement(StyledMultiValue, null,
-        React.createElement(Token, { focused: ctx.state.activeTokenIndex === props.index },
-            React.createElement(Token.Label, null, ctx.option.label(props.option)),
-            React.createElement(Token.Remove, __assign({}, ctx.props.tokenClear(props.index))))));
-};
-export var MultiValueContainer = function (props) {
-    return React.createElement(StyledMultiValueContainer, __assign({}, props));
-};
-export var SearchContainer = React.forwardRef(function (props, ref) {
-    return React.createElement(StyledSearchContainer, __assign({ ref: ref }, props));
+export var MultiValue = function MultiValue(props) {
+  var ctx = useSuperSelectContext();
+  return /*#__PURE__*/React.createElement(StyledMultiValue, null, /*#__PURE__*/React.createElement(Token, {
+    focused: ctx.state.activeTokenIndex === props.index
+  }, /*#__PURE__*/React.createElement(Token.Label, null, ctx.option.label(props.option)), /*#__PURE__*/React.createElement(Token.Remove, 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 (props) {
-    return React.createElement(Typeahead, __assign({}, props));
+export var Search = function Search(props) {
+  return /*#__PURE__*/React.createElement(Typeahead, props);
 };
-export var Header = function (props) {
-    return React.createElement(StyledHeader, __assign({}, props));
+export var Header = function Header(props) {
+  return /*#__PURE__*/React.createElement(StyledHeader, props);
 };
-export var Footer = React.forwardRef(function (props, ref) {
-    return React.createElement(StyledFooter, __assign({ ref: ref }, props, { padding: "md lg" }));
+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 (props) {
-    return (React.createElement(StyledEmptyMessage, __assign({}, props), props.emptyMessage));
-};
-export var Options = function (props) {
-    var ctx = useSuperSelectContext();
-    return React.createElement(StyledOptions, __assign({}, props, ctx.props.menu()));
-};
-export var Group = function (props) {
-    var ctx = useSuperSelectContext();
-    return (React.createElement(StyledGroup, __assign({}, props, ctx.props.item(), { role: "separator", "aria-disabled": true })));
-};
-export var Item = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, _c = _a.isDragging, isDragging = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isDragging"]);
-    var ctx = useSuperSelectContext();
-    var isDraggingOver = React.useContext(InternalDragDropContext).isDraggingOver;
-    var _d = React.useState(0), size = _d[0], setSize = _d[1];
-    var knownSize = (_b = props['data-known-size']) !== null && _b !== void 0 ? _b : 0;
-    React.useEffect(function () {
-        setSize(function (prevSize) { return (knownSize === 0 ? prevSize : knownSize); });
-    }, [knownSize]);
-    var index = props['data-index'];
-    var option = ctx.state.options[index];
-    if (!option) {
-        return null;
-    }
-    var isDisabled = ctx.option.isDisabled(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[index] = node;
-        }
+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, _excluded2);
+  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 option = ctx.state.options[index];
+  if (!option) {
+    return null;
+  }
+  var isDisabled = ctx.option.isDisabled(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[index] = node;
     }
-    if (isOptgroup) {
-        return React.createElement(ctx.components.Group, __assign({}, props), children);
+  }
+  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);
     }
-    return (React.createElement(StyledItem, __assign({}, props, ctx.props.item({
-        onClick: function () { return ctx.state.onSelect(option); },
-    }), { "$disabled": ctx.option.isDisabled(option), "$emptyMinHeight": size, "$highlighted": ctx.state.activeMenuIndex === index, "$isDraggable": !isDisabled, "$isDragging": isDragging, "$isDraggingDisabled": Boolean(ctx.state.searchValue), "$isDraggingOver": isDraggingOver, "$selected": isSelected, "aria-posinset": index + 1, "aria-selected": ctx.state.activeMenuIndex === index, "aria-setsize": ctx.state.options.length || 0, id: "item-".concat(value), ref: setNode, role: "option" }),
-        ctx.config.selectionStyle === 'checkbox' && (React.createElement(ctx.components.CheckboxContainer, null,
-            React.createElement(ctx.components.Checkbox, { disabled: isDisabled, checked: isSelected }))),
-        children,
-        ctx.config.selectionStyle === 'checkmark' && (React.createElement(ctx.components.CheckmarkContainer, null, isSelected && React.createElement(ctx.components.Checkmark, null)))));
+  }), {
+    $disabled: ctx.option.isDisabled(option),
+    $emptyMinHeight: size,
+    $highlighted: ctx.state.activeMenuIndex === index,
+    $isDraggable: !isDisabled,
+    $isDragging: isDragging,
+    $isDraggingDisabled: Boolean(ctx.state.searchValue),
+    $isDraggingOver: isDraggingOver,
+    $selected: isSelected,
+    "aria-posinset": index + 1,
+    "aria-selected": ctx.state.activeMenuIndex === index,
+    "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, /*#__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 (_a) {
-    var optgroup = _a.optgroup;
-    return React.createElement(StyledOptionGroupLabel, null, optgroup.label);
-};
-export var OptionLabel = function (_a) {
-    var option = _a.option;
-    var ctx = useSuperSelectContext();
-    return (React.createElement(StyledItemLabel, { "$draggable": ctx.config.draggable }, ctx.option.label(option)));
-};
-export var OptionContent = function (_a) {
-    var option = _a.option;
-    var ctx = useSuperSelectContext();
-    if (ctx.option.isOptgroup(option)) {
-        return React.createElement(ctx.components.OptionGroupHeader, { optgroup: option });
-    }
-    return React.createElement(ctx.components.OptionLabel, { option: option });
-};
-export var DraggableOptionContent = function (_a) {
-    var index = _a.index, option = _a.option;
-    var ctx = useSuperSelectContext();
-    var disabled = ctx.option.isDisabled(option);
-    var isOptgroup = ctx.option.isOptgroup(option);
-    var optionId = isOptgroup ? option.id : option[draggableOptionIdSymbol];
-    return (React.createElement(Draggable, { draggableId: optionId, index: index, key: optionId, isDragDisabled: isOptgroup || disabled || Boolean(ctx.state.searchValue) }, function (provided) {
-        return (React.createElement(StyledDraggableWrapper, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
-            !isOptgroup && React.createElement(ctx.components.DragHandle, null),
-            React.createElement(ctx.components.OptionContent, { index: index, option: option })));
+export var OptionGroupHeader = function OptionGroupHeader(_ref5) {
+  var optgroup = _ref5.optgroup;
+  return /*#__PURE__*/React.createElement(StyledOptionGroupLabel, null, optgroup.label);
+};
+export var OptionLabel = function OptionLabel(_ref6) {
+  var option = _ref6.option;
+  var ctx = useSuperSelectContext();
+  return /*#__PURE__*/React.createElement(StyledItemLabel, {
+    $draggable: ctx.config.draggable
+  }, ctx.option.label(option));
+};
+export var OptionContent = function OptionContent(_ref7) {
+  var option = _ref7.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(_ref8) {
+  var index = _ref8.index,
+    option = _ref8.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 (props) {
-    return (React.createElement(StyledGrip, __assign({}, props),
-        React.createElement(Grip, { color: colors.gray45 })));
+export var DragHandle = function DragHandle(props) {
+  return /*#__PURE__*/React.createElement(StyledGrip, props, /*#__PURE__*/React.createElement(Grip, {
+    color: colors.gray45
+  }));
 };
-export var CheckboxContainer = function (props) {
-    return React.createElement(StyledCheckboxContainer, __assign({}, props));
+export var CheckboxContainer = function CheckboxContainer(props) {
+  return /*#__PURE__*/React.createElement(StyledCheckboxContainer, props);
 };
-export var Checkbox = function (props) {
-    return React.createElement(FakeCheckbox, __assign({}, props));
+export var Checkbox = function Checkbox(props) {
+  return /*#__PURE__*/React.createElement(FakeCheckbox, props);
 };
-export var CheckmarkContainer = function (props) {
-    return React.createElement(StyledCheckmarkContainer, __assign({}, props));
+export var CheckmarkContainer = function CheckmarkContainer(props) {
+  return /*#__PURE__*/React.createElement(StyledCheckmarkContainer, props);
 };
-export var Checkmark = function (props) {
-    return React.createElement(Check, __assign({}, props, { size: "sm" }));
+export var Checkmark = function Checkmark(props) {
+  return /*#__PURE__*/React.createElement(Check, _extends({}, props, {
+    size: "sm"
+  }));
 };
 //# sourceMappingURL=SuperSelect.components.js.map