@fluentui-copilot/react-prompt-listbox 0.0.0-nightly-20240722-0406-476bfcb7.1 → 0.0.0-nightly-20240724-0406-74b90794.1

package/lib/components/utils/usePromptListboxFunctionality.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { optionClassNames } from '@fluentui/react-components';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const { positioning, onOpenChange, onSelectionModeChange, listboxProps } = params;\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  // useMergedRefs to normalize the ref into a React.RefObject type\n  const triggerRef = useMergedRefs(activeParentRef);\n  const selectionState = useSelection(listboxProps ?? {});\n  const { selectOption } = selectionState;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\n  const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setIsInSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    isInLastPosition,\n    open,\n    multiselect: false,\n  });\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n    if (\n      event.key === ArrowLeft ||\n      event.key === ArrowRight ||\n      (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n      (action === 'Type' && isInLastPosition) ||\n      action === 'Type'\n    ) {\n      activeDescendantController.blur();\n      setHideActiveDescendant(true);\n      setIsInSelectionMode(false);\n      onSelectionModeChange?.(false);\n    } else if (\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      setHideActiveDescendant(false);\n      setIsInSelectionMode(true);\n      onSelectionModeChange?.(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (hideActiveDescendant) {\n      triggerRef.current?.removeAttribute('aria-activedescendant');\n    }\n    // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n    // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n    // refs as dependencies since it can blow up the number of runs.\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hideActiveDescendant]);\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListbox\n        open={open}\n        {...listboxProps}\n        {...optionCollection}\n        {...selectionState}\n        ref={listboxMergedRef}\n        activeDescendantController={activeDescendantController}\n      />\n    );\n  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n  return {\n    promptListbox: listbox,\n    triggerProps: {\n      ref: triggerRef,\n      onBlur,\n      onFocus,\n      onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["React","useActiveDescendant","optionClassNames","mergeCallbacks","useControllableState","useEventCallback","useMergedRefs","getDropdownActionFromKey","TextCursorPositionPlugin","useOptionCollection","useSelection","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","useComboboxPositioning","useTriggerKeydown","PromptListbox","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","isInLastPosition","setIsInLastPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","useCallback","onKeyDown","multiselect","hideActiveDescendant","setHideActiveDescendant","onInputTriggerKeyDown","action","key","blur","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAClH,SAASC,wBAAwB,QAAQ,uBAAuB;AAChE,SAASC,wBAAwB,QAAQ,yCAAyC;AAClF,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,OAAO,QAAQ,0BAA0B;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,aAAa,QAAQ,mBAAmB;AAOjD,OAAO,SAASC,8BACdC,MAA2C;IAE3C,MAAM,EAAEC,WAAW,EAAEC,YAAY,EAAEC,qBAAqB,EAAEC,YAAY,EAAE,GAAGJ;IAC3E,MAAM,EACJK,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,YAAYC,0BAA0B,EACvC,GAAG3B,oBAAqD;QACvD4B,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAAC9B,iBAAiB+B,IAAI;IAChE;IACA,iEAAiE;IACjE,MAAMC,aAAa5B,cAAcoB;IACjC,MAAMS,iBAAiBzB,aAAaa,yBAAAA,0BAAAA,eAAgB,CAAC;IACrD,MAAM,EAAEa,YAAY,EAAE,GAAGD;IACzB,MAAME,mBAAmB5B;IACzB,MAAM,EAAE6B,aAAa,EAAE,GAAGD;IAC1B,MAAM,CAACE,kBAAkBC,oBAAoB,GAAGxC,MAAMyC,QAAQ,CAAC;IAC/D,MAAM,CAACC,mBAAmBC,qBAAqB,GAAG3C,MAAMyC,QAAQ,CAAC;IACjE,MAAM,CAACG,MAAMC,QAAQ,GAAGzC,qBAAqB;QAC3C0C,OAAO3B,OAAOyB,IAAI;QAClBG,cAAc5B,OAAO6B,WAAW;QAChCC,cAAc;IAChB;IAEA,MAAMC,SAAS,CAACC;QACdN,QAAQ;QACRxB,yBAAAA,mCAAAA,aAAe8B,OAAO;YAAEA;YAAOC,MAAM;YAASR,MAAM;QAAM;IAC5D;IAEA,MAAMS,UAAU,CAACF;QACf,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EAAE;YACxCV,QAAQ;YACRxB,yBAAAA,mCAAAA,aAAe8B,OAAO;gBAAEA;gBAAOC,MAAM;gBAASR,MAAM;YAAK;QAC3D;IACF;IAEA,MAAMY,qCAAuB,oBAAChD;QAAyBgC,qBAAqBA;;IAE5E,MAAMiB,gBAAgBzD,MAAM0D,WAAW,CAAC;QACtCf,qBAAqB;QACrBrB,kCAAAA,4CAAAA,sBAAwB;IAC1B,GAAG;QAACA;KAAsB;IAE1B,uCAAuC;IACvC,MAAMqC,YAAY3C,kBAAkB;QAClC,GAAGqB,gBAAgB;QACnBT;QACAU;QACAY,QAAQO;QACRrB;QACAG;QACAK;QACAgB,aAAa;IACf;IAEA,uGAAuG;IACvG,0GAA0G;IAC1G,kFAAkF;IAClF,MAAM,CAACC,sBAAsBC,wBAAwB,GAAG9D,MAAMyC,QAAQ,CAAC;IAEvE;;GAEC,GACD,MAAMsB,wBAAuD1D,iBAAiB8C,CAAAA;QAC5E,oDAAoD;QACpD,MAAMa,SAASzD,yBAAyB4C,OAAO;YAAEP;YAAMgB,aAAa;YAAOrB;QAAiB;QAC5F,IACEY,MAAMc,GAAG,KAAKrD,aACduC,MAAMc,GAAG,KAAKpD,cACb,CAAC0B,oBAAqBY,CAAAA,MAAMc,GAAG,KAAKtD,aAAawC,MAAMc,GAAG,KAAKnD,OAAM,KACrEkD,WAAW,UAAUzB,oBACtByB,WAAW,QACX;YACApC,2BAA2BsC,IAAI;YAC/BJ,wBAAwB;YACxBnB,qBAAqB;YACrBrB,kCAAAA,4CAAAA,sBAAwB;QAC1B,OAAO,IACL0C,WAAW,UACXA,WAAW,cACXA,WAAW,WACXA,WAAW,UACXA,WAAW,YACXA,WAAW,YACX;YACAF,wBAAwB;YACxBnB,qBAAqB;YACrBrB,kCAAAA,4CAAAA,sBAAwB;QAC1B;IACF;IAEAtB,MAAMmE,SAAS,CAAC;QACd,IAAIN,sBAAsB;gBACxB3B;aAAAA,sBAAAA,WAAWkC,OAAO,cAAlBlC,0CAAAA,oBAAoBmC,eAAe,CAAC;QACtC;IACA,oFAAoF;IACpF,kFAAkF;IAClF,gEAAgE;IAChE,yDAAyD;IACzD,uDAAuD;IACzD,GAAG;QAACR;KAAqB;IAEzB,MAAM,CAACS,kBAAkBC,kBAAkB,GAAGxD,uBAAuB;QAAEK;IAAY;IAEnF,MAAMoD,mBAAmBlE,cAAcgE,kBAAkB7C,4BAA4BF,yBAAAA,mCAAAA,aAAckD,GAAG;IACtG,MAAMC,UAAU1E,MAAM2E,OAAO,CAAC;QAC5B,qBACE,oBAAC1D;YACC2B,MAAMA;YACL,GAAGrB,YAAY;YACf,GAAGc,gBAAgB;YACnB,GAAGF,cAAc;YAClBsC,KAAKD;YACL5C,4BAA4BA;;IAGlC,GAAG;QAACA;QAA4B4C;QAAkBjD;QAAcqB;QAAMP;QAAkBF;KAAe;IAEvG,OAAO;QACLyC,eAAeF;QACfG,cAAc;YACZJ,KAAKvC;YACLgB;YACAG;YACAM,WAAWtD,iBAAiBF,eAAewD,WAAWI;YACtDrB;QACF;QACAoC,cAAcP;QACdf;IACF;AACF"}
+{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const { positioning, onOpenChange, onSelectionModeChange, listboxProps } = params;\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(promptOptionClassNames.root),\n  });\n  // useMergedRefs to normalize the ref into a React.RefObject type\n  const triggerRef = useMergedRefs(activeParentRef);\n  const selectionState = useSelection(listboxProps ?? {});\n  const { selectOption } = selectionState;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\n  const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setIsInSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    isInLastPosition,\n    open,\n    multiselect: false,\n  });\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n    if (\n      event.key === ArrowLeft ||\n      event.key === ArrowRight ||\n      (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n      (action === 'Type' && isInLastPosition) ||\n      action === 'Type'\n    ) {\n      activeDescendantController.blur();\n      setHideActiveDescendant(true);\n      setIsInSelectionMode(false);\n      onSelectionModeChange?.(false);\n    } else if (\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      setHideActiveDescendant(false);\n      setIsInSelectionMode(true);\n      onSelectionModeChange?.(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (hideActiveDescendant) {\n      triggerRef.current?.removeAttribute('aria-activedescendant');\n    }\n    // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n    // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n    // refs as dependencies since it can blow up the number of runs.\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hideActiveDescendant]);\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListbox\n        open={open}\n        {...listboxProps}\n        {...optionCollection}\n        {...selectionState}\n        ref={listboxMergedRef}\n        activeDescendantController={activeDescendantController}\n      />\n    );\n  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n  return {\n    promptListbox: listbox,\n    triggerProps: {\n      ref: triggerRef,\n      onBlur,\n      onFocus,\n      onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["React","useActiveDescendant","mergeCallbacks","useControllableState","useEventCallback","useMergedRefs","getDropdownActionFromKey","TextCursorPositionPlugin","useOptionCollection","useSelection","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","useComboboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","isInLastPosition","setIsInLastPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","useCallback","onKeyDown","multiselect","hideActiveDescendant","setHideActiveDescendant","onInputTriggerKeyDown","action","key","blur","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n  PromptListbox,\n  promptListboxClassNames,\n  renderPromptListbox_unstable,\n  usePromptListboxStyles_unstable,\n  usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData,\n  ProcessedPromptListboxProps,\n  UsePromptListboxFunctionality,\n  UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { TextCursorPositionPluginProps } from './plugins/TextCursorPositionPlugin';\nexport { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","TextCursorPositionPlugin","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,mDAAmD;AASjG,SAASC,wBAAwB,QAAQ,qCAAqC;AAG9E,SAASC,YAAY,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,8BAA8B,EAAEC,wBAAwB,QAAQ,iBAAiB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n  PromptListbox,\n  promptListboxClassNames,\n  renderPromptListbox_unstable,\n  usePromptListboxStyles_unstable,\n  usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData,\n  ProcessedPromptListboxProps,\n  UsePromptListboxFunctionality,\n  UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { TextCursorPositionPluginProps } from './plugins/TextCursorPositionPlugin';\nexport { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n  PromptOption,\n  promptOptionClassNames,\n  renderPromptOption_unstable,\n  usePromptOptionStyles_unstable,\n  usePromptOption_unstable,\n} from './PromptOption';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","TextCursorPositionPlugin","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,mDAAmD;AASjG,SAASC,wBAAwB,QAAQ,qCAAqC;AAG9E,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}

