@procore/core-react 12.53.3 → 12.54.0

package/dist/SuperSelect/SuperSelect.types.d.ts

@@ -82,6 +82,12 @@ export interface SuperSelectConfig {
     placeholder?: string;
     preset?: SuperSelectPreset;
     presetProps?: SuperSelectPresetProps;
+    /**
+     * Marks the field as mandatory for assistive technology by setting
+     * `aria-required` on the element carrying `role="combobox"`. The visual
+     * required mark is rendered separately by `Form.Field`.
+     */
+    required?: boolean;
     search?: boolean;
     selectionStyle?: 'highlight' | 'checkbox' | 'checkmark';
     setOptionGroup?: (option: SuperSelectOption, group: string) => SuperSelectOption;
@@ -105,6 +111,7 @@ export interface SuperSelectApi {
         placeholder?: string;
         preset: SuperSelectPreset;
         presetProps?: any;
+        required: boolean;
         selectionStyle: 'highlight' | 'token' | 'checkbox' | 'checkmark';
         tabIndex: number;
         loading: boolean;

package/dist/SuperSelect/SuperSelect.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuperSelect.types.js","names":[],"sources":["../../src/SuperSelect/SuperSelect.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { VirtuosoHandle } from 'react-virtuoso'\nimport type * as defaultComponents from './SuperSelect.components'\nimport type { isOptgroupSymbol } from './SuperSelect.constants'\n\nexport interface TokenNavigationProps {\n  enabled?: boolean\n  tokenRemoveRefs?: React.MutableRefObject<Array<HTMLButtonElement | null>>\n  value?: SuperSelectValue\n}\n\nexport interface KeyboardSelectionProps {\n  enabled?: boolean\n  onSelect?: () => void\n}\n\nexport type SuperSelectValuePrimitive = boolean | string | number\n\nexport type SuperSelectValue =\n  | SuperSelectValuePrimitive\n  | Array<SuperSelectValuePrimitive>\n  | null\n\nexport type SuperSelectOption = any\n\nexport type SuperSelectPreset = '' | 'pill' | 'filter' | 'contacts'\n\nexport type SuperSelectResult = {\n  destination?: { index: number } | null\n  source: { index: number }\n}\n\nexport interface SuperSelectPresetProps {\n  filter?: {\n    filterName?: string\n  }\n  pill?: {}\n  contacts?: {}\n  ''?: {}\n}\n\nexport interface SuperSelectConfig {\n  block?: boolean\n  components?: Partial<typeof defaultComponents>\n  defaultValue?: SuperSelectValue\n  disabled?: boolean\n  draggable?: boolean\n  emptyMessage?: string\n  selectAllEnabled?: boolean\n  error?: boolean\n  footer?: React.ReactElement\n  getOptionGroup?: (option: SuperSelectOption) => string\n  getOptionIsBatch?: (option: SuperSelectOption) => boolean\n  getOptionIsDisabled?: (option: SuperSelectOption) => boolean\n  getOptionIsPartiallySelected?: (option: SuperSelectOption) => boolean\n  getOptionIsSelected?: (option: SuperSelectOption) => boolean\n  getOptionLabel?: (option: SuperSelectOption) => string\n  getOptionValue?: (option: SuperSelectOption) => SuperSelectValuePrimitive\n  header?: React.ReactElement\n  loading?: boolean\n  multiple?: boolean\n  onChange?: (value: SuperSelectValue) => void\n  onManualSort?: (options: SuperSelectOption[]) => void\n  onUnselectAll?: (\n    value: SuperSelectValue,\n    options: SuperSelectOption[],\n    searchValue: string,\n    getValue: (opt: SuperSelectOption) => Array<SuperSelectValuePrimitive>\n  ) => SuperSelectValue\n  /**\n   * Callback function triggered when the \"Select All\" functionality is used in a multi-select SuperSelect.\n   *\n   * This prop is only relevant when `multiple={true}` and `selectAllEnabled={true}`. The callback is invoked\n   * when users interact with a select all option in the select list that allows them to\n   * select or deselect all available options at once.\n   *\n   * @param selectedOptions - An array of all options that would be selected when \"Select All\" is triggered.\n   *                         This includes all selectable options (excluding disabled options) that are\n   *                         currently visible and available for selection.\n   *\n   * @remarks\n   * - Only called when the component is in multi-select mode (`multiple={true}`)\n   * - Requires `selectAllEnabled={true}` to show the select-all UI\n   * - Disabled options are automatically excluded from the selectedOptions array\n   * - Allows additional customization of select-all behavior if needed by implementing custom logic within the callback\n   *\n   * @see {@link selectAllEnabled} - Enable the select-all functionality\n   * @see {@link multiple} - Enable multi-select mode\n   * @see {@link getOptionIsDisabled} - Function to determine if options are disabled\n   */\n  onSelectAll?: (selectedOptions: SuperSelectOption[]) => void\n  onScrollBottom?: () => void\n  onOpenChange?: (open: boolean) => void\n  options?: SuperSelectOption[]\n  placeholder?: string\n  preset?: SuperSelectPreset\n  presetProps?: SuperSelectPresetProps\n  search?: boolean\n  selectionStyle?: 'highlight' | 'checkbox' | 'checkmark'\n  setOptionGroup?: (\n    option: SuperSelectOption,\n    group: string\n  ) => SuperSelectOption\n  sort?: boolean\n  tabIndex?: number\n  value?: SuperSelectValue\n  overlayMatchesTriggerWidth?: boolean\n  'aria-label'?: string\n  'aria-labelledby'?: string\n}\n\nexport type SuperSelectProps = SuperSelectConfig\n\nexport interface SuperSelectApi {\n  config: {\n    block: boolean\n    disabled: boolean\n    draggable: boolean\n    emptyMessage: string\n    error?: boolean\n    footer?: React.ReactElement\n    header?: React.ReactElement\n    placeholder?: string\n    preset: SuperSelectPreset\n    presetProps?: any\n    selectionStyle: 'highlight' | 'token' | 'checkbox' | 'checkmark'\n    tabIndex: number\n    loading: boolean\n    multiple: boolean\n    selectAllEnabled: boolean\n  }\n  components: typeof defaultComponents\n  state: {\n    activeMenuIndex: number | null\n    isEmpty: () => boolean\n    isSelectAllActive: boolean\n    listContainerHeight: number\n    listId: string\n    maxHeight: number\n    tokenListId: string\n    onDragEnd: (result: SuperSelectResult) => void\n    onSelect: (option: SuperSelectOption) => void\n    onSelectAll?: (selectedOptions: SuperSelectOption[]) => void\n    open: boolean\n    options: SuperSelectOption[]\n    overlayId: string\n    searchValue: string\n    selectAllOption: SuperSelectOption\n    selectedIndex: number | null\n    selectedLabel: string\n    selectedOption: SuperSelectOption | null\n    setOpen: (open: boolean) => void\n    pointer: boolean\n    setPointer: any\n    setActiveMenuIndex: (index: number | null) => void\n    setSearchValue: ((value: string) => void) & { cancel: () => void }\n    sourceOptions: SuperSelectOption[]\n    value: SuperSelectValue\n    width: number\n  }\n  props: {\n    clear: () => Record<string, any>\n    emptyMessage: () => Record<string, any>\n    footer: () => Record<string, any>\n    header: () => Record<string, any>\n    item: (...args: any[]) => Record<string, any>\n    label: () => Record<string, any>\n    menu: () => Record<string, any>\n    multiInput: () => Record<string, any>\n    overlay: () => Record<string, any>\n    search: () => Record<string, any>\n    searchContainer: () => Record<string, any>\n    statusMessage: () => Record<string, any>\n    tokenClear: (index: number) => Record<string, any>\n    trigger: () => Record<string, any>\n    virtuoso: () => Record<string, any>\n  }\n  option: {\n    group: (option: SuperSelectOption) => string\n    isBatch: (option: SuperSelectOption) => boolean\n    isPartiallySelected: (option: SuperSelectOption) => boolean\n    isSelected: (option: SuperSelectOption) => boolean\n    isDisabled: (option: SuperSelectOption) => boolean\n    isOptgroup: (option: SuperSelectOption) => boolean\n    isOptSelectAll: (option: SuperSelectOption) => boolean\n    label: (option: SuperSelectOption) => string\n    selectAll: {\n      isSelectAllPartiallySelected: (options: SuperSelectOption[]) => boolean\n      isSelectAllSelected: (options: SuperSelectOption[]) => boolean\n    }\n    value: (option: SuperSelectOption) => SuperSelectValuePrimitive\n  }\n  refs: {\n    floating: any\n    navigationList: any\n    virtuoso: React.RefObject<VirtuosoHandle>\n  }\n}\n\nexport interface SuperSelectTriggerProps {\n  block?: boolean\n  disabled?: boolean\n  error?: boolean\n  loading?: boolean\n  placeholder?: string\n  search?: boolean\n  tabIndex?: number\n}\n\nexport interface SuperSelectOptgroup {\n  label: string\n  id: string\n  [isOptgroupSymbol]: true\n}\n\nexport interface SuperSelectMenuItemProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  isDragging?: boolean\n  // data attributes are passed by Virtuoso\n  'data-known-size'?: number\n  'data-index': number\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"SuperSelect.types.js","names":[],"sources":["../../src/SuperSelect/SuperSelect.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { VirtuosoHandle } from 'react-virtuoso'\nimport type * as defaultComponents from './SuperSelect.components'\nimport type { isOptgroupSymbol } from './SuperSelect.constants'\n\nexport interface TokenNavigationProps {\n  enabled?: boolean\n  tokenRemoveRefs?: React.MutableRefObject<Array<HTMLButtonElement | null>>\n  value?: SuperSelectValue\n}\n\nexport interface KeyboardSelectionProps {\n  enabled?: boolean\n  onSelect?: () => void\n}\n\nexport type SuperSelectValuePrimitive = boolean | string | number\n\nexport type SuperSelectValue =\n  | SuperSelectValuePrimitive\n  | Array<SuperSelectValuePrimitive>\n  | null\n\nexport type SuperSelectOption = any\n\nexport type SuperSelectPreset = '' | 'pill' | 'filter' | 'contacts'\n\nexport type SuperSelectResult = {\n  destination?: { index: number } | null\n  source: { index: number }\n}\n\nexport interface SuperSelectPresetProps {\n  filter?: {\n    filterName?: string\n  }\n  pill?: {}\n  contacts?: {}\n  ''?: {}\n}\n\nexport interface SuperSelectConfig {\n  block?: boolean\n  components?: Partial<typeof defaultComponents>\n  defaultValue?: SuperSelectValue\n  disabled?: boolean\n  draggable?: boolean\n  emptyMessage?: string\n  selectAllEnabled?: boolean\n  error?: boolean\n  footer?: React.ReactElement\n  getOptionGroup?: (option: SuperSelectOption) => string\n  getOptionIsBatch?: (option: SuperSelectOption) => boolean\n  getOptionIsDisabled?: (option: SuperSelectOption) => boolean\n  getOptionIsPartiallySelected?: (option: SuperSelectOption) => boolean\n  getOptionIsSelected?: (option: SuperSelectOption) => boolean\n  getOptionLabel?: (option: SuperSelectOption) => string\n  getOptionValue?: (option: SuperSelectOption) => SuperSelectValuePrimitive\n  header?: React.ReactElement\n  loading?: boolean\n  multiple?: boolean\n  onChange?: (value: SuperSelectValue) => void\n  onManualSort?: (options: SuperSelectOption[]) => void\n  onUnselectAll?: (\n    value: SuperSelectValue,\n    options: SuperSelectOption[],\n    searchValue: string,\n    getValue: (opt: SuperSelectOption) => Array<SuperSelectValuePrimitive>\n  ) => SuperSelectValue\n  /**\n   * Callback function triggered when the \"Select All\" functionality is used in a multi-select SuperSelect.\n   *\n   * This prop is only relevant when `multiple={true}` and `selectAllEnabled={true}`. The callback is invoked\n   * when users interact with a select all option in the select list that allows them to\n   * select or deselect all available options at once.\n   *\n   * @param selectedOptions - An array of all options that would be selected when \"Select All\" is triggered.\n   *                         This includes all selectable options (excluding disabled options) that are\n   *                         currently visible and available for selection.\n   *\n   * @remarks\n   * - Only called when the component is in multi-select mode (`multiple={true}`)\n   * - Requires `selectAllEnabled={true}` to show the select-all UI\n   * - Disabled options are automatically excluded from the selectedOptions array\n   * - Allows additional customization of select-all behavior if needed by implementing custom logic within the callback\n   *\n   * @see {@link selectAllEnabled} - Enable the select-all functionality\n   * @see {@link multiple} - Enable multi-select mode\n   * @see {@link getOptionIsDisabled} - Function to determine if options are disabled\n   */\n  onSelectAll?: (selectedOptions: SuperSelectOption[]) => void\n  onScrollBottom?: () => void\n  onOpenChange?: (open: boolean) => void\n  options?: SuperSelectOption[]\n  placeholder?: string\n  preset?: SuperSelectPreset\n  presetProps?: SuperSelectPresetProps\n  /**\n   * Marks the field as mandatory for assistive technology by setting\n   * `aria-required` on the element carrying `role=\"combobox\"`. The visual\n   * required mark is rendered separately by `Form.Field`.\n   */\n  required?: boolean\n  search?: boolean\n  selectionStyle?: 'highlight' | 'checkbox' | 'checkmark'\n  setOptionGroup?: (\n    option: SuperSelectOption,\n    group: string\n  ) => SuperSelectOption\n  sort?: boolean\n  tabIndex?: number\n  value?: SuperSelectValue\n  overlayMatchesTriggerWidth?: boolean\n  'aria-label'?: string\n  'aria-labelledby'?: string\n}\n\nexport type SuperSelectProps = SuperSelectConfig\n\nexport interface SuperSelectApi {\n  config: {\n    block: boolean\n    disabled: boolean\n    draggable: boolean\n    emptyMessage: string\n    error?: boolean\n    footer?: React.ReactElement\n    header?: React.ReactElement\n    placeholder?: string\n    preset: SuperSelectPreset\n    presetProps?: any\n    required: boolean\n    selectionStyle: 'highlight' | 'token' | 'checkbox' | 'checkmark'\n    tabIndex: number\n    loading: boolean\n    multiple: boolean\n    selectAllEnabled: boolean\n  }\n  components: typeof defaultComponents\n  state: {\n    activeMenuIndex: number | null\n    isEmpty: () => boolean\n    isSelectAllActive: boolean\n    listContainerHeight: number\n    listId: string\n    maxHeight: number\n    tokenListId: string\n    onDragEnd: (result: SuperSelectResult) => void\n    onSelect: (option: SuperSelectOption) => void\n    onSelectAll?: (selectedOptions: SuperSelectOption[]) => void\n    open: boolean\n    options: SuperSelectOption[]\n    overlayId: string\n    searchValue: string\n    selectAllOption: SuperSelectOption\n    selectedIndex: number | null\n    selectedLabel: string\n    selectedOption: SuperSelectOption | null\n    setOpen: (open: boolean) => void\n    pointer: boolean\n    setPointer: any\n    setActiveMenuIndex: (index: number | null) => void\n    setSearchValue: ((value: string) => void) & { cancel: () => void }\n    sourceOptions: SuperSelectOption[]\n    value: SuperSelectValue\n    width: number\n  }\n  props: {\n    clear: () => Record<string, any>\n    emptyMessage: () => Record<string, any>\n    footer: () => Record<string, any>\n    header: () => Record<string, any>\n    item: (...args: any[]) => Record<string, any>\n    label: () => Record<string, any>\n    menu: () => Record<string, any>\n    multiInput: () => Record<string, any>\n    overlay: () => Record<string, any>\n    search: () => Record<string, any>\n    searchContainer: () => Record<string, any>\n    statusMessage: () => Record<string, any>\n    tokenClear: (index: number) => Record<string, any>\n    trigger: () => Record<string, any>\n    virtuoso: () => Record<string, any>\n  }\n  option: {\n    group: (option: SuperSelectOption) => string\n    isBatch: (option: SuperSelectOption) => boolean\n    isPartiallySelected: (option: SuperSelectOption) => boolean\n    isSelected: (option: SuperSelectOption) => boolean\n    isDisabled: (option: SuperSelectOption) => boolean\n    isOptgroup: (option: SuperSelectOption) => boolean\n    isOptSelectAll: (option: SuperSelectOption) => boolean\n    label: (option: SuperSelectOption) => string\n    selectAll: {\n      isSelectAllPartiallySelected: (options: SuperSelectOption[]) => boolean\n      isSelectAllSelected: (options: SuperSelectOption[]) => boolean\n    }\n    value: (option: SuperSelectOption) => SuperSelectValuePrimitive\n  }\n  refs: {\n    floating: any\n    navigationList: any\n    virtuoso: React.RefObject<VirtuosoHandle>\n  }\n}\n\nexport interface SuperSelectTriggerProps {\n  block?: boolean\n  disabled?: boolean\n  error?: boolean\n  loading?: boolean\n  placeholder?: string\n  search?: boolean\n  tabIndex?: number\n}\n\nexport interface SuperSelectOptgroup {\n  label: string\n  id: string\n  [isOptgroupSymbol]: true\n}\n\nexport interface SuperSelectMenuItemProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  isDragging?: boolean\n  // data attributes are passed by Virtuoso\n  'data-known-size'?: number\n  'data-index': number\n}\n"],"mappings":"","ignoreList":[]}

package/dist/SuperSelect/useSuperSelect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { SuperSelectApi, SuperSelectConfig } from './SuperSelect.types';
-export declare function useSuperSelect({ block, components: customComponents, defaultValue, disabled, draggable, emptyMessage, selectAllEnabled, error, footer, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionIsPartiallySelected, getOptionIsSelected, getOptionValue, onScrollBottom, onOpenChange, header, loading, multiple, onChange, onManualSort, onUnselectAll, onSelectAll, options: sourceOptions, placeholder, preset, presetProps, search, selectionStyle, setOptionGroup, sort, tabIndex, value: value_, overlayMatchesTriggerWidth, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: SuperSelectConfig): SuperSelectApi;
+export declare function useSuperSelect({ block, components: customComponents, defaultValue, disabled, draggable, emptyMessage, selectAllEnabled, error, footer, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionIsPartiallySelected, getOptionIsSelected, getOptionValue, onScrollBottom, onOpenChange, header, loading, multiple, onChange, onManualSort, onUnselectAll, onSelectAll, options: sourceOptions, placeholder, preset, presetProps, required, search, selectionStyle, setOptionGroup, sort, tabIndex, value: value_, overlayMatchesTriggerWidth, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: SuperSelectConfig): SuperSelectApi;
 export declare const SuperSelectContext: React.Context<SuperSelectApi | null>;
 export declare function useSuperSelectContext(): SuperSelectApi;

package/dist/SuperSelect/useSuperSelect.js

@@ -28,10 +28,10 @@ import { draggableOptionIdSymbol, isOptSelectAllSymbol } from './SuperSelect.con
 import { extendedSelectMenuWidth } from './SuperSelect.styles';
 import { collectGroupsInOrderOfOccurrence, createOptgroup, defaultOnUnselectAll, getBatchOptionFormatter, getIsAllOptionsUngrouped, getOptionIsOptgroup, getOptionIsOptSelectAll, getOptionsSortingAlgorithm, isMultiple, removeEmptyOptGroups, reorder, sortOptgroups } from './SuperSelect.utils';
 var listContainerVerticalPadding = spacing.sm * 2;
-/* Based on item height + padding (~35px), this minimum height is enough to show 4-6 items before
- * the overflow is hidden before scrolling. This will ensure the dropdown doesn't open with minimal
- * height, which would lead to a poor scrolling experience. */
-var reasonableDropdownMinimumHeight = 248;
+// Comfortably taller than any real viewport, so releasing the overlay's height
+// clamp (see `desiredContentHeight` below) can't blow up to a virtualized list's
+// full (potentially huge) content height.
+var maxOverlayReleaseHeight = 2000;
 function noop() {}
 function defaultGetOptionValue(option) {
   return option === null || option === void 0 ? void 0 : option.value;
@@ -151,6 +151,8 @@ export function useSuperSelect(_ref3) {
     _ref3$preset = _ref3.preset,
     preset = _ref3$preset === void 0 ? '' : _ref3$preset,
     presetProps = _ref3.presetProps,
+    _ref3$required = _ref3.required,
+    required = _ref3$required === void 0 ? false : _ref3$required,
     _ref3$search = _ref3.search,
     search = _ref3$search === void 0 ? true : _ref3$search,
     _ref3$selectionStyle = _ref3.selectionStyle,
@@ -388,6 +390,22 @@ export function useSuperSelect(_ref3) {
     footerHeight = _React$useState16[0],
     setFooterHeight = _React$useState16[1];
   var listContainerHeight = Math.min(maxHeight - searchHeight - footerHeight + listContainerVerticalPadding, listHeight + listContainerVerticalPadding);
+  var desiredContentHeight = searchHeight + listHeight + footerHeight + listContainerVerticalPadding;
+  var desiredContentHeightRef = React.useRef(desiredContentHeight);
+  React.useEffect(function () {
+    if (!open) {
+      desiredContentHeightRef.current = 0;
+      setListHeight(0);
+      setSearchHeight(0);
+      setFooterHeight(0);
+      return;
+    }
+    if (desiredContentHeight <= desiredContentHeightRef.current) {
+      return;
+    }
+    desiredContentHeightRef.current = desiredContentHeight;
+    setMaxHeight(Math.min(desiredContentHeight, maxOverlayReleaseHeight));
+  }, [desiredContentHeight, open]);
   var _React$useState17 = React.useState(''),
     _React$useState18 = _slicedToArray(_React$useState17, 2),
     searchValue = _React$useState18[0],
@@ -920,7 +938,8 @@ export function useSuperSelect(_ref3) {
         'aria-controls': open ? listId : undefined,
         'aria-describedby': selectedValueId,
         'aria-expanded': open,
-        'aria-haspopup': 'listbox'
+        'aria-haspopup': 'listbox',
+        'aria-required': required || undefined
       }, getAriaLabelProps()), {}, {
         role: 'combobox',
         tabIndex: disabled ? -1 : tabIndex
@@ -975,7 +994,8 @@ export function useSuperSelect(_ref3) {
       'aria-activedescendant': activeDescendantId,
       'aria-controls': open ? listId : undefined,
       'aria-expanded': open,
-      'aria-haspopup': 'listbox'
+      'aria-haspopup': 'listbox',
+      'aria-required': required || undefined
     }, getAriaLabelProps()), {}, {
       role: 'combobox',
       ref: searchRef,
@@ -1297,6 +1317,7 @@ export function useSuperSelect(_ref3) {
       placeholder: placeholder,
       preset: preset,
       presetProps: presetProps,
+      required: required,
       selectionStyle: selectionStyle,
       tabIndex: tabIndex,
       loading: loading,