@fluentui-copilot/react-prompt-listbox 0.0.3 → 0.1.0

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 { 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, fluid = false } = 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, fluid });\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","fluid","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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"}
+{"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 { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\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, fluid = false } = 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 [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\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    activeDescendantController.blur();\n    setHideActiveDescendant(true);\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 = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\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    cursorPosition,\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, cursorPosition });\n    if (event.key === ArrowLeft || event.key === ArrowRight || action === 'Type') {\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, fluid });\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","CursorPositionPlugin","useOptionCollection","useSelection","ArrowLeft","ArrowRight","useComboboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","onBlur","event","type","blur","setHideActiveDescendant","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","useCallback","onKeyDown","multiselect","hideActiveDescendant","onInputTriggerKeyDown","action","key","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/utils/useTriggerKeyDown.js

@@ -13,7 +13,7 @@ export function useTriggerKeydown(options) {
     selectOption,
     multiselect,
     open,
-    isInLastPosition,
+    cursorPosition,
     onBlur
   } = options;
   const getActiveOption = React.useCallback(() => {
@@ -59,7 +59,7 @@ export function useTriggerKeydown(options) {
     const action = getDropdownActionFromKey(e, {
       open,
       multiselect,
-      isInLastPosition
+      cursorPosition
     });
     const activeOption = getActiveOption();
     const firstOption = activeDescendantController.first({

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

@@ -1 +1 @@
-{"version":3,"sources":["useTriggerKeyDown.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case and added the bluring\n * functionality.\n */\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\nimport type { SelectionProps, SelectionState } from './Selection.types';\n\nexport function useTriggerKeydown(\n  options: {\n    activeDescendantController: ActiveDescendantImperativeRef;\n    isInLastPosition: boolean;\n    open: boolean;\n    onBlur: () => void;\n  } & OptionCollectionState &\n    Pick<SelectionProps, 'multiselect'> &\n    Pick<SelectionState, 'selectOption'>,\n) {\n  const { activeDescendantController, getOptionById, selectOption, multiselect, open, isInLastPosition, onBlur } =\n    options;\n\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  const first = () => {\n    activeDescendantController.first();\n  };\n\n  const last = () => {\n    activeDescendantController.last();\n  };\n\n  const blur = () => {\n    activeDescendantController.blur();\n    onBlur();\n  };\n\n  const next = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.next();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const previous = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.prev();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const pageUp = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.prev();\n    }\n  };\n\n  const pageDown = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.next();\n    }\n  };\n\n  const setKeyboardNavigation = useSetKeyboardNavigation();\n  return useEventCallback((e: React.KeyboardEvent<HTMLSpanElement>) => {\n    const action = getDropdownActionFromKey(e, { open, multiselect, isInLastPosition });\n    const activeOption = getActiveOption();\n    const firstOption = activeDescendantController.first({ passive: true });\n\n    switch (action) {\n      case 'Last':\n      case 'First':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        e.preventDefault();\n        break;\n      case 'Previous':\n        // when active option is the first option and the action was \"Previous\",\n        // this means we were in the first option and we are \"leaving\" the listbox\n        if (activeOption?.id === firstOption) {\n          blur();\n          e.preventDefault();\n        } else if (activeOption) {\n          e.preventDefault();\n        }\n        break;\n      case 'Next':\n        e.preventDefault();\n        break;\n    }\n\n    setKeyboardNavigation(true);\n\n    switch (action) {\n      case 'First':\n        first();\n        break;\n      case 'Last':\n        last();\n        break;\n      case 'Next':\n        next(activeOption);\n        break;\n      case 'Previous':\n        if (activeOption && activeOption.id !== firstOption) {\n          previous(activeOption);\n        } else {\n          blur();\n        }\n        break;\n      case 'PageDown':\n        pageDown();\n        break;\n      case 'PageUp':\n        pageUp();\n        break;\n      case 'CloseSelect':\n        if (!multiselect && !activeOption?.disabled) {\n          blur();\n        }\n      // fallthrough\n      case 'Select':\n        activeOption && selectOption(e, activeOption);\n        break;\n      case 'Tab':\n        !multiselect && activeOption && selectOption(e, activeOption);\n        break;\n    }\n  });\n}\n"],"names":["React","useSetKeyboardNavigation","useEventCallback","getDropdownActionFromKey","useTriggerKeydown","options","activeDescendantController","getOptionById","selectOption","multiselect","open","isInLastPosition","onBlur","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","blur","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","firstOption","passive","preventDefault","id","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC,GAED,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,uBAAuB;AAKhE,OAAO,SAASC,kBACdC,OAOsC;IAEtC,MAAM,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,YAAY,EAAEC,WAAW,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,MAAM,EAAE,GAC5GP;IAEF,MAAMQ,kBAAkBb,MAAMc,WAAW,CAAC;QACxC,MAAMC,iBAAiBT,2BAA2BU,MAAM;QACxD,OAAOD,iBAAiBR,cAAcQ,kBAAkBE;IAC1D,GAAG;QAACX;QAA4BC;KAAc;IAE9C,MAAMW,QAAQ;QACZZ,2BAA2BY,KAAK;IAClC;IAEA,MAAMC,OAAO;QACXb,2BAA2Ba,IAAI;IACjC;IAEA,MAAMC,OAAO;QACXd,2BAA2Bc,IAAI;QAC/BR;IACF;IAEA,MAAMS,OAAO,CAACC;QACZ,IAAIA,cAAc;YAChBhB,2BAA2Be,IAAI;QACjC,OAAO;YACLf,2BAA2BY,KAAK;QAClC;IACF;IAEA,MAAMK,WAAW,CAACD;QAChB,IAAIA,cAAc;YAChBhB,2BAA2BkB,IAAI;QACjC,OAAO;YACLlB,2BAA2BY,KAAK;QAClC;IACF;IAEA,MAAMO,SAAS;QACb,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,IAAK;YAC3BpB,2BAA2BkB,IAAI;QACjC;IACF;IAEA,MAAMG,WAAW;QACf,IAAK,IAAID,IAAI,GAAGA,IAAI,IAAIA,IAAK;YAC3BpB,2BAA2Be,IAAI;QACjC;IACF;IAEA,MAAMO,wBAAwB3B;IAC9B,OAAOC,iBAAiB,CAAC2B;QACvB,MAAMC,SAAS3B,yBAAyB0B,GAAG;YAAEnB;YAAMD;YAAaE;QAAiB;QACjF,MAAMW,eAAeT;QACrB,MAAMkB,cAAczB,2BAA2BY,KAAK,CAAC;YAAEc,SAAS;QAAK;QAErE,OAAQF;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBACHD,EAAEI,cAAc;gBAChB;YACF,KAAK;gBACH,wEAAwE;gBACxE,0EAA0E;gBAC1E,IAAIX,CAAAA,yBAAAA,mCAAAA,aAAcY,EAAE,MAAKH,aAAa;oBACpCX;oBACAS,EAAEI,cAAc;gBAClB,OAAO,IAAIX,cAAc;oBACvBO,EAAEI,cAAc;gBAClB;gBACA;YACF,KAAK;gBACHJ,EAAEI,cAAc;gBAChB;QACJ;QAEAL,sBAAsB;QAEtB,OAAQE;YACN,KAAK;gBACHZ;gBACA;YACF,KAAK;gBACHC;gBACA;YACF,KAAK;gBACHE,KAAKC;gBACL;YACF,KAAK;gBACH,IAAIA,gBAAgBA,aAAaY,EAAE,KAAKH,aAAa;oBACnDR,SAASD;gBACX,OAAO;oBACLF;gBACF;gBACA;YACF,KAAK;gBACHO;gBACA;YACF,KAAK;gBACHF;gBACA;YACF,KAAK;gBACH,IAAI,CAAChB,eAAe,EAACa,yBAAAA,mCAAAA,aAAca,QAAQ,GAAE;oBAC3Cf;gBACF;YACF,cAAc;YACd,KAAK;gBACHE,gBAAgBd,aAAaqB,GAAGP;gBAChC;YACF,KAAK;gBACH,CAACb,eAAea,gBAAgBd,aAAaqB,GAAGP;gBAChD;QACJ;IACF;AACF"}
+{"version":3,"sources":["useTriggerKeyDown.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case and added the bluring\n * functionality.\n */\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\nimport type { SelectionProps, SelectionState } from './Selection.types';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\n\nexport function useTriggerKeydown(\n  options: {\n    activeDescendantController: ActiveDescendantImperativeRef;\n    cursorPosition: CursorPosition;\n    open: boolean;\n    onBlur: () => void;\n  } & OptionCollectionState &\n    Pick<SelectionProps, 'multiselect'> &\n    Pick<SelectionState, 'selectOption'>,\n) {\n  const { activeDescendantController, getOptionById, selectOption, multiselect, open, cursorPosition, onBlur } =\n    options;\n\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  const first = () => {\n    activeDescendantController.first();\n  };\n\n  const last = () => {\n    activeDescendantController.last();\n  };\n\n  const blur = () => {\n    activeDescendantController.blur();\n    onBlur();\n  };\n\n  const next = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.next();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const previous = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.prev();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const pageUp = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.prev();\n    }\n  };\n\n  const pageDown = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.next();\n    }\n  };\n\n  const setKeyboardNavigation = useSetKeyboardNavigation();\n  return useEventCallback((e: React.KeyboardEvent<HTMLSpanElement>) => {\n    const action = getDropdownActionFromKey(e, { open, multiselect, cursorPosition });\n    const activeOption = getActiveOption();\n    const firstOption = activeDescendantController.first({ passive: true });\n\n    switch (action) {\n      case 'Last':\n      case 'First':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        e.preventDefault();\n        break;\n      case 'Previous':\n        // when active option is the first option and the action was \"Previous\",\n        // this means we were in the first option and we are \"leaving\" the listbox\n        if (activeOption?.id === firstOption) {\n          blur();\n          e.preventDefault();\n        } else if (activeOption) {\n          e.preventDefault();\n        }\n        break;\n      case 'Next':\n        e.preventDefault();\n        break;\n    }\n\n    setKeyboardNavigation(true);\n\n    switch (action) {\n      case 'First':\n        first();\n        break;\n      case 'Last':\n        last();\n        break;\n      case 'Next':\n        next(activeOption);\n        break;\n      case 'Previous':\n        if (activeOption && activeOption.id !== firstOption) {\n          previous(activeOption);\n        } else {\n          blur();\n        }\n        break;\n      case 'PageDown':\n        pageDown();\n        break;\n      case 'PageUp':\n        pageUp();\n        break;\n      case 'CloseSelect':\n        if (!multiselect && !activeOption?.disabled) {\n          blur();\n        }\n      // fallthrough\n      case 'Select':\n        activeOption && selectOption(e, activeOption);\n        break;\n      case 'Tab':\n        !multiselect && activeOption && selectOption(e, activeOption);\n        break;\n    }\n  });\n}\n"],"names":["React","useSetKeyboardNavigation","useEventCallback","getDropdownActionFromKey","useTriggerKeydown","options","activeDescendantController","getOptionById","selectOption","multiselect","open","cursorPosition","onBlur","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","blur","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","firstOption","passive","preventDefault","id","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC,GAED,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,uBAAuB;AAMhE,OAAO,SAASC,kBACdC,OAOsC;IAEtC,MAAM,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,YAAY,EAAEC,WAAW,EAAEC,IAAI,EAAEC,cAAc,EAAEC,MAAM,EAAE,GAC1GP;IAEF,MAAMQ,kBAAkBb,MAAMc,WAAW,CAAC;QACxC,MAAMC,iBAAiBT,2BAA2BU,MAAM;QACxD,OAAOD,iBAAiBR,cAAcQ,kBAAkBE;IAC1D,GAAG;QAACX;QAA4BC;KAAc;IAE9C,MAAMW,QAAQ;QACZZ,2BAA2BY,KAAK;IAClC;IAEA,MAAMC,OAAO;QACXb,2BAA2Ba,IAAI;IACjC;IAEA,MAAMC,OAAO;QACXd,2BAA2Bc,IAAI;QAC/BR;IACF;IAEA,MAAMS,OAAO,CAACC;QACZ,IAAIA,cAAc;YAChBhB,2BAA2Be,IAAI;QACjC,OAAO;YACLf,2BAA2BY,KAAK;QAClC;IACF;IAEA,MAAMK,WAAW,CAACD;QAChB,IAAIA,cAAc;YAChBhB,2BAA2BkB,IAAI;QACjC,OAAO;YACLlB,2BAA2BY,KAAK;QAClC;IACF;IAEA,MAAMO,SAAS;QACb,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,IAAK;YAC3BpB,2BAA2BkB,IAAI;QACjC;IACF;IAEA,MAAMG,WAAW;QACf,IAAK,IAAID,IAAI,GAAGA,IAAI,IAAIA,IAAK;YAC3BpB,2BAA2Be,IAAI;QACjC;IACF;IAEA,MAAMO,wBAAwB3B;IAC9B,OAAOC,iBAAiB,CAAC2B;QACvB,MAAMC,SAAS3B,yBAAyB0B,GAAG;YAAEnB;YAAMD;YAAaE;QAAe;QAC/E,MAAMW,eAAeT;QACrB,MAAMkB,cAAczB,2BAA2BY,KAAK,CAAC;YAAEc,SAAS;QAAK;QAErE,OAAQF;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBACHD,EAAEI,cAAc;gBAChB;YACF,KAAK;gBACH,wEAAwE;gBACxE,0EAA0E;gBAC1E,IAAIX,CAAAA,yBAAAA,mCAAAA,aAAcY,EAAE,MAAKH,aAAa;oBACpCX;oBACAS,EAAEI,cAAc;gBAClB,OAAO,IAAIX,cAAc;oBACvBO,EAAEI,cAAc;gBAClB;gBACA;YACF,KAAK;gBACHJ,EAAEI,cAAc;gBAChB;QACJ;QAEAL,sBAAsB;QAEtB,OAAQE;YACN,KAAK;gBACHZ;gBACA;YACF,KAAK;gBACHC;gBACA;YACF,KAAK;gBACHE,KAAKC;gBACL;YACF,KAAK;gBACH,IAAIA,gBAAgBA,aAAaY,EAAE,KAAKH,aAAa;oBACnDR,SAASD;gBACX,OAAO;oBACLF;gBACF;gBACA;YACF,KAAK;gBACHO;gBACA;YACF,KAAK;gBACHF;gBACA;YACF,KAAK;gBACH,IAAI,CAAChB,eAAe,EAACa,yBAAAA,mCAAAA,aAAca,QAAQ,GAAE;oBAC3Cf;gBACF;YACF,cAAc;YACd,KAAK;gBACHE,gBAAgBd,aAAaqB,GAAGP;gBAChC;YACF,KAAK;gBACH,CAACb,eAAea,gBAAgBd,aAAaqB,GAAGP;gBAChD;QACJ;IACF;AACF"}

package/lib/index.js

@@ -1,5 +1,4 @@
 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\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"}
+{"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 { 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","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,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}

package/lib/plugins/CursorPositionPlugin.js

@@ -0,0 +1,42 @@
+import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';
+import { SELECTION_CHANGE_COMMAND, $getSelection, useLexicalComposerContext, $isRangeSelection, $isElementNode, COMMAND_PRIORITY_HIGH } from '@fluentui-copilot/react-text-editor';
+import * as React from 'react';
+export const CursorPositionPlugin = ({
+  setCursorPosition
+}) => {
+  const [editor] = useLexicalComposerContext();
+  React.useEffect(() => {
+    const $selectionChangeHandler = () => {
+      const selection = $getSelection();
+      // If selection is null, the cursor is not active in the editor and we should just noop
+      if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {
+        setCursorPosition('between-text');
+        return false;
+      }
+      // Should only be one node in the selection because the selection is collapsed
+      const selectedNode = selection.getNodes().at(0);
+      // If there's no selected node, focus isn't in the editor
+      if (!selectedNode) {
+        return false;
+      }
+      // If there are no leaf nodes, the paragraph node will be selected
+      if ($isElementNode(selectedNode)) {
+        setCursorPosition('end');
+        return false;
+      }
+      // if the selection node is a sentinel and it matches the sentinel at the end
+      if ($isSentinelNode(selectedNode) && !selectedNode.getNextSibling()) {
+        setCursorPosition('end');
+        return false;
+      } else if ($isSentinelNode(selectedNode.getNextSibling()) && selection.focus.offset === selectedNode.getTextContentSize()) {
+        setCursorPosition('end');
+        return false;
+      }
+      setCursorPosition('between-text');
+      return false;
+    };
+    return editor.registerCommand(SELECTION_CHANGE_COMMAND, $selectionChangeHandler, COMMAND_PRIORITY_HIGH);
+  }, [editor, setCursorPosition]);
+  return null;
+};
+//# sourceMappingURL=CursorPositionPlugin.js.map

package/lib/plugins/CursorPositionPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CursorPositionPlugin.ts"],"sourcesContent":["import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport {\n  SELECTION_CHANGE_COMMAND,\n  $getSelection,\n  useLexicalComposerContext,\n  $isRangeSelection,\n  $isElementNode,\n  COMMAND_PRIORITY_HIGH,\n} from '@fluentui-copilot/react-text-editor';\nimport * as React from 'react';\n\n/**\n * Position the cursor is in based on it's content. The goal\n * is to track whether the cursor is at the end of the input\n * or between text.\n */\nexport type CursorPosition = 'end' | 'between-text';\n\nexport type CursorPositionPluginProps = {\n  setCursorPosition: (position: CursorPosition) => void;\n};\n\nexport const CursorPositionPlugin: React.FunctionComponent<CursorPositionPluginProps> = ({ setCursorPosition }) => {\n  const [editor] = useLexicalComposerContext();\n\n  React.useEffect(() => {\n    const $selectionChangeHandler = () => {\n      const selection = $getSelection();\n      // If selection is null, the cursor is not active in the editor and we should just noop\n      if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {\n        setCursorPosition('between-text');\n        return false;\n      }\n\n      // Should only be one node in the selection because the selection is collapsed\n      const selectedNode = selection.getNodes().at(0);\n      // If there's no selected node, focus isn't in the editor\n      if (!selectedNode) {\n        return false;\n      }\n\n      // If there are no leaf nodes, the paragraph node will be selected\n      if ($isElementNode(selectedNode)) {\n        setCursorPosition('end');\n        return false;\n      }\n\n      // if the selection node is a sentinel and it matches the sentinel at the end\n      if ($isSentinelNode(selectedNode) && !selectedNode.getNextSibling()) {\n        setCursorPosition('end');\n        return false;\n      }\n\n      // else if the selection node is not a sentinel, check that the next sibling node is a sentinel\n      // and check if the focus offset is in the last position of the node.\n      else if (\n        $isSentinelNode(selectedNode.getNextSibling()) &&\n        selection.focus.offset === selectedNode.getTextContentSize()\n      ) {\n        setCursorPosition('end');\n        return false;\n      }\n\n      setCursorPosition('between-text');\n      return false;\n    };\n\n    return editor.registerCommand(SELECTION_CHANGE_COMMAND, $selectionChangeHandler, COMMAND_PRIORITY_HIGH);\n  }, [editor, setCursorPosition]);\n\n  return null;\n};\n"],"names":["$isSentinelNode","SELECTION_CHANGE_COMMAND","$getSelection","useLexicalComposerContext","$isRangeSelection","$isElementNode","COMMAND_PRIORITY_HIGH","React","CursorPositionPlugin","setCursorPosition","editor","useEffect","$selectionChangeHandler","selection","isCollapsed","selectedNode","getNodes","at","getNextSibling","focus","offset","getTextContentSize","registerCommand"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,uCAAuC;AACvE,SACEC,wBAAwB,EACxBC,aAAa,EACbC,yBAAyB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,qBAAqB,QAChB,sCAAsC;AAC7C,YAAYC,WAAW,QAAQ;AAa/B,OAAO,MAAMC,uBAA2E,CAAC,EAAEC,iBAAiB,EAAE;IAC5G,MAAM,CAACC,OAAO,GAAGP;IAEjBI,MAAMI,SAAS,CAAC;QACd,MAAMC,0BAA0B;YAC9B,MAAMC,YAAYX;YAClB,uFAAuF;YACvF,IAAIW,cAAc,QAAQ,CAACT,kBAAkBS,cAAc,CAACA,UAAUC,WAAW,IAAI;gBACnFL,kBAAkB;gBAClB,OAAO;YACT;YAEA,8EAA8E;YAC9E,MAAMM,eAAeF,UAAUG,QAAQ,GAAGC,EAAE,CAAC;YAC7C,yDAAyD;YACzD,IAAI,CAACF,cAAc;gBACjB,OAAO;YACT;YAEA,kEAAkE;YAClE,IAAIV,eAAeU,eAAe;gBAChCN,kBAAkB;gBAClB,OAAO;YACT;YAEA,6EAA6E;YAC7E,IAAIT,gBAAgBe,iBAAiB,CAACA,aAAaG,cAAc,IAAI;gBACnET,kBAAkB;gBAClB,OAAO;YACT,OAIK,IACHT,gBAAgBe,aAAaG,cAAc,OAC3CL,UAAUM,KAAK,CAACC,MAAM,KAAKL,aAAaM,kBAAkB,IAC1D;gBACAZ,kBAAkB;gBAClB,OAAO;YACT;YAEAA,kBAAkB;YAClB,OAAO;QACT;QAEA,OAAOC,OAAOY,eAAe,CAACrB,0BAA0BW,yBAAyBN;IACnF,GAAG;QAACI;QAAQD;KAAkB;IAE9B,OAAO;AACT,EAAE"}

package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js

@@ -25,22 +25,11 @@ const promptListboxClassNames = {
  */ const useStyles = (0, _reactcomponents.__styles)({
     listbox: {
         E5pizo: "f1hg901r",
-        Bbmb7ep: [
-            "f1aa9q02",
-            "f16jpd5f"
-        ],
-        Beyfa6y: [
-            "f16jpd5f",
-            "f1aa9q02"
-        ],
-        B7oj6ja: [
-            "f1jar5jt",
-            "fyu767a"
-        ],
-        Btl43ni: [
-            "fyu767a",
-            "f1jar5jt"
-        ],
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
         Bxyxcbc: "fmmk62d",
         B7ck84d: "f1ewtqcl"
     },
@@ -53,10 +42,12 @@ const promptListboxClassNames = {
 }, {
     d: [
         ".f1hg901r{box-shadow:var(--shadow16);}",
-        ".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);}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
         ".fmmk62d{max-height:80vh;}",
         ".f1ewtqcl{box-sizing:border-box;}",
         ".fjseox{display:none;}",

package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePromptListboxStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport type { PromptListboxSlots, PromptListboxState } from './PromptListbox.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptListboxClassNames: SlotClassNames<PromptListboxSlots> = {\n  root: 'fai-PromptListbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  listbox: {\n    boxShadow: tokens.shadow16,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n});\n\n/**\n * Apply styling to the PromptListbox slots based on the state\n */\nexport const usePromptListboxStyles_unstable = (state: PromptListboxState): PromptListboxState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    promptListboxClassNames.root,\n    styles.listbox,\n    state.inlinePopup && styles.inlineListbox,\n    !state.open && styles.listboxCollapsed,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["promptListboxClassNames","usePromptListboxStyles_unstable","root","listbox","__styles","boxShadow","shorthands","maxHeight","boxSizing","B7oj6ja","listboxCollapsed","display","B7ck84d","inlineListbox","Bj3rh1h","d","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IA0CXC,+BAAA;eAAAA;;;iCA9CmD;AAI9C,MAAMD,0BAA8D;UACzEE;AACF;AAEA;;CAEC,SAECC,YAASC,IAAAA,yBAAA,EAAA;aACPC;gBACGC;iBACHC;YAAAA;YAAW;SAAA;iBACXC;YAAAA;YAAW;SAAA;QACbC,SAAA;YAAA;YAAA;SAAA;QAEAC,SAAAA;YAAAA;YAAkB;SAAA;iBAChBC;QACFC,SAAA;;sBAGA;QACAC,QAAAA;;mBAEA;QACFC,SAAA;IAEA;;IAECC,GACD;QAAA;QAAad;QAAmCe;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;;AAa9C,MAAAf,kCAAAe,CAAAA"}
+{"version":3,"sources":["usePromptListboxStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { PromptListboxSlots, PromptListboxState } from './PromptListbox.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptListboxClassNames: SlotClassNames<PromptListboxSlots> = {\n  root: 'fai-PromptListbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  listbox: {\n    boxShadow: tokens.shadow16,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n});\n\n/**\n * Apply styling to the PromptListbox slots based on the state\n */\nexport const usePromptListboxStyles_unstable = (state: PromptListboxState): PromptListboxState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    promptListboxClassNames.root,\n    styles.listbox,\n    state.inlinePopup && styles.inlineListbox,\n    !state.open && styles.listboxCollapsed,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["promptListboxClassNames","root","listbox","__styles","boxShadow","borderRadius","maxHeight","boxSizing","Btl43ni","listboxCollapsed","display","Bxyxcbc","B7ck84d","zIndex","inlineListbox","Bj3rh1h","p","state","mergeClasses","styles","inlinePopup"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;;;;;iCAJ4B;AAIlC,MAAMA,0BAA8D;UACzEC;AACF;AAEA;;CAEC,SAECC,YAASC,IAAAA,yBAAA,EAAA;aACPC;gBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,SAAAA;gBACEC;QACFC,SAAA;QAEAC,SAAA;;sBAEe;gBACbC;;IAEJC,eAAA;QAEAC,SAAA;;GAEC;OAEC;QAAA;QAAA;YAAA;YAAA;gBAEAC,GAAA,CAAA;;SACAC;QAAAA;QAAuBC;QAErBC;QACMC;KAAsBN"}

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

@@ -12,7 +12,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 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);
@@ -33,7 +32,6 @@ const usePromptOption_unstable = (props, ref)=>{
         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;
@@ -47,7 +45,6 @@ const usePromptOption_unstable = (props, ref)=>{
             event.preventDefault();
             return;
         }
-        activeDescendantController.focus(id);
         // handle selection change
         selectOption(event, optionData);
         onOptionClick(event);

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

@@ -1 +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"}
+{"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 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 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    // 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","registerOption","useListboxContext_unstable","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","event","_props_onClick","preventDefault","onClick","call","useEffect","current","root","components","getIntrinsicElementProps","ref","textString","Children","forEach","child","hasNonStringChild","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBUA;;;eAAAA;;;;iEArBa;iCAC8C;+BAC1B;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;qBACXO;UACNA,iBAAiBC,IAAAA,yCAA2BC,EAAAA,CAAAA,MAAAA,IAAAA,cAAAA;UAC1CC,WAAMC,IAAAA,yCAAsBA,EAAAA,CAAAA;cAE5BA,kBAAOX,IAAgBY,eAAaD;QACtC,OAAAX,gBAAAY,aAAAD,gBAAAE,IAAA,CAAAC,CAAAA,IAAAA,MAAAd,iBAAAY;;UAEAG,eAAMC,IAAAA,yCAAgBR,EAAAA,CAAAA,MAA2BC,IAAOA,YAAIO;UAE5DA,gBAAiBC,IAAAA,yCAAAA,EAAAA,CAAAA,MAAAA,IAAAA,aAAAA;oBAUfpB,CAAAA;YATAqB;sBACQC;kBACNA,cAAA;;;kCAIkBhB;qBAEpBa,OAAcC;sBACdpB;QACFqB,CAAAA,iBAAArB,MAAAuB,OAAA,MAAA,QAAAF,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAG,IAAA,CAAAxB,OAAAoB;;wCAGgB;WACdK,SAAIhB,CAAMJ;kBACRA,UAAOK,OAAAA,EAAAA;mBACTA,eAAAJ,YAAAD,UAAAqB,OAAA;QACF;;;QAAIjB;QAAAA;KAAAA;WAAIH;oBAAYI;YAAeiB,MAAA;QAEnC;cACEC,qBAAAA,CAAAA,MAAY,CAAAC,IAAAA,yCAAA,EAAA,OAAA;mDACJ,EAAAC,KAAAzB;6BACRH,WAAA,OAAAa;;kBAGIe;oBACA;;;yBAGG9B;;;;;;SAMPa,cAAAA,IAAAA,EAAAA,QAAAA;QACFT,SAAAW,WAAA;QACA,OAAAX;IAEF;QACE2B,aAAahB;4BACJX;WACT4B,QAAA,CAAAC,OAAA,CAAAnC,UAAAoC,CAAAA;QAEA,IAAIH,OAAAA,UAAa,UAAA;YACjBA,cAAII;QACJ5B,OAAMyB;gCACOE;;;iEAGW;2BACtB;QACF,sCAAA;QAEAE,QAAAC,IAAA,CAAA;;WAEEN;6CAEF"}

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

@@ -25,22 +25,11 @@ const promptOptionClassNames = {
  */ const useStyles = (0, _reactcomponents.__styles)({
     root: {
         Bt984gj: "f122n59",
-        Bbmb7ep: [
-            "f1aa9q02",
-            "f16jpd5f"
-        ],
-        Beyfa6y: [
-            "f16jpd5f",
-            "f1aa9q02"
-        ],
-        B7oj6ja: [
-            "f1jar5jt",
-            "fyu767a"
-        ],
-        Btl43ni: [
-            "fyu767a",
-            "f1jar5jt"
-        ],
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
         sj55zd: "f19n0e5",
         i8kkvl: "f1ufnopg",
         Bceei9c: "f1k6fduh",
@@ -48,16 +37,11 @@ const promptOptionClassNames = {
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
         Bg96gwp: "f1i3iumi",
-        z8tnut: "fp2oml8",
-        z189sj: [
-            "f1vdfbxk",
-            "f1f5gg8d"
-        ],
-        Byoj8tv: "f1tdddsa",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ],
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fm5eomj",
         qhf8xq: "f10pi13n",
         Jwef8y: "f1knas48",
         Bi91k9c: "feu1g3u",
@@ -99,22 +83,11 @@ const promptOptionClassNames = {
             "f1dbet5w",
             "fobu5kn"
         ],
-        Bttcd12: [
-            "ftb4b3e",
-            "f1scq65d"
-        ],
-        Fffuxt: [
-            "f1scq65d",
-            "ftb4b3e"
-        ],
-        Bqougee: [
-            "f2me9eq",
-            "fgk4qqi"
-        ],
-        Beitzug: [
-            "fgk4qqi",
-            "f2me9eq"
-        ],
+        Fffuxt: 0,
+        Bttcd12: 0,
+        Beitzug: 0,
+        Bqougee: 0,
+        B86i8pi: "f1kurthe",
         Bhijsxg: "fwq15dy",
         kktds4: "f1pb3wry",
         Bmau3bo: [
@@ -137,10 +110,12 @@ const promptOptionClassNames = {
 }, {
     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);}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
         ".f19n0e5{color:var(--colorNeutralForeground1);}",
         ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
         ".f1k6fduh{cursor:pointer;}",
@@ -148,10 +123,12 @@ const promptOptionClassNames = {
         ".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);}",
+        [
+            ".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
         ".f10pi13n{position:relative;}",
         ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
         ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
@@ -169,10 +146,12 @@ const promptOptionClassNames = {
         ".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);}",
+        [
+            ".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
         ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
         ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
         ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",

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

@@ -1 +1 @@
-{"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"}
+{"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    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n    position: 'relative',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n    },\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      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","borderRadius","color","columnGap","cursor","display","fontFamily","fontSize","lineHeight","padding","position","backgroundColor","qhf8xq","active","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","content","top","bottom","left","right","f0sref","disabled","colorNeutralForegroundDisabled","tokens","colorTransparentBackground","Bhijsxg","kktds4","Bmau3bo","sj55zd","Jwef8y","styles","state","ecr2s2","lj723h"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,sBAAAA;eAAAA;;;;;;iCALwC;AAK9C,MAAMA,yBAA4D;UACvEC;AACF;AAEA;;CAEC,SAECA,YAAMC,IAAAA,yBAAA,EAAA;UACJC;iBACAC;iBACAC;iBACAC;iBACAC;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;gBACAC;iBAEA;iBACEC;iBACAT;iBACF;gBAEA;gBACES;gBACAT;iBACF;QACFU,QAAA;QAEAC,QAAQ;iBACDC;gBACHC;gBACAL;;;iBAIA;gBACAT;gBAEAe;gBACAC;iBACAC;iBACAC;YAAAA;YAAO;SAAA;iBACT;QACFC,QAAA;YAAA;YAAA;SAAA;QAEAC,SAAAA;iBACEnB;YAAAA;YAAcoB;SAAAA;gBAEd;gBACEX;YAAAA;YAAAA;SAAiBY;iBACjBrB;iBACF;YAAA;YAAA;SAAA;iBAEA;iBACES;YAAAA;YAAAA;SAAwBa;gBACxBtB;iBACF;iBAEA;iBACEA;iBACF;QACFuB,SAAA;QACFC,QAAA;QAEAC,SAAA;YAAA;YAAA;SAAA;;;;;IAEC;cAEC;QAEAC,QAAQP;QACRQ,QAAMC;QACNC,SAAMjC;QAQNkC,QAAOD;QACPE,QAAA"}

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

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "getDropdownActionFromKey", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _keyboardkeys = /*#__PURE__*/ _interop_require_wildcard._(require("@fluentui/keyboard-keys"));
 function getDropdownActionFromKey(e, options) {
-    const { isInLastPosition } = options;
+    const { cursorPosition } = options;
     const code = e.key;
     const { altKey, ctrlKey, key, metaKey } = e;
     // typing action occurs whether open or closed
@@ -27,16 +27,16 @@ function getDropdownActionFromKey(e, options) {
     }
     // navigation interactions
     if (code === _keyboardkeys.ArrowDown) {
-        return isInLastPosition ? 'Next' : 'Type';
+        return cursorPosition === 'end' ? 'Next' : 'Type';
     }
     if (code === _keyboardkeys.ArrowUp) {
-        return isInLastPosition ? 'Previous' : 'Type';
+        return cursorPosition === 'end' ? 'Previous' : 'Type';
     }
     if (code === _keyboardkeys.Home) {
-        return 'First';
+        return cursorPosition === 'end' ? 'First' : 'Type';
     }
     if (code === _keyboardkeys.End) {
-        return 'Last';
+        return cursorPosition === 'end' ? 'Last' : 'Type';
     }
     if (code === _keyboardkeys.PageUp) {
         return 'PageUp';

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

@@ -1 +1 @@
-{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case.\n */\n\nimport * as keys from '@fluentui/keyboard-keys';\nimport type * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n  isInLastPosition: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions,\n): DropdownActions {\n  const { isInLastPosition } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter) {\n    return 'CloseSelect';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return isInLastPosition ? 'Next' : 'Type';\n  }\n  if (code === keys.ArrowUp) {\n    return isInLastPosition ? 'Previous' : 'Type';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n"],"names":["isInLastPosition","keys","options","ctrlKey","key","length","altKey","e","code","ArrowDown","Space","metaKey","ArrowUp","Enter","Home","End","PageUp","PageDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;CAGC;;;;+BAmCSA;;;eAAAA;;;;wEAjCEC;AAiCV,SAAQD,yBAAqBE,CAAAA,EAAAA,OAAAA;UAC7B,EACAF,gBAAgBG,KAEhBD;UACIE,OAAIC,EAAAA,GAAM;UACZ,EACFC,MAAA,EAEAH,OAAA,EACAC,GAAA,SACE,KACFG;kDAE0B;QAC1BH,IAAII,MAAAA,KAASP,KAAKQ,SAAWR,cAAAS,KAAA,IAAA,CAAAJ,UAAA,CAAAH,WAAA,CAAAQ,SAAA;eAC3B;;8BAEgBC;iBACTZ,cAAAA,OAAAA,IAAAA,UAAmBQ,SAAaP,cAAAY,KAAA,EAAA;QACzC,OAAA;;8BAES;QACTL,SAAAP,cAAAQ,SAAA,EAAA;QACA,OAAID,mBAAmB,SAAA;;QAEvBA,SAAAP,cAAAW,OAAA,EAAA;QACA,OAAIJ,mBAAsB,aAAA;;QAE1BA,SAAAP,cAAAa,IAAA,EAAA;QACA,OAAIN;;QAEJA,SAAAP,cAAAc,GAAA,EAAA;QACA,OAAIP;;QAEJA,SAAAP,cAAAe,MAAA,EAAA;QAEA,OAAA;;IAEF,IAAAR,SAAAP,cAAAgB,QAAA,EAAA"}
+{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case.\n */\n\nimport * as keys from '@fluentui/keyboard-keys';\nimport type * as React from 'react';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n  cursorPosition: CursorPosition;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions,\n): DropdownActions {\n  const { cursorPosition } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter) {\n    return 'CloseSelect';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return cursorPosition === 'end' ? 'Next' : 'Type';\n  }\n  if (code === keys.ArrowUp) {\n    return cursorPosition === 'end' ? 'Previous' : 'Type';\n  }\n  if (code === keys.Home) {\n    return cursorPosition === 'end' ? 'First' : 'Type';\n  }\n  if (code === keys.End) {\n    return cursorPosition === 'end' ? 'Last' : 'Type';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n"],"names":["cursorPosition","keys","options","key","length","altKey","ctrlKey","e","code","ArrowDown","Space","metaKey","ArrowUp","Enter","Home","End","PageUp","PageDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;CAGC;;;;+BAoCSA;;;eAAAA;;;;wEAlCEC;AAkCV,SAAQD,yBAAmBE,CAAAA,EAAAA,OAAAA;UAC3B,EACAF,cAAc,KAEdE;UACIC,OAAIC,EAAAA,GAAM;UACZ,EACFC,MAAA,EAEAC,OAAA,EACAH,GAAA,SACE,KACFI;kDAE0B;QAC1BJ,IAAIK,MAAAA,KAASP,KAAKQ,SAAWR,cAAAS,KAAA,IAAA,CAAAL,UAAA,CAAAC,WAAA,CAAAK,SAAA;eAC3B;;8BAEgBC;iBACTZ,cAAAA,OAAAA,IAAAA,UAAmBQ,SAAQP,cAAaY,KAAA,EAAA;QACjD,OAAA;;8BAESb;QACTQ,SAAAP,cAAAQ,SAAA,EAAA;QACA,OAAID,mBAAmB,QAAA,SAAA;;QAEvBA,SAAAP,cAAAW,OAAA,EAAA;QACA,OAAIJ,mBAAsB,QAAA,aAAA;;QAE1BA,SAAAP,cAAAa,IAAA,EAAA;QACA,OAAIN,mBAAsB,QAAE,UAAA;;QAE5BA,SAAAP,cAAAc,GAAA,EAAA;QACA,OAAIP,mBAAmB,QAAA,SAAA;;QAEvBA,SAAAP,cAAAe,MAAA,EAAA;QAEA,OAAA;;IAEF,IAAAR,SAAAP,cAAAgB,QAAA,EAAA"}

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

@@ -25,6 +25,7 @@ function useComboboxPositioning(props) {
         },
         fallbackPositions: fallbackPositions,
         matchTargetSize: fluid ? 'width' : undefined,
+        autoSize: true,
         ...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
     };
     const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(popperOptions);

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

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { ComboboxBaseProps } from '@fluentui/react-combobox';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useComboboxPositioning(\n  props: ComboboxBaseProps & Required<Pick<UsePromptListboxFunctionalityParams, 'fluid'>>,\n): [\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  listboxRef: React.MutableRefObject<any>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  triggerRef: React.MutableRefObject<any>,\n] {\n  const { positioning, fluid } = props;\n\n  const fallbackPositions: PositioningShorthandValue[] = ['below'];\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions: fallbackPositions,\n    matchTargetSize: fluid ? ('width' as const) : undefined,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  return [containerRef, targetRef];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","containerRef","targetRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;;;;;+BAQTA;;;eAAAA;;;kCAN4C;AAMrD,SAASA,uBACdC,KAAuF;UAOvF,EAEAC,WAAMC,OAAkD,KAAQF;UAEhEE,oBAAiB;QAAA;KAAA;qBACXC;UACJC,gBAAU;kBACVC;eACAC;gBAAUC;uBAAcC;sBAAY;;2BAEpCC;yBACGC,QAAAA,UAA4BT;QACjC,GAAAS,IAAAA,6CAAA,EAAAT,YAAA;;UAIA,WAAQU,cAAcC,KAAUC,IAAAA,gCAAA,EAAAV;IAClC,OAAA;QAAAQ;QAAAC;KAAA"}
+{"version":3,"sources":["useComboboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { ComboboxBaseProps } from '@fluentui/react-combobox';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useComboboxPositioning(\n  props: ComboboxBaseProps & Required<Pick<UsePromptListboxFunctionalityParams, 'fluid'>>,\n): [\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  listboxRef: React.MutableRefObject<any>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  triggerRef: React.MutableRefObject<any>,\n] {\n  const { positioning, fluid } = props;\n\n  const fallbackPositions: PositioningShorthandValue[] = ['below'];\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions: fallbackPositions,\n    matchTargetSize: fluid ? ('width' as const) : undefined,\n    autoSize: true,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  return [containerRef, targetRef];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","fluid","undefined","resolvePositioningShorthand","containerRef","targetRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;;;;;+BAQTA;;;eAAAA;;;kCAN4C;AAMrD,SAASA,uBACdC,KAAuF;UAOvF,EAEAC,WAAMC,OAAkD,KAAQF;UAEhEE,oBAAiB;QAAA;KAAA;qBACXC;UACJC,gBAAU;kBACVC;eACAC;gBAAUC;uBAAcC;sBAAY;;2BAEpCC;yBACUC,QAAA,UAAAC;kBACPC;QACL,GAAAA,IAAAA,6CAAA,EAAAX,YAAA;;UAIA,WAAQY,cAAcC,KAAUC,IAAAA,gCAAA,EAAAZ;IAClC,OAAA;QAAAU;QAAAC;KAAA"}

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

@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactaria = require("@fluentui/react-aria");
 const _reactutilities = require("@fluentui/react-utilities");
 const _dropdownKeyActions = require("./dropdownKeyActions");
-const _TextCursorPositionPlugin = require("../../plugins/TextCursorPositionPlugin");
+const _CursorPositionPlugin = require("../../plugins/CursorPositionPlugin");
 const _useOptionCollection = require("./useOptionCollection");
 const _useSelection = require("./useSelection");
 const _keyboardkeys = require("@fluentui/keyboard-keys");
@@ -32,7 +32,7 @@ function usePromptListboxFunctionality(params) {
     const { selectOption } = selectionState;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
     const { getOptionById } = optionCollection;
-    const [isInLastPosition, setIsInLastPosition] = _react.useState(true);
+    const [cursorPosition, setCursorPosition] = _react.useState('end');
     const [isInSelectionMode, setIsInSelectionMode] = _react.useState(false);
     const [open, setOpen] = (0, _reactutilities.useControllableState)({
         state: params.open,
@@ -46,6 +46,8 @@ function usePromptListboxFunctionality(params) {
             type: 'focus',
             open: false
         });
+        activeDescendantController.blur();
+        setHideActiveDescendant(true);
     };
     const onFocus = (event)=>{
         if (event.target === event.currentTarget) {
@@ -57,8 +59,8 @@ function usePromptListboxFunctionality(params) {
             });
         }
     };
-    const cursorPositionPlugin = /*#__PURE__*/ _react.createElement(_TextCursorPositionPlugin.TextCursorPositionPlugin, {
-        setIsInLastPosition: setIsInLastPosition
+    const cursorPositionPlugin = /*#__PURE__*/ _react.createElement(_CursorPositionPlugin.CursorPositionPlugin, {
+        setCursorPosition: setCursorPosition
     });
     const onListboxBlur = _react.useCallback(()=>{
         setIsInSelectionMode(false);
@@ -73,7 +75,7 @@ function usePromptListboxFunctionality(params) {
         getOptionById,
         onBlur: onListboxBlur,
         selectOption,
-        isInLastPosition,
+        cursorPosition,
         open,
         multiselect: false
     });
@@ -88,9 +90,9 @@ function usePromptListboxFunctionality(params) {
         const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
             open,
             multiselect: false,
-            isInLastPosition
+            cursorPosition
         });
-        if (event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.ArrowRight || !isInLastPosition && (event.key === _keyboardkeys.ArrowDown || event.key === _keyboardkeys.ArrowUp) || action === 'Type' && isInLastPosition || action === 'Type') {
+        if (event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.ArrowRight || action === 'Type') {
             activeDescendantController.blur();
             setHideActiveDescendant(true);
             setIsInSelectionMode(false);