package/lib-commonjs/components/PromptListbox/renderPromptListbox.js

@@ -13,14 +13,18 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactaria = require("@fluentui/react-aria");
 const renderPromptListbox_unstable = (state, contextValues)=>{
     (0, _reactcomponents.assertSlots)(state);
+    const { open } = state;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.ListboxProvider, {
         value: contextValues.listbox,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
             value: contextValues.activeDescendant,
-            children: state.open && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Portal, {
-                mountNode: state.mountNode,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
-            }))
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                "aria-owns": open ? state.root.id : undefined,
+                children: open && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Portal, {
+                    mountNode: state.mountNode,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+                }))
+            })
         })
     });
 }; //# sourceMappingURL=renderPromptListbox.js.map

package/lib-commonjs/components/PromptListbox/renderPromptListbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n  assertSlots<PromptListboxSlots>(state);\n\n  return (\n    <ListboxProvider value={contextValues.listbox}>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        {state.open &&\n          (state.inlinePopup ? (\n            <state.root />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.root />\n            </Portal>\n          ))}\n      </ActiveDescendantContextProvider>\n    </ListboxProvider>\n  );\n};\n"],"names":["assertSlots","state","value","contextValues","listbox","inlinePopup","mountNode","_jsx","root","Portal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAXwB;iCAG2B;2BACL;AAO9CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAEhC,EAAAA;WACmBC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,gCAAqB,EAAA;6BAC3CC,OAAA;kBAAiCF,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,0CAA8B,EAAA;iCACnEF,gBACQI;sBAGGC,MAAAA,IAAAA,IAAWL,CAAAA,MAAMK,WAAS,GAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAN,MAAAO,IAAA,EAAA,CAAA,KAAA,WAAA,GAAAD,IAAAA,eAAA,EAAAE,uBAAA,EAAA;0CAChC;0BAEJ,WAAA,GAAAF,IAAAA,eAAA,EAAAN,MAAAO,IAAA,EAAA,CAAA;;;IAIR"}
+{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n  assertSlots<PromptListboxSlots>(state);\n  const { open } = state;\n\n  return (\n    <ListboxProvider value={contextValues.listbox}>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <span aria-owns={open ? state.root.id : undefined}>\n          {open &&\n            (state.inlinePopup ? (\n              <state.root />\n            ) : (\n              <Portal mountNode={state.mountNode}>\n                <state.root />\n              </Portal>\n            ))}\n        </span>\n      </ActiveDescendantContextProvider>\n    </ListboxProvider>\n  );\n};\n"],"names":["assertSlots","state","open","value","contextValues","activeDescendant","listbox","aria-owns","undefined","inlinePopup","mountNode","root","id","_jsx","Portal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAXwB;iCAG2B;2BACL;AAO9CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCACxBC,EAAAA;UAER,MACmBC;sBACyBC,GAAAA,IAAAA,eAAAA,EAAAA,gCAAcC,EAAAA;6BACpDC,OAAA;6BAAMC,GAAAA,IAAAA,eAAWL,EAAAA,0CAAuBM,EAAAA;iCACrCN,gBACQO;iCAGGC,GAAAA,IAAAA,eAAWT,EAAAA,QAAMS;0CACvBC,IAAA,CAAAC,EAAA,GAAAJ;0BAEJN,QAAAD,CAAAA,MAAAQ,WAAA,GAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAZ,MAAAU,IAAA,EAAA,CAAA,KAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAC,uBAAA,EAAA;;;;YAKV"}

