@fluentui/react-combobox 9.0.0-beta.11 → 9.0.0-beta.13

package/CHANGELOG.json

@@ -2,7 +2,133 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Mon, 03 Oct 2022 22:22:53 GMT",
+      "date": "Thu, 20 Oct 2022 08:35:06 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.13",
+      "version": "9.0.0-beta.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "06865dada128321804646582f564ee86d835d174",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
+            "comment": "chore: Bump peer deps to support React 18"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "d55f6633f62c5715c41c8dbc8c5a428bef424345",
+            "comment": "feat: Add red border when aria-invalid is set"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.5",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.8",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.2.2",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.1",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.1.2",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Oct 2022 11:02:45 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "1a527d440e0497ef8046b3ce240492241e7a04ac",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "610eaf4725950121d3646e07a452d541ea3f3776",
+            "comment": "fix: add ScrollIntoView hook for Listbox options"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "0bf5374da5df0649ac7fdc065d141f0b8cd7ddf6",
+            "comment": "feat: export contexts from react-combobox"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "e154da8243c0b3a900aeaaa55d91c4ca96f8a705",
+            "comment": "fix: Dropdown arrow icon layout when no placeholder or value is present"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.4",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.7",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.2.1",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.1.1",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:42 GMT",
       "tag": "@fluentui/react-combobox_v9.0.0-beta.11",
       "version": "9.0.0-beta.11",
       "comments": {
@@ -11,7 +137,7 @@
             "author": "beachball",
             "package": "@fluentui/react-combobox",
             "comment": "Bump @fluentui/react-portal to v9.0.6",
-            "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,17 +1,51 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 03 Oct 2022 22:22:53 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Oct 2022 08:35:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.13)
+
+Thu, 20 Oct 2022 08:35:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.12..@fluentui/react-combobox_v9.0.0-beta.13)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
+- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
+- feat: Add red border when aria-invalid is set ([PR #25252](https://github.com/microsoft/fluentui/pull/25252) by behowell@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.5 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-portal to v9.0.8 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-positioning to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.12)
+
+Thu, 13 Oct 2022 11:02:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.11..@fluentui/react-combobox_v9.0.0-beta.12)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
+- fix: add ScrollIntoView hook for Listbox options ([PR #25080](https://github.com/microsoft/fluentui/pull/25080) by sarah.higley@microsoft.com)
+- feat: export contexts from react-combobox ([PR #25099](https://github.com/microsoft/fluentui/pull/25099) by sarah.higley@microsoft.com)
+- fix: Dropdown arrow icon layout when no placeholder or value is present ([PR #25049](https://github.com/microsoft/fluentui/pull/25049) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-portal to v9.0.7 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-positioning to v9.2.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+
 ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.11)
 
-Mon, 03 Oct 2022 22:22:53 GMT 
+Mon, 03 Oct 2022 22:24:42 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.10..@fluentui/react-combobox_v9.0.0-beta.11)
 
 ### Changes
 
-- Bump @fluentui/react-portal to v9.0.6 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
+- Bump @fluentui/react-portal to v9.0.6 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
 
 ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.10)
 

package/dist/index.d.ts

@@ -2,8 +2,11 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -101,7 +104,7 @@ export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
 /**
  * Context shared with Combobox, Listbox, & Options
  */
-declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption' | 'setOpen' | 'size'>;
+export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption' | 'setOpen' | 'size'>;
 
 export declare type ComboboxContextValues = ComboboxBaseContextValues;
 
@@ -117,6 +120,8 @@ export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>,
     children?: React_2.ReactNode;
 };
 
+export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;
+
 export declare type ComboboxSlots = {
     root: NonNullable<Slot<'div'>>;
     expandIcon: Slot<'span'>;
@@ -171,7 +176,7 @@ export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
 /**
  * Context shared with all Listbox Options
  */
-declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'>;
+export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'>;
 
 export declare type ListboxContextValues = {
     listbox: ListboxContextValue;
@@ -182,6 +187,8 @@ export declare type ListboxContextValues = {
  */
 export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;
 
+export declare const ListboxProvider: Provider<ListboxContextValue> & FC<ProviderProps<ListboxContextValue>>;
+
 export declare type ListboxSlots = {
     root: Slot<'div'>;
 };
@@ -340,6 +347,8 @@ declare type SelectionState = Required<Pick<SelectionProps, 'selectedOptions'>>
  */
 export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
 
+export declare function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues;
+
 /**
  * Apply styling to the Combobox slots based on the state
  */
@@ -372,6 +381,8 @@ export declare const useDropdownStyles_unstable: (state: DropdownState) => Dropd
  */
 export declare const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;
 
+export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
+
 /**
  * Apply styling to the Listbox slots based on the state
  */

package/lib/components/Combobox/useCombobox.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
+import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
 /**
  * Create the state required to render Combobox.

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // calculate listbox width style based on trigger width\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingValue(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && getSearchString(value) === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when clicking the icon\n      baseState.ignoreNextBlur.current = true;\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // calculate listbox width style based on trigger width\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingValue(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && getSearchString(value) === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when clicking the icon\n      baseState.ignoreNextBlur.current = true;\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Combobox/useComboboxStyles.js

@@ -126,9 +126,18 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "filled-darker": {
     "De3pzq": "f16xq7d1"
+  },
+  "invalid": {
+    "tvckwq": "fs4k3qj",
+    "gk2u95": ["fcee079", "fmyw78r"],
+    "hhx65j": "f1fgmyf4",
+    "Bxowmz0": ["fmyw78r", "fcee079"]
+  },
+  "invalidUnderline": {
+    "hhx65j": "f1fgmyf4"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
   "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
@@ -222,10 +231,11 @@ export const useComboboxStyles_unstable = state => {
     open,
     size
   } = state;
+  const invalid = `${state.input['aria-invalid']}` === 'true';
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const inputStyles = useInputStyles();
-  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], state.root.className);
+  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, state.root.className);
   state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], state.input.className);
 
   if (state.listbox) {

package/lib/components/Combobox/useComboboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dropdown/useDropdown.js

@@ -3,8 +3,8 @@ import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
+import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
 import { useMergedRefs } from '@fluentui/react-utilities';
 /**

package/lib/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Dropdown/useDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n  } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingValue(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingValue(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Dropdown/useDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n  } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingValue(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingValue(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dropdown/useDropdownStyles.js

@@ -80,7 +80,7 @@ const useStyles = /*#__PURE__*/__styles({
     "Bceei9c": "f1k6fduh",
     "mc9l5x": "f13qh94s",
     "Bahqtrf": "fk6fouc",
-    "Budl1dq": "fz17x9o",
+    "Budl1dq": "f12nh0o2",
     "Brf1p80": "f1869bpl",
     "fsow6f": ["f1o700av", "fes3tcz"],
     "a9b677": "fly5x3f",
@@ -152,9 +152,18 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "filled-darker": {
     "De3pzq": "f16xq7d1"
+  },
+  "invalid": {
+    "tvckwq": "fs4k3qj",
+    "gk2u95": ["fcee079", "fmyw78r"],
+    "hhx65j": "f1fgmyf4",
+    "Bxowmz0": ["fmyw78r", "fcee079"]
+  },
+  "invalidUnderline": {
+    "hhx65j": "f1fgmyf4"
   }
 }, {
-  "d": [".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
+  "d": [".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
   "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
@@ -176,6 +185,8 @@ const useIconStyles = /*#__PURE__*/__styles({
     "sj55zd": "fxkbij4",
     "mc9l5x": "ftgm304",
     "Be2twd7": "f1pp30po",
+    "Br312pm": "f12w6cgp",
+    "Bw0ie65": "f8bv1bt",
     "Bo70h7d": "fvc9v3g"
   },
   "small": {
@@ -191,7 +202,7 @@ const useIconStyles = /*#__PURE__*/__styles({
     "Frg6f3": ["f1t5qyk5", "f1ikr372"]
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}"]
 });
 /**
  * Apply styling to the Dropdown slots based on the state
@@ -205,9 +216,10 @@ export const useDropdownStyles_unstable = state => {
     placeholderVisible,
     size
   } = state;
+  const invalid = `${state.button['aria-invalid']}` === 'true';
   const styles = useStyles();
   const iconStyles = useIconStyles();
-  state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], state.root.className);
+  state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, state.root.className);
   state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
 
   if (state.listbox) {