@fluentui-copilot/react-prompt-listbox 0.0.0-nightly-20240719-0406-ee8d99d6.1

package/lib/components/utils/dropdownKeyActions.js

@@ -0,0 +1,52 @@
+/**
+ * Note, this is mainly brought from Fluent UI, only removed the closing and
+ * opening logic since that's not needed for this use case.
+ */import * as keys from '@fluentui/keyboard-keys';
+/**
+ * Converts a keyboard interaction into a defined action
+ */
+export function getDropdownActionFromKey(e, options) {
+  const {
+    isInLastPosition
+  } = options;
+  const code = e.key;
+  const {
+    altKey,
+    ctrlKey,
+    key,
+    metaKey
+  } = e;
+  // typing action occurs whether open or closed
+  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
+    return 'Type';
+  }
+  // select or close actions
+  if (code === keys.ArrowUp && altKey || code === keys.Enter) {
+    return 'CloseSelect';
+  }
+  // navigation interactions
+  if (code === keys.ArrowDown) {
+    return isInLastPosition ? 'Next' : 'Type';
+  }
+  if (code === keys.ArrowUp) {
+    return isInLastPosition ? 'Previous' : 'Type';
+  }
+  if (code === keys.Home) {
+    return 'First';
+  }
+  if (code === keys.End) {
+    return 'Last';
+  }
+  if (code === keys.PageUp) {
+    return 'PageUp';
+  }
+  if (code === keys.PageDown) {
+    return 'PageDown';
+  }
+  if (code === keys.Tab) {
+    return 'Tab';
+  }
+  // if nothing matched, return none
+  return 'None';
+}
+//# sourceMappingURL=dropdownKeyActions.js.map

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

@@ -0,0 +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":["keys","getDropdownActionFromKey","e","options","isInLastPosition","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowUp","Enter","ArrowDown","Home","End","PageUp","PageDown","Tab"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;CAGC,GAED,YAAYA,UAAU,0BAA0B;AA0BhD;;CAEC,GACD,OAAO,SAASC,yBACdC,CAAsC,EACtCC,OAA8B;IAE9B,MAAM,EAAEC,gBAAgB,EAAE,GAAGD;IAC7B,MAAME,OAAOH,EAAEI,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGP;IAE1C,8CAA8C;IAC9C,IAAII,IAAII,MAAM,KAAK,KAAKL,SAASL,KAAKW,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAI,AAACJ,SAASL,KAAKY,OAAO,IAAIL,UAAWF,SAASL,KAAKa,KAAK,EAAE;QAC5D,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIR,SAASL,KAAKc,SAAS,EAAE;QAC3B,OAAOV,mBAAmB,SAAS;IACrC;IACA,IAAIC,SAASL,KAAKY,OAAO,EAAE;QACzB,OAAOR,mBAAmB,aAAa;IACzC;IACA,IAAIC,SAASL,KAAKe,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIV,SAASL,KAAKgB,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIX,SAASL,KAAKiB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIZ,SAASL,KAAKkB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAIb,SAASL,KAAKmB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}

package/lib/components/utils/useComboboxPositioning.js

@@ -0,0 +1,25 @@
+// Brought from Fluent UI
+import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
+export function useComboboxPositioning(props) {
+  const {
+    positioning
+  } = props;
+  // popper options
+  const popperOptions = {
+    position: 'below',
+    align: 'start',
+    offset: {
+      crossAxis: 0,
+      mainAxis: 2
+    },
+    fallbackPositions: [],
+    matchTargetSize: 'width',
+    ...resolvePositioningShorthand(positioning)
+  };
+  const {
+    targetRef,
+    containerRef
+  } = usePositioning(popperOptions);
+  return [containerRef, targetRef];
+}
+//# sourceMappingURL=useComboboxPositioning.js.map

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