package/lib-commonjs/components/PromptListbox/usePromptListbox.js

@@ -45,7 +45,8 @@ const usePromptListbox_unstable = (props, ref)=>{
             defaultProps: {
                 disableAutoFocus: true,
                 id: listboxId,
-                tabIndex: undefined
+                tabIndex: undefined,
+                role: 'menu'
             },
             elementType: _reactcomponents.Listbox
         })

package/lib-commonjs/components/PromptListbox/usePromptListbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n  props: PromptListboxProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n  const {\n    id,\n    onActiveOptionChange,\n    inlinePopup = false,\n    mountNode = undefined,\n    open = true,\n    activeDescendantController,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n  } = props;\n  const listboxId = useId('prompt-listbox', id);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n    const nextOption = getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  const state: PromptListboxState = {\n    ...deprecatedPropsDefaults,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n    onActiveDescendantChange,\n    activeDescendantController,\n    inlinePopup,\n    mountNode,\n\n    components: {\n      root: Listbox,\n    },\n\n    root: slot.always(\n      { ...props, selectedOptions },\n      {\n        defaultProps: {\n          disableAutoFocus: true,\n          id: listboxId,\n          tabIndex: undefined,\n        },\n        elementType: Listbox,\n      },\n    ),\n  };\n\n  state.root.ref = useMergedRefs(ref, state.root.ref);\n  state.root.onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onMouseDown),\n  );\n\n  state.root.onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onClick),\n  );\n\n  return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n  PromptListboxContextState,\n  'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: noop,\n  onOptionClick: noop,\n};\n"],"names":["id","inlinePopup","previousOption","nextOption","onActiveOptionChange","event","selectOption","registerOption","open","getOptionById","getOptionsMatchingValue","selectedOptions","onActiveDescendantChange","root","Listbox","state","onMouseDown","preventDefault","tabIndex","undefined","noop","deprecatedPropsDefaults","activeOption","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuBIA;;;eAAAA;;;iCAvByC;gCACW;AAqBtD,MACEA,4BAEAC,CAAAA,OAAAA;UAUF,EAEAD,EAAA,sBACQE,gBACAC,KAAAA,cACNC,SAAAA,aAAgCC,4BAAa,eAAUH,yBAAgBC,iBAAW,EACpFG,YAAA,EAEAC,cAAkC;UAEhCC,YAAAA,IAAAA,qBAAAA,EAAAA,kBAAAA;UACAC,2BAAAA,IAAAA,gCAAAA,EAAAA,CAAAA;cACAC,iBAAAA,MAAAA,MAAAA,CAAAA,UAAAA,GAAAA,cAAAA,MAAAA,MAAAA,CAAAA,UAAAA,IAAAA;cACAC,aAAAA,cAAAA,MAAAA,MAAAA,CAAAA,EAAAA;iCACAL,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,OAAAA;;kBAEAM;;;;;kBAMEC;kCACF;;;;;;;;;;;oBAWE;YAEJA,MAAAC,wBAAA;QAEAC;QACAA,MAAMF,qBAAI,CAACG,MAAAA,CAAAA;eAEPX,KAAMY;YACRN;QAGFI,GAAAA;0BAEUE;gBACLF,kBAAkB;gBAGvBf,IAAOe;gBACPG,UAAAC;YAEIC;YAEAC,aAAAA,wBAAAA;QAIJC;;UAEAC,IAAAA,CAAAA,GAAAA,GAAAA,IAAAA,8BAAiBH,EAAAA,KAAAA,MAAAA,IAAAA,CAAAA,GAAAA;UACjBI,IAAAA,CAAAA,WAAeJ,GAAAA,IAAAA,gCAAAA,EAAAA,IAAAA,8BAAAA,EAAAA,CAAAA;QACjBf,MAAAY,cAAA"}
+{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n  props: PromptListboxProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n  const {\n    id,\n    onActiveOptionChange,\n    inlinePopup = false,\n    mountNode = undefined,\n    open = true,\n    activeDescendantController,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n  } = props;\n  const listboxId = useId('prompt-listbox', id);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n    const nextOption = getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  const state: PromptListboxState = {\n    ...deprecatedPropsDefaults,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n    onActiveDescendantChange,\n    activeDescendantController,\n    inlinePopup,\n    mountNode,\n\n    components: {\n      root: Listbox,\n    },\n\n    root: slot.always(\n      { ...props, selectedOptions },\n      {\n        defaultProps: {\n          disableAutoFocus: true,\n          id: listboxId,\n          tabIndex: undefined,\n          role: 'menu',\n        },\n        elementType: Listbox,\n      },\n    ),\n  };\n\n  state.root.ref = useMergedRefs(ref, state.root.ref);\n  state.root.onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onMouseDown),\n  );\n\n  state.root.onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onClick),\n  );\n\n  return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n  PromptListboxContextState,\n  'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: noop,\n  onOptionClick: noop,\n};\n"],"names":["id","inlinePopup","previousOption","nextOption","onActiveOptionChange","event","selectOption","registerOption","open","getOptionById","getOptionsMatchingValue","selectedOptions","onActiveDescendantChange","root","elementType","Listbox","state","ref","useMergedRefs","onClick","preventDefault","tabIndex","role","noop","deprecatedPropsDefaults","activeOption","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuBIA;;;eAAAA;;;iCAtByC;gCACW;AAoBtD,MACEA,4BAEAC,CAAAA,OAAAA;UAUF,EAEAD,EAAA,sBACQE,gBACAC,KAAAA,cACNC,SAAAA,aAAgCC,4BAAa,eAAUH,yBAAgBC,iBAAW,EACpFG,YAAA,EAEAC,cAAkC;UAEhCC,YAAAA,IAAAA,qBAAAA,EAAAA,kBAAAA;UACAC,2BAAAA,IAAAA,gCAAAA,EAAAA,CAAAA;cACAC,iBAAAA,MAAAA,MAAAA,CAAAA,UAAAA,GAAAA,cAAAA,MAAAA,MAAAA,CAAAA,UAAAA,IAAAA;cACAC,aAAAA,cAAAA,MAAAA,MAAAA,CAAAA,EAAAA;iCACAL,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,OAAAA;;kBAEAM;;;;;kBAMEC;kCACF;;;;;;;;;;;oBAWIC;kBACFC,wBAAA;QAEJ;QAEAC,MAAMH,qBAAI,CAACI,MAAMC,CAAAA;YACjBF,GAAAA,KAAU;;QAGR,GAAGA;YAGLA,cAAWG;gBAEPd,kBAAMe;gBACLJ,IAAAA;gBAGLK,UAAOL;gBACPM,MAAA;YAEIC;YAEAC,aAAAA,wBAAAA;QAIJC;;UAEAC,IAAAA,CAAAA,GAAAA,GAAAA,IAAAA,8BAAiBH,EAAAA,KAAAA,MAAAA,IAAAA,CAAAA,GAAAA;UACjBI,IAAAA,CAAAA,WAAeJ,GAAAA,IAAAA,gCAAAA,EAAAA,IAAAA,8BAAAA,EAAAA,CAAAA;QACjBlB,MAAAe,cAAA"}

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

