@fluentui/react-combobox 9.11.7 → 9.12.0

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

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'inline-flex',\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            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        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\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        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        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        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        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    hidden: {\n        display: 'none'\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});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    const { appearance, open, placeholderVisible, showClearButton, 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    const clearButtonStyle = useBaseClearButtonStyle();\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, state.inlinePopup && styles.inlineListbox, !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, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,SAAS,QAAQ,4BAA4B;AACtD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,MAAM,EAAE,sBAAsB;EAC9BC,WAAW,EAAE,2BAA2B;EACxCC,UAAU,EAAE,0BAA0B;EACtCC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA1C,OAAA;IAAAO,OAAA;IAAAoC,MAAA;IAAAzC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsC,OAAA;EAAA;EAAAC,gBAAA;IAAArC,MAAA;EAAA;EAAAsC,aAAA;IAAAC,OAAA;EAAA;EAAAlD,MAAA;IAAAmD,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA3D,OAAA;IAAA4D,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA7D,MAAA;IAAA8D,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAT,MAAA;EAAA;EAAAU,KAAA;IAAAP,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAhB,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAnB,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAG,OAAA;IAAAvC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAuB,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAjD,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAhD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAA2C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAiC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAApC,OAAA;IAAApB,MAAA;IAAAc,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;IAAAmD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAA3C,MAAA;IAAAE,OAAA;EAAA;EAAA0C,MAAA;IAAAvG,MAAA;EAAA;AAAA;EAAAwG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA8JrB,CAAC;AACF,MAAMC,aAAa,gBAAGjI,QAAA;EAAAkI,IAAA;IAAAlH,OAAA;IAAA4D,MAAA;IAAA3D,MAAA;IAAAsE,OAAA;IAAA4C,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA/C,KAAA;IAAAC,OAAA;IAAA+C,MAAA;EAAA;EAAAvC,MAAA;IAAAR,OAAA;IAAA+C,MAAA;EAAA;EAAAtC,KAAA;IAAAT,OAAA;IAAA+C,MAAA;EAAA;EAAApB,QAAA;IAAAtC,MAAA;EAAA;AAAA;EAAA6C,CAAA;AAAA,CA8BrB,CAAC;AACF,MAAMc,uBAAuB,gBAAGxI,aAAA;EAAAyI,CAAA;EAAAC,CAAA;AAAA,CAW/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;EAAK,CAAC,GAAGL,KAAK;EAC7E,MAAM/B,OAAO,GAAG,GAAG+B,KAAK,CAACrI,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC5D,MAAM4G,QAAQ,GAAGyB,KAAK,CAACrI,MAAM,CAAC4G,QAAQ;EACtC,MAAM+B,MAAM,GAAGvI,SAAS,CAAC,CAAC;EAC1B,MAAMwI,UAAU,GAAGjB,aAAa,CAAC,CAAC;EAClC,MAAMkB,gBAAgB,GAAGZ,uBAAuB,CAAC,CAAC;EAClDI,KAAK,CAACtI,IAAI,CAAC+I,SAAS,GAAGnJ,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4I,MAAM,CAAC5I,IAAI,EAAE4I,MAAM,CAACL,UAAU,CAAC,EAAE,CAAC1B,QAAQ,IAAI0B,UAAU,KAAK,SAAS,IAAIK,MAAM,CAAC/C,kBAAkB,EAAEU,OAAO,IAAIgC,UAAU,KAAK,WAAW,IAAIK,MAAM,CAACrC,OAAO,EAAEA,OAAO,IAAIgC,UAAU,KAAK,WAAW,IAAIK,MAAM,CAAChC,gBAAgB,EAAEC,QAAQ,IAAI+B,MAAM,CAAC/B,QAAQ,EAAEyB,KAAK,CAACtI,IAAI,CAAC+I,SAAS,CAAC;EAC/UT,KAAK,CAACrI,MAAM,CAAC8I,SAAS,GAAGnJ,YAAY,CAACG,kBAAkB,CAACE,MAAM,EAAE2I,MAAM,CAAC3I,MAAM,EAAE2I,MAAM,CAACD,IAAI,CAAC,EAAEF,kBAAkB,IAAIG,MAAM,CAAC5D,WAAW,EAAE6B,QAAQ,IAAI+B,MAAM,CAAC1B,YAAY,EAAEoB,KAAK,CAACrI,MAAM,CAAC8I,SAAS,CAAC;EAChM,IAAIT,KAAK,CAAClI,OAAO,EAAE;IACfkI,KAAK,CAAClI,OAAO,CAAC2I,SAAS,GAAGnJ,YAAY,CAACG,kBAAkB,CAACK,OAAO,EAAEwI,MAAM,CAACxI,OAAO,EAAEkI,KAAK,CAACU,WAAW,IAAIJ,MAAM,CAAC1F,aAAa,EAAE,CAACsF,IAAI,IAAII,MAAM,CAAC3F,gBAAgB,EAAEqF,KAAK,CAAClI,OAAO,CAAC2I,SAAS,CAAC;EAC5L;EACA,IAAIT,KAAK,CAACnI,UAAU,EAAE;IAClBmI,KAAK,CAACnI,UAAU,CAAC4I,SAAS,GAAGnJ,YAAY,CAACG,kBAAkB,CAACI,UAAU,EAAE0I,UAAU,CAAChB,IAAI,EAAEgB,UAAU,CAACF,IAAI,CAAC,EAAE9B,QAAQ,IAAIgC,UAAU,CAAChC,QAAQ,EAAE6B,eAAe,IAAIE,MAAM,CAACzB,MAAM,EAAEmB,KAAK,CAACnI,UAAU,CAAC4I,SAAS,CAAC;EAC9M;EACA,IAAIT,KAAK,CAACpI,WAAW,EAAE;IACnBoI,KAAK,CAACpI,WAAW,CAAC6I,SAAS,GAAGnJ,YAAY,CAACG,kBAAkB,CAACG,WAAW,EAAE4I,gBAAgB,EAAED,UAAU,CAAChB,IAAI,EAAEgB,UAAU,CAACF,IAAI,CAAC,EAAE9B,QAAQ,IAAIgC,UAAU,CAAChC,QAAQ,EAAE,CAAC6B,eAAe,IAAIE,MAAM,CAACzB,MAAM,EAAEmB,KAAK,CAACpI,WAAW,CAAC6I,SAAS,CAAC;EACpO;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'inline-flex',\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            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        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\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        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        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        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        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    hidden: {\n        display: 'none'\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});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, open, placeholderVisible, showClearButton, 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    const clearButtonStyle = useBaseClearButtonStyle();\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, state.inlinePopup && styles.inlineListbox, !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, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Listbox/Listbox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}
+{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n  SelectionProps & {\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n  };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n    standalone: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAiEE"}

package/lib/components/Listbox/useListbox.js

@@ -7,6 +7,7 @@ import { useOptionCollection } from '../../utils/useOptionCollection';
 import { useSelection } from '../../utils/useSelection';
 import { optionClassNames } from '../Option/useOptionStyles.styles';
 import { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';
+import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -22,13 +23,18 @@ const UNSAFE_noLongerUsed = {
  * @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;
+    'use no memo';
+    const { multiselect, disableAutoFocus = false } = props;
     const optionCollection = useOptionCollection();
-    const { getOptionById } = optionCollection;
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({
         matchOption: (el)=>el.classList.contains(optionClassNames.root)
     });
+    const hasListboxContext = useHasParentContext(ListboxContext);
     const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);
+    const contextGetOptionById = useListboxContext_unstable((ctx)=>ctx.getOptionById);
+    const contextGetOptionsMatchingValue = useListboxContext_unstable((ctx)=>ctx.getOptionsMatchingValue);
+    const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
+    const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
     const listenerRef = React.useMemo(()=>{
         let element = null;
         const listener = (untypedEvent)=>{
@@ -47,6 +53,8 @@ const UNSAFE_noLongerUsed = {
     }, [
         onActiveDescendantChange
     ]);
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);
+    useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);
     const activeDescendantContext = useActiveDescendantContext();
     const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();
     const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
@@ -57,6 +65,18 @@ const UNSAFE_noLongerUsed = {
         });
         const activeOptionId = activeDescendantController.active();
         const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
+        switch(action){
+            case 'First':
+            case 'Last':
+            case 'Next':
+            case 'Previous':
+            case 'PageDown':
+            case 'PageUp':
+            case 'CloseSelect':
+            case 'Select':
+                event.preventDefault();
+                break;
+        }
         switch(action){
             case 'Next':
                 if (activeOption) {
@@ -86,33 +106,7 @@ const UNSAFE_noLongerUsed = {
                 break;
         }
     };
-    const onFocus = (_event)=>{
-        if (hasParentActiveDescendantContext || activeDescendantController.active()) {
-            return;
-        }
-        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup
-        if (activeDescendantController.focusLastActive()) {
-            return;
-        }
-        // if there is a selected option, focus it and make it active
-        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];
-        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];
-        if (firstSelectedOption) {
-            activeDescendantController.focus(firstSelectedOption.id);
-            return;
-        }
-        // if there is no active descendant and no selected options, set the first option as active
-        activeDescendantController.first();
-    };
-    const onBlur = (_event)=>{
-        if (hasParentActiveDescendantContext) {
-            return;
-        }
-        // blur active descendant styles on blur, in the absence of a parent context controlling the state
-        activeDescendantController.blur();
-    };
     // get state from parent combobox, if it exists
