@fluentui/react-combobox 9.16.6 → 9.16.7

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAOaQ,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,gBAAgBhG,qBAAAA,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 { 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.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Listbox/Listbox.js.map

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

package/lib-commonjs/components/Listbox/useListbox.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAEaG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAKaG,iBAAAA;;;6BAwBAgB;;;;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,MAAMC,4BAA4B,CAACC;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 { 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.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":";;;;+BAyCaoB;;;;;;;iEAzCU,QAAQ;gCACsC,4BAA4B;2BACtD,uBAAuB;4BACf,wBAAwB;gCAChC,gCAAgC;AAI3E,SAASX,cAAcC,IAAwB,EAAEC,QAAyB;IACxE,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT;IAEA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBd,OAAMe,QAAQ,CAACC,OAAO,CAACL,UAAUM,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT;AAWO,2BAA2B,CAACQ,OAAoBC;IACrD,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYzB,OAAM0B,MAAM,CAAc;IAC5C,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAME,SAAK3B,qBAAAA,EAAM,iBAAiBmB,MAAMQ,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAa9B,OAAM+B,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIN;YAAUb,MAAMiB;YAAYH,OAAOI;SAAY,CAAA,EAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEI,YAAYC,0BAA0B,EAAE,OAAG5B,qCAAAA;IACnD,MAAM6B,cAAc1B,8CAAAA,EAA2B2B,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,qBAAiB5B,0CAAAA,EAA2B2B,CAAAA,MAAOA,IAAIC,cAAc;IAC3E,MAAMC,eAAW7B,0CAAAA,EAA2B2B,CAAAA;QAC1C,MAAMG,kBAAkBH,IAAIG,eAAe;QAE3C,OAAOV,gBAAgBhB,aAAa0B,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMZ,iBAAiBhB;IACvF;IACA,MAAM6B,mBAAejC,0CAAAA,EAA2B2B,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,oBAAgBlC,0CAAAA,EAA2B2B,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,aAAa;IACb,IAAIC,YAAAA,WAAAA,GAA6B,OAAA,aAAA,CAACrC,2BAAAA,EAAAA;IAClC,IAAI4B,aAAa;QACfS,YAAYN,WAAAA,WAAAA,GAAW,OAAA,aAAA,CAAC9B,6BAAAA,EAAAA,QAAuB;IACjD;IAEA,MAAMqC,UAAU,CAACC;YAYfxB;QAXA,IAAIE,UAAU;YACZsB,MAAMC,cAAc;YACpB;QACF;QAEAb,2BAA2Bc,KAAK,CAAClB;QAEjC,0BAA0B;QAC1BY,aAAaI,OAAOf;QAEpBY,cAAcG;SACdxB,iBAAAA,MAAMuB,OAAAA,AAAO,MAAA,QAAbvB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBwB;IAClB;IAEA,oCAAoC;IACpC7C,OAAMgD,SAAS,CAAC;QACd,IAAInB,MAAMJ,UAAUwB,OAAO,EAAE;YAC3B,OAAOb,eAAeN,YAAYL,UAAUwB,OAAO;QACrD;IACF,GAAG;QAACpB;QAAIC;QAAYM;KAAe;IAEnC,MAAMc,gBAAgBhB,cAClB;QAAEiB,MAAM;QAAoB,gBAAgBd;IAAS,IACrD;QAAEc,MAAM;QAAU,iBAAiBd;IAAS;IAEhD,OAAO;QACLe,YAAY;YACVC,MAAM;YACNC,WAAW;QACb;QACAD,MAAMjD,oBAAAA,CAAKmD,MAAM,KACftD,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,SAAKnB,6BAAAA,EAAcmB,KAAKG;YACxB,iBAAiBF,WAAY,SAAmBX;YAChDiB;YACA,GAAGqB,aAAa;YAChB,GAAG7B,KAAK;YACRuB;QACF,IACA;YAAEY,aAAa;QAAM;QAEvBF,WAAWlD,oBAAAA,CAAKqD,QAAQ,CAACpC,MAAMiC,SAAS,EAAE;YACxCI,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;gBACfhD,UAAUgC;YACZ;YACAa,aAAa;QACf;QACAjC;QACAW;QACAG;QACA,iBAAiB;QACjBuB,cAAc;QACdC,QAAQ;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        flexShrink: 0,\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: tokens.borderRadiusSmall,\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
+{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        flexShrink: 0,\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: tokens.borderRadiusSmall,\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,gBAAgB;;;IAwGZ2G,wBAAwB;;;;uBAzGY,gBAAgB;AAC9D,yBAAyB;IAC5B1G,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAE;AACf,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAxD,MAAA,EAAA;QAAAa,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAiC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA,CAAA;IAAAlE,SAAA,EAAA;QAAAmE,OAAA,EAAA;QAAAtD,OAAA,EAAA;QAAAuD,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,gBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAvF,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAoF,OAAA,EAAA;QAAAhF,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAA0F,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAhF,OAAA,EAAA;QAAAiF,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAzB,OAAA,EAAA;IAAA;IAAA0B,wBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAzF,MAAA,EAAA;QAAA+E,MAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAmB,aAAA,EAAA;QAAA1F,MAAA,EAAA;QAAAyD,OAAA,EAAA;IAAA;IAAAkC,wBAAA,EAAA;QAAAZ,MAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAqB,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+FrB,CAAC;AAGS,kCAAkCE,KAAK,IAAG;IACjD,aAAa;IACb,MAAM,EAAE1C,QAAQ,EAAE2C,WAAW,EAAEzC,QAAAA,EAAU,GAAGwC,KAAK;IACjD,MAAME,MAAM,GAAG3G,SAAS,CAAC,CAAC;IAC1ByG,KAAK,CAAC3G,IAAI,CAAC8G,SAAS,OAAGjH,mBAAY,EAACE,gBAAgB,CAACC,IAAI,EAAE6G,MAAM,CAAC7G,IAAI,EAAE6G,MAAM,CAAC3E,MAAM,EAAE+B,QAAQ,IAAI4C,MAAM,CAAC5C,QAAQ,EAAEE,QAAQ,IAAI0C,MAAM,CAAC1C,QAAQ,EAAEwC,KAAK,CAAC3G,IAAI,CAAC8G,SAAS,CAAC;IACtK,IAAIH,KAAK,CAAC1G,SAAS,EAAE;QACjB0G,KAAK,CAAC1G,SAAS,CAAC6G,SAAS,OAAGjH,mBAAY,EAACE,gBAAgB,CAACE,SAAS,EAAE4G,MAAM,CAAC5G,SAAS,EAAE2G,WAAW,IAAIC,MAAM,CAACnC,gBAAgB,EAAEP,QAAQ,IAAI0C,MAAM,CAACpC,aAAa,EAAEN,QAAQ,IAAIyC,WAAW,IAAIC,MAAM,CAACZ,wBAAwB,EAAEhC,QAAQ,IAAI4C,MAAM,CAACV,aAAa,EAAElC,QAAQ,IAAI2C,WAAW,IAAIC,MAAM,CAACT,wBAAwB,EAAEO,KAAK,CAAC1G,SAAS,CAAC6G,SAAS,CAAC;IACzV;IACA,OAAOH,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["import { 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 { 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/OptionGroup.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAEaG,qBAAqB;;;iCA+BY;;;;uBAhCL,gBAAgB;AAClD,8BAA8B;IACjCC,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,uBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;IAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;QACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;IAC1G;IACA,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;IA+BjBmC,6BAA6B;;;;uBAhCL,gBAAgB;AAClD,8BAA8B;IACjClC,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,sCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;IAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;QACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;IAC1G;IACA,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAKaG,qBAAAA;;;iCAqCA6B;;;;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,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGjC,uBAAAA,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 { 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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  'activeOption' | '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":";;;;;;;;;;;IA0BaC,eAAAA;;;oBA2BAY;;;;sCArDiB,mCAAmC;AA0B1D,4BAAwBb,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 { 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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'getOptionById'\n  | 'getOptionsMatchingValue'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  getOptionById() {\n    return undefined;\n  },\n  getOptionsMatchingValue() {\n    return [];\n  },\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>): 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":";;;;;;;;;;;kBAoDagB;;;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 * 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"}

package/lib-commonjs/contexts/useComboboxContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n    onActiveDescendantChange,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":";;;;+BAIgBC;;;;;;;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 { 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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true