@@ -0,0 +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';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\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 } = props;\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: [],\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useComboboxPositioning","props","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","fallbackPositions","matchTargetSize","targetRef","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAI1F,OAAO,SAASC,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,iBAAiB;IACjB,MAAME,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCC,mBAAmB,EAAE;QACrBC,iBAAiB;QACjB,GAAGZ,4BAA4BI,YAAY;IAC7C;IAEA,MAAM,EAAES,SAAS,EAAEC,YAAY,EAAE,GAAGb,eAAeI;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}

package/lib/components/utils/useOptionCollection.js

@@ -0,0 +1,39 @@
+// Brought from Fluent UI
+import * as React from 'react';
+/**
+ * A hook for managing a collection of child Options
+ */
+export const useOptionCollection = () => {
+  const optionsById = React.useRef(new Map());
+  const collectionAPI = React.useMemo(() => {
+    const getCount = () => optionsById.current.size;
+    // index searches are no longer used
+    const getOptionById = id => {
+      return optionsById.current.get(id);
+    };
+    const getOptionsMatchingValue = matcher => {
+      const matches = [];
+      for (const option of optionsById.current.values()) {
+        if (matcher(option.value)) {
+          matches.push(option);
+        }
+      }
+      return matches;
+    };
+    return {
+      getCount,
+      getOptionById,
+      getOptionsMatchingValue
+    };
+  }, []);
+  const registerOption = React.useCallback(option => {
+    optionsById.current.set(option.id, option);
+    return () => optionsById.current.delete(option.id);
+  }, []);
+  return {
+    ...collectionAPI,
+    options: Array.from(optionsById.current.values()),
+    registerOption
+  };
+};
+//# sourceMappingURL=useOptionCollection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const optionsById = React.useRef(new Map<string, OptionValue>());\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => optionsById.current.size;\n\n    // index searches are no longer used\n\n    const getOptionById = (id: string) => {\n      return optionsById.current.get(id);\n    };\n\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      const matches: OptionValue[] = [];\n      for (const option of optionsById.current.values()) {\n        if (matcher(option.value)) {\n          matches.push(option);\n        }\n      }\n\n      return matches;\n    };\n\n    return {\n      getCount,\n      getOptionById,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue) => {\n    optionsById.current.set(option.id, option);\n\n    return () => optionsById.current.delete(option.id);\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: Array.from(optionsById.current.values()),\n    registerOption,\n  };\n};\n"],"names":["React","useOptionCollection","optionsById","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionById","id","get","getOptionsMatchingValue","matcher","matches","option","values","value","push","registerOption","useCallback","set","delete","options","Array","from"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,cAAcF,MAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,MAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QAEpC,MAAMC,gBAAgB,CAACC;YACrB,OAAOT,YAAYM,OAAO,CAACI,GAAG,CAACD;QACjC;QAEA,MAAME,0BAA0B,CAACC;YAC/B,MAAMC,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUd,YAAYM,OAAO,CAACS,MAAM,GAAI;gBACjD,IAAIH,QAAQE,OAAOE,KAAK,GAAG;oBACzBH,QAAQI,IAAI,CAACH;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLR;YACAG;YACAG;QACF;IACF,GAAG,EAAE;IAEL,MAAMO,iBAAiBpB,MAAMqB,WAAW,CAAC,CAACL;QACxCd,YAAYM,OAAO,CAACc,GAAG,CAACN,OAAOL,EAAE,EAAEK;QAEnC,OAAO,IAAMd,YAAYM,OAAO,CAACe,MAAM,CAACP,OAAOL,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGN,aAAa;QAChBmB,SAASC,MAAMC,IAAI,CAACxB,YAAYM,OAAO,CAACS,MAAM;QAC9CG;IACF;AACF,EAAE"}

package/lib/components/utils/usePromptListboxFunctionality.js

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

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

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

package/lib/components/utils/useSelection.js