@@ -4,6 +4,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from PromptOptionProps.
- // & Required<Pick<PromptOptionProps, 'propName'>>
  //# sourceMappingURL=PromptOption.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["PromptOption.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptOptionSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * PromptOption Props\n */\nexport type PromptOptionProps = ComponentProps<PromptOptionSlots> & {};\n\n/**\n * State used in rendering PromptOption\n */\nexport type PromptOptionState = ComponentState<PromptOptionSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from PromptOptionProps.\n// & Required<Pick<PromptOptionProps, 'propName'>>\n"],"names":[],"rangeMappings":";;;;;;;","mappings":"AAWA;;CAEC;;;;CACD,6HACA;mDACA"}
+{"version":3,"sources":["PromptOption.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, OptionProps, OptionState, Slot } from '@fluentui/react-components';\n\nexport type PromptOptionSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * PromptOption Props\n */\nexport type PromptOptionProps = ComponentProps<PromptOptionSlots> &\n  Pick<OptionProps, 'disabled' | 'value'> &\n  (\n    | {\n        /**\n         * An optional override the string value of the PromptOption's display text,\n         * defaulting to the PromptOption's child content.\n         * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the PromptOption's display text when the PromptOption's children are not a string.\n         * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering PromptOption\n */\nexport type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAiCA;;CAEC"}

package/lib-commonjs/components/PromptOption/renderPromptOption.js

@@ -12,6 +12,5 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const renderPromptOption_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
-    // TODO Add additional slots in the appropriate place
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 }; //# sourceMappingURL=renderPromptOption.js.map

