npm - @fluentui/react-combobox - Versions diffs - 9.5.9 → 9.5.10 - Mend

@fluentui/react-combobox 9.5.9 → 9.5.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } 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';\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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n const baseState = useComboboxBaseState(props);\n const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, 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 = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n let matches = getOptionsMatchingText(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 = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n matches = getOptionsMatchingText(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 = slot.always(props.button, {\n defaultProps: {\n type: 'button',\n children: baseState.value \|\| props.placeholder,\n ...triggerNativeProps,\n },\n elementType: 'button',\n });\n triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n listboxSlot =\n baseState.open \|\| baseState.hasFocus\n ? slot.optional(props.listbox, {\n renderByDefault: true,\n defaultProps: { children: props.children, style: { width: popupWidth } },\n elementType: Listbox,\n })\n : undefined;\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n const state: DropdownState = {\n components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n root: slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n }),\n button: triggerSlot,\n listbox: listboxSlot,\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","useTimeout","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"mappings":"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"}
1	+ {"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } 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';\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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n const baseState = useComboboxBaseState(props);\n const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, 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 = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n let matches = getOptionsMatchingText(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 = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n matches = getOptionsMatchingText(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 = slot.always(props.button, {\n defaultProps: {\n type: 'button',\n children: baseState.value \|\| props.placeholder,\n ...triggerNativeProps,\n },\n elementType: 'button',\n });\n triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n listboxSlot =\n baseState.open \|\| baseState.hasFocus\n ? slot.optional(props.listbox, {\n renderByDefault: true,\n defaultProps: { children: props.children, style: { width: popupWidth } },\n elementType: Listbox,\n })\n : undefined;\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n const state: DropdownState = {\n components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n root: slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n }),\n button: triggerSlot,\n listbox: listboxSlot,\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","useTimeout","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useDropdown_unstable","props","ref","listboxSlot","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"mappings":"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"}

package/lib/components/Dropdown/useDropdownStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/*\n Styles for Dropdown\n / const useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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(${tokens.strokeWidthThick}, ${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 '@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 '@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 listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\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 ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\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 disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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 // 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 disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\n/\n Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance , open , placeholderVisible , size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/*\n Styles for Dropdown\n / const useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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(${tokens.strokeWidthThick}, ${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 '@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 '@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 listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\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 ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\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 disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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 // 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 disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\n/\n Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}

package/lib/components/Listbox/Listbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,yCAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC~~,MAAQ~~;~~IACzF~~,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
1	+ {"version":3,"sources":["Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,yCAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

package/lib/components/Listbox/renderListbox.js CHANGED Viewed

@@ -1,11 +1,12 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { ListboxContext } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Listbox
  */ export const renderListbox_unstable = (state, contextValues)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(ListboxContext.Provider, {
-        value: contextValues.listbox
-    }, /*#__PURE__*/ createElement(state.root, null));
+    return /*#__PURE__*/ _jsx(ListboxContext.Provider, {
+        value: contextValues.listbox,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

package/lib/components/Listbox/renderListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime ~~classic~~ /\n/* @~~jsx~~ ~~createElement /\n\nimport { createElement } from '~~@fluentui/react-jsx-runtime~~';\~~n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/\n Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n assertSlots<ListboxSlots>(state);\n\n return (\n <ListboxContext.Provider value={contextValues.listbox}>\n <state.root />\n </ListboxContext.Provider>\n );\n};\n"],"names":["~~createElement","~~assertSlots","ListboxContext","renderListbox_unstable","state","contextValues","Provider","value","listbox","root"],"mappings":"AAAA,~~wBAAwB~~,~~GACxB~~,~~uBAAuB~~,~~GAEvB,~~SAASA,~~aAAa,QAAQ,8BAA8B;AAE5D,SAASC,~~WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC~~,gBAAwC~~;~~IAClGJ~~,YAA0BG;IAE1B,qBACE,~~AAfJ~~,~~cAeKF,~~eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;~~qBACnD~~,~~AAhBN~~,~~cAgBOJ~~,MAAMK,IAAI;AAGjB,EAAE"}
1	+ {"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/\n Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n assertSlots<ListboxSlots>(state);\n\n return (\n <ListboxContext.Provider value={contextValues.listbox}>\n <state.root />\n </ListboxContext.Provider>\n );\n};\n"],"names":["assertSlots","ListboxContext","renderListbox_unstable","state","contextValues","Provider","value","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DJ,YAA0BG;IAE1B,qBACE,KAACF,eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;kBACnD,cAAA,KAACJ,MAAMK,IAAI;;AAGjB,EAAE"}

package/lib/components/Listbox/useListbox.js CHANGED Viewed

@@ -15,10 +15,11 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
  */ export const useListbox_unstable = (props, ref)=>{
-    const { multiselect  } = props;
+    var _activeOption;
+    const { multiselect } = props;
     const optionCollection = useOptionCollection();
-    const { getCount , getOptionAtIndex , getIndexOfId  } = optionCollection;
-    const { clearSelection , selectedOptions , selectOption  } = useSelection(props);
+    const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;
+    const { clearSelection, selectedOptions, selectOption } = useSelection(props);
     const [activeOption, setActiveOption] = React.useState();
     // track whether keyboard focus outline should be shown
     // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
@@ -76,7 +77,7 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
         root: slot.always(getNativeElementProps('div', {
             ref,
             role: multiselect ? 'menu' : 'listbox',
-            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
+            'aria-activedescendant': hasComboboxContext ? undefined : (_activeOption = activeOption) === null || _activeOption === void 0 ? void 0 : _activeOption.id,
             'aria-multiselectable': multiselect,
             tabIndex: 0,
             ...props

package/lib/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","~~activeOption","~~setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AACnC,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,mCAAmC;AAC3F,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,iCAAiC;AAE9F,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC~~,MAA8C~~;~~IACrG~~,MAAM,EAAEC,~~YAAW~~,EAAE,~~GAAGF~~;IACxB,~~MAAMG~~,~~mBAAmBR~~;IACzB,MAAM,~~EAAES~~,~~SAAQ~~,EAAEC,~~iBAAgB~~,EAAEC,~~aAAY~~,EAAE,GAAGH;IAErD,MAAM,EAAEI,~~eAAc~~,EAAEC,~~gBAAe~~,EAAEC,~~aAAY~~,EAAE,~~GAAGZ~~,aAAaG;IAEvE,MAAM,~~CAACU~~,~~cAAcC~~,gBAAgB,GAAG1B,MAAM2B,QAAQ;IAEtD,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACC,cAAcC,gBAAgB,GAAG7B,MAAM2B,QAAQ,CAAC~~,KAAK~~;~~IAE5D~~,MAAMG,YAAY,CAACC~~,QAA4C~~;~~QAC7D~~,MAAMC,SAASxB,yBAAyBuB,OAAO;YAAEE,MAAM~~,IAAI~~;~~QAAC~~;QAC5D,MAAMC,~~WAAWf~~,aAAa;QAC9B,~~MAAMgB~~,~~cAAcV~~,~~eAAeJ~~,~~aAAaI~~,~~aAAaW~~,EAAE,IAAI,CAAC~~,CAAC~~;~~QACrE~~,IAAIC,WAAWF;QAEf,OAAQH;YACN,KAAK;YACL,KAAK;~~gBACHP~~,~~gBAAgBD~~,~~aAAaO~~,~~OAAON~~;gBACpC~~,KAAM~~;~~YACR~~;~~gBACEY~~,WAAW5B,mBAAmBuB,QAAQG,aAAaD;QACvD;QAEA,IAAIG,aAAaF,aAAa;YAC5B,mEAAmE;YACnEJ,MAAMO,cAAc;YACpBZ,~~gBAAgBN~~,~~iBAAiBiB~~;YACjCR,gBAAgB~~,IAAI~~;~~QACtB,CAAC~~;~~IACH~~;IAEA,MAAMU,cAAc,CAACR~~,QAAyC~~;~~QAC5DF~~,gBAAgB~~,KAAK~~;~~IACvB~~;IAEA,+CAA+C;IAC/C,MAAMW,qBAAqBjC,oBAAoBM;IAC/C,MAAM4B,uBAAuBnC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,~~IAAIjB~~,YAAY;IACxF,~~MAAMkB~~,uBAAuBrC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAId,YAAY;IACxF,MAAMgB,0BAA0BtC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,~~IAAInB~~,eAAe;IAC9F,~~MAAMsB~~,uBAAuBvC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,~~IAAIlB~~,YAAY;IACxF,~~MAAMsB~~,0BAA0BxC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAIhB,eAAe;IAE9F,0EAA0E;IAC1E,MAAMqB,sBAAsBP,qBACxB;~~QACEf~~,~~cAAcgB~~;QACdb,cAAce;~~QACdpB~~,~~iBAAiBqB~~;~~QACjBpB~~,~~cAAcqB~~;QACdnB,iBAAiBoB;IACnB,IACA;~~QACErB~~;~~QACAG~~;~~QACAL~~;QACAC;~~QACAE~~;IACF~~,CAAC~~;~~IAEL~~,MAAMsB,QAAsB;QAC1BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7C,KAAK8C,MAAM,CACflD,sBAAsB,OAAO;YAC3Be;YACAoC,~~MAAMnC~~,cAAc,SAAS~~,SAAS~~;~~YACtC~~,~~yBAAyBuB~~,qBAAqBa,~~YAAY5B~~,~~yBAAAA~~,0BAAAA,~~KAAAA~~,~~IAAAA~~,~~aAAcW,~~EAAE;YAC1E,~~wBAAwBnB~~;~~YACxBqC~~,UAAU;YACV,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;~~QAEvBtC~~;QACAK;QACA,GAAGJ,gBAAgB;QACnB,~~GAAG6B~~,mBAAmB;IACxB;IAEA,MAAMS,qBAAqB7C,yBAAyBqC;IACpDA,MAAME,IAAI,CAAClC,GAAG,GAAGZ,cAAc4C,MAAME,IAAI,CAAClC,GAAG,EAAEwC;IAE/CR,MAAME,IAAI,CAACpB,SAAS,GAAG3B,iBAAiBD,eAAe8C,MAAME,IAAI,CAACpB,SAAS,EAAEA;IAC7EkB,MAAME,IAAI,CAACX,WAAW,GAAGpC,iBAAiBD,eAAe8C,MAAME,IAAI,CAACX,WAAW,EAAEA;IAEjF,OAAOS;AACT,EAAE"}
1	+ {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","activeOption","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}

package/lib/components/Option/Option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC~~,MAAQ~~;~~IACvF~~,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
1	+ {"version":3,"sources":["Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib/components/Option/renderOption.js CHANGED Viewed

@@ -1,8 +1,13 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Option
  */ export const renderOption_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, state.checkIcon && /*#__PURE__*/ createElement(state.checkIcon, null), state.root.children);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.checkIcon && /*#__PURE__*/ _jsx(state.checkIcon, {}),
+            state.root.children
+        ]
+    });
 };

package/lib/components/Option/renderOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderOption.tsx"],"sourcesContent":["/** @jsxRuntime ~~classic~~ /\n/* @~~jsx~~ ~~createElement /\n\nimport { createElement } from '~~@fluentui/react-jsx-runtime~~';\~~n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/\n Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n assertSlots<OptionSlots>(state);\n\n return (\n <state.root>\n {state.checkIcon && <state.checkIcon />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["~~createElement","~~assertSlots","renderOption_unstable","state","root","checkIcon","children"],"mappings":"AAAA,~~wBAAwB~~,~~GACxB~~,~~uBAAuB~~,~~GAEvB,~~SAASA,~~aAAa,QAAQ,8BAA8B;AAE5D,SAASC,~~WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC~~,QAAuB~~;~~IAC3DF~~,YAAyBE;IAEzB,qBACE,~~AAdJ~~,~~cAcKA,~~MAAMC,IAAI,~~QACRD,~~MAAME,SAAS,kBAAI,~~AAf1B~~,~~cAe2BF,~~MAAME,SAAS,~~SACnCF,~~MAAMC,IAAI,CAACE,QAAQ;AAG1B,EAAE"}
1	+ {"version":3,"sources":["renderOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/\n Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n assertSlots<OptionSlots>(state);\n\n return (\n <state.root>\n {state.checkIcon && <state.checkIcon />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderOption_unstable","state","root","checkIcon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

package/lib/components/Option/useOption.js CHANGED Viewed

@@ -33,7 +33,7 @@ function getTextString(text, children) {
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
  */ export const useOption_unstable = (props, ref)=>{
-    const { children , disabled , text , value  } = props;
+    const { children, disabled, text, value } = props;
     const optionRef = React.useRef(null);
     const optionText = getTextString(text, children);
     const optionValue = value !== null && value !== void 0 ? value : optionText;
@@ -73,7 +73,7 @@ function getTextString(text, children) {
         CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';
     }
     const onClick = (event)=>{
-        var _props_onClick;
+        var _props_onClick, _props;
         if (disabled) {
             event.preventDefault();
             return;
@@ -82,11 +82,12 @@ function getTextString(text, children) {
         setActiveOption(optionData);
         // close on option click for single-select options in a combobox
         if (!multiselect) {
-            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
+            var _setOpen;
+            (_setOpen = setOpen) === null || _setOpen === void 0 ? void 0 : _setOpen(event, false);
         }
         // handle selection change
         selectOption(event, optionData);
-        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+        (_props_onClick = (_props = props).onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(_props, event);
     };
     // register option data with context
     React.useEffect(()=>{

package/lib/components/Option/useOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string \| undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","slot","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,wBAAwB;AAC3E,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,cAAc,QAAQ,gCAAgC;AAI/D,SAASC,cAAcC,IAAwB,EAAEC,QAAyB~~,EAAE~~;~~IAC1E~~,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT~~,CAAC~~;~~IAED~~,IAAIG,aAAa;IACjB,IAAIC,oBAAoB~~,KAAK~~;~~IAC7Bf~~,MAAMgB,QAAQ,CAACC,OAAO,CAACL,UAAUM,CAAAA~~,QAAS~~;~~QACxC~~,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB~~,IAAI~~;~~QAC1B,CAAC~~;~~IACH~~;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf~~,CAAC~~;~~IAED~~,OAAON;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMO,qBAAqB,CAACC,OAAoBC~~,MAA6C~~;~~IAClG~~,MAAM,EAAEX,~~SAAQ~~,EAAEY,~~SAAQ~~,EAAEb,~~KAAI~~,EAAEc,~~MAAK~~,EAAE,GAAGH;IAC5C,MAAMI,YAAY1B,MAAM2B,MAAM,CAAc~~,IAAI~~;~~IAChD~~,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,kBAAAA,mBAAAA,QAASG~~,UAAU~~;~~IAEvC~~,uDAAuD;IACvD,MAAME,KAAK5B,MAAM,iBAAiBoB,MAAMQ,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAa/B,MAAMgC,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIN;YAAUb,MAAMiB;YAAYH,OAAOI;QAAY,CAAA,GAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAMI,eAAe5B,mBAAmBI,gBAAgByB,CAAAA,MAAOA,IAAID,YAAY;IAC/E,MAAME,cAAc9B,mBAAmBI,gBAAgByB,CAAAA,MAAOA,IAAIC,WAAW;IAC7E,MAAMC,iBAAiB/B,mBAAmBI,gBAAgByB,CAAAA,MAAOA,IAAIE,cAAc;IACnF,MAAMC,WAAWhC,mBAAmBI,gBAAgByB,CAAAA~~,MAAO~~;~~QACzD~~,MAAMI,kBAAkBJ,IAAII,eAAe;QAE3C,OAAO,CAAC,CAACT,eAAe,CAAC,CAACS,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMX;IAC5D;IACA,MAAMY,eAAepC,mBAAmBI,gBAAgByB,CAAAA,MAAOA,IAAIO,YAAY;IAC/E,MAAMC,kBAAkBrC,mBAAmBI,gBAAgByB,CAAAA,MAAOA,IAAIQ,eAAe;IACrF,MAAMC,UAAUtC,mBAAmBG,iBAAiB0B,CAAAA,MAAOA,IAAIS,OAAO;IAEtE,yBAAyB;IACzB,MAAMC,SAASvC,mBAAmBI,gBAAgByB,CAAAA~~,MAAO~~;~~YAChDA~~,mBAAsCA;QAA7C,OAAOA,~~CAAAA~~,~~CAAAA,~~oBAAAA,IAAIW,YAAY,cAAhBX~~,+BAAAA~~,~~KAAAA~~,~~IAAAA,~~kBAAkBJ,EAAE,~~AAAD~~,~~MAAMjB,~~aAAaqB,~~CAAAA~~,~~CAAAA,~~qBAAAA,IAAIW,YAAY,cAAhBX,~~gCAAAA~~,~~KAAAA,IAAAA,~~mBAAkBJ,EAAE,~~AAAD,MAAMA~~;IACxE;IAEA,aAAa;IACb,IAAIgB,0BAA6B,oBAACxC;IAClC,IAAI6B,aAAa;QACfW,YAAYT,yBAAW,oBAAC9B,2BAAuB~~,EAAE~~;~~IACnD,CAAC~~;~~IAED~~,MAAMwC,UAAU,CAACC,~~QAA4C~~;~~YAiB3D1B;~~QAhBA,IAAIE,UAAU;YACZwB,MAAMC,cAAc;YACpB;QACF~~,CAAC~~;~~QAED~~,oDAAoD;QACpDP,gBAAgBX;QAEhB,gEAAgE;QAChE,IAAI,CAACI,aAAa;~~YAChBQ~~,~~oBAAAA~~,qBAAAA,~~KAAAA~~,~~IAAAA,QAAUK,~~OAAO~~,KAAK~~;~~QACxB,CAAC~~;~~QAED~~,0BAA0B;QAC1BP,aAAaO,OAAOjB;~~QAEpBT~~,CAAAA,~~iBAAAA~~,~~MAAMyB~~,OAAO,cAAbzB,~~4BAAAA~~,~~KAAAA~~,~~IAAAA,eAAAA,KAAAA,OAAgB0B~~;IAClB;IAEA,oCAAoC;IACpChD,MAAMkD,SAAS,CAAC~~,IAAM~~;~~QACpB~~,IAAIpB,MAAMJ,UAAUyB,OAAO,EAAE;YAC3B,OAAOf,eAAeL,YAAYL,UAAUyB,OAAO;QACrD~~,CAAC~~;~~IACH~~,GAAG;QAACrB;QAAIC;QAAYK;KAAe;IAEnC,MAAMgB,gBAAgBjB,cAClB;QAAEkB,MAAM;QAAoB,gBAAgBhB;IAAS,IACrD;QAAEgB,MAAM;QAAU,iBAAiBhB;IAAS~~,CAAC~~;~~IAEjD~~,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNC,WAAW;QACb;QACAD,MAAMnD,KAAKqD,MAAM,CACfxD,sBAAsB,OAAO;YAC3BsB,KAAKpB,cAAcoB,KAAKG;YACxB,iBAAiBF,WAAW,SAASX~~,SAAS~~;~~YAC9CiB~~;YACA,GAAGsB,aAAa;YAChB,GAAG9B,KAAK;YACRyB;QACF,IACA;YAAEW,aAAa;QAAM;QAEvBF,WAAWpD,KAAKuD,QAAQ,CAACrC,MAAMkC,SAAS,EAAE;YACxCI,iBAAiB~~,IAAI~~;~~YACrBC~~,cAAc;gBACZ,eAAe;gBACfjD,UAAUkC;YACZ;YACAY,aAAa;QACf;QACAd;QACApB;QACAS;QACAE;QACAE;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string \| undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","slot","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}

package/lib/components/Option/useOptionStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground\n },\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n const { active , disabled , focusVisible , multiselect , selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAvC,MAAA;IAAAY,MAAA;IAAAC,MAAA;IAAA2B,OAAA;EAAA;EAAAC,QAAA;EAAAhD,SAAA;IAAAY,OAAA;IAAAqC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAF,OAAA;EAAA;EAAAG,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA/D,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA6D,OAAA;IAAAzD,MAAA;IAAAR,OAAA;IAAAkE,OAAA;IAAAC,OAAA;IAAAzD,OAAA;IAAA0D,OAAA;IAAAC,MAAA;IAAApB,OAAA;EAAA;EAAAqB,wBAAA;IAAAC,MAAA;IAAAlE,MAAA;IAAAwD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAQ,aAAA;IAAAnE,MAAA;IAAAwC,OAAA;EAAA;AAAA;EAAA4B,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,MAAM;IAAE3D,MAAM;~~IAAGyB~~,QAAQ;~~IAAGmC~~,YAAY;~~IAAGC~~,WAAW;~~IAAGlC~~;~~EAAU~~,CAAC,GAAGgC,KAAK;~~EAC5E~~,MAAMG,MAAM,GAAGlF,SAAS,CAAC,CAAC;EAC1B+E,KAAK,CAACjF,IAAI,CAACqF,SAAS,GAAGxF,YAAY,CAACE,gBAAgB,CAACC,IAAI,EAAEoF,MAAM,CAACpF,IAAI,EAAEsB,MAAM,IAAI4D,YAAY,IAAIE,MAAM,CAAC9D,MAAM,EAAEyB,QAAQ,IAAIqC,MAAM,CAACrC,QAAQ,EAAEE,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEgC,KAAK,CAACjF,IAAI,CAACqF,SAAS,CAAC;EAChM,IAAIJ,KAAK,CAAChF,SAAS,EAAE;IACjBgF,KAAK,CAAChF,SAAS,CAACoF,SAAS,GAAGxF,YAAY,CAACE,gBAAgB,CAACE,SAAS,EAAEmF,MAAM,CAACnF,SAAS,EAAEkF,WAAW,IAAIC,MAAM,CAAC7B,gBAAgB,EAAEN,QAAQ,IAAImC,MAAM,CAAC9B,aAAa,EAAEL,QAAQ,IAAIkC,WAAW,IAAIC,MAAM,CAACX,wBAAwB,EAAE1B,QAAQ,IAAIqC,MAAM,CAACT,aAAa,EAAEM,KAAK,CAAChF,SAAS,CAACoF,SAAS,CAAC;EAC7R;EACA,OAAOJ,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground\n },\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}

package/lib/components/OptionGroup/OptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC~~,MAAQ~~;~~IACjG~~,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
1	+ {"version":3,"sources":["OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/OptionGroup/renderOptionGroup.js CHANGED Viewed

@@ -1,8 +1,15 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of OptionGroup
  */ export const renderOptionGroup_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, state.label && /*#__PURE__*/ createElement(state.label, null, state.label.children), state.root.children);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.label && /*#__PURE__*/ _jsx(state.label, {
+                children: state.label.children
+            }),
+            state.root.children
+        ]
+    });
 };

package/lib/components/OptionGroup/renderOptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime ~~classic~~ /\n/* @~~jsx~~ ~~createElement /\n\nimport { createElement } from '~~@fluentui/react-jsx-runtime~~';\~~n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/\n Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n assertSlots<OptionGroupSlots>(state);\n\n return (\n <state.root>\n {state.label && <state.label>{state.label.children}</state.label>}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["~~createElement","~~assertSlots","renderOptionGroup_unstable","state","root","label","children"],"mappings":"AAAA,~~wBAAwB~~,~~GACxB~~,~~uBAAuB~~,~~GAEvB,~~SAASA,~~aAAa,QAAQ,8BAA8B;AAE5D,SAASC,~~WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC~~,QAA4B~~;~~IACrEF~~,YAA8BE;IAE9B,qBACE,~~AAdJ~~,~~cAcKA,~~MAAMC,IAAI,~~QACRD,~~MAAME,KAAK,kBAAI,~~AAftB~~,~~cAeuBF,~~MAAME,KAAK,~~QAAEF,~~MAAME,KAAK,CAACC,QAAQ,~~GACjDH,~~MAAMC,IAAI,CAACE,QAAQ;AAG1B,EAAE"}
1	+ {"version":3,"sources":["renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/\n Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n assertSlots<OptionGroupSlots>(state);\n\n return (\n <state.root>\n {state.label && <state.label>{state.label.children}</state.label>}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderOptionGroup_unstable","state","root","label","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;0BAAEF,MAAME,KAAK,CAACC,QAAQ;;YACjDH,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

package/lib/components/OptionGroup/useOptionGroup.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
  * @param ref - reference to root HTMLElement of OptionGroup
  */ export const useOptionGroup_unstable = (props, ref)=>{
     const labelId = useId('group-label');
-    const { label  } = props;
+    const { label } = props;
     return {
         components: {
             root: 'div',

package/lib/components/OptionGroup/useOptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAG/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC~~,MAAkD~~;~~IACjH~~,MAAMC,UAAUL,MAAM;IACtB,MAAM,EAAEM,~~MAAK~~,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,KAAKQ,MAAM,CACfV,sBAAsB,OAAO;YAC3BK;YACAM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM~~,SAAS~~;~~YAC9C~~,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,KAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAG/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,UAAUL,MAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,KAAKQ,MAAM,CACfV,sBAAsB,OAAO;YAC3BK;YACAM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,KAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/contexts/ComboboxContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/*\n Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n \| 'activeOption'\n \| 'appearance'\n \| 'focusVisible'\n \| 'open'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n \| 'setOpen'\n \| 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAoBjE,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc~~,KAAK~~;~~IACnBC~~,MAAM~~,KAAK~~;~~IACXC,kBAAiB~~;~~QACf~~,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC~~,gBAAe~~;~~IACb~~,OAAO;IACT;IACAC~~,mBAAkB~~;~~IAChB~~,OAAO;IACT;IACAC~~,WAAU~~;~~IACR~~,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAEH,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}
1	+ {"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/*\n Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n \| 'activeOption'\n \| 'appearance'\n \| 'focusVisible'\n \| 'open'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n \| 'setOpen'\n \| 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAoBjE,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAEH,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}

package/lib/contexts/ListboxContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/*\n Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n \| 'activeOption'\n \| 'focusVisible'\n \| 'multiselect'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAiBjE,8DAA8D;AAC9D,OAAO,MAAMC,iBAAiBD,cAAmC;IAC/DE,cAAcC;IACdC,cAAc~~,KAAK~~;~~IACnBC~~,aAAa~~,KAAK~~;~~IAClBC,kBAAiB~~;~~QACf~~,OAAO,IAAMH;IACf;IACAI,iBAAiB,EAAE;IACnBC~~,gBAAe~~;~~IACb~~,OAAO;IACT;IACAC~~,mBAAkB~~;~~IAChB~~,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMC,kBAAkBT,eAAeU,QAAQ,CAAC"}
1	+ {"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/*\n Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n \| 'activeOption'\n \| 'focusVisible'\n \| 'multiselect'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAiBjE,8DAA8D;AAC9D,OAAO,MAAMC,iBAAiBD,cAAmC;IAC/DE,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAO,IAAMH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMC,kBAAkBT,eAAeU,QAAQ,CAAC"}

package/lib/contexts/useComboboxContextValues.js CHANGED Viewed

@@ -1,5 +1,5 @@
 export function useComboboxContextValues(state) {
-    const { activeOption , appearance , focusVisible , open , registerOption , selectedOptions , selectOption , setActiveOption , setOpen , size  } = state;
+    const { activeOption, appearance, focusVisible, open, registerOption, selectedOptions, selectOption, setActiveOption, setOpen, size } = state;
     const combobox = {
         activeOption,
         appearance,

package/lib/contexts/useComboboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"],"names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"mappings":"AAEA,OAAO,SAASA,yBAAyBC,KAAwB~~,EAA6B~~;~~IAC5F~~,MAAM,EACJC,~~aAAY~~,EACZC,~~WAAU~~,EACVC,~~aAAY~~,EACZC,~~KAAI~~,EACJC,~~eAAc~~,EACdC,~~gBAAe~~,EACfC,~~aAAY~~,EACZC,~~gBAAe~~,EACfC,~~QAAO~~,EACPC,~~KAAI~~,EACL,GAAGV;IAEJ,MAAMW,WAAW;QACfV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB~~,CAAC~~"}
1	+ {"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"],"names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"mappings":"AAEA,OAAO,SAASA,yBAAyBC,KAAwB;IAC/D,MAAM,EACJC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,IAAI,EACL,GAAGV;IAEJ,MAAMW,WAAW;QACfV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB"}

package/lib/contexts/useListboxContextValues.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { useContextSelector, useHasParentContext } from '@fluentui/react-context
 import { ComboboxContext } from './ComboboxContext';
 export function useListboxContextValues(state) {
     const hasComboboxContext = useHasParentContext(ComboboxContext);
-    const { activeOption , focusVisible , multiselect , registerOption , selectedOptions , selectOption , setActiveOption  } = state;
+    const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } = state;
     // get register/unregister functions from parent combobox context
     const comboboxRegisterOption = useContextSelector(ComboboxContext, (ctx)=>ctx.registerOption);
     const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;

package/lib/contexts/useListboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } =\n state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"],"names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,mCAAmC;AAE3F,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,OAAO,SAASC,wBAAwBC,KAAmB~~,EAAwB~~;~~IACjF~~,MAAMC,qBAAqBJ,oBAAoBC;IAC/C,MAAM,EAAEI,~~aAAY~~,EAAEC,~~aAAY~~,EAAEC,~~YAAW~~,EAAEC,~~eAAc~~,EAAEC,~~gBAAe~~,EAAEC,~~aAAY~~,EAAEC,~~gBAAe~~,EAAE,GAC/GR;IAEF,iEAAiE;IACjE,MAAMS,yBAAyBb,mBAAmBE,iBAAiBY,CAAAA,MAAOA,IAAIL,cAAc;IAE5F,MAAMM,sBAAsBV,qBAAqBQ,yBAAyBJ~~,cAAc~~;~~IAExF~~,MAAMO,UAAU;QACdV;QACAC;QACAC;QACAC,gBAAgBM;QAChBL;QACAC;QACAC;IACF;IAEA,OAAO;QAAEI;IAAQ;AACnB~~,CAAC~~"}
1	+ {"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } =\n state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"],"names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,mCAAmC;AAE3F,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,qBAAqBJ,oBAAoBC;IAC/C,MAAM,EAAEI,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAE,GAC/GR;IAEF,iEAAiE;IACjE,MAAMS,yBAAyBb,mBAAmBE,iBAAiBY,CAAAA,MAAOA,IAAIL,cAAc;IAE5F,MAAMM,sBAAsBV,qBAAqBQ,yBAAyBJ;IAE1E,MAAMO,UAAU;QACdV;QACAC;QACAC;QACAC,gBAAgBM;QAChBL;QACAC;QACAC;IACF;IAEA,OAAO;QAAEI;IAAQ;AACnB"}

package/lib/utils/dropdownKeyActions.js CHANGED Viewed

@@ -3,9 +3,9 @@ import * as React from 'react';
 /**
  * Converts a keyboard interaction into a defined action
  */ export function getDropdownActionFromKey(e, options = {}) {
-    const { open =true , multiselect =false  } = options;
+    const { open = true, multiselect = false } = options;
     const code = e.key;
-    const { altKey , ctrlKey , key , metaKey  } = e;
+    const { altKey, ctrlKey, key, metaKey } = e;
     // typing action occurs whether open or closed
     if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
         return 'Type';