-    const hasListboxContext = useHasParentContext(ListboxContext);
     const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);
     const contextSelectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
     // without a parent combobox context, provide values directly from Listbox
@@ -125,6 +119,50 @@ const UNSAFE_noLongerUsed = {
         selectOption,
         ...UNSAFE_noLongerUsed
     };
+    React.useEffect(()=>{
+        if (!hasParentActiveDescendantContext) {
+            // disable focus-visible attributes until focus is received
+            activeDescendantController.hideFocusVisibleAttributes();
+        }
+        if (!disableAutoFocus) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && optionContextValues.selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === optionContextValues.selectedOptions[0]).pop();
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
+            } else {
+                activeDescendantController.first();
+            }
+        }
+        return ()=>{
+            activeDescendantController.blur();
+        };
+    // this should only be run once in the lifecycle of the Listbox
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onFocus = React.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.showFocusVisibleAttributes();
+        if (isNavigatingWithKeyboard) {
+            activeDescendantController.scrollActiveIntoView();
+        }
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext,
+        isNavigatingWithKeyboard
+    ]);
+    const onBlur = React.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.hideFocusVisibleAttributes();
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext
+    ]);
     const state = {
         components: {
             root: 'div'
@@ -140,6 +178,7 @@ const UNSAFE_noLongerUsed = {
         }), {
             elementType: 'div'
         }),
