@fluentui/react-combobox 9.17.3 → 9.17.5

package/lib-commonjs/components/Dropdown/{useDropdownStyles.styles.raw.js.map → useDropdownStyles.styles.raw.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\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/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${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\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n\n    '@supports selector(:has(*))': {\n      [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n        borderBottomColor: 'initial',\n        transform: 'scaleX(0)',\n      },\n    },\n  },\n\n  listbox: {\n    boxSizing: 'border-box',\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\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\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\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\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.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\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\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\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\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\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\n  ...createFocusOutlineStyle(),\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\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\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearButton && styles.hidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearButton.className = mergeClasses(\n      dropdownClassNames.clearButton,\n      clearButtonStyle,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearButton && styles.hidden,\n      state.clearButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\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/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${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\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n\n    '@supports selector(:has(*))': {\n      [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n        borderBottomColor: 'initial',\n        transform: 'scaleX(0)',\n      },\n    },\n  },\n\n  listbox: {\n    boxSizing: 'border-box',\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\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\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\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\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.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\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\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\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\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\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\n  ...createFocusOutlineStyle(),\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\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\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearButton && styles.hidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearButton.className = mergeClasses(\n      dropdownClassNames.clearButton,\n      clearButtonStyle,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearButton && styles.hidden,\n      state.clearButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}

package/lib-commonjs/components/Listbox/{Listbox.js → Listbox.cjs}

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "Listbox", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useListbox = require("./useListbox");
-const _renderListbox = require("./renderListbox");
-const _useListboxStylesstyles = require("./useListboxStyles.styles");
-const _useListboxContextValues = require("../../contexts/useListboxContextValues");
+const _useListbox = require("./useListbox.cjs");
+const _renderListbox = require("./renderListbox.cjs");
+const _useListboxStylesstyles = require("./useListboxStyles.styles.cjs");
+const _useListboxContextValues = require("../../contexts/useListboxContextValues.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Listbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useListbox.useListbox_unstable)(props, ref);

package/lib-commonjs/components/Listbox/{Listbox.js.map → Listbox.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAE9B,yCAAyC;qCAErC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,gDAAAA,EAAwBM;QAE9CP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,kBAAe;+BACZ,qBAAkB;wCACf,+BAA4B;yCAE9B,4CAAyC;qCAErC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,gDAAAA,EAAwBM;QAE9CP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

package/lib-commonjs/components/Listbox/{index.js → index.cjs}

@@ -25,7 +25,7 @@ _export(exports, {
         return _useListbox.useListbox_unstable;
     }
 });
-const _Listbox = require("./Listbox");
-const _renderListbox = require("./renderListbox");
-const _useListbox = require("./useListbox");
-const _useListboxStylesstyles = require("./useListboxStyles.styles");
+const _Listbox = require("./Listbox.cjs");
+const _renderListbox = require("./renderListbox.cjs");
+const _useListbox = require("./useListbox.cjs");
+const _useListboxStylesstyles = require("./useListboxStyles.styles.cjs");

package/lib-commonjs/components/Listbox/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
+{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,eAAY;+BAEG,qBAAkB;4BACrB,kBAAe;wCACU,+BAA4B"}

package/lib-commonjs/components/Listbox/{renderListbox.js → renderListbox.cjs}

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "renderListbox_unstable", {
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactaria = require("@fluentui/react-aria");
-const _ListboxContext = require("../../contexts/ListboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext.cjs");
 const renderListbox_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {

package/lib-commonjs/components/Listbox/{renderListbox.js.map → renderListbox.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":";;;;+BAYaG;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;2BAER,uBAAuB;gCAExC,gCAAgC;AAKxD,+BAA+B,CAACC,OAAqBC;QAC1DL,2BAAAA,EAA0BI;IAE1B,OAAA,WAAA,OACE,eAAA,EAACH,0CAAAA,EAAAA;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,WAAA,OAAA,eAAA,EAACL,8BAAAA,CAAeM,QAAQ,EAAA;YAACF,OAAOD,cAAcI,OAAO;sBACnD,WAAA,OAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":";;;;+BAYaG;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;2BAER,uBAAuB;gCAExC,mCAAgC;AAKxD,+BAA+B,CAACC,OAAqBC;QAC1DL,2BAAAA,EAA0BI;IAE1B,OAAA,WAAA,OACE,eAAA,EAACH,0CAAAA,EAAAA;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,WAAA,OAAA,eAAA,EAACL,8BAAAA,CAAeM,QAAQ,EAAA;YAACF,OAAOD,cAAcI,OAAO;sBACnD,WAAA,OAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

package/lib-commonjs/components/Listbox/{useListbox.js → useListbox.cjs}

@@ -14,12 +14,12 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const _reactaria = require("@fluentui/react-aria");
-const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
-const _useOptionCollection = require("../../utils/useOptionCollection");
-const _useSelection = require("../../utils/useSelection");
-const _ListboxContext = require("../../contexts/ListboxContext");
+const _dropdownKeyActions = require("../../utils/dropdownKeyActions.cjs");
+const _useOptionCollection = require("../../utils/useOptionCollection.cjs");
+const _useSelection = require("../../utils/useSelection.cjs");
+const _ListboxContext = require("../../contexts/ListboxContext.cjs");
 const _reacttabster = require("@fluentui/react-tabster");
-const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement");
+const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement.cjs");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,

package/lib-commonjs/components/Listbox/{useListbox.js.map → useListbox.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * 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 type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport {\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 { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\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, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\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  // eslint-disable-next-line react-hooks/immutability\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      // eslint-disable-next-line react-hooks/immutability\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 the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\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","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","isComboboxOptionElement","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","el","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","root","always","role","tabIndex","elementType","standalone"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * 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 type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport {\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 { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\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, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\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  // eslint-disable-next-line react-hooks/immutability\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      // eslint-disable-next-line react-hooks/immutability\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 the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\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","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","isComboboxOptionElement","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","el","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","root","always","role","tabIndex","elementType","standalone"],"mappings":"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"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Option/{Option.js → Option.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "Option", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useOption = require("./useOption");
-const _renderOption = require("./renderOption");
-const _useOptionStylesstyles = require("./useOptionStyles.styles");
+const _useOption = require("./useOption.cjs");
+const _renderOption = require("./renderOption.cjs");
+const _useOptionStylesstyles = require("./useOptionStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Option = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useOption.useOption_unstable)(props, ref);

package/lib-commonjs/components/Option/{Option.js.map → Option.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,iBAAc;8BACX,oBAAiB;uCACd,8BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib-commonjs/components/Option/{index.js → index.cjs}

@@ -28,7 +28,7 @@ _export(exports, {
         return _useOption.useOption_unstable;
     }
 });
-const _Option = require("./Option");
-const _renderOption = require("./renderOption");
-const _useOption = require("./useOption");
-const _useOptionStylesstyles = require("./useOptionStyles.styles");
+const _Option = require("./Option.cjs");
+const _renderOption = require("./renderOption.cjs");
+const _useOption = require("./useOption.cjs");
+const _useOptionStylesstyles = require("./useOptionStyles.styles.cjs");

package/lib-commonjs/components/Option/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable, useOptionBase_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","useOptionBase_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAINI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}
+{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable, useOptionBase_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","useOptionBase_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAINI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAHJ,cAAW;8BAEI,oBAAiB;2BACI,iBAAc;uCACd,8BAA2B"}

package/lib-commonjs/components/Option/{useOption.js → useOption.cjs}

@@ -22,7 +22,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactaria = require("@fluentui/react-aria");
 const _reacticons = require("@fluentui/react-icons");
-const _ListboxContext = require("../../contexts/ListboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext.cjs");
 function getTextString(text, children) {
     if (text !== undefined) {
         return text;

package/lib-commonjs/components/Option/{useOption.js.map → useOption.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const state = useOptionBase_unstable(props, ref);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (state.multiselect) {\n    CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n  }\n\n  if (state.checkIcon) {\n    state.checkIcon.children ??= CheckIcon;\n  }\n\n  return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      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, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const state = useOptionBase_unstable(props, ref);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (state.multiselect) {\n    CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n  }\n\n  if (state.checkIcon) {\n    state.checkIcon.children ??= CheckIcon;\n  }\n\n  return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      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, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

package/lib-commonjs/components/Option/useOptionStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    },\n    interactive: {\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        cursor: 'default',\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        flexShrink: 0,\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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        // eslint-disable-next-line react-hooks/immutability\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"],"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","interactive","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","B7iucu3","selected","Bnnss6s","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"],"mappings":"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"}

package/lib-commonjs/components/OptionGroup/{OptionGroup.js → OptionGroup.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "OptionGroup", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useOptionGroup = require("./useOptionGroup");
-const _renderOptionGroup = require("./renderOptionGroup");
-const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");
+const _useOptionGroup = require("./useOptionGroup.cjs");
+const _renderOptionGroup = require("./renderOptionGroup.cjs");
+const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const OptionGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useOptionGroup.useOptionGroup_unstable)(props, ref);

package/lib-commonjs/components/OptionGroup/{OptionGroup.js.map → OptionGroup.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/OptionGroup/{index.js → index.cjs}

@@ -25,7 +25,7 @@ _export(exports, {
         return _useOptionGroup.useOptionGroup_unstable;
     }
 });
-const _OptionGroup = require("./OptionGroup");
-const _renderOptionGroup = require("./renderOptionGroup");
-const _useOptionGroup = require("./useOptionGroup");
-const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");
+const _OptionGroup = require("./OptionGroup.cjs");
+const _renderOptionGroup = require("./renderOptionGroup.cjs");
+const _useOptionGroup = require("./useOptionGroup.cjs");
+const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles.cjs");

package/lib-commonjs/components/OptionGroup/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}
+{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,mBAAgB;mCAED,yBAAsB;gCACzB,sBAAmB;4CACU,mCAAgC"}

package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;IA+BjBmC,6BAA6B;;;;uBAhCL,gBAAgB;AAClD,8BAA8B;IACjClC,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,sCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,uBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;IAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;QACb,oDAAA;QACAkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;IAC1G;IACA,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/contexts/{useListboxContextValues.js → useListboxContextValues.cjs}

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useListboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const _ListboxContext = require("./ListboxContext");
+const _ListboxContext = require("./ListboxContext.cjs");
 function useListboxContextValues(state) {
     const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
     const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;

package/lib-commonjs/contexts/{useListboxContextValues.js.map → useListboxContextValues.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { 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;;;;;+BAOgBI;;;;;;;iEALO,QAAQ;sCACK,mCAAmC;gCAEZ,mBAAmB;AAEvE,iCAAiCC,KAAmB;IACzD,MAAMC,wBAAoBL,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,2BAAuBX,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,oBAAgBb,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,8CAAAA,EAA2BY,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,OAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;SACd,CAAA,EACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}
+{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { 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;;;;;+BAOgBI;;;;;;;iEALO,QAAQ;sCACK,mCAAmC;gCAEZ,sBAAmB;AAEvE,iCAAiCC,KAAmB;IACzD,MAAMC,wBAAoBL,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,2BAAuBX,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,oBAAgBb,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,8CAAAA,EAA2BY,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,OAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;SACd,CAAA,EACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

package/lib-commonjs/hooks/{useComboboxFilter.js → useComboboxFilter.cjs}

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useComboboxFilter", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _Option = require("../Option");
+const _Option = require("../Option.cjs");
 function defaultFilter(optionText, query) {
     if (query === '') {
         return true;

package/lib-commonjs/hooks/{useComboboxFilter.js.map → useComboboxFilter.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACR,YAAY;AAoBnC,SAASE,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAKO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAO,OAAA,aAAA,CAACP,cAAAA,EAAAA;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACP,cAAAA,EAAAA;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,OAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,OAAA,aAAA,CAACxB,cAAAA,EAAAA;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}
+{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACR,eAAY;AAoBnC,SAASE,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAKO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAO,OAAA,aAAA,CAACP,cAAAA,EAAAA;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACP,cAAAA,EAAAA;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,OAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,OAAA,aAAA,CAACxB,cAAAA,EAAAA;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}

package/lib-commonjs/hooks/useTabsterEscapeIgnore.cjs

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTabsterEscapeIgnore", {
+    enumerable: true,
+    get: function() {
+        return useTabsterEscapeIgnore;
+    }
+});
+const _reacttabster = require("@fluentui/react-tabster");
+function useTabsterEscapeIgnore(props, shouldIgnoreEscape) {
+    const ignoreEscapeKeyAttribute = (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            ignoreKeydown: {
+                Escape: shouldIgnoreEscape
+            }
+        }
+    });
+    return (0, _reacttabster.useMergedTabsterAttributes_unstable)(ignoreEscapeKeyAttribute, typeof props === 'object' ? props : {});
+}

package/lib-commonjs/hooks/useTabsterEscapeIgnore.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useTabsterEscapeIgnore.ts"],"sourcesContent":["'use client';\n\nimport {\n  useMergedTabsterAttributes_unstable,\n  useTabsterAttributes,\n  type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\n\n/**\n * Hook to ignore Escape keydown events for a given element when Tabster is enabled.\n * @internal\n */\nexport function useTabsterEscapeIgnore(props: unknown, shouldIgnoreEscape: boolean): TabsterDOMAttribute {\n  const ignoreEscapeKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Escape: shouldIgnoreEscape },\n    },\n  });\n\n  return useMergedTabsterAttributes_unstable(ignoreEscapeKeyAttribute, typeof props === 'object' ? props : {});\n}\n"],"names":["useMergedTabsterAttributes_unstable","useTabsterAttributes","useTabsterEscapeIgnore","props","shouldIgnoreEscape","ignoreEscapeKeyAttribute","focusable","ignoreKeydown","Escape"],"mappings":"AAAA;;;;;;;;;;;8BAMO,0BAA0B;AAM1B,SAASE,uBAAuBC,KAAc,EAAEC,kBAA2B;IAChF,MAAMC,+BAA2BJ,kCAAAA,EAAqB;QACpDK,WAAW;YACTC,eAAe;gBAAEC,QAAQJ;YAAmB;QAC9C;IACF;IAEA,WAAOJ,iDAAAA,EAAoCK,0BAA0B,OAAOF,UAAU,WAAWA,QAAQ,CAAC;AAC5G"}