@@ -0,0 +1,54 @@
+// Brought from Fluent UI
+import { useCallback } from 'react';
+import { useControllableState } from '@fluentui/react-utilities';
+export const useSelection = props => {
+  const {
+    defaultSelectedOptions,
+    multiselect,
+    onOptionSelect
+  } = props;
+  const [selectedOptions, setSelectedOptions] = useControllableState({
+    state: props.selectedOptions,
+    defaultState: defaultSelectedOptions,
+    initialState: []
+  });
+  const selectOption = useCallback((event, option) => {
+    // if the option is disabled, do nothing
+    if (option.disabled) {
+      return;
+    }
+    // for single-select, always return the selected option
+    let newSelection = [option.value];
+    // toggle selected state of the option for multiselect
+    if (multiselect) {
+      const selectedIndex = selectedOptions.findIndex(o => o === option.value);
+      if (selectedIndex > -1) {
+        // deselect option
+        newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
+      } else {
+        // select option
+        newSelection = [...selectedOptions, option.value];
+      }
+    }
+    setSelectedOptions(newSelection);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
+      optionValue: option.value,
+      optionText: option.text,
+      selectedOptions: newSelection
+    });
+  }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
+  const clearSelection = event => {
+    setSelectedOptions([]);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
+      optionValue: undefined,
+      optionText: undefined,
+      selectedOptions: []
+    });
+  };
+  return {
+    clearSelection,
+    selectOption,
+    selectedOptions
+  };
+};
+//# sourceMappingURL=useSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useSelection.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { OptionValue } from './OptionCollection.types';\nimport type { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,WAAW,QAAQ,QAAQ;AACpC,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,YACnB,CAACa,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIZ,aAAa;YACf,MAAMa,gBAAgBX,gBAAgBY,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIT,gBAAgBc,KAAK,CAAC,GAAGH;uBAAmBX,gBAAgBc,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIT;oBAAiBO,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAT,mBAAmBQ;QACnBV,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEjB,iBAAiBS;QAAa;IAC9G,GACA;QAACV;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMiB,iBAAiB,CAACZ;QACtBL,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWnB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEkB;QAAgBb;QAAcL;IAAgB;AACzD,EAAE"}

package/lib/components/utils/useTriggerKeyDown.js

@@ -0,0 +1,129 @@
+/**
+ * Note, this is mainly brought from Fluent UI, only removed the closing and
+ * opening logic since that's not needed for this use case and added the bluring
+ * functionality.
+ */import * as React from 'react';
+import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey } from './dropdownKeyActions';
+export function useTriggerKeydown(options) {
+  const {
+    activeDescendantController,
+    getOptionById,
+    selectOption,
+    multiselect,
+    open,
+    isInLastPosition,
+    onBlur
+  } = options;
+  const getActiveOption = React.useCallback(() => {
+    const activeOptionId = activeDescendantController.active();
+    return activeOptionId ? getOptionById(activeOptionId) : undefined;
+  }, [activeDescendantController, getOptionById]);
+  const first = () => {
+    activeDescendantController.first();
+  };
+  const last = () => {
+    activeDescendantController.last();
+  };
+  const blur = () => {
+    activeDescendantController.blur();
+    onBlur();
+  };
+  const next = activeOption => {
+    if (activeOption) {
+      activeDescendantController.next();
+    } else {
+      activeDescendantController.first();
+    }
+  };
+  const previous = activeOption => {
+    if (activeOption) {
+      activeDescendantController.prev();
+    } else {
+      activeDescendantController.first();
+    }
+  };
+  const pageUp = () => {
+    for (let i = 0; i < 10; i++) {
+      activeDescendantController.prev();
+    }
+  };
+  const pageDown = () => {
+    for (let i = 0; i < 10; i++) {
+      activeDescendantController.next();
+    }
+  };
+  const setKeyboardNavigation = useSetKeyboardNavigation();
+  return useEventCallback(e => {
+    const action = getDropdownActionFromKey(e, {
+      open,
+      multiselect,
+      isInLastPosition
+    });
+    const activeOption = getActiveOption();
+    const firstOption = activeDescendantController.first({
+      passive: true
+    });
+    switch (action) {
+      case 'Last':
+      case 'First':
+      case 'PageDown':
+      case 'PageUp':
+      case 'CloseSelect':
+      case 'Select':
+        e.preventDefault();
+        break;
+      case 'Previous':
+        // when active option is the first option and the action was "Previous",
+        // this means we were in the first option and we are "leaving" the listbox
+        if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.id) === firstOption) {
+          blur();
+          e.preventDefault();
+        } else if (activeOption) {
+          e.preventDefault();
+        }
+        break;
+      case 'Next':
+        e.preventDefault();
+        break;
+    }
+    setKeyboardNavigation(true);
+    switch (action) {
+      case 'First':
+        first();
+        break;
+      case 'Last':
+        last();
+        break;
+      case 'Next':
+        next(activeOption);
+        break;
+      case 'Previous':
+        if (activeOption && activeOption.id !== firstOption) {
+          previous(activeOption);
+        } else {
+          blur();
+        }
+        break;
+      case 'PageDown':
+        pageDown();
+        break;
+      case 'PageUp':
+        pageUp();
+        break;
+      case 'CloseSelect':
+        if (!multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled)) {
+          blur();
+        }
+      // fallthrough
+      case 'Select':
+        activeOption && selectOption(e, activeOption);
+        break;
+      case 'Tab':
+        !multiselect && activeOption && selectOption(e, activeOption);
+        break;
+    }
+  });
+}
+//# sourceMappingURL=useTriggerKeyDown.js.map

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

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