+        standalone: !hasListboxContext,
         multiselect,
         clearSelection,
         activeDescendantController,

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

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\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 { getOptionById } = optionCollection;\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  const onFocus = (_event: React.FocusEvent<HTMLElement>) => {\n    if (hasParentActiveDescendantContext || activeDescendantController.active()) {\n      return;\n    }\n\n    // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup\n    if (activeDescendantController.focusLastActive()) {\n      return;\n    }\n\n    // if there is a selected option, focus it and make it active\n    const selectedOptionValues = selectedOptions ?? [];\n    const firstSelectedOption = optionCollection.getOptionsMatchingValue(value =>\n      selectedOptionValues.includes(value),\n    )[0];\n    if (firstSelectedOption) {\n      activeDescendantController.focus(firstSelectedOption.id);\n      return;\n    }\n\n    // if there is no active descendant and no selected options, set the first option as active\n    activeDescendantController.first();\n  };\n\n  const onBlur = (_event: React.FocusEvent<HTMLElement>) => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // blur active descendant styles on blur, in the absence of a parent context controlling the state\n    activeDescendantController.blur();\n  };\n\n  // get state from parent combobox, if it exists\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","optionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","onActiveDescendantChange","ctx","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","next","first","prev","last","onFocus","_event","focusLastActive","selectedOptionValues","firstSelectedOption","getOptionsMatchingValue","value","includes","focus","id","onBlur","blur","hasListboxContext","contextSelectedOptions","contextSelectOption","optionContextValues","state","components","always","role","tabIndex","elementType"],"mappings":"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"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\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  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    if (!hasParentActiveDescendantContext) {\n      // disable focus-visible attributes until focus is received\n      activeDescendantController.hideFocusVisibleAttributes();\n    }\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"mappings":"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"}

package/lib/components/Listbox/useListboxStyles.styles.js

@@ -36,6 +36,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Listbox slots based on the state
  */
 export const useListboxStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
   return state;

package/lib/components/Listbox/useListboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Option/useOptionStyles.styles.js

@@ -176,6 +176,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Option slots based on the state
  */
 export const useOptionStyles_unstable = state => {
+  'use no memo';
+
   const {
     disabled,
     multiselect,

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\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        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        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\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            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\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        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        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    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, 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, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\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        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        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\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            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\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        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        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    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, 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, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/OptionGroup/useOptionGroupStyles.styles.js

@@ -57,6 +57,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the OptionGroup slots based on the state
  */
 export const useOptionGroupStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
   if (state.label) {

package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,KAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;IACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,KAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;IACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/contexts/ListboxContext.js

@@ -4,6 +4,12 @@ const listboxContextDefaultValue = {
     activeOption: undefined,
     focusVisible: false,
     multiselect: false,
+    getOptionById () {
+        return undefined;
+    },
+    getOptionsMatchingValue () {
+        return [];
+    },
     registerOption () {
         return ()=>undefined;
     },

package/lib/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAqBtG,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAO,IAAMH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEA,OAAO,MAAMC,iBAAiBb,cAA+CI,WAAW;AAExF,OAAO,MAAMU,6BAA6B,CAAIC,WAC5Cd,mBAAmBY,gBAAgB,CAACG,MAAMd,0BAA0B,GAAKa,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}
+{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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  | 'getOptionById'\n  | 'getOptionsMatchingValue'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  getOptionById() {\n    return undefined;\n  },\n  getOptionsMatchingValue() {\n    return [];\n  },\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAuBtG,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEA,OAAO,MAAMC,iBAAiBf,cAA+CI,WAAW;AAExF,OAAO,MAAMY,6BAA6B,CAAIC,WAC5ChB,mBAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}

package/lib/contexts/useComboboxContextValues.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
+    const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {
         activeOption: undefined,
         appearance,
@@ -16,6 +16,8 @@ export function useComboboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         registerOption,
         selectedOptions,
         selectOption,

package/lib/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n    onActiveDescendantChange,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGV;IAEJ,MAAMW,WAAW;QACfC,cAAcC;QACdZ;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdX;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBnB,MAAMoB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}
+{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n    onActiveDescendantChange,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,uBAAuB,EACvBC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGZ;IAEJ,MAAMa,WAAW;QACfC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBrB,MAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}

package/lib/contexts/useListboxContextValues.js

@@ -3,7 +3,7 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
 import { ListboxContext, useListboxContext_unstable } from './ListboxContext';
 export function useListboxContextValues(state) {
     const hasListboxContext = useHasParentContext(ListboxContext);
-    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
+    const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
     // get register/unregister functions from parent combobox context
     const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
     const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
@@ -12,6 +12,8 @@ export function useListboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         multiselect,
         registerOption: registerOptionValue,
         selectedOptions,

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EAAEK,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAEnG,iEAAiE;IACjE,MAAMO,uBAAuBT,2BAA2BU,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBX,2BAA2BU,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BZ,2BAA2BU,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBV,oBAAoBM,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdb;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBtB,MAAMuB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}
+{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const {\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    activeDescendantController,\n  } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,uBAAuBX,2BAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBb,2BAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,2BAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  HighlightedOptionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see useSetKeyboardNavigation for imperatively setting focus visible state\n     */\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n\n    onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n    disabled: boolean;\n    freeform: boolean;\n\n    onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n  previousOption: OptionValue | null | undefined;\n  nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n  onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  HighlightedOptionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see useSetKeyboardNavigation for imperatively setting focus visible state\n     */\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n\n    onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n    disabled: boolean;\n    freeform: boolean;\n\n    onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n  previousOption: OptionValue | null | undefined;\n  nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n  onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}