@fluentui-copilot/react-prompt-listbox 0.4.1 → 0.5.0

package/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui-copilot/react-prompt-listbox",
   "entries": [
+    {
+      "date": "Wed, 29 Jan 2025 01:36:32 GMT",
+      "tag": "@fluentui-copilot/react-prompt-listbox_v0.5.0",
+      "version": "0.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "estebanmu@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-listbox",
+            "commit": "d1fe11212018f106bfdcb4ad94c57c5fd7e93326",
+            "comment": "feat: Deprecate old promptlistbox resources and PromptOption, rename old promptlistbox hooks and export new inputlistbox based hooks."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 09 Jan 2025 01:15:37 GMT",
       "tag": "@fluentui-copilot/react-prompt-listbox_v0.4.0",

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui-copilot/react-prompt-listbox
 
-This log was last generated on Thu, 09 Jan 2025 01:15:37 GMT and should not be manually modified.
+This log was last generated on Wed, 29 Jan 2025 01:36:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.0)
+
+Wed, 29 Jan 2025 01:36:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.4.0..@fluentui-copilot/react-prompt-listbox_v0.5.0)
+
+### Minor changes
+
+- feat: Deprecate old promptlistbox resources and PromptOption, rename old promptlistbox hooks and export new inputlistbox based hooks. ([PR #2490](https://github.com/microsoft/fluentai/pull/2490) by estebanmu@microsoft.com)
+
 ## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.4.0)
 
 Thu, 09 Jan 2025 01:15:37 GMT 

package/dist/index.d.ts

@@ -10,36 +10,70 @@ import type { EditorInputProps } from '@fluentui-copilot/react-editor-input';
 import type { EventData } from '@fluentui/react-utilities';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { InputListboxProps } from '@fluentui-copilot/react-input-listbox';
 import type { Listbox } from '@fluentui/react-components';
 import type { ListboxContextValue } from '@fluentui/react-combobox';
 import type { ListboxContextValue as ListboxContextValue_2 } from '@fluentui/react-components';
-import type { OptionProps } from '@fluentui/react-components';
-import type { OptionState } from '@fluentui/react-components';
+import { Option as Option_2 } from '@fluentui-copilot/react-input-listbox';
+import { optionClassNames } from '@fluentui-copilot/react-input-listbox';
+import { OptionOnSelectData } from '@fluentui-copilot/react-input-listbox';
+import { OptionProps } from '@fluentui-copilot/react-input-listbox';
+import type { OptionProps as OptionProps_2 } from '@fluentui/react-components';
+import { OptionSlots } from '@fluentui-copilot/react-input-listbox';
+import { OptionState } from '@fluentui-copilot/react-input-listbox';
+import type { OptionState as OptionState_2 } from '@fluentui/react-components';
+import { OptionValue } from '@fluentui-copilot/react-input-listbox';
+import { OverrideActionHandler } from '@fluentui-copilot/react-input-listbox';
+import { OverrideActionHandlerOptions } from '@fluentui-copilot/react-input-listbox';
+import { OverrideActionHandlerResult } from '@fluentui-copilot/react-input-listbox';
 import type { PortalProps } from '@fluentui/react-components';
-import type { PositioningShorthand } from '@fluentui/react-components';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningShorthand as PositioningShorthand_2 } from '@fluentui/react-components';
 import * as React_2 from 'react';
 import type { default as React_3 } from 'react';
+import { renderOption_unstable } from '@fluentui-copilot/react-input-listbox';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
+import type { UseInputListboxFunctionalityParams } from '@fluentui-copilot/react-input-listbox';
+import { useOption_unstable } from '@fluentui-copilot/react-input-listbox';
+import { useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
 
-export declare type OnOpenChangeData = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
+export declare type OnOpenChangeData = (EventData<'click', React_2.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_2.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_2.KeyboardEvent<HTMLSpanElement>>) & {
     open: boolean;
 };
 
+export declare type OnOpenChangeDataDeprecated = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
+    open: boolean;
+};
+
+export { Option_2 as Option }
+
+export { optionClassNames }
+
 declare type OptionCollectionState = {
     /** The total number of options in the collection. */
     getCount: () => number;
     /** Returns the option data by key. */
-    getOptionById(id: string): OptionValue | undefined;
+    getOptionById(id: string): OptionValue_2 | undefined;
     /** Returns an array of options filtered by a value matching function against the option's value string. */
-    getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
+    getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue_2[];
     /** The unordered option data. */
-    options: OptionValue[];
+    options: OptionValue_2[];
     /** A function that child options call to register their values. Returns a function to unregister the option. */
-    registerOption: (option: OptionValue, element: HTMLElement) => () => void;
+    registerOption: (option: OptionValue_2, element: HTMLElement) => () => void;
 };
 
-declare type OptionValue = {
+export { OptionOnSelectData }
+
+export { OptionProps }
+
+export { OptionSlots }
+
+export { OptionState }
+
+export { OptionValue }
+
+declare type OptionValue_2 = {
     /** The disabled state of the option. */
     disabled?: boolean;
     /** The `id` attribute of the option. */
@@ -50,10 +84,17 @@ declare type OptionValue = {
     value: string;
 };
 
-export declare type ProcessedPromptListboxProps = Partial<Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>> & {
+export { OverrideActionHandler }
+
+export { OverrideActionHandlerOptions }
+
+export { OverrideActionHandlerResult }
+
+export declare type ProcessedPromptListboxPropsDeprecated = Partial<Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>> & {
     ref?: React_3.MutableRefObject<any>;
 };
 
+/**@deprecated - use InputListbox instead */
 export declare const PromptListbox: ForwardRefComponent<PromptListboxProps>;
 
 export declare const promptListboxClassNames: SlotClassNames<PromptListboxSlots>;
@@ -92,6 +133,7 @@ export declare type PromptListboxSlots = {
  */
 export declare type PromptListboxState = ComponentState<PromptListboxSlots> & PromptListboxContextState & Required<Pick<PromptListboxProps, 'open' | 'inlinePopup'>> & Pick<PromptListboxProps, 'mountNode'>;
 
+/**@deprecated - use Option instead */
 export declare const PromptOption: ForwardRefComponent<PromptOptionProps>;
 
 export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
@@ -99,7 +141,7 @@ export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
 /**
  * PromptOption Props
  */
-export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps, 'disabled' | 'value'> & ({
+export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps_2, 'disabled' | 'value'> & ({
     /**
      * An optional override the string value of the PromptOption's display text,
      * defaulting to the PromptOption's child content.
@@ -125,7 +167,9 @@ export declare type PromptOptionSlots = {
 /**
  * State used in rendering PromptOption
  */
-export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;
+export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState_2, 'disabled' | 'selected'>;
+
+export { renderOption_unstable }
 
 /**
  * Render the final JSX of PromptListbox
@@ -144,9 +188,13 @@ declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.Keyboa
 declare type SelectionState = {
     clearSelection: (event: SelectionEvents) => void;
     selectedOptions: string[];
-    selectOption: (event: SelectionEvents, option: OptionValue) => void;
+    selectOption: (event: SelectionEvents, option: OptionValue_2) => void;
 };
 
+export { useOption_unstable }
+
+export { useOptionStyles_unstable }
+
 /**
  * Create the state required to render PromptListbox.
  *
@@ -158,7 +206,41 @@ declare type SelectionState = {
  */
 export declare const usePromptListbox_unstable: (props: PromptListboxProps, ref: React_2.Ref<HTMLDivElement>) => PromptListboxState;
 
-export declare type UsePromptListboxFunctionality = {
+export declare type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {
+    /**
+     * Component to be rendered in the Input component. This should be passed to the listbox prop.
+     */
+    promptListbox: JSX.Element;
+    /**
+     * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to
+     * work correctly.
+     */
+    triggerProps: {
+        ref: React_2.RefObject<HTMLSpanElement>;
+        /**
+         * Whether the listbox is being used to go through options or the user is currently typing.
+         */
+        isInSelectionMode: boolean;
+    } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;
+    /**
+     * Ref used to point which element the listbox should be anchored to. Most use cases
+     * will provide this prop to the PromptInput's EditorInput (since this is the root slot,
+     * this is provided directly to the component and not the slot).
+     *
+     * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs
+     * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`
+     */
+    containerRef: React_2.RefObject<ContainerElementType>;
+    /**
+     * Plugin used to tell where the cursor is in the EditorInput, this is important for the
+     * keyboard behavior. This should be passed as children in the PromptInput.
+     */
+    cursorPositionPlugin: JSX.Element;
+};
+
+export declare function usePromptListboxFunctionality<TriggerElementType extends HTMLElement = HTMLSpanElement, ContainerElementType extends HTMLElement = HTMLDivElement>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType>;
+
+export declare type UsePromptListboxFunctionalityDeprecated = {
     /**
      * Component to be rendered in the Input component. This should be passed to the listbox prop.
      */
@@ -190,13 +272,57 @@ export declare type UsePromptListboxFunctionality = {
     cursorPositionPlugin: JSX.Element;
 };
 
-export declare function usePromptListboxFunctionality(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality;
+/**
+ * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
+ */
+export declare function usePromptListboxFunctionalityDeprecated(params: UsePromptListboxFunctionalityParamsDeprecated): UsePromptListboxFunctionalityDeprecated;
 
-export declare type UsePromptListboxFunctionalityParams = {
+export declare type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: EventHandler<OnOpenChangeData>;
     positioning?: PositioningShorthand;
+    /**
+     * Whether the listbox's width should take all the available space or only
+     * the required space.
+     *
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Props to be passed to the InputListbox component
+     */
+    listboxProps?: Partial<InputListboxProps> & {
+        ref?: React_2.RefObject<HTMLDivElement>;
+    };
+    /**
+     * Whether to allow reaching the listbox options by arrowing up at the start of the input.
+     * Note, this prop is meant to be used with the following positioning props:
+     * ```ts
+     *  usePromptListboxFunctionality({
+     *    positioning: {
+     *      position: 'above',
+     *      fallbackPositions: ['above']
+     *    }
+     *  });
+     * ```
+     * This is useful when using PromptListbox with other components such as ChatInput since
+     * the input will always stay at the bottom therefore the listbox would always get cut.
+     *
+     * @default false
+     */
+    allowArrowUpNavigation?: boolean;
+    /**
+     * Whether to render the listbox inline or use a portal.
+     */
+    inline?: boolean;
+} & Pick<PortalProps, 'mountNode'>;
+
+export declare type UsePromptListboxFunctionalityParamsDeprecated = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: EventHandler<OnOpenChangeDataDeprecated>;
+    positioning?: PositioningShorthand_2;
     /**
      * Callback to call when the selection mode (selecting an action vs typing) changes.
      */
@@ -204,7 +330,7 @@ export declare type UsePromptListboxFunctionalityParams = {
     /**
      * Props to be passed to the ListboxComponent
      */
-    listboxProps?: ProcessedPromptListboxProps;
+    listboxProps?: ProcessedPromptListboxPropsDeprecated;
     /**
      * Whether the listbox's width should take all the available space or only
      * the required space.

package/lib/components/PromptListbox/PromptListbox.js

@@ -3,7 +3,7 @@ import { usePromptListbox_unstable } from './usePromptListbox';
 import { renderPromptListbox_unstable } from './renderPromptListbox';
 import { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';
 import { usePromptListboxContextValues } from './usePromptListboxContextValues';
-// PromptListbox component - TODO: add more docs
+/**@deprecated - use InputListbox instead */
 export const PromptListbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = usePromptListbox_unstable(props, ref);
   const contextValues = usePromptListboxContextValues(state);

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

@@ -1 +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":["React","usePromptListbox_unstable","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListboxContextValues","PromptListbox","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,6BAA6B,QAAQ,kCAAkC;AAIhF,gDAAgD;AAChD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBN,8BAA8BK;IAEpDN,gCAAgCM;IAChC,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"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/**@deprecated - use InputListbox instead */\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":["React","usePromptListbox_unstable","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListboxContextValues","PromptListbox","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,6BAA6B,QAAQ,kCAAkC;AAIhF,0CAA0C,GAC1C,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBN,8BAA8BK;IAEpDN,gCAAgCM;IAChC,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

package/lib/components/PromptOption/PromptOption.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { usePromptOption_unstable } from './usePromptOption';
 import { renderPromptOption_unstable } from './renderPromptOption';
 import { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';
-// PromptOption component - TODO: add more docs
+/**@deprecated - use Option instead */
 export const PromptOption = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = usePromptOption_unstable(props, ref);
   usePromptOptionStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// PromptOption component - TODO: add more docs\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n  const state = usePromptOption_unstable(props, ref);\n\n  usePromptOptionStyles_unstable(state);\n  return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["React","usePromptOption_unstable","renderPromptOption_unstable","usePromptOptionStyles_unstable","PromptOption","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,+CAA+C;AAC/C,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**@deprecated - use Option instead */\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n  const state = usePromptOption_unstable(props, ref);\n\n  usePromptOptionStyles_unstable(state);\n  return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["React","usePromptOption_unstable","renderPromptOption_unstable","usePromptOptionStyles_unstable","PromptOption","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,oCAAoC,GACpC,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/utils/useListboxPositioning.js

@@ -20,9 +20,9 @@ export function useListboxPositioning(props) {
     ...resolvePositioningShorthand(positioning)
   };
   const {
-    targetRef,
-    containerRef
+    containerRef: listboxRef,
+    targetRef: anchorRef
   } = usePositioning(popperOptions);
-  return [containerRef, targetRef];
+  return [listboxRef, anchorRef];
 }
 //# sourceMappingURL=useListboxPositioning.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useListboxPositioning.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 useListboxPositioning(\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":["resolvePositioningShorthand","usePositioning","useListboxPositioning","props","positioning","fluid","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","undefined","autoSize","targetRef","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAM1F,OAAO,SAASC,sBACdC,KAAuF;IAOvF,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAE,GAAGF;IAE/B,MAAMG,oBAAiD;QAAC;KAAQ;IAEhE,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN,mBAAmBA;QACnBO,iBAAiBR,QAAS,UAAoBS;QAC9CC,UAAU;QACV,GAAGf,4BAA4BI,YAAY;IAC7C;IAEA,MAAM,EAAEY,SAAS,EAAEC,YAAY,EAAE,GAAGhB,eAAeM;IAEnD,OAAO;QAACU;QAAcD;KAAU;AAClC"}
+{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useListboxPositioning<AnchorElementType extends HTMLElement = HTMLSpanElement>(\n  props: Pick<UsePromptListboxFunctionalityParams, 'fluid' | 'positioning'>,\n): [listboxRef: React.RefObject<HTMLSpanElement>, anchorRef: React.RefObject<AnchorElementType>] {\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 { containerRef: listboxRef, targetRef: anchorRef } = usePositioning(popperOptions);\n\n  return [listboxRef, anchorRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useListboxPositioning","props","positioning","fluid","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","undefined","autoSize","containerRef","listboxRef","targetRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAK1F,OAAO,SAASC,sBACdC,KAAyE;IAEzE,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAE,GAAGF;IAE/B,MAAMG,oBAAiD;QAAC;KAAQ;IAEhE,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN,mBAAmBA;QACnBO,iBAAiBR,QAAS,UAAoBS;QAC9CC,UAAU;QACV,GAAGf,4BAA4BI,YAAY;IAC7C;IAEA,MAAM,EAAEY,cAAcC,UAAU,EAAEC,WAAWC,SAAS,EAAE,GAAGlB,eAAeM;IAE1E,OAAO;QAACU;QAAYE;KAAU;AAChC"}

package/lib/components/utils/usePromptListboxFunctionality.js

@@ -9,6 +9,9 @@ import { useTriggerKeydown } from './useTriggerKeyDown';
 import { PromptListbox } from '../PromptListbox';
 import { promptOptionClassNames } from '../PromptOption';
 import { PromptListboxMotion } from '../motion/PromptListboxMotion';
+/**
+ * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
+ */
 export function usePromptListboxFunctionality(params) {
   const {
     positioning,

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 { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const {\n    positioning,\n    onOpenChange,\n    onSelectionModeChange,\n    listboxProps,\n    fluid = false,\n    allowArrowUpNavigation = false,\n  } = 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 setSelectionMode = React.useCallback(\n    (selectionMode: boolean) => {\n      if (selectionMode === false) {\n        activeDescendantController.blur();\n        setHideActiveDescendant(true);\n      } else {\n        setHideActiveDescendant(false);\n      }\n\n      setIsInSelectionMode(selectionMode);\n      onSelectionModeChange?.(selectionMode);\n    },\n    [activeDescendantController, onSelectionModeChange],\n  );\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n    setSelectionMode(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 = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange, setSelectionMode]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    allowArrowUpNavigation,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    cursorPosition,\n    open,\n    multiselect: false,\n    isInSelectionMode,\n    setSelectionMode,\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  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] = useListboxPositioning({ positioning, fluid });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListboxMotion visible={open}>\n        <PromptListbox\n          open={open}\n          {...listboxProps}\n          {...optionCollection}\n          {...selectionState}\n          ref={listboxMergedRef}\n          activeDescendantController={activeDescendantController}\n        />\n      </PromptListboxMotion>\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,\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["React","useActiveDescendant","useControllableState","useMergedRefs","CursorPositionPlugin","useOptionCollection","useSelection","useListboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","PromptListboxMotion","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","allowArrowUpNavigation","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","setSelectionMode","useCallback","selectionMode","blur","setHideActiveDescendant","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","onKeyDown","multiselect","hideActiveDescendant","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","visible","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 { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\n/**\n * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead\n */\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const {\n    positioning,\n    onOpenChange,\n    onSelectionModeChange,\n    listboxProps,\n    fluid = false,\n    allowArrowUpNavigation = false,\n  } = 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 setSelectionMode = React.useCallback(\n    (selectionMode: boolean) => {\n      if (selectionMode === false) {\n        activeDescendantController.blur();\n        setHideActiveDescendant(true);\n      } else {\n        setHideActiveDescendant(false);\n      }\n\n      setIsInSelectionMode(selectionMode);\n      onSelectionModeChange?.(selectionMode);\n    },\n    [activeDescendantController, onSelectionModeChange],\n  );\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n    setSelectionMode(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 = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange, setSelectionMode]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    allowArrowUpNavigation,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    cursorPosition,\n    open,\n    multiselect: false,\n    isInSelectionMode,\n    setSelectionMode,\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  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] = useListboxPositioning({ positioning, fluid });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListboxMotion visible={open}>\n        <PromptListbox\n          open={open}\n          {...listboxProps}\n          {...optionCollection}\n          {...selectionState}\n          ref={listboxMergedRef}\n          activeDescendantController={activeDescendantController}\n        />\n      </PromptListboxMotion>\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,\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["React","useActiveDescendant","useControllableState","useMergedRefs","CursorPositionPlugin","useOptionCollection","useSelection","useListboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","PromptListboxMotion","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","allowArrowUpNavigation","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","setSelectionMode","useCallback","selectionMode","blur","setHideActiveDescendant","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","onKeyDown","multiselect","hideActiveDescendant","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","visible","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/utils/usePromptListboxFunctionalityV2.js

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';
+import { PromptListboxMotion } from '../motion/PromptListboxMotion';
+import { mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
+import { useListboxPositioning } from './useListboxPositioning';
+import { Portal } from '@fluentui/react-components';
+export function usePromptListboxFunctionality(params) {
+  var _params_listboxProps, _params_listboxProps1;
+  const {
+    fluid = false,
+    allowArrowUpNavigation = false
+  } = params;
+  const [open, setOpen] = useControllableState({
+    state: params.open,
+    defaultState: params.defaultOpen,
+    initialState: false
+  });
+  const [cursorPosition, setCursorPosition] = React.useState('end');
+  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
+  const overrideActionHandler = (e, {
+    activeOption,
+    action,
+    activeDescendantController,
+    isInSelectionMode
+  }) => {
+    var _params_overrideActionHandler;
+    const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
+    const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
+    let newAction = undefined;
+    let newIsInSelection = undefined;
+    const firstOption = activeDescendantController.first({
+      passive: true
+    });
+    switch (action) {
+      case 'Next':
+        if (!isInSelectionMode && !atEnd) {
+          newAction = 'Type';
+          newIsInSelection = false;
+        }
+        break;
+      case 'Previous':
+        if (!isInSelectionMode && !atStart) {
+          newAction = 'Type';
+          newIsInSelection = false;
+        } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
+          newAction = 'Type';
+          newIsInSelection = false;
+          e.preventDefault();
+        }
+        break;
+      case 'First':
+      case 'Last':
+      case 'PageDown':
+      case 'PageUp':
+        if (!isInSelectionMode) {
+          newAction = 'Type';
+          newIsInSelection = false;
+        }
+        break;
+    }
+    const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
+      activeOption,
+      action,
+      activeDescendantController,
+      isInSelectionMode
+    });
+    return {
+      action: newAction,
+      isInSelectionMode: newIsInSelection,
+      ...userOverrides
+    };
+  };
+  const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {
+    setIsInSelectionMode(newSelectionMode);
+  });
+  const baseListboxFunctionality = useInputListboxFunctionality({
+    ...params,
+    onSelectionModeChange,
+    overrideActionHandler
+  });
+  const {
+    onBlur: baseOnBlur,
+    onKeyDown: baseOnKeyDown,
+    ref: triggerRef
+  } = baseListboxFunctionality.triggerProps;
+  const onFocus = event => {
+    if (event.target === event.currentTarget) {
+      var _params_onOpenChange;
+      setOpen(true);
+      (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
+        event,
+        type: 'focus',
+        open: true
+      });
+    }
+  };
+  const onBlur = useEventCallback(mergeCallbacks(baseOnBlur, e => {
+    var _params_onOpenChange;
+    setOpen(false);
+    (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
+      event: e,
+      type: 'focus',
+      open: false
+    });
+  }));
+  const [listboxRef, anchorRef] = useListboxPositioning({
+    fluid,
+    positioning: params.positioning
+  });
+  const listboxId = useId('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
+  const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
+    setCursorPosition: setCursorPosition
+  });
+  const innerListbox = /*#__PURE__*/React.createElement(InputListbox, {
+    ...params.listboxProps,
+    ...baseListboxFunctionality.inputListboxProps,
+    id: listboxId,
+    ref: useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
+  });
+  const listbox = /*#__PURE__*/React.createElement(PromptListboxMotion, {
+    visible: open
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-owns": open ? listboxId : undefined
+  }, open && (params.inline ? innerListbox : /*#__PURE__*/React.createElement(Portal, {
+    mountNode: params.mountNode
+  }, innerListbox))));
+  return {
+    promptListbox: listbox,
+    cursorPositionPlugin,
+    triggerProps: {
+      ref: triggerRef,
+      isInSelectionMode,
+      onFocus,
+      onKeyDown: baseOnKeyDown,
+      onBlur
+    },
+    containerRef: anchorRef
+  };
+}
+//# sourceMappingURL=usePromptListboxFunctionalityV2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  InputListboxAction,\n  InputListboxProps,\n  UseInputListboxFunctionalityParams,\n  OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\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\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  positioning?: PositioningShorthand;\n\n  /**\n   * Whether the listbox's width should take all the available space or only\n   * the required space.\n   *\n   * @default false\n   */\n  fluid?: boolean;\n\n  /**\n   * Props to be passed to the InputListbox component\n   */\n  listboxProps?: Partial<InputListboxProps> & {\n    ref?: React.RefObject<HTMLDivElement>;\n  };\n\n  /**\n   * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n   * Note, this prop is meant to be used with the following positioning props:\n   * ```ts\n   *  usePromptListboxFunctionality({\n   *    positioning: {\n   *      position: 'above',\n   *      fallbackPositions: ['above']\n   *    }\n   *  });\n   * ```\n   * This is useful when using PromptListbox with other components such as ChatInput since\n   * the input will always stay at the bottom therefore the listbox would always get cut.\n   *\n   * @default false\n   */\n  allowArrowUpNavigation?: boolean;\n\n  /**\n   * Whether to render the listbox inline or use a portal.\n   */\n  inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\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  /**\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  containerRef: React.RefObject<ContainerElementType>;\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 function usePromptListboxFunctionality<\n  TriggerElementType extends HTMLElement = HTMLSpanElement,\n  ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n  const { fluid = false, allowArrowUpNavigation = false } = params;\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n  const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n\n  const overrideActionHandler: OverrideActionHandler = (\n    e,\n    { activeOption, action, activeDescendantController, isInSelectionMode },\n  ) => {\n    const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n    const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n    let newAction: InputListboxAction | undefined = undefined;\n    let newIsInSelection: boolean | undefined = undefined;\n    const firstOption = activeDescendantController.first({ passive: true });\n\n    switch (action) {\n      case 'Next':\n        if (!isInSelectionMode && !atEnd) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        }\n        break;\n      case 'Previous':\n        if (!isInSelectionMode && !atStart) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        } else if (\n          isInSelectionMode &&\n          !allowArrowUpNavigation &&\n          atEnd &&\n          activeOption !== undefined &&\n          activeOption.id === firstOption\n        ) {\n          newAction = 'Type';\n          newIsInSelection = false;\n          e.preventDefault();\n        }\n        break;\n      case 'First':\n      case 'Last':\n      case 'PageDown':\n      case 'PageUp':\n        if (!isInSelectionMode) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        }\n        break;\n    }\n\n    const userOverrides = params.overrideActionHandler?.(e, {\n      activeOption,\n      action,\n      activeDescendantController,\n      isInSelectionMode,\n    });\n\n    return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n  };\n\n  const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {\n    setIsInSelectionMode(newSelectionMode);\n  });\n  const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n    ...params,\n    onSelectionModeChange,\n    overrideActionHandler,\n  });\n  const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      params.onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const onBlur = useEventCallback(\n    mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n      setOpen(false);\n      params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n    }),\n  );\n\n  const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n    fluid,\n    positioning: params.positioning,\n  });\n\n  const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n  const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n  const innerListbox = (\n    <InputListbox\n      {...params.listboxProps}\n      {...baseListboxFunctionality.inputListboxProps}\n      id={listboxId}\n      ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n    />\n  );\n  const listbox = (\n    <PromptListboxMotion visible={open}>\n      <span aria-owns={open ? listboxId : undefined}>\n        {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n      </span>\n    </PromptListboxMotion>\n  );\n\n  return {\n    promptListbox: listbox,\n    cursorPositionPlugin,\n    triggerProps: {\n      ref: triggerRef,\n      isInSelectionMode,\n      onFocus,\n      onKeyDown: baseOnKeyDown,\n      onBlur,\n    },\n    containerRef: anchorRef,\n  };\n}\n"],"names":["React","InputListbox","useInputListboxFunctionality","PromptListboxMotion","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","CursorPositionPlugin","useListboxPositioning","Portal","usePromptListboxFunctionality","params","fluid","allowArrowUpNavigation","open","setOpen","state","defaultState","defaultOpen","initialState","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","overrideActionHandler","e","activeOption","action","activeDescendantController","atStart","atEnd","newAction","undefined","newIsInSelection","firstOption","first","passive","id","preventDefault","userOverrides","onSelectionModeChange","newSelectionMode","baseListboxFunctionality","onBlur","baseOnBlur","onKeyDown","baseOnKeyDown","ref","triggerRef","triggerProps","onFocus","event","target","currentTarget","onOpenChange","type","listboxRef","anchorRef","positioning","listboxId","listboxProps","cursorPositionPlugin","innerListbox","inputListboxProps","listbox","visible","span","aria-owns","inline","mountNode","promptListbox","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/index.js

@@ -1,4 +1,6 @@
 export { PromptListbox, promptListboxClassNames, renderPromptListbox_unstable, usePromptListboxStyles_unstable, usePromptListbox_unstable } from './PromptListbox';
-export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';
+export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';
+export { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';
 export { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';
+export { Option, optionClassNames, renderOption_unstable, useOption_unstable, useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
 //# 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 { 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"}
+{"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/usePromptListboxFunctionalityV2';\nexport type {\n  OnOpenChangeData,\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData as OnOpenChangeDataDeprecated,\n  ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n  UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n  UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\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\nexport type {\n  OptionProps,\n  OptionSlots,\n  OptionState,\n  OptionValue,\n  OptionOnSelectData,\n  OverrideActionHandler,\n  OverrideActionHandlerOptions,\n  OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOption_unstable,\n  useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable","Option","optionClassNames","renderOption_unstable","useOption_unstable","useOptionStyles_unstable"],"rangeMappings":";;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,qDAAqD;AAOnG,SAASA,iCAAiCC,uCAAuC,QAAQ,mDAAmD;AAS5I,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAYxB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,wBAAwB,QACnB,wCAAwC"}

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

@@ -1 +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"}
+{"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/**@deprecated - use InputListbox instead */\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":["state","usePromptListbox_unstable","props","ref","contextValues","usePromptListboxContextValues","usePromptListboxStyles_unstable","renderPromptListbox_unstable","PromptListbox"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUQA;;;eAAAA;;;;iEAVe;kCACmB;qCACG;8CACG;+CACF;AAM5C,MAAMA,gBAAQC,WAAAA,GAAAA,OAA0BC,UAAOC,CAAAA,CAAAA,OAAAA;UAC/CH,QAAMI,IAAAA,2CAAgBC,EAAAA,OAAAA;UAEtBC,gBAAAA,IAAAA,4DAAgCN,EAAAA;qEACzBO,EAAAA;IACT,OAAGA,IAAAA,iDAAA,EAAAP,OAAAI;AAEHI"}

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

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

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

@@ -28,9 +28,9 @@ function useListboxPositioning(props) {
         autoSize: true,
         ...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
     };
-    const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(popperOptions);
+    const { containerRef: listboxRef, targetRef: anchorRef } = (0, _reactpositioning.usePositioning)(popperOptions);
     return [
-        containerRef,
-        targetRef
+        listboxRef,
+        anchorRef
     ];
 } //# sourceMappingURL=useListboxPositioning.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useListboxPositioning.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 useListboxPositioning(\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":["useListboxPositioning","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,sBACdC,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"}
+{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useListboxPositioning<AnchorElementType extends HTMLElement = HTMLSpanElement>(\n  props: Pick<UsePromptListboxFunctionalityParams, 'fluid' | 'positioning'>,\n): [listboxRef: React.RefObject<HTMLSpanElement>, anchorRef: React.RefObject<AnchorElementType>] {\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 { containerRef: listboxRef, targetRef: anchorRef } = usePositioning(popperOptions);\n\n  return [listboxRef, anchorRef];\n}\n"],"names":["useListboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","fluid","undefined","resolvePositioningShorthand","listboxRef","anchorRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;;;;;+BAOTA;;;eAAAA;;;kCAL4C;AAKrD,SAASA,sBACdC,KAAyE;UAEzE,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,gBAAQY,UAAAA,aAAYC,SAAAA,KAAUC,IAAAA,gCAAA,EAAAZ;IAChC,OAAA;QAAAU;QAAAC;KAAA"}

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 { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const {\n    positioning,\n    onOpenChange,\n    onSelectionModeChange,\n    listboxProps,\n    fluid = false,\n    allowArrowUpNavigation = false,\n  } = 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 setSelectionMode = React.useCallback(\n    (selectionMode: boolean) => {\n      if (selectionMode === false) {\n        activeDescendantController.blur();\n        setHideActiveDescendant(true);\n      } else {\n        setHideActiveDescendant(false);\n      }\n\n      setIsInSelectionMode(selectionMode);\n      onSelectionModeChange?.(selectionMode);\n    },\n    [activeDescendantController, onSelectionModeChange],\n  );\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n    setSelectionMode(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 = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange, setSelectionMode]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    allowArrowUpNavigation,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    cursorPosition,\n    open,\n    multiselect: false,\n    isInSelectionMode,\n    setSelectionMode,\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  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] = useListboxPositioning({ positioning, fluid });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListboxMotion visible={open}>\n        <PromptListbox\n          open={open}\n          {...listboxProps}\n          {...optionCollection}\n          {...selectionState}\n          ref={listboxMergedRef}\n          activeDescendantController={activeDescendantController}\n        />\n      </PromptListboxMotion>\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,\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","allowArrowUpNavigation","useSelection","getOptionById","optionCollection","activeParentRef","cursorPosition","controller","isInSelectionMode","setIsInSelectionMode","useActiveDescendant","open","classList","contains","promptOptionClassNames","root","useMergedRefs","selectionState","setSelectionMode","useCallback","selectionMode","activeDescendantController","useOptionCollection","React","useState","defaultOpen","initialState","onBlur","onOpenChange","event","blur","currentTarget","type","cursorPositionPlugin","onListboxBlur","createElement","CursorPositionPlugin","selectOption","multiselect","hideActiveDescendant","setHideActiveDescendant","useEffect","_triggerRef_current","current","removeAttribute","activeDescendantListboxRef","comboboxPopupRef","ref","listboxMergedRef","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 { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\n/**\n * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead\n */\nexport function usePromptListboxFunctionality(\n  params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n  const {\n    positioning,\n    onOpenChange,\n    onSelectionModeChange,\n    listboxProps,\n    fluid = false,\n    allowArrowUpNavigation = false,\n  } = 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 setSelectionMode = React.useCallback(\n    (selectionMode: boolean) => {\n      if (selectionMode === false) {\n        activeDescendantController.blur();\n        setHideActiveDescendant(true);\n      } else {\n        setHideActiveDescendant(false);\n      }\n\n      setIsInSelectionMode(selectionMode);\n      onSelectionModeChange?.(selectionMode);\n    },\n    [activeDescendantController, onSelectionModeChange],\n  );\n\n  const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n    setOpen(false);\n    onOpenChange?.(event, { event, type: 'focus', open: false });\n    setSelectionMode(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 = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n  const onListboxBlur = React.useCallback(() => {\n    setSelectionMode(false);\n    onSelectionModeChange?.(false);\n  }, [onSelectionModeChange, setSelectionMode]);\n\n  // handle combobox keyboard interaction\n  const onKeyDown = useTriggerKeydown({\n    ...optionCollection,\n    allowArrowUpNavigation,\n    activeDescendantController,\n    getOptionById,\n    onBlur: onListboxBlur,\n    selectOption,\n    cursorPosition,\n    open,\n    multiselect: false,\n    isInSelectionMode,\n    setSelectionMode,\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  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] = useListboxPositioning({ positioning, fluid });\n\n  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n  const listbox = React.useMemo(() => {\n    return (\n      <PromptListboxMotion visible={open}>\n        <PromptListbox\n          open={open}\n          {...listboxProps}\n          {...optionCollection}\n          {...selectionState}\n          ref={listboxMergedRef}\n          activeDescendantController={activeDescendantController}\n        />\n      </PromptListboxMotion>\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,\n      isInSelectionMode,\n    },\n    containerRef: comboboxTargetRef,\n    cursorPositionPlugin,\n  };\n}\n"],"names":["positioning","onSelectionModeChange","matchOption","onOpenChange","listboxProps","triggerRef","fluid","selectionState","allowArrowUpNavigation","params","listboxRef","cursorPosition","setCursorPosition","activeParentRef","isInSelectionMode","controller","open","useControllableState","defaultState","defaultOpen","promptOptionClassNames","root","setSelectionMode","React","useCallback","selectionMode","setHideActiveDescendant","setIsInSelectionMode","useState","activeDescendantController","onBlur","event","blur","onFocus","onListboxBlur","currentTarget","selectOption","getOptionById","hideActiveDescendant","useEffect","_triggerRef_current","comboboxTargetRef","useListboxPositioning","removeAttribute","activeDescendantListboxRef","PromptListboxMotion","PromptListbox","comboboxPopupRef","ref","listboxMergedRef","createElement","optionCollection","promptListbox","triggerProps","cursorPositionPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePromptListboxFunctionality", {
+    enumerable: true,
+    get: function() {
+        return usePromptListboxFunctionality;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
+const _PromptListboxMotion = require("../motion/PromptListboxMotion");
+const _reactutilities = require("@fluentui/react-utilities");
+const _CursorPositionPlugin = require("../../plugins/CursorPositionPlugin");
+const _useListboxPositioning = require("./useListboxPositioning");
+const _reactcomponents = require("@fluentui/react-components");
+function usePromptListboxFunctionality(params) {
+    var _params_listboxProps, _params_listboxProps1;
+    const { fluid = false, allowArrowUpNavigation = false } = params;
+    const [open, setOpen] = (0, _reactutilities.useControllableState)({
+        state: params.open,
+        defaultState: params.defaultOpen,
+        initialState: false
+    });
+    const [cursorPosition, setCursorPosition] = _react.useState('end');
+    const [isInSelectionMode, setIsInSelectionMode] = _react.useState(false);
+    const overrideActionHandler = (e, { activeOption, action, activeDescendantController, isInSelectionMode })=>{
+        var _params_overrideActionHandler;
+        const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
+        const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
+        let newAction = undefined;
+        let newIsInSelection = undefined;
+        const firstOption = activeDescendantController.first({
+            passive: true
+        });
+        switch(action){
+            case 'Next':
+                if (!isInSelectionMode && !atEnd) {
+                    newAction = 'Type';
+                    newIsInSelection = false;
+                }
+                break;
+            case 'Previous':
+                if (!isInSelectionMode && !atStart) {
+                    newAction = 'Type';
+                    newIsInSelection = false;
+                } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
+                    newAction = 'Type';
+                    newIsInSelection = false;
+                    e.preventDefault();
+                }
+                break;
+            case 'First':
+            case 'Last':
+            case 'PageDown':
+            case 'PageUp':
+                if (!isInSelectionMode) {
+                    newAction = 'Type';
+                    newIsInSelection = false;
+                }
+                break;
+        }
+        const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
+            activeOption,
+            action,
+            activeDescendantController,
+            isInSelectionMode
+        });
+        return {
+            action: newAction,
+            isInSelectionMode: newIsInSelection,
+            ...userOverrides
+        };
+    };
+    const onSelectionModeChange = (0, _reactutilities.mergeCallbacks)(params.onSelectionModeChange, (newSelectionMode)=>{
+        setIsInSelectionMode(newSelectionMode);
+    });
+    const baseListboxFunctionality = (0, _reactinputlistbox.useInputListboxFunctionality)({
+        ...params,
+        onSelectionModeChange,
+        overrideActionHandler
+    });
+    const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;
+    const onFocus = (event)=>{
+        if (event.target === event.currentTarget) {
+            var _params_onOpenChange;
+            setOpen(true);
+            (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
+                event,
+                type: 'focus',
+                open: true
+            });
+        }
+    };
+    const onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(baseOnBlur, (e)=>{
+        var _params_onOpenChange;
+        setOpen(false);
+        (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
+            event: e,
+            type: 'focus',
+            open: false
+        });
+    }));
+    const [listboxRef, anchorRef] = (0, _useListboxPositioning.useListboxPositioning)({
+        fluid,
+        positioning: params.positioning
+    });
+    const listboxId = (0, _reactutilities.useId)('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
+    const cursorPositionPlugin = /*#__PURE__*/ _react.createElement(_CursorPositionPlugin.CursorPositionPlugin, {
+        setCursorPosition: setCursorPosition
+    });
+    const innerListbox = /*#__PURE__*/ _react.createElement(_reactinputlistbox.InputListbox, {
+        ...params.listboxProps,
+        ...baseListboxFunctionality.inputListboxProps,
+        id: listboxId,
+        ref: (0, _reactutilities.useMergedRefs)(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
+    });
+    const listbox = /*#__PURE__*/ _react.createElement(_PromptListboxMotion.PromptListboxMotion, {
+        visible: open
+    }, /*#__PURE__*/ _react.createElement("span", {
+        "aria-owns": open ? listboxId : undefined
+    }, open && (params.inline ? innerListbox : /*#__PURE__*/ _react.createElement(_reactcomponents.Portal, {
+        mountNode: params.mountNode
+    }, innerListbox))));
+    return {
+        promptListbox: listbox,
+        cursorPositionPlugin,
+        triggerProps: {
+            ref: triggerRef,
+            isInSelectionMode,
+            onFocus,
+            onKeyDown: baseOnKeyDown,
+            onBlur
+        },
+        containerRef: anchorRef
+    };
+} //# sourceMappingURL=usePromptListboxFunctionalityV2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n  mergeCallbacks,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n  InputListboxAction,\n  InputListboxProps,\n  UseInputListboxFunctionalityParams,\n  OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\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\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  positioning?: PositioningShorthand;\n\n  /**\n   * Whether the listbox's width should take all the available space or only\n   * the required space.\n   *\n   * @default false\n   */\n  fluid?: boolean;\n\n  /**\n   * Props to be passed to the InputListbox component\n   */\n  listboxProps?: Partial<InputListboxProps> & {\n    ref?: React.RefObject<HTMLDivElement>;\n  };\n\n  /**\n   * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n   * Note, this prop is meant to be used with the following positioning props:\n   * ```ts\n   *  usePromptListboxFunctionality({\n   *    positioning: {\n   *      position: 'above',\n   *      fallbackPositions: ['above']\n   *    }\n   *  });\n   * ```\n   * This is useful when using PromptListbox with other components such as ChatInput since\n   * the input will always stay at the bottom therefore the listbox would always get cut.\n   *\n   * @default false\n   */\n  allowArrowUpNavigation?: boolean;\n\n  /**\n   * Whether to render the listbox inline or use a portal.\n   */\n  inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\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  /**\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  containerRef: React.RefObject<ContainerElementType>;\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 function usePromptListboxFunctionality<\n  TriggerElementType extends HTMLElement = HTMLSpanElement,\n  ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n  const { fluid = false, allowArrowUpNavigation = false } = params;\n  const [open, setOpen] = useControllableState({\n    state: params.open,\n    defaultState: params.defaultOpen,\n    initialState: false,\n  });\n  const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n\n  const overrideActionHandler: OverrideActionHandler = (\n    e,\n    { activeOption, action, activeDescendantController, isInSelectionMode },\n  ) => {\n    const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n    const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n    let newAction: InputListboxAction | undefined = undefined;\n    let newIsInSelection: boolean | undefined = undefined;\n    const firstOption = activeDescendantController.first({ passive: true });\n\n    switch (action) {\n      case 'Next':\n        if (!isInSelectionMode && !atEnd) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        }\n        break;\n      case 'Previous':\n        if (!isInSelectionMode && !atStart) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        } else if (\n          isInSelectionMode &&\n          !allowArrowUpNavigation &&\n          atEnd &&\n          activeOption !== undefined &&\n          activeOption.id === firstOption\n        ) {\n          newAction = 'Type';\n          newIsInSelection = false;\n          e.preventDefault();\n        }\n        break;\n      case 'First':\n      case 'Last':\n      case 'PageDown':\n      case 'PageUp':\n        if (!isInSelectionMode) {\n          newAction = 'Type';\n          newIsInSelection = false;\n        }\n        break;\n    }\n\n    const userOverrides = params.overrideActionHandler?.(e, {\n      activeOption,\n      action,\n      activeDescendantController,\n      isInSelectionMode,\n    });\n\n    return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n  };\n\n  const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {\n    setIsInSelectionMode(newSelectionMode);\n  });\n  const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n    ...params,\n    onSelectionModeChange,\n    overrideActionHandler,\n  });\n  const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;\n\n  const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n    if (event.target === event.currentTarget) {\n      setOpen(true);\n      params.onOpenChange?.(event, { event, type: 'focus', open: true });\n    }\n  };\n\n  const onBlur = useEventCallback(\n    mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n      setOpen(false);\n      params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n    }),\n  );\n\n  const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n    fluid,\n    positioning: params.positioning,\n  });\n\n  const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n  const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n  const innerListbox = (\n    <InputListbox\n      {...params.listboxProps}\n      {...baseListboxFunctionality.inputListboxProps}\n      id={listboxId}\n      ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n    />\n  );\n  const listbox = (\n    <PromptListboxMotion visible={open}>\n      <span aria-owns={open ? listboxId : undefined}>\n        {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n      </span>\n    </PromptListboxMotion>\n  );\n\n  return {\n    promptListbox: listbox,\n    cursorPositionPlugin,\n    triggerProps: {\n      ref: triggerRef,\n      isInSelectionMode,\n      onFocus,\n      onKeyDown: baseOnKeyDown,\n      onBlur,\n    },\n    containerRef: anchorRef,\n  };\n}\n"],"names":["usePromptListboxFunctionality","params","fluid","open","setOpen","initialState","useControllableState","state","defaultState","cursorPosition","setCursorPosition","isInSelectionMode","allowArrowUpNavigation","overrideActionHandler","newAction","activeDescendantController","_params_overrideActionHandler","atEnd","newIsInSelection","first","atStart","activeOption","undefined","id","firstOption","action","baseListboxFunctionality","onSelectionModeChange","onKeyDown","baseOnKeyDown","newSelectionMode","setIsInSelectionMode","event","baseOnBlur","ref","triggerRef","useEventCallback","mergeCallbacks","currentTarget","onOpenChange","_params_onOpenChange","call","type","onBlur","e","cursorPositionPlugin","innerListbox","useMergedRefs","inputListboxProps","positioning","listbox","span","aria-owns","listboxId","inline","React","createElement","InputListbox","listboxProps","triggerProps","listboxRef","_params_listboxProps1","onFocus","Portal","containerRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js

@@ -9,25 +9,43 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    Option: function() {
+        return _reactinputlistbox.Option;
+    },
     PromptListbox: function() {
         return _PromptListbox.PromptListbox;
     },
     PromptOption: function() {
         return _PromptOption.PromptOption;
     },
+    optionClassNames: function() {
+        return _reactinputlistbox.optionClassNames;
+    },
     promptListboxClassNames: function() {
         return _PromptListbox.promptListboxClassNames;
     },
     promptOptionClassNames: function() {
         return _PromptOption.promptOptionClassNames;
     },
+    renderOption_unstable: function() {
+        return _reactinputlistbox.renderOption_unstable;
+    },
     renderPromptListbox_unstable: function() {
         return _PromptListbox.renderPromptListbox_unstable;
     },
     renderPromptOption_unstable: function() {
         return _PromptOption.renderPromptOption_unstable;
     },
+    useOptionStyles_unstable: function() {
+        return _reactinputlistbox.useOptionStyles_unstable;
+    },
+    useOption_unstable: function() {
+        return _reactinputlistbox.useOption_unstable;
+    },
     usePromptListboxFunctionality: function() {
+        return _usePromptListboxFunctionalityV2.usePromptListboxFunctionality;
+    },
+    usePromptListboxFunctionalityDeprecated: function() {
         return _usePromptListboxFunctionality.usePromptListboxFunctionality;
     },
     usePromptListboxStyles_unstable: function() {
@@ -44,6 +62,8 @@ _export(exports, {
     }
 });
 const _PromptListbox = require("./PromptListbox");
+const _usePromptListboxFunctionalityV2 = require("./components/utils/usePromptListboxFunctionalityV2");
 const _usePromptListboxFunctionality = require("./components/utils/usePromptListboxFunctionality");
 const _PromptOption = require("./PromptOption");
+const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
  //# 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 { 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","promptListboxClassNames","promptOptionClassNames","renderPromptListbox_unstable","renderPromptOption_unstable","usePromptListboxFunctionality","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,4BAAa;;IAiBbC,YAAY;eAAZA,0BAAY;;IAhBZC,uBAAuB;eAAvBA,sCAAuB;;IAiBvBC,sBAAsB;eAAtBA,oCAAsB;;IAhBtBC,4BAA4B;eAA5BA,2CAA4B;;IAiB5BC,2BAA2B;eAA3BA,yCAA2B;;IAZpBC,6BAA6B;eAA7BA,4DAA6B;;IAJpCC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAgBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAhBnB;+CAEuC;8BAevC"}
+{"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/usePromptListboxFunctionalityV2';\nexport type {\n  OnOpenChangeData,\n  UsePromptListboxFunctionalityParams,\n  UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n  OnOpenChangeData as OnOpenChangeDataDeprecated,\n  ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n  UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n  UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\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\nexport type {\n  OptionProps,\n  OptionSlots,\n  OptionState,\n  OptionValue,\n  OptionOnSelectData,\n  OverrideActionHandler,\n  OverrideActionHandlerOptions,\n  OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOption_unstable,\n  useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["Option","PromptListbox","PromptOption","optionClassNames","promptListboxClassNames","promptOptionClassNames","renderOption_unstable","renderPromptListbox_unstable","renderPromptOption_unstable","useOptionStyles_unstable","useOption_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4CEA,MAAM;eAANA,yBAAM;;IA1CNC,aAAa;eAAbA,4BAAa;;IAwBbC,YAAY;eAAZA,0BAAY;;IAmBZC,gBAAgB;eAAhBA,mCAAgB;;IA1ChBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,sBAAsB;eAAtBA,oCAAsB;;IAmBtBC,qBAAqB;eAArBA,wCAAqB;;IA1CrBC,4BAA4B;eAA5BA,2CAA4B;;IAwB5BC,2BAA2B;eAA3BA,yCAA2B;;IAoB3BC,wBAAwB;eAAxBA,2CAAwB;;IADxBC,kBAAkB;eAAlBA,qCAAkB;;IAtCXC,6BAA6B;eAA7BA,8DAA6B;;IAOIC,uCAAuC;eAAxED,4DAAAA;;IAXPE,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAuBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAvBnB;iDAEuC;+CAO2C;8BAelF;mCAkBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-prompt-listbox",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "PromptListbox for input components using EditorInput.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -14,8 +14,9 @@
   "dependencies": {
     "@fluentui-copilot/chat-input-plugins": "^0.4.1",
     "@fluentui-copilot/react-chat-input-plugins": "^0.4.1",
-    "@fluentui-copilot/react-editor-input": "^0.4.1",
-    "@fluentui-copilot/react-prompt-input": "^0.5.1",
+    "@fluentui-copilot/react-editor-input": "^0.4.2",
+    "@fluentui-copilot/react-input-listbox": "^0.1.1",
+    "@fluentui-copilot/react-prompt-input": "^0.5.2",
     "@fluentui-copilot/react-provider": "^0.9.3",
     "@fluentui-copilot/react-text-editor": "^0.4.1",
     "@fluentui-copilot/text-editor": "^0.3.1",