package/lib/index.js

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

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n  PromptListbox,\n  promptListboxClassNames,\n  renderPromptListbox_unstable,\n  usePromptListboxStyles_unstable,\n  usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData,\n  ProcessedPromptListboxProps,\n  UsePromptListboxFunctionality,\n  UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { TextCursorPositionPluginProps } from './plugins/TextCursorPositionPlugin';\nexport { TextCursorPositionPlugin } from './plugins/TextCursorPositionPlugin';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","TextCursorPositionPlugin"],"rangeMappings":";;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,mDAAmD;AASjG,SAASC,wBAAwB,QAAQ,qCAAqC"}

package/lib/plugins/TextCursorPositionPlugin.js

@@ -0,0 +1,44 @@
+import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';
+import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, $getSelection, useLexicalComposerContext, $getLeafNodes, $getRoot, $isRangeSelection, mergeRegister } from '@fluentui-copilot/react-text-editor';
+import * as React from 'react';
+export const TextCursorPositionPlugin = ({
+  setIsInLastPosition
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const keypressHandler = _ev => {
+    const root = $getRoot();
+    const leafNodes = $getLeafNodes(root);
+    const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];
+    const selection = $getSelection();
+    if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {
+      setIsInLastPosition(false);
+      return false;
+    }
+    const selectionNodes = selection.getNodes();
+    // if we don't have a lead node, then we don't have any nodes, so we are in the last position
+    if (selectionNodes.length === 0 || !lastLeafNode) {
+      setIsInLastPosition(true);
+      return false;
+    }
+    const lastSelectionNode = selectionNodes[selectionNodes.length - 1];
+    // if the selection node is a sentinel and it matches the sentinel at the end
+    if ($isSentinelNode(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {
+      setIsInLastPosition(true);
+      return false;
+    } else if ($isSentinelNode(lastSelectionNode.getNextSibling()) && selection.focus.offset === lastSelectionNode.getTextContentSize()) {
+      setIsInLastPosition(true);
+      return false;
+    }
+    setIsInLastPosition(false);
+    return false;
+  };
+  React.useEffect(() => {
+    return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(KEY_ARROW_UP_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL));
+    // We are disabling exhaustive-deps because we only want to register the command once on mount and the
+    // the teardown function when unmounting
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+};
+//# sourceMappingURL=TextCursorPositionPlugin.js.map

package/lib/plugins/TextCursorPositionPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TextCursorPositionPlugin.ts"],"sourcesContent":["import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport {\n  COMMAND_PRIORITY_CRITICAL,\n  KEY_ARROW_DOWN_COMMAND,\n  KEY_ARROW_UP_COMMAND,\n  $getSelection,\n  useLexicalComposerContext,\n  $getLeafNodes,\n  $getRoot,\n  $isRangeSelection,\n  mergeRegister,\n} from '@fluentui-copilot/react-text-editor';\nimport * as React from 'react';\n\nexport type TextCursorPositionPluginProps = {\n  setIsInLastPosition: (isInLastPosition: boolean) => void;\n};\n\nexport const TextCursorPositionPlugin: React.FunctionComponent<TextCursorPositionPluginProps> = ({\n  setIsInLastPosition,\n}) => {\n  const [editor] = useLexicalComposerContext();\n\n  const keypressHandler = (_ev: KeyboardEvent) => {\n    const root = $getRoot();\n    const leafNodes = $getLeafNodes(root);\n    const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];\n    const selection = $getSelection();\n    if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {\n      setIsInLastPosition(false);\n      return false;\n    }\n\n    const selectionNodes = selection.getNodes();\n    // if we don't have a lead node, then we don't have any nodes, so we are in the last position\n    if (selectionNodes.length === 0 || !lastLeafNode) {\n      setIsInLastPosition(true);\n      return false;\n    }\n    const lastSelectionNode = selectionNodes[selectionNodes.length - 1];\n\n    // if the selection node is a sentinel and it matches the sentinel at the end\n    if ($isSentinelNode(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {\n      setIsInLastPosition(true);\n      return false;\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(lastSelectionNode.getNextSibling()) &&\n      selection.focus.offset === lastSelectionNode.getTextContentSize()\n    ) {\n      setIsInLastPosition(true);\n      return false;\n    }\n\n    setIsInLastPosition(false);\n    return false;\n  };\n\n  React.useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(KEY_ARROW_DOWN_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n      editor.registerCommand(KEY_ARROW_UP_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n    );\n    // We are disabling exhaustive-deps because we only want to register the command once on mount and the\n    // the teardown function when unmounting\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return null;\n};\n"],"names":["$isSentinelNode","COMMAND_PRIORITY_CRITICAL","KEY_ARROW_DOWN_COMMAND","KEY_ARROW_UP_COMMAND","$getSelection","useLexicalComposerContext","$getLeafNodes","$getRoot","$isRangeSelection","mergeRegister","React","TextCursorPositionPlugin","setIsInLastPosition","editor","keypressHandler","_ev","root","leafNodes","lastLeafNode","length","undefined","selection","isCollapsed","selectionNodes","getNodes","lastSelectionNode","is","getNextSibling","focus","offset","getTextContentSize","useEffect","registerCommand"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,uCAAuC;AACvE,SACEC,yBAAyB,EACzBC,sBAAsB,EACtBC,oBAAoB,EACpBC,aAAa,EACbC,yBAAyB,EACzBC,aAAa,EACbC,QAAQ,EACRC,iBAAiB,EACjBC,aAAa,QACR,sCAAsC;AAC7C,YAAYC,WAAW,QAAQ;AAM/B,OAAO,MAAMC,2BAAmF,CAAC,EAC/FC,mBAAmB,EACpB;IACC,MAAM,CAACC,OAAO,GAAGR;IAEjB,MAAMS,kBAAkB,CAACC;QACvB,MAAMC,OAAOT;QACb,MAAMU,YAAYX,cAAcU;QAChC,MAAME,eAAeD,UAAUE,MAAM,KAAK,IAAIC,YAAYH,SAAS,CAACA,UAAUE,MAAM,GAAG,EAAE;QACzF,MAAME,YAAYjB;QAClB,IAAIiB,cAAc,QAAQ,CAACb,kBAAkBa,cAAc,CAACA,UAAUC,WAAW,IAAI;YACnFV,oBAAoB;YACpB,OAAO;QACT;QAEA,MAAMW,iBAAiBF,UAAUG,QAAQ;QACzC,6FAA6F;QAC7F,IAAID,eAAeJ,MAAM,KAAK,KAAK,CAACD,cAAc;YAChDN,oBAAoB;YACpB,OAAO;QACT;QACA,MAAMa,oBAAoBF,cAAc,CAACA,eAAeJ,MAAM,GAAG,EAAE;QAEnE,6EAA6E;QAC7E,IAAInB,gBAAgByB,sBAAsBA,kBAAkBC,EAAE,CAACR,eAAe;YAC5EN,oBAAoB;YACpB,OAAO;QACT,OAGK,IACHZ,gBAAgByB,kBAAkBE,cAAc,OAChDN,UAAUO,KAAK,CAACC,MAAM,KAAKJ,kBAAkBK,kBAAkB,IAC/D;YACAlB,oBAAoB;YACpB,OAAO;QACT;QAEAA,oBAAoB;QACpB,OAAO;IACT;IAEAF,MAAMqB,SAAS,CAAC;QACd,OAAOtB,cACLI,OAAOmB,eAAe,CAAC9B,wBAAwBY,iBAAiBb,4BAChEY,OAAOmB,eAAe,CAAC7B,sBAAsBW,iBAAiBb;IAEhE,sGAAsG;IACtG,wCAAwC;IACxC,yDAAyD;IACzD,uDAAuD;IACzD,GAAG,EAAE;IAEL,OAAO;AACT,EAAE"}

package/lib-commonjs/PromptListbox.js

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

package/lib-commonjs/PromptListbox.js.map

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PromptListbox", {
+    enumerable: true,
+    get: function() {
+        return PromptListbox;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePromptListbox = require("./usePromptListbox");
+const _renderPromptListbox = require("./renderPromptListbox");
+const _usePromptListboxStylesstyles = require("./usePromptListboxStyles.styles");
+const _usePromptListboxContextValues = require("./usePromptListboxContextValues");
+const PromptListbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePromptListbox.usePromptListbox_unstable)(props, ref);
+    const contextValues = (0, _usePromptListboxContextValues.usePromptListboxContextValues)(state);
+    (0, _usePromptListboxStylesstyles.usePromptListboxStyles_unstable)(state);
+    return (0, _renderPromptListbox.renderPromptListbox_unstable)(state, contextValues);
+});
+PromptListbox.displayName = 'PromptListbox'; //# sourceMappingURL=PromptListbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptListbox_unstable } from './usePromptListbox';\nimport { renderPromptListbox_unstable } from './renderPromptListbox';\nimport { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';\nimport { usePromptListboxContextValues } from './usePromptListboxContextValues';\nimport type { PromptListboxProps } from './PromptListbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// PromptListbox component - TODO: add more docs\nexport const PromptListbox: ForwardRefComponent<PromptListboxProps> = React.forwardRef((props, ref) => {\n  const state = usePromptListbox_unstable(props, ref);\n  const contextValues = usePromptListboxContextValues(state);\n\n  usePromptListboxStyles_unstable(state);\n  return renderPromptListbox_unstable(state, contextValues);\n});\n\nPromptListbox.displayName = 'PromptListbox';\n"],"names":["PromptListbox","React","forwardRef","props","state","usePromptListbox_unstable","contextValues","usePromptListboxContextValues","usePromptListboxStyles_unstable","renderPromptListbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;kCACmB;qCACG;8CACG;+CACF;AAKvC,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;UACxCG,gBAAMA,IAAAA,4DAAgBC,EAAAA;qEAEtBC,EAAAA;WACAC,IAAAA,iDAAOA,EAAAA,OAA6BL;AACtC;AAEAJ,cAAcU,WAAW,GAAG"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=PromptListbox.types.js.map