@fluentui/react-combobox 9.17.0 → 9.17.1

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.raw.js.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 { 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  'use no memo';\n\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  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  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    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    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    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":"AAAA;;;;;;;;;;;;IASaQ,kBAAAA;;;8BA2PAuG;eAAAA;;;8BAlQ2B,0BAA0B;4BACzB,wBAAwB;uBAEK,iBAAiB;gCAC7D,6BAA6B;AAGhD,2BAA0D;IAC/DtG,MAAM;IACNC,QAAQ;IACRC,aAAa;IACbC,YAAY;IACZC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BK,MAAM;QACJM,cAAcd,kBAAAA,CAAOe,kBAAkB;QACvCC,WAAW;QACXC,SAAS;QACTC,UAAU;QACVC,UAAU;QACVC,eAAe;QAEf,6CAA6C;QAC7C,iBAAiB;YACfC,cAAc;YACdC,cAAc;YACdC,cAAc;QAChB;QAEA,iEAAiE;QACjE,WAAW;YACTP,WAAW;YACXQ,SAAS;YACTL,UAAU;YACVM,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAO6B,gBAAgB,CAAC,EAAE,EAAE7B,kBAAAA,CAAOe,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB9B,kBAAAA,CAAOe,kBAAkB;YACjDgB,yBAAyB/B,kBAAAA,CAAOe,kBAAkB;YAClDiB,cAAc,GAAGhC,kBAAAA,CAAO6B,gBAAgB,CAAC,OAAO,EAAE7B,kBAAAA,CAAOiC,wBAAwB,EAAE;YACnFC,UAAU;YACVC,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOsC,iBAAiB;YAC5CC,iBAAiBvC,kBAAAA,CAAOwC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOyC,cAAc;YACzCF,iBAAiBvC,kBAAAA,CAAO0C,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7BI,mBAAmB3C,kBAAAA,CAAO4C,+BAA+B;QAC3D;QAEA,+BAA+B;YAC7B,CAAC,CAAC,MAAM,EAAErC,mBAAmBG,WAAW,CAAC,cAAc,CAAC,CAAC,EAAE;gBACzDiC,mBAAmB;gBACnBR,WAAW;YACb;QACF;IACF;IAEAvB,SAAS;QACPI,WAAW;QACX6B,WAAW,GAAG7C,kBAAAA,CAAO8C,QAAQ,EAAE;QAC/BhC,cAAcd,kBAAAA,CAAOe,kBAAkB;QACvCgC,WAAW;IACb;IAEAC,kBAAkB;QAChB/B,SAAS;IACX;IAEA,+GAA+G;IAC/G,0GAA0G;IAC1GgC,eAAe;QACbC,QAAQ;IACV;IAEAzC,QAAQ;QACN0C,YAAY;QACZC,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClDC,QAAQ;QACRtC,WAAW;QACXuC,OAAOvD,kBAAAA,CAAOwD,uBAAuB;QACrCC,WAAWzD,kBAAAA,CAAO0D,oBAAoB;QACtCC,QAAQ;QACR1C,SAAS;QACT2C,YAAY5D,kBAAAA,CAAO6D,cAAc;QACjCC,qBAAqB;QACrBC,gBAAgB;QAChBC,WAAW;QACXC,OAAO;QAEP,WAAW;YACT3C,cAAc;QAChB;IACF;IAEA4C,aAAa;QACXX,OAAOvD,kBAAAA,CAAOmE,uBAAuB;IACvC;IAEA,gBAAgB;IAChBC,OAAO;QACL,GAAGnE,4BAAAA,CAAiBoE,QAAQ;QAC5BC,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAOuE,uBAAuB,CAC/B,KAAK,EAAE,CAAC,KAAK,EAAEvE,kBAAAA,CAAOuE,uBAAuB,CAAC,GAAG,EAAEvE,kBAAAA,CAAO0D,oBAAoB,CAAC,CAAC,CAAC,EAAE;IACtF;IACAc,QAAQ;QACN,GAAGvE,4BAAAA,CAAiBwE,KAAK;QACzBH,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAO0E,uBAAuB,CAC/B,KAAK,EAAE,CAAC,KAAK,EAAE1E,kBAAAA,CAAO0E,uBAAuB,CAAC,GAAG,EAAE1E,kBAAAA,CAAO0D,oBAAoB,CAAC,CAAC,CAAC,EAAE;IACtF;IACAiB,OAAO;QACLlB,WAAWzD,kBAAAA,CAAOuE,uBAAuB;QACzC,GAAGtE,4BAAAA,CAAiB2E,KAAK;QACzBN,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAO6E,kBAAkB,CAC1B,KAAK,EAAE,CAAC,KAAK,EAAE7E,kBAAAA,CAAO6E,kBAAkB,CAAC,GAAG,EAAE7E,kBAAAA,CAAOuE,uBAAuB,CAAC,CAAC,CAAC,EAAE;IACpF;IAEA,sBAAsB;IACtBO,SAAS;QACP1B,iBAAiBpD,kBAAAA,CAAO+E,uBAAuB;QAC/CzB,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,OAAO,EAAEhF,kBAAAA,CAAOiF,mBAAmB,EAAE;QACvEtC,mBAAmB3C,kBAAAA,CAAOkF,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,WAAW;YACT,GAAG9E,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOqF,wBAAwB,CAAC;YAC1D1C,mBAAmB3C,kBAAAA,CAAOsF,iCAAiC;QAC7D;QAEA,YAAY;YACV,GAAGjF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOuF,0BAA0B,CAAC;YAC5D5C,mBAAmB3C,kBAAAA,CAAOwF,mCAAmC;QAC/D;QAEA,kBAAkB;YAChB,GAAGnF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOuF,0BAA0B,CAAC;YAC5D5C,mBAAmB3C,kBAAAA,CAAOwF,mCAAmC;QAC/D;IACF;IACAC,WAAW;QACTrC,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClDrB,cAAc,GAAGhC,kBAAAA,CAAOgF,eAAe,CAAC,OAAO,EAAEhF,kBAAAA,CAAOkF,4BAA4B,EAAE;QACtFpE,cAAc;IAChB;IACA,kBAAkB;QAChBsC,iBAAiBpD,kBAAAA,CAAO+E,uBAAuB;QAC/CzB,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,kBAAkB,CAAC;IACvD;IACA,iBAAiB;QACf5B,iBAAiBpD,kBAAAA,CAAO0F,uBAAuB;QAC/CpC,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,kBAAkB,CAAC;IACvD;IACAW,SAAS;QACP,iDAAiD;YAC/C,GAAGtF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAO4F,sBAAsB,CAAC;QAC1D;IACF;IACAC,kBAAkB;QAChB,iDAAiD;YAC/ClD,mBAAmB3C,kBAAAA,CAAO4F,sBAAsB;QAClD;IACF;IACAE,UAAU;QACRnC,QAAQ;QACRP,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClD,GAAGhD,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAO+F,0BAA0B,CAAC;QAC5D,kCAAkC;YAChC,GAAG1F,iBAAAA,CAAW+E,WAAW,CAAC,WAAW;QACvC;IACF;IAEAY,cAAc;QACZzC,OAAOvD,kBAAAA,CAAOiG,8BAA8B;QAC5CtC,QAAQ;IACV;IAEAuC,QAAQ;QACNjF,SAAS;IACX;AACF;AAEA,MAAMkF,oBAAgBhG,iBAAAA,EAAW;IAC/BiG,MAAM;QACJpF,WAAW;QACXuC,OAAOvD,kBAAAA,CAAOkF,4BAA4B;QAC1CjE,SAAS;QACToF,UAAUrG,kBAAAA,CAAOsG,eAAe;QAChCC,iBAAiB;QACjBC,eAAe;QAEf,4DAA4D;QAC5D,oEAAoE;QACpE,SAAS;YACPvF,SAAS;QACX;IACF;IAEA,qBAAqB;IACrBmD,OAAO;QACLiC,UAAU/F,yBAAAA,CAAU8D,KAAK;QACzBqC,YAAYzG,kBAAAA,CAAO0D,oBAAoB;IACzC;IACAc,QAAQ;QACN6B,UAAU/F,yBAAAA,CAAUkE,MAAM;QAC1BiC,YAAYzG,kBAAAA,CAAO0D,oBAAoB;IACzC;IACAiB,OAAO;QACL0B,UAAU/F,yBAAAA,CAAUqE,KAAK;QACzB8B,YAAYzG,kBAAAA,CAAOuE,uBAAuB;IAC5C;IAEAuB,UAAU;QACRvC,OAAOvD,kBAAAA,CAAOiG,8BAA8B;IAC9C;AACF;AAEA,MAAMS,8BAA0BxG,sBAAAA,EAAgB;IAC9CyG,WAAW;IACXvD,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;IAClDC,QAAQ;IACRK,QAAQ;IACR/B,QAAQ;IACRgF,QAAQ;IACRC,aAAa7G,kBAAAA,CAAO0E,uBAAuB;IAC3CJ,SAAS;IACTnD,UAAU;IAEV,GAAGpB,yCAAAA,GAAyB;AAC9B;AAKO,mCAAmC,CAACgH;IACzC;IAEA,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGL;IACxE,MAAMpB,UAAU,GAAGoB,MAAMtG,MAAM,CAAC,eAAe,EAAE,KAAK;IACtD,MAAMqF,WAAWiB,MAAMtG,MAAM,CAACqF,QAAQ;IACtC,MAAMuB,SAASxG;IACf,MAAMyG,aAAanB;IACnB,MAAMoB,mBAAmBb;IAEzBK,MAAMvG,IAAI,CAACgH,SAAS,GAAGpH,uBAAAA,EACrBG,mBAAmBC,IAAI,EACvB6G,OAAO7G,IAAI,EACX6G,MAAM,CAACL,WAAW,EAClB,CAAClB,YAAYkB,eAAe,aAAaK,OAAOlC,kBAAkB,EAClEQ,WAAWqB,eAAe,eAAeK,OAAO1B,OAAO,EACvDA,WAAWqB,eAAe,eAAeK,OAAOxB,gBAAgB,EAChEC,YAAYuB,OAAOvB,QAAQ,EAC3BiB,MAAMvG,IAAI,CAACgH,SAAS;IAGtBT,MAAMtG,MAAM,CAAC+G,SAAS,OAAGpH,mBAAAA,EACvBG,mBAAmBE,MAAM,EACzB4G,OAAO5G,MAAM,EACb4G,MAAM,CAACD,KAAK,EACZF,sBAAsBG,OAAOnD,WAAW,EACxC4B,YAAYuB,OAAOrB,YAAY,EAC/Be,MAAMtG,MAAM,CAAC+G,SAAS;IAGxB,IAAIT,MAAMnG,OAAO,EAAE;QACjBmG,MAAMnG,OAAO,CAAC4G,SAAS,OAAGpH,mBAAAA,EACxBG,mBAAmBK,OAAO,EAC1ByG,OAAOzG,OAAO,EACdmG,MAAMU,WAAW,IAAIJ,OAAOpE,aAAa,EACzC,CAACgE,QAAQI,OAAOrE,gBAAgB,EAChC+D,MAAMnG,OAAO,CAAC4G,SAAS;IAE3B;IAEA,IAAIT,MAAMpG,UAAU,EAAE;QACpBoG,MAAMpG,UAAU,CAAC6G,SAAS,OAAGpH,mBAAAA,EAC3BG,mBAAmBI,UAAU,EAC7B2G,WAAWlB,IAAI,EACfkB,UAAU,CAACF,KAAK,EAChBtB,YAAYwB,WAAWxB,QAAQ,EAC/BqB,mBAAmBE,OAAOnB,MAAM,EAChCa,MAAMpG,UAAU,CAAC6G,SAAS;IAE9B;IAEA,IAAIT,MAAMrG,WAAW,EAAE;QACrBqG,MAAMrG,WAAW,CAAC8G,SAAS,OAAGpH,mBAAAA,EAC5BG,mBAAmBG,WAAW,EAC9B6G,kBACAD,WAAWlB,IAAI,EACfkB,UAAU,CAACF,KAAK,EAChBtB,YAAYwB,WAAWxB,QAAQ,EAC/B,CAACqB,mBAAmBE,OAAOnB,MAAM,EACjCa,MAAMrG,WAAW,CAAC8G,SAAS;IAE/B;IAEA,OAAOT;AACT,EAAE"}
+{"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  'use no memo';\n\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  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  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    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    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    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.types.js.map

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

package/lib-commonjs/components/Listbox/useListbox.js.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 {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if 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","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"mappings":"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"}
+{"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 { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if 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","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"mappings":"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"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;IAwBAgB,yBAAAA;;;;4BA7BU,wBAAwB;uBAEN,iBAAiB;AAGnD,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,iBAAiBN,kBAAAA,CAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,kBAAAA,CAAOc,sBAAsB,EAAE;QACrDC,SAASf,kBAAAA,CAAOgB,mBAAmB;QACnCC,QAAQjB,kBAAAA,CAAOkB,oBAAoB;IACrC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAMC,SAAShB;IACfe,MAAMhB,IAAI,CAACkB,SAAS,OAAGpB,mBAAAA,EAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;IAwBAgB,yBAAAA;;;;4BA7BU,wBAAwB;uBAEN,iBAAiB;AAGnD,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,iBAAiBN,kBAAAA,CAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,kBAAAA,CAAOc,sBAAsB,EAAE;QACrDC,SAASf,kBAAAA,CAAOgB,mBAAmB;QACnCC,QAAQjB,kBAAAA,CAAOkB,oBAAoB;IACrC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAMC,SAAShB;IACfe,MAAMhB,IAAI,CAACkB,SAAS,OAAGpB,mBAAAA,EAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Option/Option.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering Option
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/Option/Option.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /** The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /**\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    active: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /** If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /** If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}
+{"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type OptionSlots = {\n  /** The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /**\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    active: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /** If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /** If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAiBI"}

package/lib-commonjs/components/Option/useOptionStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n    },\n  },\n\n  active: {\n    [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\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\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  multiselectCheck: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: tokens.borderRadiusSmall,\n    boxSizing: 'border-box',\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    fill: 'currentColor',\n    fontSize: '12px',\n    height: '16px',\n    width: '16px',\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  'use no memo';\n\n  const { disabled, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n      disabled && multiselect && styles.multiselectCheckDisabled,\n      state.checkIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","makeStyles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","borderColor","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","selected","flexShrink","fontSizeBase400","marginLeft","spacingHorizontalXXS","marginRight","visibility","selectedCheck","multiselectCheck","strokeWidthThin","colorNeutralStrokeAccessible","borderRadiusSmall","boxSizing","justifyContent","fill","height","width","selectedMultiselectCheck","colorCompoundBrandBackground","colorNeutralForegroundInverted","checkDisabled","multiselectCheckDisabled","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n    },\n  },\n\n  active: {\n    [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\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\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  multiselectCheck: {\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: tokens.borderRadiusSmall,\n    boxSizing: 'border-box',\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    fill: 'currentColor',\n    fontSize: '12px',\n    height: '16px',\n    width: '16px',\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  'use no memo';\n\n  const { disabled, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n      disabled && multiselect && styles.multiselectCheckDisabled,\n      state.checkIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","makeStyles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","borderColor","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","selected","flexShrink","fontSizeBase400","marginLeft","spacingHorizontalXXS","marginRight","visibility","selectedCheck","multiselectCheck","strokeWidthThin","colorNeutralStrokeAccessible","borderRadiusSmall","boxSizing","justifyContent","fill","height","width","selectedMultiselectCheck","colorCompoundBrandBackground","colorNeutralForegroundInverted","checkDisabled","multiselectCheckDisabled","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}

package/lib-commonjs/components/OptionGroup/useOptionGroup.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useOptionGroup_unstable", {
         return useOptionGroup_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useOptionGroup_unstable = (props, ref)=>{
     const labelId = (0, _reactutilities.useId)('group-label');

package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: 'span',\n    },\n    root: slot.always(\n      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: ref as React.Ref<HTMLDivElement>,\n        role: 'group',\n        'aria-labelledby': label ? labelId : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    label: slot.optional(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAaaI;;;;;;;iEAbU,QAAQ;gCACuB,4BAA4B;AAY3E,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,cAAUL,qBAAAA,EAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,oBAAAA,CAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: 'span',\n    },\n    root: slot.always(\n      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: ref as React.Ref<HTMLDivElement>,\n        role: 'group',\n        'aria-labelledby': label ? labelId : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    label: slot.optional(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAaaG;;;;;;gCAZyC,4BAA4B;AAY3E,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,cAAUL,qBAAAA,EAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,oBAAAA,CAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n  root: 'fui-OptionGroup',\n  label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingHorizontalXXS,\n\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\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/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IAqCA6B,6BAAAA;;;;4BA1CU,wBAAwB;uBAEN,iBAAiB;AAGnD,8BAAgE;IACrE5B,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,kBAAAA,CAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,kBAAAA,CAAOa,eAAe,CAAC,OAAO,EAAEb,kBAAAA,CAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,kBAAAA,CAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,kBAAAA,CAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,kBAAAA,CAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,kBAAAA,CAAOoB,kBAAkB;QACvCC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,kBAAAA,CAAOwB,eAAe;QAChCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;QACrCC,YAAY3B,kBAAAA,CAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,kBAAAA,CAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,kBAAAA,CAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n  root: 'fui-OptionGroup',\n  label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingHorizontalXXS,\n\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\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/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IAqCA6B,6BAAAA;;;;4BA1CU,wBAAwB;uBAEN,iBAAiB;AAGnD,8BAAgE;IACrE5B,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,kBAAAA,CAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,kBAAAA,CAAOa,eAAe,CAAC,OAAO,EAAEb,kBAAAA,CAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,kBAAAA,CAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,kBAAAA,CAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,kBAAAA,CAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,kBAAAA,CAAOoB,kBAAkB;QACvCC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,kBAAAA,CAAOwB,eAAe;QAChCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;QACrCC,YAAY3B,kBAAAA,CAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,kBAAAA,CAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,kBAAAA,CAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}

package/lib-commonjs/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n  /**\n   * @deprecated - no longer used\n   */\n  selectedOptions: ComboboxState['selectedOptions'];\n\n  /**\n   * @deprecated - no longer used\n   */\n  selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;mBA4BaC;;;oBA2BAY;;;;sCArDiB,mCAAmC;AA0B1D,MAAMZ,sBAAkBD,mCAAAA,EAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAQI,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}
+{"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from '@fluentui/react-context-selector';\nimport type { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n  /**\n   * @deprecated - no longer used\n   */\n  selectedOptions: ComboboxState['selectedOptions'];\n\n  /**\n   * @deprecated - no longer used\n   */\n  selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;mBA4BaC;;;oBA2BAY;;;;sCArDiB,mCAAmC;AA0B1D,MAAMZ,sBAAkBD,mCAAAA,EAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAQI,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}

package/lib-commonjs/contexts/ListboxContext.js

@@ -20,8 +20,6 @@ _export(exports, {
         return useListboxContext_unstable;
     }
 });
-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 listboxContextDefaultValue = {
     activeOption: undefined,

package/lib-commonjs/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'getOptionById'\n  | 'getOptionsMatchingValue'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  getOptionById() {\n    return undefined;\n  },\n  getOptionsMatchingValue() {\n    return [];\n  },\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>): T =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;kBAsDagB;;;mBAKAI;;;8BAHAH;;;;;iEAtDU,QAAQ;sCACoC,mCAAmC;AAuBtG,MAAMd,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMC,qBAAiBf,mCAAAA,EAA+CI,WAAW;AAEjF,MAAMY,6BAA6B,CAAIC,eAC5ChB,wCAAAA,EAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAEnF,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}
+{"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport type { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'getOptionById'\n  | 'getOptionsMatchingValue'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  getOptionById() {\n    return undefined;\n  },\n  getOptionsMatchingValue() {\n    return [];\n  },\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>): T =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;kBAuDae;;;mBAKAI;;;8BAHAH;;;;sCArDqC,mCAAmC;AAuBrF,MAAMd,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMC,qBAAiBf,mCAAAA,EAA+CI,WAAW;AAEjF,MAAMY,6BAA6B,CAAIC,eAC5ChB,wCAAAA,EAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAEnF,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}

package/lib-commonjs/contexts/useComboboxContextValues.js.map

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

package/lib-commonjs/contexts/useListboxContextValues.js.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 { 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,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"}

package/lib-commonjs/utils/ComboboxBase.types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

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

package/lib-commonjs/utils/Selection.types.js

@@ -1,6 +1,4 @@
-"use strict";
+/** Possible event types for onOptionSelect */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/utils/Selection.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/Selection.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /**\n   * For an uncontrolled component, sets the initial selection.\n   * If this is set, the `defaultValue` prop MUST also be set.\n   */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /** Callback when an option is selected */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   * If this is set, the `value` prop MUST also be controlled.\n   */\n  selectedOptions?: string[];\n};\n\n/** Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/**\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/** Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/utils/Selection.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /**\n   * For an uncontrolled component, sets the initial selection.\n   * If this is set, the `defaultValue` prop MUST also be set.\n   */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /** Callback when an option is selected */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   * If this is set, the `value` prop MUST also be controlled.\n   */\n  selectedOptions?: string[];\n};\n\n/** Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/**\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/** Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"],"names":[],"mappings":"AA+CA,4CAA4C,GAC5C,WAGkC"}

package/lib-commonjs/utils/dropdownKeyActions.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "getDropdownActionFromKey", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _keyboardkeys = /*#__PURE__*/ _interop_require_wildcard._(require("@fluentui/keyboard-keys"));
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function getDropdownActionFromKey(e, options = {}) {
     const { open = true, multiselect = false } = options;
     const code = e.key;

package/lib-commonjs/utils/dropdownKeyActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n"],"names":["keys","React","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab"],"mappings":";;;;+BA8BgBE;;;;;;;wEA9BM,0BAA0B;iEACzB,QAAQ;AA6BxB,kCACLC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASP,cAAKa,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASP,cAAKc,SAAS,IAAIP,SAASP,cAAKe,OAAO,IAAIR,SAASP,cAAKgB,KAAK,IAAIT,SAASP,cAAKa,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAKN,SAASP,cAAKe,OAAO,IAAIN,UAAWF,SAASP,cAAKgB,KAAK,IAAK,CAACV,eAAeC,SAASP,cAAKa,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIP,eAAeC,SAASP,cAAKa,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIN,SAASP,cAAKiB,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIV,SAASP,cAAKc,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIP,SAASP,cAAKe,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIR,SAASP,cAAKkB,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIX,SAASP,cAAKmB,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIZ,SAASP,cAAKoB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIb,SAASP,cAAKqB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAId,SAASP,cAAKsB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}
+{"version":3,"sources":["../src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport type * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n"],"names":["keys","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab"],"mappings":";;;;+BA8BgBC;;;;;;;wEA9BM,0BAA0B;AA8BzC,kCACLC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASN,cAAKY,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASN,cAAKa,SAAS,IAAIP,SAASN,cAAKc,OAAO,IAAIR,SAASN,cAAKe,KAAK,IAAIT,SAASN,cAAKY,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAKN,SAASN,cAAKc,OAAO,IAAIN,UAAWF,SAASN,cAAKe,KAAK,IAAK,CAACV,eAAeC,SAASN,cAAKY,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIP,eAAeC,SAASN,cAAKY,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIN,SAASN,cAAKgB,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIV,SAASN,cAAKa,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIP,SAASN,cAAKc,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIR,SAASN,cAAKiB,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIX,SAASN,cAAKkB,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIZ,SAASN,cAAKmB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIb,SAASN,cAAKoB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAId,SAASN,cAAKqB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}

package/lib-commonjs/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  'use no memo';\n\n  const {\n    appearance = 'outline',\n    disableAutoFocus,\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n    onActiveOptionChange = null,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open && !disableAutoFocus && !activeDescendantController.active()) {\n      activeDescendantController.first();\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n    const nextOption = optionCollection.getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n    onActiveDescendantChange,\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
+{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport type { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport type { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  'use no memo';\n\n  const {\n    appearance = 'outline',\n    disableAutoFocus,\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n    onActiveOptionChange = null,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open && !disableAutoFocus && !activeDescendantController.active()) {\n      activeDescendantController.first();\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n    const nextOption = optionCollection.getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n    onActiveDescendantChange,\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}