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

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

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

package/lib-commonjs/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":""}
+{"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":""}

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

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

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

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

package/lib-commonjs/index.js

@@ -12,15 +12,24 @@ _export(exports, {
     PromptListbox: function() {
         return _PromptListbox.PromptListbox;
     },
+    PromptOption: function() {
+        return _PromptOption.PromptOption;
+    },
     TextCursorPositionPlugin: function() {
         return _TextCursorPositionPlugin.TextCursorPositionPlugin;
     },
     promptListboxClassNames: function() {
         return _PromptListbox.promptListboxClassNames;
     },
+    promptOptionClassNames: function() {
+        return _PromptOption.promptOptionClassNames;
+    },
     renderPromptListbox_unstable: function() {
         return _PromptListbox.renderPromptListbox_unstable;
     },
+    renderPromptOption_unstable: function() {
+        return _PromptOption.renderPromptOption_unstable;
+    },
     usePromptListboxFunctionality: function() {
         return _usePromptListboxFunctionality.usePromptListboxFunctionality;
     },
@@ -29,9 +38,16 @@ _export(exports, {
     },
     usePromptListbox_unstable: function() {
         return _PromptListbox.usePromptListbox_unstable;
+    },
+    usePromptOptionStyles_unstable: function() {
+        return _PromptOption.usePromptOptionStyles_unstable;
+    },
+    usePromptOption_unstable: function() {
+        return _PromptOption.usePromptOption_unstable;
     }
 });
 const _PromptListbox = require("./PromptListbox");
 const _usePromptListboxFunctionality = require("./components/utils/usePromptListboxFunctionality");
 const _TextCursorPositionPlugin = require("./plugins/TextCursorPositionPlugin");
+const _PromptOption = require("./PromptOption");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-prompt-listbox",
-  "version": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
+  "version": "0.0.0-nightly-20240723-0406-13a39b27.1",
   "description": "PromptListbox for input components using EditorInput.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,12 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/chat-input-plugins": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
-    "@fluentui-copilot/react-chat-input-plugins": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
-    "@fluentui-copilot/react-editor-input": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
-    "@fluentui-copilot/react-text-editor": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
-    "@fluentui-copilot/text-editor": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
+    "@fluentui-copilot/chat-input-plugins": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/react-chat-input-plugins": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/react-editor-input": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/react-prompt-input": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/react-text-editor": "0.0.0-nightly-20240723-0406-13a39b27.1",
+    "@fluentui-copilot/text-editor": "0.0.0-nightly-20240723-0406-13a39b27.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {