@fluentui-copilot/react-prompt-listbox 0.0.0-nightly-20240719-0406-ee8d99d6.1 → 0.0.0-nightly-20240723-0406-13a39b27.1

package/lib/components/utils/PromptListboxFunctionality.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n  Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\n  /**\n   * Component to be rendered in the Input component. This should be passed to the listbox prop.\n   */\n  promptListbox: JSX.Element;\n  /**\n   * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n   * work correctly.\n   */\n  triggerProps: {\n    ref: React.RefObject<HTMLSpanElement>;\n    /**\n     * Whether the listbox is being used to go through options or the user is currently typing.\n     */\n    isInSelectionMode: boolean;\n  } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n  /**\n   * Ref used to point which element the listbox should be anchored to. Most use cases\n   * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n   * this is provided directly to the component and not the slot).\n   *\n   * Note: If the targetRef is the same as the trigger, the ref provided in triggerProps needs\n   * to be merged with this one using `useMergedRefs(targetRef, triggerProps.ref);`\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  targetRef: React.MutableRefObject<any>;\n  /**\n   * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n   * keyboard behavior. This should be passed as children in the PromptInput.\n   */\n  cursorPositionPlugin: JSX.Element;\n};\n\nexport type UsePromptListboxFunctionalityParams = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n  positioning?: PositioningShorthand;\n  /**\n   * Props to be passed to the ListboxComponent\n   */\n  listboxProps?: ProcessedPromptListboxProps;\n};\n\nexport type OnOpenChangeData = (\n  | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n  | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n  | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n  open: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4DA,WAME"}
+{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n  Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\n  /**\n   * Component to be rendered in the Input component. This should be passed to the listbox prop.\n   */\n  promptListbox: JSX.Element;\n  /**\n   * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n   * work correctly.\n   */\n  triggerProps: {\n    ref: React.RefObject<HTMLSpanElement>;\n    /**\n     * Whether the listbox is being used to go through options or the user is currently typing.\n     */\n    isInSelectionMode: boolean;\n  } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n  /**\n   * Ref used to point which element the listbox should be anchored to. Most use cases\n   * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n   * this is provided directly to the component and not the slot).\n   *\n   * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n   * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  containerRef: React.MutableRefObject<any>;\n  /**\n   * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n   * keyboard behavior. This should be passed as children in the PromptInput.\n   */\n  cursorPositionPlugin: JSX.Element;\n};\n\nexport type UsePromptListboxFunctionalityParams = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n  positioning?: PositioningShorthand;\n  /**\n   * Props to be passed to the ListboxComponent\n   */\n  listboxProps?: ProcessedPromptListboxProps;\n};\n\nexport type OnOpenChangeData = (\n  | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n  | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n  | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n  open: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4DA,WAME"}

package/lib/components/utils/usePromptListboxFunctionality.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useActiveDescendant } from '@fluentui/react-aria';
-import { optionClassNames } from '@fluentui/react-components';
 import { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from './dropdownKeyActions';
 import { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';
@@ -10,6 +9,7 @@ import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-ke
 import { useComboboxPositioning } from './useComboboxPositioning';
 import { useTriggerKeydown } from './useTriggerKeyDown';
 import { PromptListbox } from '../PromptListbox';
+import { promptOptionClassNames } from '../PromptOption';
 export function usePromptListboxFunctionality(params) {
   const {
     positioning,
@@ -22,7 +22,7 @@ export function usePromptListboxFunctionality(params) {
     activeParentRef,
     controller: activeDescendantController
   } = useActiveDescendant({
-    matchOption: el => el.classList.contains(optionClassNames.root)
+    matchOption: el => el.classList.contains(promptOptionClassNames.root)
   });
   // useMergedRefs to normalize the ref into a React.RefObject type
   const triggerRef = useMergedRefs(activeParentRef);
@@ -136,7 +136,7 @@ export function usePromptListboxFunctionality(params) {
       onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),
       isInSelectionMode
     },
-    targetRef: comboboxTargetRef,
+    containerRef: comboboxTargetRef,
     cursorPositionPlugin
   };
 }

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    targetRef: 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","targetRef"],"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":["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

@@ -1,4 +1,5 @@
 export { PromptListbox, promptListboxClassNames, renderPromptListbox_unstable, usePromptListboxStyles_unstable, usePromptListbox_unstable } from './PromptListbox';
 export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';
 export { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';
+export { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';
 //# sourceMappingURL=index.js.map

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"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","TextCursorPositionPlugin"],"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"}
+{"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/PromptOption.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/PromptOption/index"), exports);
+ //# sourceMappingURL=PromptOption.js.map

package/lib-commonjs/PromptOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptOption.ts"],"sourcesContent":["export * from './components/PromptOption/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

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.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PromptOption", {
+    enumerable: true,
+    get: function() {
+        return PromptOption;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePromptOption = require("./usePromptOption");
+const _renderPromptOption = require("./renderPromptOption");
+const _usePromptOptionStylesstyles = require("./usePromptOptionStyles.styles");
+const PromptOption = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePromptOption.usePromptOption_unstable)(props, ref);
+    (0, _usePromptOptionStylesstyles.usePromptOptionStyles_unstable)(state);
+    return (0, _renderPromptOption.renderPromptOption_unstable)(state);
+});
+PromptOption.displayName = 'PromptOption'; //# sourceMappingURL=PromptOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// PromptOption component - TODO: add more docs\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n  const state = usePromptOption_unstable(props, ref);\n\n  usePromptOptionStyles_unstable(state);\n  return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["PromptOption","React","forwardRef","props","state","usePromptOption_unstable","usePromptOptionStyles_unstable","renderPromptOption_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;iCACkB;oCACG;6CACG;AAKxC,MAAMA,eAAAA,WAAAA,GAAAA,OAAuDC,UAAMC,CAAU,CAACC,OAACA;UACpFC,QAAMA,IAAAA,yCAAQC,EAAAA,OAAyBF;mEAEvCG,EAAAA;WACAC,IAAAA,+CAAOA,EAAAA;AACT;AAEAP,aAAaQ,WAAW,GAAG"}

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

@@ -0,0 +1,7 @@
+/**
+ * State used in rendering PromptOption
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=PromptOption.types.js.map

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

@@ -0,0 +1 @@
+{"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/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./PromptOption"), exports);
+_export_star._(require("./PromptOption.types"), exports);
+_export_star._(require("./renderPromptOption"), exports);
+_export_star._(require("./usePromptOption"), exports);
+_export_star._(require("./usePromptOptionStyles.styles"), exports);
+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PromptOption';\nexport * from './PromptOption.types';\nexport * from './renderPromptOption';\nexport * from './usePromptOption';\nexport * from './usePromptOptionStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderPromptOption_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderPromptOption_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactcomponents = require("@fluentui/react-components");
+const renderPromptOption_unstable = (state)=>{
+    (0, _reactcomponents.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+}; //# sourceMappingURL=renderPromptOption.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePromptOption_unstable", {
+    enumerable: true,
+    get: function() {
+        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 {
+        components: {
+            root: 'div'
+        },
+        root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
+            ref: (0, _reactcomponents.useMergedRefs)(ref, optionRef),
+            'aria-disabled': disabled ? true : undefined,
+            id,
+            role: 'menuitem',
+            ...props,
+            onClick
+        }), {
+            elementType: 'div'
+        }),
+        disabled,
+        selected
+    };
+};
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    promptOptionClassNames: function() {
+        return promptOptionClassNames;
+    },
+    usePromptOptionStyles_unstable: function() {
+        return usePromptOptionStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const promptOptionClassNames = {
+    root: 'fai-PromptOption'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _reactcomponents.__styles)({
+    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, styles.active, disabled && styles.disabled, state.root.className);
+    return state;
+}; //# sourceMappingURL=usePromptOptionStyles.styles.js.map