@procore/core-react 12.37.0 → 12.39.0

package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js

@@ -7,23 +7,23 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledThumbnailListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailListContainer",
-  componentId: "core-12_37_0__sc-1fz4ynb-0"
+  componentId: "core-12_39_0__sc-1fz4ynb-0"
 })(["display:flex;flex-direction:column;align-items:stretch;outline:none;"]);
 export var StyledThumbnailList = /*#__PURE__*/styled(List).withConfig({
   displayName: "StyledThumbnailList",
-  componentId: "core-12_37_0__sc-1fz4ynb-1"
+  componentId: "core-12_39_0__sc-1fz4ynb-1"
 })(["outline:none;"]);
 export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
   displayName: "StyledThumbnail",
-  componentId: "core-12_37_0__sc-1fz4ynb-2"
+  componentId: "core-12_39_0__sc-1fz4ynb-2"
 })(["flex-grow:1;justify-content:flex-start;"]);
 export var StyledProgress = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgress",
-  componentId: "core-12_37_0__sc-1fz4ynb-3"
+  componentId: "core-12_39_0__sc-1fz4ynb-3"
 })(["width:146px;padding:0 ", "px 0 ", "px;margin-left:auto;"], spacing.lg, spacing.xl);
 export var StyledThumbnailListItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailListItem",
-  componentId: "core-12_37_0__sc-1fz4ynb-4"
+  componentId: "core-12_39_0__sc-1fz4ynb-4"
 })(["display:flex;flex-grow:1;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, getTypographyIntent('body'), function (_ref) {
   var error = _ref.error;
   return !error && "\n      &:hover {\n        background-color: ".concat(colors.gray96, ";\n      }\n    ");
@@ -37,6 +37,6 @@ export var StyledThumbnailListItem = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledDeleteIcon = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledDeleteIcon",
-  componentId: "core-12_37_0__sc-1fz4ynb-5"
+  componentId: "core-12_39_0__sc-1fz4ynb-5"
 })([""]);
 //# sourceMappingURL=ThumbnailList.styles.js.map

package/dist/FileSelect/TreeSource/TreeSource.styles.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 import { modalBodyHeight } from '../FileExplorer/FileExplorer.styles';
 export var StyledFileTreeSpinner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileTreeSpinner",
-  componentId: "core-12_37_0__sc-wwu3n8-0"
+  componentId: "core-12_39_0__sc-wwu3n8-0"
 })(["display:flex;align-items:center;justify-content:center;height:", "px;"], modalBodyHeight);
 //# sourceMappingURL=TreeSource.styles.js.map

package/dist/FileToken/FileToken.styles.js

@@ -6,19 +6,19 @@ export var pulseAnimationDuration = 600;
 var focusPulse = /*#__PURE__*/keyframes(["0%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}25%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}50%{box-shadow:0 0 0 1px ", ",0 0 0 3px ", ",0 0 0 2px ", ";}100%{box-shadow:0 0 0 1.5px ", ",0 0 0 3px ", ",0 0 0 6px ", ";}"], colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94);
 export var StyledFilenameShortcut = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilenameShortcut",
-  componentId: "core-12_37_0__sc-13jx4bx-0"
+  componentId: "core-12_39_0__sc-13jx4bx-0"
 })(["display:flex;"]);
 export var StyledFilename = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFilename",
-  componentId: "core-12_37_0__sc-13jx4bx-1"
+  componentId: "core-12_39_0__sc-13jx4bx-1"
 })(["flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;"]);
 export var StyledExtension = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledExtension",
-  componentId: "core-12_37_0__sc-13jx4bx-2"
+  componentId: "core-12_39_0__sc-13jx4bx-2"
 })(["flex-shrink:0;"]);
 export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileToken",