package/lib-commonjs/components/PromptOption/renderPromptOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderPromptOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptOptionState, PromptOptionSlots } from './PromptOption.types';\n\n/**\n * Render the final JSX of PromptOption\n */\nexport const renderPromptOption_unstable = (state: PromptOptionState) => {\n  assertSlots<PromptOptionSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["assertSlots","state","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BAVwB;iCAGE;AAO1BA,MAAAA,8BAA+BC,CAAAA;oCAE/B,EAAAA;yDACkB;IAClB,OAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAAA,CAAA"}
+{"version":3,"sources":["renderPromptOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\n\n/**\n * Render the final JSX of PromptOption\n */\nexport const renderPromptOption_unstable = (state: PromptOptionState) => {\n  assertSlots<PromptOptionSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","state","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BAVwB;iCAGE;AAO1BA,MAAAA,8BAA+BC,CAAAA;oCAE/B,EAAAA;IACA,OAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAAA,CAAA"}

package/lib-commonjs/components/PromptOption/usePromptOption.js

@@ -8,21 +8,96 @@ Object.defineProperty(exports, "usePromptOption_unstable", {
         return usePromptOption_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
+const _reactcombobox = require("@fluentui/react-combobox");
+const _reactaria = require("@fluentui/react-aria");
 const usePromptOption_unstable = (props, ref)=>{
+    const { children, disabled, text, value } = props;
+    const optionRef = _react.useRef(null);
+    const optionText = getTextString(text, children);
+    const optionValue = value !== null && value !== void 0 ? value : optionText;
+    // use the id if provided, otherwise use a generated id
+    const id = (0, _reactcomponents.useId)('fluent-option', props.id);
+    // data used for context registration & events
+    const optionData = _react.useMemo(()=>({
+            id,
+            disabled,
+            text: optionText,
+            value: optionValue
+        }), [
+        id,
+        disabled,
+        optionText,
+        optionValue
+    ]);
+    // context values
+    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
+    const registerOption = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>ctx.registerOption);
+    const selected = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>{
+        const selectedOptions = ctx.selectedOptions;
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
+    });
+    const selectOption = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>ctx.selectOption);
+    const onOptionClick = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
+    const onClick = (event)=>{
+        var _props_onClick;
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        activeDescendantController.focus(id);
+        // handle selection change
+        selectOption(event, optionData);
+        onOptionClick(event);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    };
+    // register option data with context
+    _react.useEffect(()=>{
+        if (id && optionRef.current) {
+            return registerOption(optionData, optionRef.current);
+        }
+    }, [
+        id,
+        optionData,
+        registerOption
+    ]);
     return {
-        // TODO add appropriate props/defaults
         components: {
-            // TODO add each slot's element type or component
             root: 'div'
         },
-        // TODO add appropriate slots, for example:
-        // mySlot: slot.optional(props.mySlot),
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
-            ref,
-            ...props
+            ref: (0, _reactcomponents.useMergedRefs)(ref, optionRef),
+            'aria-disabled': disabled ? true : undefined,
+            id,
+            role: 'menuitem',
+            ...props,
+            onClick
         }), {
             elementType: 'div'
-        })
+        }),
+        disabled,
+        selected
     };
-}; //# sourceMappingURL=usePromptOption.js.map
+};
+function getTextString(text, children) {
+    if (text !== undefined) {
+        return text;
+    }
+    let textString = '';
+    let hasNonStringChild = false;
+    _react.Children.forEach(children, (child)=>{
+        if (typeof child === 'string') {
+            textString += child;
+        } else {
+            hasNonStringChild = true;
+        }
+    });
+    // warn if an Option has non-string children and no text prop
+    if (hasNonStringChild) {
+        // eslint-disable-next-line no-console
+        console.warn('Provide a `text` prop to Option components when they contain non-string children.');
+    }
+    return textString;
+} //# sourceMappingURL=usePromptOption.js.map

package/lib-commonjs/components/PromptOption/usePromptOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptOption.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { PromptOptionProps, PromptOptionState } from './PromptOption.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptOption.\n *\n * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,\n * before being passed to renderPromptOption_unstable.\n *\n * @param props - props from this instance of PromptOption\n * @param ref - reference to root HTMLElement of PromptOption\n */\nexport const usePromptOption_unstable = (\n  props: PromptOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptOptionState => {\n  return {\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: slot.optional(props.mySlot),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["usePromptOption_unstable","props","ref","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBSA;;;eAAAA;;;iCAlBsC;AAkB7C,MAAOA,2BAAA,CAAAC,OAAAC;WACL;8CACY;oBACV;6DACM;kBACR;;mDAEuC;+CAErCC;mCACED,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,OAAAA;;eAEFD,KACA;;yBAAqB;QAEzB;IACA"}
+{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useListboxContext_unstable } from '@fluentui/react-combobox';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { PromptOptionProps, PromptOptionState } from './PromptOption.types';\nimport type { OptionValue } from '../utils/OptionCollection.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptOption.\n *\n * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,\n * before being passed to renderPromptOption_unstable.\n *\n * @param props - props from this instance of PromptOption\n * @param ref - reference to root HTMLElement of PromptOption\n */\nexport const usePromptOption_unstable = (\n  props: PromptOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptOptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLDivElement>(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 registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, optionRef),\n        'aria-disabled': disabled ? true : undefined,\n        id,\n        role: 'menuitem',\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    disabled,\n    selected,\n  };\n};\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"],"names":["children","value","props","optionText","disabled","optionValue","text","optionRef","optionData","React","useMemo","id","controller","selected","useListboxContext_unstable","ctx","registerOption","selectedOptions","find","selectOption","onOptionClick","undefined","preventDefault","activeDescendantController","event","onClick","_props_onClick","call","useEffect","current","components","slot","always","getIntrinsicElementProps","root","ref","useMergedRefs","role","getTextString","textString","hasNonStringChild","child","Children","forEach","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBUA;;;eAAAA;;;;iEAtBa;iCAC8C;+BAC1B;2BACA;AAmBzC,MAAQA,2BAA0BC,CAAAA,OAAUC;UAC5C,EACAF,QAAMG,EACNC,QAAMC,EAENC,IAAA,EACAL,KAAA,KAEAC;UACAK,YAAMC,OAAaC,MAAMC,CAAAA;uBACdC,cAAAA,MAAAA;wBAAIP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAAA;2DAAgBD;eAAYF,IAAAA,sBAAAA,EAAOI,iBAAAA,MAAAA,EAAAA;kDAChD;UAACM,aAAAA,OAAAA,OAAAA,CAAAA,IAAAA,CAAAA;;;kBAA0BN;mBAAYA;YAGzC;QAAAM;QAAAP;QAAiBD;QAAAE;KAAA;qBACTO;UACR,EACAA,YAAMC,0BAAWC,8CACSC;UAExBC,iBAAOX,IAAAA,yCAA6BY,EAAAA,CAAAA,MAAAA,IAAgBC,cAAgBb;UACtEQ,WAAAC,IAAAA,yCAAA,EAAAC,CAAAA;QACA,MAAMI,kBAAeL,IAAAA,eAAAA;QACrB,OAAMM,gBAAgBN,aAAAA,gBAA2BC,IAAOA,CAAAA,CAAAA,IAAIK,MAAAA,iBAAaC;;yBAcvEnB,IAAAA,yCAAAA,EAAAA,CAAAA,MAAAA,IAAAA,YAAAA;UAXAkB,gBAAcN,IAAAA,yCAAA,EAAAC,CAAAA,MAAAA,IAAAK,aAAA;oBACNE,CAAAA;;YAERlB,UAAA;kBAEAmB,cAAAA;;;mCAKcC,KAAAA,CAAAA;kCACdtB;QACFiB,aAAAK,OAAAhB;QAEAY,cAAAI;QACAf,CAAAA,iBAAgBP,MAAAuB,OAAA,MAAA,QAAAC,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAC,IAAA,CAAAzB,OAAAsB;;wCAEUhB;WACxBoB,SAAA,CAAA;QACF,IAAGjB,MAAAJ,UAAAsB,OAAA,EAAA;mBAAClB,eAAAA,YAAAA,UAAAA,OAAAA;;;;QAAgBK;QAAAA;KAAAA;WAAe;QAEnCc,YAAO;kBACLA;;cAEAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBACAC,IAAAA,8BAAWF,EAAMG,KACfF;6BACOG,WAAcD,OAAK5B;;kBAExBI;oBACA0B;;;yBAIF;;;;;;AAKN,SAAEC,cAAAhC,IAAA,EAAAN,QAAA;IAEF,IAAAM,SAASgC,WAAchC;QACrB,OAAIA;;QAEJiC,aAAA;QAEAC,oBAAiB;WACbA,QAAAA,CAAAA,OAAAA,CAAAA,UAAoBC,CAAAA;QACxBhC,IAAAA,OAAMiC,UAASC,UAAQ3C;0BACVyC;;gCAEJ;;;iEAGT;QAEAD,mBAAA;QACA,sCAAuB;gBACrBI,IAAA,CAAA;;WAEFL;EAGF,2CAAA"}

