@dynatrace/strato-components 3.5.0 → 3.6.0

package/esm/forms/select/hooks/use-select-options.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/hooks/use-select-options.ts"],
-  "sourcesContent": ["import { useMemo, type ReactElement, type ReactNode, Children } from 'react';\nimport type { GroupBase } from 'react-select';\n\nimport { type StratoLogger } from '../../../core/sdk/sdk-logger.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { extractBehaviorTrackingProps } from '../../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport type { SelectContentProps } from '../SelectContent.js';\nimport {\n  SelectGroupLabel,\n  SelectGroup,\n  type SelectGroupProps,\n} from '../SelectGroup.js';\nimport { _isSelectOptionElement, SelectOptionProps } from '../SelectOption.js';\nimport { SelectPrefix } from '../SelectPrefix.js';\nimport { SelectSuffix } from '../SelectSuffix.js';\nimport type { OptionOrGroup, BaseOption, BaseGroup } from '../types.js';\n\ntype Writeable<T> = { -readonly [P in keyof T]: T[P] };\n\n/** Type guard helper to identify an element as an Option */\nexport function _isOption<OptionValue>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  optionOrGroup: any,\n): optionOrGroup is BaseOption<OptionValue> {\n  if (optionOrGroup.value !== undefined) {\n    return true;\n  }\n  return false;\n}\n\n/** Type guard helper to identify an element as a Group */\nexport function _isGroup<OptionValue>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  optionOrGroup: any,\n): optionOrGroup is GroupBase<OptionValue> {\n  if (Array.isArray(optionOrGroup.options)) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * Helper function that will extract the options data from the option\n * child passed.\n */\nfunction extractOptionData<OptionValue>(\n  optionElement: ReactElement<SelectOptionProps<OptionValue>>,\n): BaseOption<OptionValue> {\n  const optionSlots: {\n    prefix: {\n      Prefix: ReactNode | null;\n      componentProps?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n    Label: ReactNode[] | null;\n    suffix: {\n      Suffix: ReactNode | null;\n      componentProps?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n  } = {\n    prefix: { Prefix: null },\n    Label: null,\n    suffix: { Suffix: null },\n  };\n\n  Children.forEach(optionElement.props.children, (child) => {\n    if (isSlot(child, SelectPrefix)) {\n      optionSlots.prefix.Prefix = child.props.children;\n      optionSlots.prefix.componentProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    } else if (isSlot(child, SelectSuffix)) {\n      optionSlots.suffix.Suffix = child.props.children;\n      optionSlots.suffix.componentProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    } else {\n      optionSlots.Label = optionSlots.Label ?? [];\n      if (child !== null) {\n        optionSlots.Label.push(child);\n      }\n    }\n  });\n\n  return {\n    value: optionElement.props.value,\n    prefix: {\n      component: optionSlots.prefix.Prefix,\n      componentProps: optionSlots.prefix.componentProps,\n    },\n    label: optionSlots.Label,\n    suffix: {\n      component: optionSlots.suffix.Suffix,\n      componentProps: optionSlots.suffix.componentProps,\n    },\n    isDisabled: optionElement.props.disabled,\n    textValue: optionElement.props.textValue,\n    'aria-label': optionElement.props['aria-label'],\n    className: optionElement.props.className,\n    style: optionElement.props.style,\n    'data-testid': optionElement.props['data-testid'],\n    ...extractBehaviorTrackingProps(optionElement.props),\n  };\n}\n\n/**\n * @internal\n */\nexport function safeStringify(value: unknown): string {\n  try {\n    if (typeof value === 'string') {\n      return value;\n    }\n    return JSON.stringify(value);\n  } catch {\n    return '';\n  }\n}\n\nfunction reportNoStringifyableValueError(\n  value: unknown,\n  logger?: StratoLogger,\n) {\n  logger?.warn('Failed to stringify value.', value);\n}\n\n/**\n * Helper function to get the stringified label of an option (used for filtering).\n * If there is a textValue defined, we use that as the value. Otherwise, we try to\n * stringify the value and the label, if possible. If that fails, we use the fallbackLabel.\n */\nfunction getOptionLabel<OptionValue>(\n  option: BaseOption<OptionValue>,\n  fallbackLabel: string,\n): string {\n  if (option.textValue) {\n    return option.textValue;\n  }\n\n  const labelIsStringifyable = _canReceiveDefaultTextFormat(option.label);\n  const stringifiedValue = safeStringify(option.value);\n\n  if (labelIsStringifyable && stringifiedValue) {\n    return `${option.label} ${stringifiedValue}`;\n  }\n\n  if (labelIsStringifyable) {\n    return `${option.label}`;\n  }\n\n  if (stringifiedValue) {\n    return stringifiedValue;\n  }\n\n  return fallbackLabel;\n}\n\n/**\n * Helper function to get the stringified value of an option.\n * If there is a textValue defined, we use that as the value\n * otherwise we stringify the value, if that fails we use the\n * label, if possible, and the fallbackValue as a last resort.\n */\nfunction getOptionValue<OptionValue>(\n  option: BaseOption<OptionValue>,\n  fallbackValue: string,\n  logger?: StratoLogger,\n): string {\n  if (option.textValue) {\n    return option.textValue;\n  }\n\n  const stringifiedValue = safeStringify(option.value);\n  if (stringifiedValue) {\n    return stringifiedValue;\n  }\n\n  const labelIsStringifyable = _canReceiveDefaultTextFormat(option.label);\n\n  if (labelIsStringifyable) {\n    return `${option.label}`;\n  }\n\n  reportNoStringifyableValueError(option.value, logger);\n\n  return fallbackValue;\n}\n\n/**\n * Helper function that will extract the Group data from the group element\n * passed.\n */\nfunction extractGroupData<OptionValue>(\n  groupElement: ReactElement<SelectGroupProps>,\n  groupIndex: number,\n  logger?: StratoLogger,\n): BaseGroup<OptionValue> {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = groupElement.props;\n\n  const group: BaseGroup<OptionValue> = {\n    label: undefined,\n    options: [],\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...extractBehaviorTrackingProps(groupElement.props),\n  };\n\n  Children.forEach(groupElement?.props.children, (child, optionIndex) => {\n    if (isSlot(child, SelectGroupLabel)) {\n      /*\n       * TODO: This should be a ReactNode but the overlap with the GroupBase does not allow that.\n       * We might need to fix the typing here, as it is no rendering issue whatsoever.\n       */\n      group.label = child.props.children as string;\n      group.labelProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    }\n\n    if (_isSelectOptionElement<OptionValue>(child)) {\n      const option = extractOptionData<OptionValue>(child);\n      // Since we are using a ReactNode[] as a label here instead of a string\n      // we run into keying issues in the react-select internal.\n      // With this fix, we make sure that the toString of the label array will\n      // produce a valid string, avoiding duplicate key issues.\n      // https://github.com/JedWatson/react-select/blob/53b85346bb7defd937257b0daf9d6993ef20a59a/packages/react-select/src/Select.tsx#L1823\n      if (option.label) {\n        const stringifiedLabel = getOptionLabel<OptionValue>(\n          option,\n          `group-${groupIndex}-label-${optionIndex}`,\n        );\n        option.label.toString = () => stringifiedLabel;\n      }\n\n      if (!option.textValue) {\n        const stringifiedValue = getOptionValue<OptionValue>(\n          option,\n          `group-${groupIndex}-label-${optionIndex}`,\n          logger,\n        );\n        option.textValue = stringifiedValue;\n      }\n\n      if (option !== null) {\n        group.options.push(option);\n      }\n    }\n  });\n\n  return group;\n}\n\n/**\n * Helper hook that will extract Options or Groups from the Content children\n * and return a valid options or group array for react-select\n *\n * @internal\n */\nexport function useSelectOptions<OptionValue>(\n  contentSlot: ReactElement<SelectContentProps> | null,\n  logger?: StratoLogger,\n): {\n  optionsOrGroups: OptionOrGroup<BaseOption<OptionValue>>;\n  optionsHavePrefix: boolean;\n  allOptions: BaseOption<OptionValue>[];\n} {\n  // FIXME: We are always recreating the options array, which adds to additional\n  // rerenders to the select whenever the parent of the Select updates.\n  return useMemo(() => {\n    const optionsOrGroups: Writeable<OptionOrGroup<BaseOption<OptionValue>>> =\n      [];\n\n    // Define if any of the options have a prefix or a suffix, as this will be\n    // necessary to know for the MenuList and individual options to make sure\n    // options without prefixes or suffixes also get the correct alignments;\n    let optionsHavePrefix = false;\n    const allOptions: BaseOption<OptionValue>[] = [];\n\n    Children.forEach(contentSlot?.props.children, (child, childIndex) => {\n      // If the child is an option, extract the data and add it to the collected\n      // list.\n      if (_isSelectOptionElement<OptionValue>(child)) {\n        const option = extractOptionData<OptionValue>(child);\n        // Since we are using a ReactNode[] as a label here instead of a string\n        // we run into keying issues in the react-select internal.\n        // With this fix, we make sure that the toString of the label array will\n        // produce a valid string, avoiding duplicate key issues.\n        // https://github.com/JedWatson/react-select/blob/53b85346bb7defd937257b0daf9d6993ef20a59a/packages/react-select/src/Select.tsx#L1823\n        if (option.label) {\n          const stringifiedLabel = getOptionLabel<OptionValue>(\n            option,\n            `label-${childIndex}`,\n          );\n          option.label.toString = () => stringifiedLabel;\n        }\n\n        if (!option.textValue) {\n          const stringifiedValue = getOptionValue<OptionValue>(\n            option,\n            `value-${childIndex}`,\n            logger,\n          );\n          option.textValue = stringifiedValue;\n        }\n\n        if (option !== null) {\n          optionsOrGroups.push(option);\n          // Check if the option has a prefix and set the global setting accordingly\n          if (option.prefix.component !== null) {\n            optionsHavePrefix = true;\n          }\n        }\n        allOptions.push(option);\n      }\n      // If the child is a group, extract the group data from the child and add it to\n      // collected list.\n      if (isSlot(child, SelectGroup)) {\n        const group = extractGroupData<OptionValue>(child, childIndex, logger);\n        if (group !== null) {\n          optionsOrGroups.push(group);\n        }\n\n        if (group.options.length > 20_000) {\n          logger?.warn(\n            `Group with label \"${group.label}\" has more than 20,000 options. This can lead to a slow and unresponsive UI.`,\n          );\n        }\n\n        // As a spread push (allOptions.push(...group.options)) might lead to an exceeded call stack,\n        // we add every single option of the group to the allOptions array.\n        // This is more performant than using allOptions.concat(group.options) which would create\n        // a new array every iteration of a group.\n        for (const element of group.options) {\n          allOptions.push(element);\n        }\n\n        // Only check if optionsHavePrefix is still false. If it is already true, there is no\n        // need to check the nested groups again.\n        if (optionsHavePrefix === false) {\n          const nestedOptionsHavePrefix = group.options.some(\n            (option) => option.prefix.component !== null,\n          );\n          if (nestedOptionsHavePrefix) {\n            optionsHavePrefix = true;\n          }\n        }\n      }\n    });\n\n    return { optionsOrGroups, optionsHavePrefix, allOptions };\n  }, [contentSlot, logger]);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, type ReactElement, type ReactNode, Children } from 'react';\nimport type { GroupBase } from 'react-select';\n\nimport { type StratoLogger } from '../../../core/sdk/sdk-logger.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { extractBehaviorTrackingProps } from '../../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport type { SelectContentProps } from '../SelectContent.js';\nimport {\n  SelectGroupLabel,\n  SelectGroup,\n  type SelectGroupProps,\n} from '../SelectGroup.js';\nimport { _isSelectOptionElement, SelectOptionProps } from '../SelectOption.js';\nimport { SelectPrefix } from '../SelectPrefix.js';\nimport { SelectSuffix } from '../SelectSuffix.js';\nimport type { OptionOrGroup, BaseOption, BaseGroup } from '../types.js';\n\ntype Writeable<T> = { -readonly [P in keyof T]: T[P] };\n\n/** Type guard helper to identify an element as an Option */\nexport function _isOption<OptionValue>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  optionOrGroup: any,\n): optionOrGroup is BaseOption<OptionValue> {\n  if (optionOrGroup.value !== undefined) {\n    return true;\n  }\n  return false;\n}\n\n/** Type guard helper to identify an element as a Group */\nexport function _isGroup<OptionValue>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  optionOrGroup: any,\n): optionOrGroup is GroupBase<OptionValue> {\n  if (Array.isArray(optionOrGroup.options)) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * Helper function that will extract the options data from the option\n * child passed.\n */\nfunction extractOptionData<OptionValue>(\n  optionElement: ReactElement<SelectOptionProps<OptionValue>>,\n): BaseOption<OptionValue> {\n  const optionSlots: {\n    prefix: {\n      Prefix: ReactNode | null;\n      componentProps?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n    Label: ReactNode[] | null;\n    suffix: {\n      Suffix: ReactNode | null;\n      componentProps?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n  } = {\n    prefix: { Prefix: null },\n    Label: null,\n    suffix: { Suffix: null },\n  };\n\n  Children.forEach(optionElement.props.children, (child) => {\n    if (isSlot(child, SelectPrefix)) {\n      optionSlots.prefix.Prefix = child.props.children;\n      optionSlots.prefix.componentProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    } else if (isSlot(child, SelectSuffix)) {\n      optionSlots.suffix.Suffix = child.props.children;\n      optionSlots.suffix.componentProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    } else {\n      optionSlots.Label = optionSlots.Label ?? [];\n      if (child !== null) {\n        optionSlots.Label.push(child);\n      }\n    }\n  });\n\n  return {\n    value: optionElement.props.value,\n    prefix: {\n      component: optionSlots.prefix.Prefix,\n      componentProps: optionSlots.prefix.componentProps,\n    },\n    label: optionSlots.Label,\n    suffix: {\n      component: optionSlots.suffix.Suffix,\n      componentProps: optionSlots.suffix.componentProps,\n    },\n    isDisabled: optionElement.props.disabled,\n    textValue: optionElement.props.textValue,\n    'aria-label': optionElement.props['aria-label'],\n    className: optionElement.props.className,\n    style: optionElement.props.style,\n    'data-testid': optionElement.props['data-testid'],\n    ...extractBehaviorTrackingProps(optionElement.props),\n  };\n}\n\n/**\n * @internal\n */\nexport function safeStringify(value: unknown): string {\n  try {\n    if (typeof value === 'string') {\n      return value;\n    }\n    return JSON.stringify(value);\n  } catch {\n    return '';\n  }\n}\n\nfunction reportNoStringifyableValueError(\n  value: unknown,\n  logger?: StratoLogger,\n) {\n  logger?.warn('Failed to stringify value.', value);\n}\n\n/**\n * Helper function to get the stringified label of an option.\n * Used by react-select for internal key generation (via `label.toString()`).\n * Returns only the human-readable label text so that screen readers do not\n * announce a duplicate value suffix alongside the label.\n * If there is a textValue defined, we use that. Otherwise we use the label,\n * falling back to the stringified value and then the fallbackLabel.\n */\nfunction getOptionLabel<OptionValue>(\n  option: BaseOption<OptionValue>,\n  fallbackLabel: string,\n): string {\n  if (option.textValue) {\n    return option.textValue;\n  }\n\n  const labelIsStringifyable = _canReceiveDefaultTextFormat(option.label);\n  const stringifiedValue = safeStringify(option.value);\n\n  if (labelIsStringifyable) {\n    return `${option.label}`;\n  }\n\n  if (stringifiedValue) {\n    return stringifiedValue;\n  }\n\n  return fallbackLabel;\n}\n\n/**\n * Helper function to get the stringified value of an option.\n * If there is a textValue defined, we use that as the value\n * otherwise we stringify the value, if that fails we use the\n * label, if possible, and the fallbackValue as a last resort.\n */\nfunction getOptionValue<OptionValue>(\n  option: BaseOption<OptionValue>,\n  fallbackValue: string,\n  logger?: StratoLogger,\n): string {\n  if (option.textValue) {\n    return option.textValue;\n  }\n\n  const stringifiedValue = safeStringify(option.value);\n  if (stringifiedValue) {\n    return stringifiedValue;\n  }\n\n  const labelIsStringifyable = _canReceiveDefaultTextFormat(option.label);\n\n  if (labelIsStringifyable) {\n    return `${option.label}`;\n  }\n\n  reportNoStringifyableValueError(option.value, logger);\n\n  return fallbackValue;\n}\n\n/**\n * Helper function that will extract the Group data from the group element\n * passed.\n */\nfunction extractGroupData<OptionValue>(\n  groupElement: ReactElement<SelectGroupProps>,\n  groupIndex: number,\n  logger?: StratoLogger,\n): BaseGroup<OptionValue> {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = groupElement.props;\n\n  const group: BaseGroup<OptionValue> = {\n    label: undefined,\n    options: [],\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...extractBehaviorTrackingProps(groupElement.props),\n  };\n\n  Children.forEach(groupElement?.props.children, (child, optionIndex) => {\n    if (isSlot(child, SelectGroupLabel)) {\n      /*\n       * TODO: This should be a ReactNode but the overlap with the GroupBase does not allow that.\n       * We might need to fix the typing here, as it is no rendering issue whatsoever.\n       */\n      group.label = child.props.children as string;\n      group.labelProps = {\n        className: child.props.className,\n        style: child.props.style,\n        'data-testid': child.props['data-testid'],\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    }\n\n    if (_isSelectOptionElement<OptionValue>(child)) {\n      const option = extractOptionData<OptionValue>(child);\n      // Since we are using a ReactNode[] as a label here instead of a string\n      // we run into keying issues in the react-select internal.\n      // With this fix, we make sure that the toString of the label array will\n      // produce a valid string, avoiding duplicate key issues.\n      // https://github.com/JedWatson/react-select/blob/53b85346bb7defd937257b0daf9d6993ef20a59a/packages/react-select/src/Select.tsx#L1823\n      if (option.label) {\n        const stringifiedLabel = getOptionLabel<OptionValue>(\n          option,\n          `group-${groupIndex}-label-${optionIndex}`,\n        );\n        option.label.toString = () => stringifiedLabel;\n      }\n\n      if (!option.textValue) {\n        const stringifiedValue = getOptionValue<OptionValue>(\n          option,\n          `group-${groupIndex}-label-${optionIndex}`,\n          logger,\n        );\n        option.textValue = stringifiedValue;\n      }\n\n      if (option !== null) {\n        group.options.push(option);\n      }\n    }\n  });\n\n  return group;\n}\n\n/**\n * Helper hook that will extract Options or Groups from the Content children\n * and return a valid options or group array for react-select\n *\n * @internal\n */\nexport function useSelectOptions<OptionValue>(\n  contentSlot: ReactElement<SelectContentProps> | null,\n  logger?: StratoLogger,\n): {\n  optionsOrGroups: OptionOrGroup<BaseOption<OptionValue>>;\n  optionsHavePrefix: boolean;\n  allOptions: BaseOption<OptionValue>[];\n} {\n  // FIXME: We are always recreating the options array, which adds to additional\n  // rerenders to the select whenever the parent of the Select updates.\n  return useMemo(() => {\n    const optionsOrGroups: Writeable<OptionOrGroup<BaseOption<OptionValue>>> =\n      [];\n\n    // Define if any of the options have a prefix or a suffix, as this will be\n    // necessary to know for the MenuList and individual options to make sure\n    // options without prefixes or suffixes also get the correct alignments;\n    let optionsHavePrefix = false;\n    const allOptions: BaseOption<OptionValue>[] = [];\n\n    Children.forEach(contentSlot?.props.children, (child, childIndex) => {\n      // If the child is an option, extract the data and add it to the collected\n      // list.\n      if (_isSelectOptionElement<OptionValue>(child)) {\n        const option = extractOptionData<OptionValue>(child);\n        // Since we are using a ReactNode[] as a label here instead of a string\n        // we run into keying issues in the react-select internal.\n        // With this fix, we make sure that the toString of the label array will\n        // produce a valid string, avoiding duplicate key issues.\n        // https://github.com/JedWatson/react-select/blob/53b85346bb7defd937257b0daf9d6993ef20a59a/packages/react-select/src/Select.tsx#L1823\n        if (option.label) {\n          const stringifiedLabel = getOptionLabel<OptionValue>(\n            option,\n            `label-${childIndex}`,\n          );\n          option.label.toString = () => stringifiedLabel;\n        }\n\n        if (!option.textValue) {\n          const stringifiedValue = getOptionValue<OptionValue>(\n            option,\n            `value-${childIndex}`,\n            logger,\n          );\n          option.textValue = stringifiedValue;\n        }\n\n        if (option !== null) {\n          optionsOrGroups.push(option);\n          // Check if the option has a prefix and set the global setting accordingly\n          if (option.prefix.component !== null) {\n            optionsHavePrefix = true;\n          }\n        }\n        allOptions.push(option);\n      }\n      // If the child is a group, extract the group data from the child and add it to\n      // collected list.\n      if (isSlot(child, SelectGroup)) {\n        const group = extractGroupData<OptionValue>(child, childIndex, logger);\n        if (group !== null) {\n          optionsOrGroups.push(group);\n        }\n\n        if (group.options.length > 20_000) {\n          logger?.warn(\n            `Group with label \"${group.label}\" has more than 20,000 options. This can lead to a slow and unresponsive UI.`,\n          );\n        }\n\n        // As a spread push (allOptions.push(...group.options)) might lead to an exceeded call stack,\n        // we add every single option of the group to the allOptions array.\n        // This is more performant than using allOptions.concat(group.options) which would create\n        // a new array every iteration of a group.\n        for (const element of group.options) {\n          allOptions.push(element);\n        }\n\n        // Only check if optionsHavePrefix is still false. If it is already true, there is no\n        // need to check the nested groups again.\n        if (optionsHavePrefix === false) {\n          const nestedOptionsHavePrefix = group.options.some(\n            (option) => option.prefix.component !== null,\n          );\n          if (nestedOptionsHavePrefix) {\n            optionsHavePrefix = true;\n          }\n        }\n      }\n    });\n\n    return { optionsOrGroups, optionsHavePrefix, allOptions };\n  }, [contentSlot, logger]);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/select/styles/Select.css

@@ -1,89 +1,89 @@
-._dlenfc0-3-5-0._dlenfc0-3-5-0 {
+._dlenfc0-3-6-0._dlenfc0-3-6-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-5-0._dlenfc1-3-5-0 {
+._dlenfc1-3-6-0._dlenfc1-3-6-0 {
   min-width: unset;
 }
-._dlenfc3-3-5-0 {
+._dlenfc3-3-6-0 {
   width: 100%;
 }
-._dlenfc4-3-5-0 {
+._dlenfc4-3-6-0 {
   width: auto;
 }
-._dlenfc5-3-5-0 > span {
+._dlenfc5-3-6-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-5-0 {
+._dlenfc6-3-6-0 {
   display: flex;
 }
-._dlenfc7-3-5-0 {
+._dlenfc7-3-6-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-5-0 {
+._dlenfc8-3-6-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-5-0 {
+._dlenfca-3-6-0 {
   width: auto;
 }
-._dlenfcc-3-5-0 {
+._dlenfcc-3-6-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-5-0) ._dlenfcc-3-5-0 {
-  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-6-0) ._dlenfcc-3-6-0 {
+  --_bx32h3-3-6-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-5-0 {
+._dlenfcd-3-6-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-5-0 ._dlenfce-3-5-0, ._1jgl8s50-3-5-0 ._dlenfce-3-5-0:hover, ._1jgl8s50-3-5-0 ._dlenfce-3-5-0:active {
-  --_bx32h3-3-5-0: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-6-0 ._dlenfce-3-6-0, ._1jgl8s50-3-6-0 ._dlenfce-3-6-0:hover, ._1jgl8s50-3-6-0 ._dlenfce-3-6-0:active {
+  --_bx32h3-3-6-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-6-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._dlenfcf-3-5-0 {
+._dlenfcf-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-5-0 {
+._dlenfcg-3-6-0 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-5-0 {
+._dlenfch-3-6-0 {
   overflow: auto;
 }
-._dlenfci-3-5-0 {
+._dlenfci-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-5-0 {
+._dlenfcj-3-6-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-5-0 ._dlenfcl-3-5-0 {
+._dlenfck-3-6-0 ._dlenfcl-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-5-0 {
+._dlenfcm-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-5-0.strato-select-divider {
+._dlenfcn-3-6-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-5-0 {
+._dlenfco-3-6-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-5-0 {
+._dlenfcp-3-6-0 {
   min-width: 128px;
 }
-._dlenfcq-3-5-0 {
+._dlenfcq-3-6-0 {
   display: inline;
 }
-._dlenfcq-3-5-0 + ._dlenfcq-3-5-0:before {
+._dlenfcq-3-6-0 + ._dlenfcq-3-6-0:before {
   content: ", ";
 }
-._dlenfcr-3-5-0 {
+._dlenfcr-3-6-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -93,23 +93,23 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcr-3-5-0:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-6-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-5-0.strato-select-option--selected {
+._dlenfcr-3-6-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-5-0.strato-select-option--disabled {
+._dlenfcr-3-6-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-5-0.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-6-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-5-0.strato-select-option--selected:hover {
+._dlenfcr-3-6-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-5-0.strato-select-option--selected::before {
+._dlenfcr-3-6-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-5-0:focus {
+._dlenfcs-3-6-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfct-3-5-0 {
+._dlenfct-3-6-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -134,48 +134,48 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfct-3-5-0:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-6-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-5-0.strato-select-option--disabled {
+._dlenfct-3-6-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-5-0 {
+._dlenfcu-3-6-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
+  background-color: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-width: 1px;
   border-style: var(--dt-borders-style-default, solid);
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcu-3-5-0 {
+.strato-select-option--disabled ._dlenfcu-3-6-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-5-0 {
+._dlenfcv-3-6-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-5-0 {
+._dlenfcw-3-6-0 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-5-0 {
+.strato-select-option--disabled ._dlenfcw-3-6-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-5-0 {
+._dlenfcx-3-6-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcy-3-5-0 {
+._dlenfcy-3-6-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

package/esm/forms/select/styles/Select.sty.js

@@ -2,30 +2,30 @@ import "../../../core/components/app-root/AppRoot.css";
 import "../../../styles/field.css";
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-5-0";
-var filter = "_dlenfc1-3-5-0";
-var placeholderColor = "_dlenfcl-3-5-0";
-var select = "_dlenfc0-3-5-0";
-var selectAll = "_dlenfcs-3-5-0";
-var selectGroupHeading = "_dlenfcf-3-5-0";
-var selectMenuDivider = "_dlenfcn-3-5-0";
-var selectMenuListWrapper = "_dlenfch-3-5-0";
-var selectMenuLoadingWrapper = "_dlenfcm-3-5-0";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-5-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-5-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-5-0";
-var selectNoOptionsMessage = "_dlenfci-3-5-0";
-var selectOptionMulti = "_dlenfct-3-5-0";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-5-0", variantClassNames: { selected: { true: "_dlenfcv-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-5-0";
-var selectOptionPrefix = "_dlenfcx-3-5-0";
-var selectOptionSingle = "_dlenfcr-3-5-0";
-var selectOptionSuffix = "_dlenfcy-3-5-0";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-5-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-5-0" }, showError: { true: "_dlenfcb-3-5-0" }, readOnly: { true: "_dlenfcc-3-5-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-5-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-5-0"]] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-5-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-5-0" }, readOnly: { true: "_dlenfc8-3-5-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-5-0";
-var selectVirtualizationWrapper = "_dlenfcg-3-5-0";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-5-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-5-0", false: "_dlenfc4-3-5-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-5-0";
+var clearReactSelectZIndex = "_dlenfc5-3-6-0";
+var filter = "_dlenfc1-3-6-0";
+var placeholderColor = "_dlenfcl-3-6-0";
+var select = "_dlenfc0-3-6-0";
+var selectAll = "_dlenfcs-3-6-0";
+var selectGroupHeading = "_dlenfcf-3-6-0";
+var selectMenuDivider = "_dlenfcn-3-6-0";
+var selectMenuListWrapper = "_dlenfch-3-6-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-6-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-6-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-6-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-6-0";
+var selectNoOptionsMessage = "_dlenfci-3-6-0";
+var selectOptionMulti = "_dlenfct-3-6-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-6-0", variantClassNames: { selected: { true: "_dlenfcv-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-6-0";
+var selectOptionPrefix = "_dlenfcx-3-6-0";
+var selectOptionSingle = "_dlenfcr-3-6-0";
+var selectOptionSuffix = "_dlenfcy-3-6-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-6-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-6-0" }, showError: { true: "_dlenfcb-3-6-0" }, readOnly: { true: "_dlenfcc-3-6-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-6-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-6-0"]] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-6-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-6-0" }, readOnly: { true: "_dlenfc8-3-6-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-6-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-6-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-6-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-6-0", false: "_dlenfc4-3-6-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-6-0";
 export {
   clearReactSelectZIndex,
   filter,

package/esm/forms/select/styles/Select.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-5-0';\nexport var filter = '_dlenfc1-3-5-0';\nexport var placeholderColor = '_dlenfcl-3-5-0';\nexport var select = '_dlenfc0-3-5-0';\nexport var selectAll = '_dlenfcs-3-5-0';\nexport var selectGroupHeading = '_dlenfcf-3-5-0';\nexport var selectMenuDivider = '_dlenfcn-3-5-0';\nexport var selectMenuListWrapper = '_dlenfch-3-5-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-5-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-5-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-5-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-5-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-5-0';\nexport var selectOptionMulti = '_dlenfct-3-5-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-5-0',variantClassNames:{selected:{true:'_dlenfcv-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-5-0';\nexport var selectOptionPrefix = '_dlenfcx-3-5-0';\nexport var selectOptionSingle = '_dlenfcr-3-5-0';\nexport var selectOptionSuffix = '_dlenfcy-3-5-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-5-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-5-0'},showError:{true:'_dlenfcb-3-5-0'},readOnly:{true:'_dlenfcc-3-5-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-5-0'],[{showError:false,readOnly:true},'_dlenfce-3-5-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-5-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-5-0'},readOnly:{true:'_dlenfc8-3-5-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-5-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-5-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-5-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-5-0',false:'_dlenfc4-3-5-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-5-0';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-6-0';\nexport var filter = '_dlenfc1-3-6-0';\nexport var placeholderColor = '_dlenfcl-3-6-0';\nexport var select = '_dlenfc0-3-6-0';\nexport var selectAll = '_dlenfcs-3-6-0';\nexport var selectGroupHeading = '_dlenfcf-3-6-0';\nexport var selectMenuDivider = '_dlenfcn-3-6-0';\nexport var selectMenuListWrapper = '_dlenfch-3-6-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-6-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-6-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-6-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-6-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-6-0';\nexport var selectOptionMulti = '_dlenfct-3-6-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-6-0',variantClassNames:{selected:{true:'_dlenfcv-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-6-0';\nexport var selectOptionPrefix = '_dlenfcx-3-6-0';\nexport var selectOptionSingle = '_dlenfcr-3-6-0';\nexport var selectOptionSuffix = '_dlenfcy-3-6-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-6-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-6-0'},showError:{true:'_dlenfcb-3-6-0'},readOnly:{true:'_dlenfcc-3-6-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-6-0'],[{showError:false,readOnly:true},'_dlenfce-3-6-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-6-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-6-0'},readOnly:{true:'_dlenfc8-3-6-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-6-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-6-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-6-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-6-0',false:'_dlenfc4-3-6-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;AAC/B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxL,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,WAAU,OAAM,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACjV,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9N,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjM,IAAI,kBAAkB;",
   "names": []
 }

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-5-0 {
+._r47o0w1-3-6-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-5-0:empty::before {
+._r47o0w1-3-6-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-5-0:focus:empty {
+._r47o0w1-3-6-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-5-0 {
+._r47o0w2-3-6-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-5-0:focus:empty {
+._r47o0w2-3-6-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-5-0 {
+._r47o0w3-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-5-0:empty::before {
+._r47o0w3-3-6-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-5-0 {
+._r47o0w4-3-6-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-5-0", variantClassNames: { error: { true: "_r47o0w2-3-5-0" }, disabled: { true: "_r47o0w3-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-5-0"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-5-0";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-6-0", variantClassNames: { error: { true: "_r47o0w2-3-6-0" }, disabled: { true: "_r47o0w3-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-6-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-6-0";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-5-0',variantClassNames:{error:{true:'_r47o0w2-3-5-0'},disabled:{true:'_r47o0w3-3-5-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-5-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-5-0';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-6-0',variantClassNames:{error:{true:'_r47o0w2-3-6-0'},disabled:{true:'_r47o0w3-3-6-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-6-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACrO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.js

@@ -35,8 +35,8 @@ function handleDeletion(event, nextSpinButton, selection, length, onEdgeHandler)
       nextSpinButton.element.current?.focus();
       event.preventDefault();
     } else if (onEdgeHandler) {
-      onEdgeHandler();
       event.preventDefault();
+      requestAnimationFrame(() => onEdgeHandler());
     }
   }
 }

package/esm/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { SpinButtonHandler } from '../types.js';\n\nfunction handleArrowLeft(\n  event: ReactKeyboardEvent,\n  prevSpinButton: SpinButtonHandler | undefined,\n  currentSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  onLeadingEdge?: () => void,\n): void {\n  // Cursor is at the start and there is a previous spin button \u2014 move focus to it\n  if (prevSpinButton && selection?.start === 0) {\n    prevSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the start of the first spin button \u2014 notify the parent via callback\n  } else if (!prevSpinButton && onLeadingEdge && selection?.start === 0) {\n    onLeadingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the leading edge with no callback (e.g. the very first spin button of\n    // a DateTimeRangePicker FROM input). Without preventDefault, Firefox would\n    // shrink the selectAll'd range one character at a time on each press,\n    // forcing the user to press ArrowLeft N times before anything changes.\n  } else if (!prevSpinButton && selection?.start === 0) {\n    event.preventDefault();\n  }\n}\n\nfunction handleArrowRight(\n  event: ReactKeyboardEvent,\n  currentSpinButton: SpinButtonHandler | undefined,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  // Cursor is at the end and there is a next spin button \u2014 move focus to it\n  if (nextSpinButton && selection && selection.end === length) {\n    nextSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the end of the last spin button \u2014 notify the parent via callback\n  } else if (\n    !nextSpinButton &&\n    onTrailingEdge &&\n    selection &&\n    selection.end === length\n  ) {\n    onTrailingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the trailing edge with no callback (e.g. the very last spin button of\n    // a DateTimeRangePicker TO input). Block Firefox's shrink-by-one default\n    // behaviour so the selectAll'd range stays put on each press.\n  } else if (!nextSpinButton && selection?.end === length) {\n    event.preventDefault();\n  }\n}\n\nfunction handleDeletion(\n  event: ReactKeyboardEvent,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onEdgeHandler?: () => void,\n): void {\n  // Only act when the spin button is empty (length === 0) and the cursor is collapsed\n  // at position 0. If the spin button still has content, do nothing here \u2014 the browser\n  // handles deleteContentForward on the non-collapsed selection produced by selectAll()\n  // on focus, clearing the spin button in one keystroke. The second Delete press then\n  // finds length === 0 and navigates to the next spin button.\n  if (!length && selection?.start === 0 && selection?.end === 0) {\n    if (nextSpinButton) {\n      // Navigate forward: focus the next spin button. selectAll() fires on focus,\n      // giving a non-collapsed selection so the first Delete press there clears\n      // content rather than immediately navigating again.\n      nextSpinButton.element.current?.focus();\n      event.preventDefault();\n    } else if (onEdgeHandler) {\n      // Last spin button is empty \u2014 notify parent.\n      onEdgeHandler();\n      event.preventDefault();\n    }\n  }\n}\n\n/**\n * Checks if the pressed key is a trigger for moving to the next spin button and moves\n * focus accordingly.\n */\nfunction handleTriggerNavigation(\n  e: ReactKeyboardEvent,\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  target: SpinButtonHandler,\n): void {\n  const lookupIndex = spinButtonRefs.current?.findIndex((h) => h === target);\n  const nextTriggerIndex = triggerRefs.current.findIndex(\n    (trigger, index) => trigger !== undefined && index > lookupIndex,\n  );\n\n  const afterTriggerSpinButton = spinButtonRefs.current?.find(\n    (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n  );\n  const trigger = triggerRefs.current[nextTriggerIndex];\n\n  if (trigger !== undefined && afterTriggerSpinButton && e.key === trigger) {\n    afterTriggerSpinButton.element.current?.focus();\n    e.preventDefault();\n  }\n}\n\n/**\n * If the user types a letter into a text spin button that has no next sibling spin button,\n * call the onTrailingEdge callback to allow moving focus to the next group.\n */\nfunction handleTrailingTextAdvance(\n  e: ReactKeyboardEvent,\n  target: SpinButtonHandler,\n  next: SpinButtonHandler | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  if (\n    target.type !== 'text' ||\n    next ||\n    !/^[a-zA-Z]$/.test(e.key) ||\n    e.metaKey ||\n    e.ctrlKey\n  ) {\n    return;\n  }\n\n  const match = target.searchValue(e.key);\n  if (match !== undefined) {\n    onTrailingEdge?.();\n  }\n}\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRefs - A sparse array of trigger keys\n * @param onLeadingEdge - Optional callback fired when the user navigates backwards past the first spin button\n * @param onTrailingEdge - Optional callback fired when the user navigates forward past the last spin button\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  onLeadingEdge?: () => void,\n  onTrailingEdge?: () => void,\n) => {\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.key === 'Shift') {\n        return;\n      }\n\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n\n      if (!e.shiftKey) {\n        switch (e.key) {\n          case 'ArrowLeft':\n            handleArrowLeft(e, prev, target, selection, onLeadingEdge);\n            return;\n          case 'ArrowRight':\n            handleArrowRight(\n              e,\n              target,\n              next,\n              selection,\n              length,\n              onTrailingEdge,\n            );\n            return;\n          case 'Backspace':\n            handleDeletion(e, prev, selection, length, onLeadingEdge);\n            return;\n          case 'Delete':\n            handleDeletion(e, next, selection, length, onTrailingEdge);\n            return;\n        }\n      }\n\n      handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);\n      handleTrailingTextAdvance(e, target, next, onTrailingEdge);\n    },\n    [spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { SpinButtonHandler } from '../types.js';\n\nfunction handleArrowLeft(\n  event: ReactKeyboardEvent,\n  prevSpinButton: SpinButtonHandler | undefined,\n  currentSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  onLeadingEdge?: () => void,\n): void {\n  // Cursor is at the start and there is a previous spin button \u2014 move focus to it\n  if (prevSpinButton && selection?.start === 0) {\n    prevSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the start of the first spin button \u2014 notify the parent via callback\n  } else if (!prevSpinButton && onLeadingEdge && selection?.start === 0) {\n    onLeadingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the leading edge with no callback (e.g. the very first spin button of\n    // a DateTimeRangePicker FROM input). Without preventDefault, Firefox would\n    // shrink the selectAll'd range one character at a time on each press,\n    // forcing the user to press ArrowLeft N times before anything changes.\n  } else if (!prevSpinButton && selection?.start === 0) {\n    event.preventDefault();\n  }\n}\n\nfunction handleArrowRight(\n  event: ReactKeyboardEvent,\n  currentSpinButton: SpinButtonHandler | undefined,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  // Cursor is at the end and there is a next spin button \u2014 move focus to it\n  if (nextSpinButton && selection && selection.end === length) {\n    nextSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the end of the last spin button \u2014 notify the parent via callback\n  } else if (\n    !nextSpinButton &&\n    onTrailingEdge &&\n    selection &&\n    selection.end === length\n  ) {\n    onTrailingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the trailing edge with no callback (e.g. the very last spin button of\n    // a DateTimeRangePicker TO input). Block Firefox's shrink-by-one default\n    // behaviour so the selectAll'd range stays put on each press.\n  } else if (!nextSpinButton && selection?.end === length) {\n    event.preventDefault();\n  }\n}\n\nfunction handleDeletion(\n  event: ReactKeyboardEvent,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onEdgeHandler?: () => void,\n): void {\n  // Only act when the spin button is empty (length === 0) and the cursor is collapsed\n  // at position 0. If the spin button still has content, do nothing here \u2014 the browser\n  // handles deleteContentForward on the non-collapsed selection produced by selectAll()\n  // on focus, clearing the spin button in one keystroke. The second Delete press then\n  // finds length === 0 and navigates to the next spin button.\n  if (!length && selection?.start === 0 && selection?.end === 0) {\n    if (nextSpinButton) {\n      // Navigate forward: focus the next spin button. selectAll() fires on focus,\n      // giving a non-collapsed selection so the first Delete press there clears\n      // content rather than immediately navigating again.\n      nextSpinButton.element.current?.focus();\n      event.preventDefault();\n    } else if (onEdgeHandler) {\n      // Last spin button is empty \u2014 notify parent.\n      event.preventDefault();\n      requestAnimationFrame(() => onEdgeHandler());\n    }\n  }\n}\n\n/**\n * Checks if the pressed key is a trigger for moving to the next spin button and moves\n * focus accordingly.\n */\nfunction handleTriggerNavigation(\n  e: ReactKeyboardEvent,\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  target: SpinButtonHandler,\n): void {\n  const lookupIndex = spinButtonRefs.current?.findIndex((h) => h === target);\n  const nextTriggerIndex = triggerRefs.current.findIndex(\n    (trigger, index) => trigger !== undefined && index > lookupIndex,\n  );\n\n  const afterTriggerSpinButton = spinButtonRefs.current?.find(\n    (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n  );\n  const trigger = triggerRefs.current[nextTriggerIndex];\n\n  if (trigger !== undefined && afterTriggerSpinButton && e.key === trigger) {\n    afterTriggerSpinButton.element.current?.focus();\n    e.preventDefault();\n  }\n}\n\n/**\n * If the user types a letter into a text spin button that has no next sibling spin button,\n * call the onTrailingEdge callback to allow moving focus to the next group.\n */\nfunction handleTrailingTextAdvance(\n  e: ReactKeyboardEvent,\n  target: SpinButtonHandler,\n  next: SpinButtonHandler | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  if (\n    target.type !== 'text' ||\n    next ||\n    !/^[a-zA-Z]$/.test(e.key) ||\n    e.metaKey ||\n    e.ctrlKey\n  ) {\n    return;\n  }\n\n  const match = target.searchValue(e.key);\n  if (match !== undefined) {\n    onTrailingEdge?.();\n  }\n}\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRefs - A sparse array of trigger keys\n * @param onLeadingEdge - Optional callback fired when the user navigates backwards past the first spin button\n * @param onTrailingEdge - Optional callback fired when the user navigates forward past the last spin button\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  onLeadingEdge?: () => void,\n  onTrailingEdge?: () => void,\n) => {\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.key === 'Shift') {\n        return;\n      }\n\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n\n      if (!e.shiftKey) {\n        switch (e.key) {\n          case 'ArrowLeft':\n            handleArrowLeft(e, prev, target, selection, onLeadingEdge);\n            return;\n          case 'ArrowRight':\n            handleArrowRight(\n              e,\n              target,\n              next,\n              selection,\n              length,\n              onTrailingEdge,\n            );\n            return;\n          case 'Backspace':\n            handleDeletion(e, prev, selection, length, onLeadingEdge);\n            return;\n          case 'Delete':\n            handleDeletion(e, next, selection, length, onTrailingEdge);\n            return;\n        }\n      }\n\n      handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);\n      handleTrailingTextAdvance(e, target, next, onTrailingEdge);\n    },\n    [spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
+  "mappings": "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",
   "names": ["trigger"]
 }