-  componentId: "core-12_37_0__sc-13jx4bx-3"
+  componentId: "core-12_39_0__sc-13jx4bx-3"
 })(["background-color:", ";border-radius:200px;max-width:100%;outline:none;overflow:hidden;position:relative;&:focus,&.focus{box-shadow:0 0 0 2px ", ";outline:none;", "{border-color:transparent;", "}}", "{background:none;color:", ";display:flex;user-select:none;", "{color:", ";}}", "{overflow:hidden;", "{border-radius:200px 0 0 200px;color:", ";padding-right:0;transition:color 0s linear,background-color 0s linear;user-select:none;", "{flex:0 0 auto;}}}", ""], colors.gray96, colors.blue40, StyledToken, function (_ref) {
   var $progressComplete = _ref.$progressComplete;
   return $progressComplete && css(["background-color:", ";"], colors.blue45);

package/dist/FilterToken/FilterToken.styles.js

@@ -6,11 +6,11 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_37_0__sc-1l1h29r-0"
+  componentId: "core-12_39_0__sc-1l1h29r-0"
 })(["", " ", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis, semiboldRules);
 export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilterToken",
-  componentId: "core-12_37_0__sc-1l1h29r-1"
+  componentId: "core-12_39_0__sc-1l1h29r-1"
 })(["align-items:center;background-color:", ";border-radius:4px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:36px;justify-content:space-between;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", ""], colors.blue96, colors.blue45, spacing.sm, spacing.md, colors.blue90, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused;
@@ -18,17 +18,17 @@ export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFilterRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledFilterRemoveButton",
-  componentId: "core-12_37_0__sc-1l1h29r-2"
+  componentId: "core-12_39_0__sc-1l1h29r-2"
 })(["", " ", ";background:transparent;color:", ";&:active,&:focus,&:hover{background:", ";color:", ";}&:disabled{pointer-events:none;user-select:none;}&:disabled,&[aria-disabled='true']{background:transparent;color:", ";}height:24px;margin:0 0 0 6px;padding:0 ", "px;[data-icon-prop='true']{pointer-events:none;height:16px;width:16px;}"], function (_ref2) {
   var $disabled = _ref2.$disabled;
   return getButtonStyles(false, $disabled, false, 'sm', 'tertiary');
 }, getTypographyIntent('small'), colors.blue45, colors.white, colors.blue45, colors.blue45, spacing.xs);
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_37_0__sc-1l1h29r-3"
+  componentId: "core-12_39_0__sc-1l1h29r-3"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledContentLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContentLabel",
-  componentId: "core-12_37_0__sc-1l1h29r-4"
+  componentId: "core-12_39_0__sc-1l1h29r-4"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 //# sourceMappingURL=FilterToken.styles.js.map

package/dist/FlexList/FlexList.styles.js

@@ -3,7 +3,7 @@ import { StyledBox } from '../Box/Box.styles';
 import { Flex } from '../Flex/Flex';
 export var StyledFlex = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledFlex",
-  componentId: "core-12_37_0__sc-1quvv61-0"
+  componentId: "core-12_39_0__sc-1quvv61-0"
 })(["> ", "{", "}"], StyledBox, function (_ref) {
   var $direction = _ref.$direction;
   if ($direction !== null && $direction !== void 0 && $direction.includes('reverse')) {

package/dist/Form/Form.js

@@ -24,22 +24,17 @@ var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigati
   _excluded22 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
   _excluded23 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
   _excluded24 = ["getId", "getLabel"],
-  _excluded25 = ["getId", "getLabel"],
-  _excluded26 = ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"],
-  _excluded27 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"],
-  _excluded28 = ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"],
-  _excluded29 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"],
-  _excluded30 = ["field", "onBlur", "onChange", "getId", "getLabel"],
-  _excluded31 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"],
-  _excluded32 = ["field", "onBlur", "onChange", "getId", "getLabel"],
-  _excluded33 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"],
-  _excluded34 = ["field", "onBlur", "onChange", "onClear", "getId", "getLabel"],
-  _excluded35 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"];
+  _excluded25 = ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupRenderer", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"],
+  _excluded26 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "groupRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"],
+  _excluded27 = ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"],
+  _excluded28 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"],
+  _excluded29 = ["field", "onBlur", "onChange", "getId", "getLabel"],
+  _excluded30 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "groupRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"],
+  _excluded31 = ["field", "onBlur", "onChange", "getId", "getLabel"],
+  _excluded32 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"],
+  _excluded33 = ["field", "onBlur", "onChange", "onClear", "getId", "getLabel"],
+  _excluded34 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 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); }
 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; }