package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js

@@ -23,13 +23,187 @@ const promptOptionClassNames = {
 /**
  * Styles for the root slot
  */ const useStyles = (0, _reactcomponents.__styles)({
-    root: {}
-}, {});
+    root: {
+        Bt984gj: "f122n59",
+        Bbmb7ep: [
+            "f1aa9q02",
+            "f16jpd5f"
+        ],
+        Beyfa6y: [
+            "f16jpd5f",
+            "f1aa9q02"
+        ],
+        B7oj6ja: [
+            "f1jar5jt",
+            "fyu767a"
+        ],
+        Btl43ni: [
+            "fyu767a",
+            "f1jar5jt"
+        ],
+        sj55zd: "f19n0e5",
+        i8kkvl: "f1ufnopg",
+        Bceei9c: "f1k6fduh",
+        mc9l5x: "f22iagw",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi",
+        z8tnut: "fp2oml8",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "f1tdddsa",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        qhf8xq: "f10pi13n",
+        Jwef8y: "f1knas48",
+        Bi91k9c: "feu1g3u",
+        ecr2s2: "fb40n2d",
+        lj723h: "f1g4hkjv"
+    },
+    active: {
+        Bowz1zl: "f11vrvdw",
+        oxogb1: "f17hxjb7",
+        Ix2sn8: "f1dha69c",
+        q7v32p: "f1lm7500",
+        Bqfxd14: "f1n5bo3l",
+        B53xpsf: [
+            "fp57yr3",
+            "f48q4c"
+        ],
+        B1wzb3v: "fg547j0",
+        f0sref: [
+            "f48q4c",
+            "fp57yr3"
+        ],
+        Btq9bd3: "fuyp35s",
+        Bertapg: [
+            "f1a9nstl",
+            "fhk0hgg"
+        ],
+        b50fsz: "f1rdp6f1",
+        avt0cx: [
+            "fhk0hgg",
+            "f1a9nstl"
+        ],
+        B39dzdd: "ffd7rjx",
+        Be3o27t: [
+            "fobu5kn",
+            "f1dbet5w"
+        ],
+        Bewtojm: "f1ap9jj5",
+        B37u8z8: [
+            "f1dbet5w",
+            "fobu5kn"
+        ],
+        Bttcd12: [
+            "ftb4b3e",
+            "f1scq65d"
+        ],
+        Fffuxt: [
+            "f1scq65d",
+            "ftb4b3e"
+        ],
+        Bqougee: [
+            "f2me9eq",
+            "fgk4qqi"
+        ],
+        Beitzug: [
+            "fgk4qqi",
+            "f2me9eq"
+        ],
+        Bhijsxg: "fwq15dy",
+        kktds4: "f1pb3wry",
+        Bmau3bo: [
+            "ftjv2f4",
+            "f1flhb1f"
+        ],
+        npektv: [
+            "f1flhb1f",
+            "ftjv2f4"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Jwef8y: "f9ql6rf",
+        Bi91k9c: "fvgxktp",
+        ecr2s2: "fgj9um3",
+        lj723h: "f19wldhg",
+        B7iucu3: "f1cyfu5x"
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".f22iagw{display:flex;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
+        ".f10pi13n{position:relative;}",
+        ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
+        ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
+        ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}",
+        ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}",
+        ".f1n5bo3l[data-activedescendant-focusvisible]::after{border-top-width:var(--strokeWidthThick);}",
+        ".fp57yr3[data-activedescendant-focusvisible]::after{border-right-width:var(--strokeWidthThick);}",
+        ".f48q4c[data-activedescendant-focusvisible]::after{border-left-width:var(--strokeWidthThick);}",
+        ".fg547j0[data-activedescendant-focusvisible]::after{border-bottom-width:var(--strokeWidthThick);}",
+        ".fuyp35s[data-activedescendant-focusvisible]::after{border-top-style:solid;}",
+        ".f1a9nstl[data-activedescendant-focusvisible]::after{border-right-style:solid;}",
+        ".fhk0hgg[data-activedescendant-focusvisible]::after{border-left-style:solid;}",
+        ".f1rdp6f1[data-activedescendant-focusvisible]::after{border-bottom-style:solid;}",
+        ".ffd7rjx[data-activedescendant-focusvisible]::after{border-top-color:var(--colorStrokeFocus2);}",
+        ".fobu5kn[data-activedescendant-focusvisible]::after{border-right-color:var(--colorStrokeFocus2);}",
+        ".f1dbet5w[data-activedescendant-focusvisible]::after{border-left-color:var(--colorStrokeFocus2);}",
+        ".f1ap9jj5[data-activedescendant-focusvisible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
+        ".ftb4b3e[data-activedescendant-focusvisible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f1scq65d[data-activedescendant-focusvisible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f2me9eq[data-activedescendant-focusvisible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fgk4qqi[data-activedescendant-focusvisible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
+        ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
+        ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
+        ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    h: [
+        ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
+        ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
+        ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
+        ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    a: [
+        ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
+        ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
+        ".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
+        ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
 const usePromptOptionStyles_unstable = (state)=>{
     'use no memo';
+    const { disabled } = state;
     const styles = useStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(promptOptionClassNames.root, styles.root, state.root.className);
-    // TODO Add class names to slots, for example:
-    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(promptOptionClassNames.root, styles.root, styles.active, disabled && styles.disabled, state.root.className);
     return state;
 }; //# sourceMappingURL=usePromptOptionStyles.styles.js.map

package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n  root: 'fai-PromptOption',\n  // TODO: add class names for all slots on PromptOptionSlots.\n  // Should be of the form `<slotName>: 'fai-PromptOption__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(promptOptionClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["promptOptionClassNames","usePromptOptionStyles_unstable","root","__styles","state","styles","useStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,sBAAAA;eAAAA;;IAqBXC,8BAAA;eAAAA;;;iCAzB+B;AAI1B,MAAMD,yBAA4D;UACvEE;AAGF;AAEA;;CAEC,SAECA,YAAMC,IAAAA,yBAAA,EAAA;UAEN,CAAA;AAGF,GAAA,CAAA;AAME,MAAAF,iCAAAG,CAAAA;;UAKAC,SAAAC;UACAJ,IAAA,CAAAK,SAAA,GAAAC,IAAAA,6BAAA,EAAAR,uBAAAE,IAAA,EAAAG,OAAAH,IAAA,EAAAE,MAAgFF,IAAA,CAAAK,SAAA;kDAEzEH;IACP,gFAAA"}
+{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n  root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  active: {\n    [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),\n      ...shorthands.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    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    promptOptionClassNames.root,\n    styles.root,\n    styles.active,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["promptOptionClassNames","root","__styles","alignItems","shorthands","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontSize","lineHeight","position","backgroundColor","colorNeutralBackground1Pressed","Bi91k9c","active","pointerEvents","zIndex","top","bottom","left","right","Bertapg","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","tokens","npektv","Jwef8y","ecr2s2","lj723h","styles","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,sBAAAA;eAAAA;;;;;;iCALwC;AAK9C,MAAMA,yBAA4D;UACvEC;AACF;AAEA;;CAEC,SAECA,YAAMC,IAAAA,yBAAA,EAAA;UACJC;iBACGC;iBACHC;YAAAA;YAAcC;SAAAA;iBACdC;YAAAA;YAAkBC;SAAAA;iBAClBC;YAAAA;YAAQ;SAAA;iBACRC;YAAAA;YAAS;SAAA;gBACTC;gBACAC;iBACAC;gBACGT;iBACHU;iBAEA;iBACEC;gBACAV;gBACF;YAAA;YAAA;SAAA;iBAEA;gBACEU;YAAAA;YAAAA;SAAwBC;gBACxBX;gBACF;QACFY,SAAA;QAEAC,QAAQ;gBACH;;;iBAGDC;gBACAC;gBAEA;gBACA;iBAEAC;iBACAC;YAAAA;YAAQ;SAAA;iBACRC;gBACAC;YAAAA;YAAO;SAAA;iBACT;QACFC,SAAA;YAAA;YAAA;SAAA;QAEAC,QAAAA;gBACErB;YAAAA;YAAcsB;SAAAA;iBAEd;iBACEZ;YAAAA;YAAAA;SAAwBa;iBACxBvB;iBACF;YAAA;YAAA;SAAA;iBAEA;YAAA;YAAW;SAAA;gBACTU;YAAAA;YAAAA;SAAiBc;iBACjBxB;YAAAA;YAAOwB;SAAOF;iBAChB;YAAA;YAAA;SAAA;iBAEA;gBACEtB;iBACF;YAAA;YAAA;SAAA;QACFyB,QAAA;YAAA;YAAA;SAAA;IACF;IAEAJ,UAAA;;QAGAK,QAAO;QACLd,SAAA;QAEAe,QAAQN;QACRO,QAAMC;QACNC,SAAMlC;;AASR,GAAE"}

package/lib-commonjs/components/utils/usePromptListboxFunctionality.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, "usePromptListboxFunctionality", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactaria = require("@fluentui/react-aria");
-const _reactcomponents = require("@fluentui/react-components");
 const _reactutilities = require("@fluentui/react-utilities");
 const _dropdownKeyActions = require("./dropdownKeyActions");
 const _TextCursorPositionPlugin = require("../../plugins/TextCursorPositionPlugin");
@@ -21,10 +20,11 @@ const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _useComboboxPositioning = require("./useComboboxPositioning");
 const _useTriggerKeyDown = require("./useTriggerKeyDown");
 const _PromptListbox = require("../PromptListbox");
+const _PromptOption = require("../PromptOption");
 function usePromptListboxFunctionality(params) {
     const { positioning, onOpenChange, onSelectionModeChange, listboxProps } = params;
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
-        matchOption: (el)=>el.classList.contains(_reactcomponents.optionClassNames.root)
+        matchOption: (el)=>el.classList.contains(_PromptOption.promptOptionClassNames.root)
     });
     // useMergedRefs to normalize the ref into a React.RefObject type
     const triggerRef = (0, _reactutilities.useMergedRefs)(activeParentRef);

package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { optionClassNames } from '@fluentui/react-components';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const { positioning, onOpenChange, onSelectionModeChange, listboxProps } = params;\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  // useMergedRefs to normalize the ref into a React.RefObject type\n  const triggerRef = useMergedRefs(activeParentRef);\n  const selectionState = useSelection(listboxProps ?? {});\n  const { selectOption } = selectionState;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\n  const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setIsInSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    isInLastPosition,\n    open,\n    multiselect: false,\n  });\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n    if (\n      event.key === ArrowLeft ||\n      event.key === ArrowRight ||\n      (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n      (action === 'Type' && isInLastPosition) ||\n      action === 'Type'\n    ) {\n      activeDescendantController.blur();\n      setHideActiveDescendant(true);\n      setIsInSelectionMode(false);\n      onSelectionModeChange?.(false);\n    } else if (\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      setHideActiveDescendant(false);\n      setIsInSelectionMode(true);\n      onSelectionModeChange?.(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (hideActiveDescendant) {\n      triggerRef.current?.removeAttribute('aria-activedescendant');\n    }\n    // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n    // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n    // refs as dependencies since it can blow up the number of runs.\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hideActiveDescendant]);\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListbox\n        open={open}\n        {...listboxProps}\n        {...optionCollection}\n        {...selectionState}\n        ref={listboxMergedRef}\n        activeDescendantController={activeDescendantController}\n      />\n    );\n  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n  return {\n    promptListbox: listbox,\n    triggerProps: {\n      ref: triggerRef,\n      onBlur,\n      onFocus,\n      onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","selectOption","selectionState","activeParentRef","optionCollection","controller","getOptionById","useActiveDescendant","isInLastPosition","isInSelectionMode","setIsInSelectionMode","useState","defaultState","defaultOpen","initialState","useSelection","onBlur","onOpenChange","type","setIsInLastPosition","React","open","onFocus","event","target","setOpen","cursorPositionPlugin","onListboxBlur","currentTarget","onKeyDown","useTriggerKeydown","activeDescendantController","onInputTriggerKeyDown","useEventCallback","action","hideActiveDescendant","key","ArrowRight","ArrowDown","ArrowUp","triggerRef","setHideActiveDescendant","useEffect","comboboxTargetRef","_triggerRef_current","current","removeAttribute","PromptListbox","listboxMergedRef","useMergedRefs","comboboxPopupRef","activeDescendantListboxRef","ref","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const { positioning, onOpenChange, onSelectionModeChange, listboxProps } = params;\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(promptOptionClassNames.root),\n  });\n  // useMergedRefs to normalize the ref into a React.RefObject type\n  const triggerRef = useMergedRefs(activeParentRef);\n  const selectionState = useSelection(listboxProps ?? {});\n  const { selectOption } = selectionState;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\n  const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setIsInSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    isInLastPosition,\n    open,\n    multiselect: false,\n  });\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n    if (\n      event.key === ArrowLeft ||\n      event.key === ArrowRight ||\n      (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n      (action === 'Type' && isInLastPosition) ||\n      action === 'Type'\n    ) {\n      activeDescendantController.blur();\n      setHideActiveDescendant(true);\n      setIsInSelectionMode(false);\n      onSelectionModeChange?.(false);\n    } else if (\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      setHideActiveDescendant(false);\n      setIsInSelectionMode(true);\n      onSelectionModeChange?.(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (hideActiveDescendant) {\n      triggerRef.current?.removeAttribute('aria-activedescendant');\n    }\n    // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n    // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n    // refs as dependencies since it can blow up the number of runs.\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hideActiveDescendant]);\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListbox\n        open={open}\n        {...listboxProps}\n        {...optionCollection}\n        {...selectionState}\n        ref={listboxMergedRef}\n        activeDescendantController={activeDescendantController}\n      />\n    );\n  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n  return {\n    promptListbox: listbox,\n    triggerProps: {\n      ref: triggerRef,\n      onBlur,\n      onFocus,\n      onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","selectOption","selectionState","activeParentRef","optionCollection","controller","getOptionById","useActiveDescendant","isInLastPosition","isInSelectionMode","setIsInSelectionMode","useState","root","defaultState","defaultOpen","initialState","useSelection","onBlur","onOpenChange","type","setIsInLastPosition","React","open","onFocus","event","target","setOpen","cursorPositionPlugin","onListboxBlur","currentTarget","onKeyDown","useTriggerKeydown","activeDescendantController","onInputTriggerKeyDown","useEventCallback","action","hideActiveDescendant","key","ArrowRight","ArrowDown","ArrowUp","triggerRef","setHideActiveDescendant","useEffect","comboboxTargetRef","_triggerRef_current","current","removeAttribute","PromptListbox","listboxMergedRef","useMergedRefs","comboboxPopupRef","activeDescendantListboxRef","ref","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n  PromptListbox,\n  promptListboxClassNames,\n  renderPromptListbox_unstable,\n  usePromptListboxStyles_unstable,\n  usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData,\n  ProcessedPromptListboxProps,\n  UsePromptListboxFunctionality,\n  UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { TextCursorPositionPluginProps } from './plugins/TextCursorPositionPlugin';\nexport { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';\n"],"names":["PromptListbox","PromptOption","TextCursorPositionPlugin","promptListboxClassNames","promptOptionClassNames","renderPromptListbox_unstable","renderPromptOption_unstable","usePromptListboxFunctionality","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,4BAAa;;IAmBNC,YAAY;eAAZA,0BAAY;;IAHZC,wBAAwB;eAAxBA,kDAAwB;;IAf/BC,uBAAuB;eAAvBA,sCAAuB;;IAkBFC,sBAAsB;eAAtBA,oCAAsB;;IAjB3CC,4BAA4B;eAA5BA,2CAA4B;;IAiBiBC,2BAA2B;eAA3BA,yCAA2B;;IAZjEC,6BAA6B;eAA7BA,4DAA6B;;IAJpCC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAeiDC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;;+BAd7H;+CAEuC;0CASL;8BAGmG"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n  PromptListbox,\n  promptListboxClassNames,\n  renderPromptListbox_unstable,\n  usePromptListboxStyles_unstable,\n  usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData,\n  ProcessedPromptListboxProps,\n  UsePromptListboxFunctionality,\n  UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { TextCursorPositionPluginProps } from './plugins/TextCursorPositionPlugin';\nexport { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n  PromptOption,\n  promptOptionClassNames,\n  renderPromptOption_unstable,\n  usePromptOptionStyles_unstable,\n  usePromptOption_unstable,\n} from './PromptOption';\n"],"names":["PromptListbox","PromptOption","TextCursorPositionPlugin","promptListboxClassNames","promptOptionClassNames","renderPromptListbox_unstable","renderPromptOption_unstable","usePromptListboxFunctionality","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,4BAAa;;IAoBbC,YAAY;eAAZA,0BAAY;;IAJLC,wBAAwB;eAAxBA,kDAAwB;;IAf/BC,uBAAuB;eAAvBA,sCAAuB;;IAoBvBC,sBAAsB;eAAtBA,oCAAsB;;IAnBtBC,4BAA4B;eAA5BA,2CAA4B;;IAoB5BC,2BAA2B;eAA3BA,yCAA2B;;IAfpBC,6BAA6B;eAA7BA,4DAA6B;;IAJpCC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAmBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAnBnB;+CAEuC;0CASL;8BASlC"}