@@ -397,7 +392,7 @@ export function WXPField(_ref5) {
   var errorDescribedBy = field.meta.error && field.messages.error ? fieldErrorId : undefined;
   var descriptionDescribedBy = description ? descriptionId : undefined;
   var inlineDescriptionDescribedBy = singleCheckboxInlineDescription ? inlineDescriptionId : undefined;
-  var valueComponentAriaProps = {
+  var valueComponentAriaProps = field.meta.view === 'read' ? {} : {
     'aria-invalid': field.meta.error ? true : undefined,
     'aria-labelledby': label ? labelId : undefined,
     'aria-describedby': [errorDescribedBy, descriptionDescribedBy, inlineDescriptionDescribedBy].filter(function (value) {
@@ -847,29 +842,33 @@ export var CheckboxOutput = /*#__PURE__*/React.forwardRef(function CheckboxOutpu
   var yes = /*#__PURE__*/React.createElement("span", {
     style: {
       verticalAlign: 'middle'
-    },
+    }
+  }, /*#__PURE__*/React.createElement(Check, {
+    size: "sm",
     "aria-label": i18n.t('checked', {
       scope: i18nScope,
       // old default supports new key addition and backwards i18nScope support. changed 11.x
       defaultValue: i18n.t('yes', {
         scope: i18nScope
       })
-    })
-  }, /*#__PURE__*/React.createElement(Check, {
-    size: "sm"
+    }),
+    "aria-hidden": false,
+    role: "img"
   }));
   var no = /*#__PURE__*/React.createElement("span", {
     style: {
       verticalAlign: 'middle'
-    },
+    }
+  }, /*#__PURE__*/React.createElement(Ban, {
+    size: "sm",
     "aria-label": i18n.t('unchecked', {
       scope: i18nScope,
       defaultValue: i18n.t('no', {
         scope: i18nScope
       })
-    })
-  }, /*#__PURE__*/React.createElement(Ban, {
-    size: "sm"
+    }),
+    "aria-hidden": false,
+    role: "img"
   }));
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
@@ -1135,15 +1134,16 @@ export function useOptions(_ref25) {
       console.warn("Could not find option groups for the options below. Make sure that every option has a proper \"groupId\" field or if \"getGroup\" is implemented correctly.", orphanOptions);
     }
     return optgroups.flatMap(function (group) {
-      var groupHeader = _objectSpread(_objectSpread({}, group), {}, {
-        isGroupHeader: true
-      });
       var groupOptions = optionsByGroup[groupGetId(group)];
       if (!groupOptions.length) {
         return [];
       }
-      return [groupHeader].concat(_toConsumableArray(groupOptions));
-    }, []);
+      var groupHeader = _objectSpread(_objectSpread({}, group), {}, {
+        isGroupHeader: true,
+        options: groupOptions
+      });
+      return [groupHeader];
+    });
   }, [filteredOptions, getGroup, groupGetId, optgroups]);
   var selected = options.find(function (option) {
     return value && getId(option) === getId(value);
@@ -1160,11 +1160,13 @@ function defaultOptionRenderer(item, _ref26) {
     props = _objectWithoutProperties(_ref26, _excluded24);
   return /*#__PURE__*/React.createElement(Select.Option, props, getLabel(item));
 }
-function defaultGroupHeaderRenderer(group, _ref27) {
+function defaultGroupRenderer(group, _ref27) {
   var getId = _ref27.getId,
     getLabel = _ref27.getLabel,
-    props = _objectWithoutProperties(_ref27, _excluded25);
-  return /*#__PURE__*/React.createElement(Select.OptGroup, props, getLabel(group));
+    children = _ref27.children;
+  return /*#__PURE__*/React.createElement(Select.OptGroup, {
+    label: getLabel(group)
+  }, children);
 }
 export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref28, ref) {
   var _afterHide = _ref28.afterHide,
@@ -1179,8 +1181,9 @@ export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref
     groupGetId = _ref28$groupGetId === void 0 ? defaultGetId : _ref28$groupGetId,
     _ref28$groupGetLabel = _ref28.groupGetLabel,
     groupGetLabel = _ref28$groupGetLabel === void 0 ? defaultGetLabel : _ref28$groupGetLabel,
-    _ref28$groupHeaderRen = _ref28.groupHeaderRenderer,
-    groupHeaderRenderer = _ref28$groupHeaderRen === void 0 ? defaultGroupHeaderRenderer : _ref28$groupHeaderRen,
+    _ref28$groupRenderer = _ref28.groupRenderer,
+    groupRenderer = _ref28$groupRenderer === void 0 ? defaultGroupRenderer : _ref28$groupRenderer,
+    groupHeaderRenderer = _ref28.groupHeaderRenderer,
     isSuggestedOption = _ref28.isSuggestedOption,
     _onClear = _ref28.onClear,
     _onSearch = _ref28.onSearch,
@@ -1190,7 +1193,7 @@ export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref
     optgroups = _ref28.optgroups,
     _ref28$optionRenderer = _ref28.optionRenderer,
     optionRenderer = _ref28$optionRenderer === void 0 ? defaultOptionRenderer : _ref28$optionRenderer,
-    props = _objectWithoutProperties(_ref28, _excluded26);
+    props = _objectWithoutProperties(_ref28, _excluded25);
   var menu = useOptions({
     options: options,
     optgroups: optgroups,
@@ -1222,24 +1225,24 @@ export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref
       _onSearch(e);
     }
   };
-  return /*#__PURE__*/React.createElement(Select, _extends({
-    afterHide: afterHide,
-    block: true,
-    disabled: field.meta.disabled,
-    error: field.meta.error,
-    label: label,
-    onClear: _onClear || _onClear === undefined ? onClear : undefined,
-    onSearch: _onSearch || _onSearch === undefined || searchComparator ? onSearch : undefined,
-    onSelect: onSelect,
-    ref: ref
-  }, props), menu.list.map(function (option, index) {
+  var _renderOption = function renderOption(option, index) {
     if (option.isGroupHeader) {
-      return groupHeaderRenderer(option, {
+      if (groupHeaderRenderer) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, groupHeaderRenderer(option, {
+          getId: groupGetId,
+          getLabel: groupGetLabel,
+          // @ts-ignore
+          // This property is React specific, not a prop on the component renderer
+          key: "group_".concat(groupGetId(option))
+        }), option.options.map(_renderOption));
+      }
+      return groupRenderer(option, {
         getId: groupGetId,
         getLabel: groupGetLabel,
         // @ts-ignore
         // This property is React specific, not a prop on the component renderer
-        key: "group_".concat(groupGetId(option))
+        key: "group_".concat(groupGetId(option)),
+        children: option.options.map(_renderOption)
       });
     }
     return optionRenderer(option, {
@@ -1254,7 +1257,18 @@ export var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(_ref
       suggested: isSuggestedOption && isSuggestedOption(option),
       value: option
     });
-  }));
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    afterHide: afterHide,
+    block: true,
+    disabled: field.meta.disabled,
+    error: field.meta.error,
+    label: label,
+    onClear: _onClear || _onClear === undefined ? onClear : undefined,
+    onSearch: _onSearch || _onSearch === undefined || searchComparator ? onSearch : undefined,
+    onSelect: onSelect,
+    ref: ref
+  }, props), menu.list.map(_renderOption));
 });
 export var SelectOutput = /*#__PURE__*/React.forwardRef(function SelectOutput(_ref29, ref) {
   var afterHide = _ref29.afterHide,
@@ -1270,6 +1284,7 @@ export var SelectOutput = /*#__PURE__*/React.forwardRef(function SelectOutput(_r
     groupGetId = _ref29.groupGetId,
     groupGetLabel = _ref29.groupGetLabel,
     groupHeaderRenderer = _ref29.groupHeaderRenderer,
+    groupRenderer = _ref29.groupRenderer,
     i18nScope = _ref29.i18nScope,
     isSuggestedOption = _ref29.isSuggestedOption,
     options = _ref29.options,
@@ -1280,7 +1295,7 @@ export var SelectOutput = /*#__PURE__*/React.forwardRef(function SelectOutput(_r
     onClear = _ref29.onClear,
     onSearch = _ref29.onSearch,
     onSelect = _ref29.onSelect,
-    props = _objectWithoutProperties(_ref29, _excluded27);
+    props = _objectWithoutProperties(_ref29, _excluded26);
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props), getLabel(field.input.value));
@@ -1298,7 +1313,7 @@ export var PillSelectInput = /*#__PURE__*/React.forwardRef(function PillSelectIn
     getId = _ref30$getId === void 0 ? defaultGetId : _ref30$getId,
     _ref30$getLabel = _ref30.getLabel,
     getLabel = _ref30$getLabel === void 0 ? defaultGetLabel : _ref30$getLabel,
-    props = _objectWithoutProperties(_ref30, _excluded28);
+    props = _objectWithoutProperties(_ref30, _excluded27);
   var onBlur = function onBlur(e) {
     field.helpers.setTouched(true);
     _onBlur && _onBlur(e);
@@ -1346,7 +1361,7 @@ export var PillSelectOutput = /*#__PURE__*/React.forwardRef(function PillSelectO
     onSelect = _ref31.onSelect,
     options = _ref31.options,
     optgroups = _ref31.optgroups,
-    props = _objectWithoutProperties(_ref31, _excluded29);
+    props = _objectWithoutProperties(_ref31, _excluded28);
   return /*#__PURE__*/React.createElement(Pill, _extends({
     color: getColor(field.input.value)
   }, props), getLabel(field.input.value));
@@ -1363,7 +1378,7 @@ export var MultiSelectInput = /*#__PURE__*/React.forwardRef(function MultiSelect
     getId = _ref32$getId === void 0 ? defaultGetId : _ref32$getId,
     _ref32$getLabel = _ref32.getLabel,
     getLabel = _ref32$getLabel === void 0 ? defaultGetLabel : _ref32$getLabel,
-    props = _objectWithoutProperties(_ref32, _excluded30);
+    props = _objectWithoutProperties(_ref32, _excluded29);
   var onBlur = function onBlur(e) {
     field.helpers.setTouched(true);
     _onBlur && _onBlur(e);
@@ -1396,6 +1411,7 @@ export var MultiSelectOutput = /*#__PURE__*/React.forwardRef(function MultiSelec
     _ref33$getLabel = _ref33.getLabel,
     getLabel = _ref33$getLabel === void 0 ? defaultGetLabel : _ref33$getLabel,
     groupHeaderRenderer = _ref33.groupHeaderRenderer,
+    groupRenderer = _ref33.groupRenderer,
     isOptionDisabled = _ref33.isOptionDisabled,
     onChange = _ref33.onChange,
     onSearch = _ref33.onSearch,
@@ -1407,7 +1423,7 @@ export var MultiSelectOutput = /*#__PURE__*/React.forwardRef(function MultiSelec
     placeholder = _ref33.placeholder,
     tokenRenderer = _ref33.tokenRenderer,
     qa = _ref33.qa,
-    props = _objectWithoutProperties(_ref33, _excluded31);
+    props = _objectWithoutProperties(_ref33, _excluded30);
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props), field.input.value && field.input.value.map(getLabel).join(', '));
@@ -1424,7 +1440,7 @@ export var GroupSelectInput = /*#__PURE__*/React.forwardRef(function GroupSelect
     getId = _ref34$getId === void 0 ? defaultGetId : _ref34$getId,
     _ref34$getLabel = _ref34.getLabel,
     getLabel = _ref34$getLabel === void 0 ? defaultGetLabel : _ref34$getLabel,
-    props = _objectWithoutProperties(_ref34, _excluded32);
+    props = _objectWithoutProperties(_ref34, _excluded31);
   var onBlur = function onBlur(e) {
     field.helpers.setTouched(true);
     _onBlur && _onBlur(e);
@@ -1471,7 +1487,7 @@ export var GroupSelectOutput = /*#__PURE__*/React.forwardRef(function GroupSelec
     optGroupRenderer = _ref35.optGroupRenderer,
     tokenRenderer = _ref35.tokenRenderer,
     qa = _ref35.qa,
-    props = _objectWithoutProperties(_ref35, _excluded33);
+    props = _objectWithoutProperties(_ref35, _excluded32);
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props), field.input.value && field.input.value.map(getLabel).join(', '));
@@ -1489,7 +1505,7 @@ export var TieredSelectInput = /*#__PURE__*/React.forwardRef(function TieredSele
     getId = _ref36$getId === void 0 ? defaultGetId : _ref36$getId,
     _ref36$getLabel = _ref36.getLabel,
     getLabel = _ref36$getLabel === void 0 ? defaultGetLabel : _ref36$getLabel,
-    props = _objectWithoutProperties(_ref36, _excluded34);
+    props = _objectWithoutProperties(_ref36, _excluded33);
   var onBlur = function onBlur(e) {
     field.helpers.setTouched(true);
     _onBlur && _onBlur(e);
@@ -1539,7 +1555,7 @@ export var TieredSelectOutput = /*#__PURE__*/React.forwardRef(function TieredSel
     onQuickCreate = _ref37.onQuickCreate,
     options = _ref37.options,
     selectableTiers = _ref37.selectableTiers,
-    props = _objectWithoutProperties(_ref37, _excluded35);
+    props = _objectWithoutProperties(_ref37, _excluded34);
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props), field.input.value && field.input.value.map(function (tier) {