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

package/CHANGELOG.json

@@ -2,52 +2,34 @@
   "name": "@fluentui-copilot/react-prompt-listbox",
   "entries": [
     {
-      "date": "Fri, 19 Jul 2024 04:13:27 GMT",
-      "tag": "@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-      "version": "0.0.0-nightly-20240719-0406-ee8d99d6.1",
+      "date": "Tue, 23 Jul 2024 00:55:16 GMT",
+      "tag": "@fluentui-copilot/react-prompt-listbox_v0.0.1",
+      "version": "0.0.1",
       "comments": {
-        "prerelease": [
+        "patch": [
           {
-            "author": "fluentui-internal@service.microsoft.com",
+            "author": "estebanmu@microsoft.com",
             "package": "@fluentui-copilot/react-prompt-listbox",
-            "commit": "not available",
-            "comment": "Release nightly"
+            "commit": "8c2c06410ced474386f2b375722a15e3cd22a22c",
+            "comment": "feat: Add PromptOption implementation and update to follow a11y guidelines."
           },
           {
-            "author": "beachball",
+            "author": "estebanmu@microsoft.com",
             "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
+            "commit": "00be29817006f88b9bc3083ba6907c5a77f4eb19",
+            "comment": "chore: Scaffold PromptOption."
           },
           {
-            "author": "beachball",
+            "author": "estebanmu@microsoft.com",
             "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
+            "commit": "12d03f775a8c8f6bc8894233fea3b3897786fcad",
+            "comment": "chore: Move Listbox into its own package."
           },
           {
-            "author": "beachball",
+            "author": "jiangemma@microsoft.com",
             "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui-copilot/react-prompt-listbox",
-            "comment": "Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240719-0406-ee8d99d6.1",
-            "commit": "e568e817e90915ee691011151b826dc43e4c0778"
+            "commit": "d142c9d1467313beed45ac50baf938436cc2c18a",
+            "comment": "chore: Rename targetRef to containerRef"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,19 +1,16 @@
 # Change Log - @fluentui-copilot/react-prompt-listbox
 
-This log was last generated on Fri, 19 Jul 2024 04:13:27 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jul 2024 00:55:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240719-0406-ee8d99d6.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240719-0406-ee8d99d6.1)
+## [0.0.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.1)
 
-Fri, 19 Jul 2024 04:13:27 GMT
+Tue, 23 Jul 2024 00:55:16 GMT
 
-### Changes
+### Patches
 
-- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
-- Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
-- Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
-- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
-- Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
-- Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240719-0406-ee8d99d6.1 ([commit](https://github.com/microsoft/fluentai/commit/e568e817e90915ee691011151b826dc43e4c0778) by beachball)
+- feat: Add PromptOption implementation and update to follow a11y guidelines. ([PR #1904](https://github.com/microsoft/fluentai/pull/1904) by estebanmu@microsoft.com)
+- chore: Scaffold PromptOption. ([PR #1900](https://github.com/microsoft/fluentai/pull/1900) by estebanmu@microsoft.com)
+- chore: Move Listbox into its own package. ([PR #1884](https://github.com/microsoft/fluentai/pull/1884) by estebanmu@microsoft.com)
+- chore: Rename targetRef to containerRef ([PR #1888](https://github.com/microsoft/fluentai/pull/1888) by jiangemma@microsoft.com)

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import { InitialConfigType } from '@lexical/react/LexicalComposer';
 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 { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import type { PortalProps } from '@fluentui/react-components';
 import type { PositioningShorthand } from '@fluentui/react-components';
@@ -144,11 +146,51 @@ export declare type PromptListboxSlots = {
  */
 export declare type PromptListboxState = ComponentState<PromptListboxSlots> & PromptListboxContextState & Required<Pick<PromptListboxProps, 'open' | 'inlinePopup'>> & Pick<PromptListboxProps, 'mountNode'>;
 
+export declare const PromptOption: ForwardRefComponent<PromptOptionProps>;
+
+export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
+
+/**
+ * PromptOption Props
+ */
+export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps, 'disabled' | 'value'> & ({
+    /**
+     * An optional override the string value of the PromptOption's display text,
+     * defaulting to the PromptOption's child content.
+     * This is used as the PromptInput button's or PromptInput input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text?: string;
+    children: string;
+} | {
+    /**
+     * The string value of the PromptOption's display text when the PromptOption's children are not a string.
+     * This is used as the PromptInput button's or PromptInput input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text: string;
+    children?: React.ReactNode;
+});
+
+export declare type PromptOptionSlots = {
+    root: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering PromptOption
+ */
+export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;
+
 /**
  * Render the final JSX of PromptListbox
  */
 export declare const renderPromptListbox_unstable: (state: PromptListboxState, contextValues: PromptListboxContextValues) => JSX.Element;
 
+/**
+ * Render the final JSX of PromptOption
+ */
+export declare const renderPromptOption_unstable: (state: PromptOptionState) => JSX.Element;
+
 /** Possible event types for onOptionSelect */
 declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
@@ -197,10 +239,10 @@ export declare type UsePromptListboxFunctionality = {
      * 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 targetRef is the same as the trigger, the ref provided in triggerProps needs
-     * to be merged with this one using `useMergedRefs(targetRef, triggerProps.ref);`
+     * 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);`
      */
-    targetRef: React_3.MutableRefObject<any>;
+    containerRef: React_3.MutableRefObject<any>;
     /**
      * 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.
@@ -227,4 +269,20 @@ export declare type UsePromptListboxFunctionalityParams = {
  */
 export declare const usePromptListboxStyles_unstable: (state: PromptListboxState) => PromptListboxState;
 
+/**
+ * Create the state required to render PromptOption.
+ *
+ * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,
+ * before being passed to renderPromptOption_unstable.
+ *
+ * @param props - props from this instance of PromptOption
+ * @param ref - reference to root HTMLElement of PromptOption
+ */
+export declare const usePromptOption_unstable: (props: PromptOptionProps, ref: React_2.Ref<HTMLDivElement>) => PromptOptionState;
+
+/**
+ * Apply styling to the PromptOption slots based on the state
+ */
+export declare const usePromptOptionStyles_unstable: (state: PromptOptionState) => PromptOptionState;
+
 export { }

package/lib/PromptOption.js

@@ -0,0 +1,2 @@
+export * from './components/PromptOption/index';
+//# sourceMappingURL=PromptOption.js.map

package/lib/PromptOption.js.map

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

package/lib/components/PromptListbox/renderPromptListbox.js

@@ -6,14 +6,20 @@ import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
  */
 export const renderPromptListbox_unstable = (state, contextValues) => {
   assertSlots(state);
+  const {
+    open
+  } = state;
   return /*#__PURE__*/_jsx(ListboxProvider, {
     value: contextValues.listbox,
     children: /*#__PURE__*/_jsx(ActiveDescendantContextProvider, {
       value: contextValues.activeDescendant,
-      children: state.open && (state.inlinePopup ? /*#__PURE__*/_jsx(state.root, {}) : /*#__PURE__*/_jsx(Portal, {
-        mountNode: state.mountNode,
-        children: /*#__PURE__*/_jsx(state.root, {})
-      }))
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-owns": open ? state.root.id : undefined,
+        children: open && (state.inlinePopup ? /*#__PURE__*/_jsx(state.root, {}) : /*#__PURE__*/_jsx(Portal, {
+          mountNode: state.mountNode,
+          children: /*#__PURE__*/_jsx(state.root, {})
+        }))
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n  assertSlots<PromptListboxSlots>(state);\n\n  return (\n    <ListboxProvider value={contextValues.listbox}>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        {state.open &&\n          (state.inlinePopup ? (\n            <state.root />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.root />\n            </Portal>\n          ))}\n      </ActiveDescendantContextProvider>\n    </ListboxProvider>\n  );\n};\n"],"names":["assertSlots","ListboxProvider","Portal","ActiveDescendantContextProvider","renderPromptListbox_unstable","state","contextValues","value","listbox","activeDescendant","open","inlinePopup","root","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAQ,6BAA6B;AAClF,SAASC,+BAA+B,QAAQ,uBAAuB;AAGvE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEN,YAAgCK;IAEhC,qBACE,KAACJ;QAAgBM,OAAOD,cAAcE,OAAO;kBAC3C,cAAA,KAACL;YAAgCI,OAAOD,cAAcG,gBAAgB;sBACnEJ,MAAMK,IAAI,IACRL,CAAAA,MAAMM,WAAW,iBAChB,KAACN,MAAMO,IAAI,sBAEX,KAACV;gBAAOW,WAAWR,MAAMQ,SAAS;0BAChC,cAAA,KAACR,MAAMO,IAAI;cAEf;;;AAIV,EAAE"}
+{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n  assertSlots<PromptListboxSlots>(state);\n  const { open } = state;\n\n  return (\n    <ListboxProvider value={contextValues.listbox}>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <span aria-owns={open ? state.root.id : undefined}>\n          {open &&\n            (state.inlinePopup ? (\n              <state.root />\n            ) : (\n              <Portal mountNode={state.mountNode}>\n                <state.root />\n              </Portal>\n            ))}\n        </span>\n      </ActiveDescendantContextProvider>\n    </ListboxProvider>\n  );\n};\n"],"names":["assertSlots","ListboxProvider","Portal","ActiveDescendantContextProvider","renderPromptListbox_unstable","state","contextValues","open","value","listbox","activeDescendant","span","aria-owns","root","id","undefined","inlinePopup","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAQ,6BAA6B;AAClF,SAASC,+BAA+B,QAAQ,uBAAuB;AAGvE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEN,YAAgCK;IAChC,MAAM,EAAEE,IAAI,EAAE,GAAGF;IAEjB,qBACE,KAACJ;QAAgBO,OAAOF,cAAcG,OAAO;kBAC3C,cAAA,KAACN;YAAgCK,OAAOF,cAAcI,gBAAgB;sBACpE,cAAA,KAACC;gBAAKC,aAAWL,OAAOF,MAAMQ,IAAI,CAACC,EAAE,GAAGC;0BACrCR,QACEF,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMQ,IAAI,sBAEX,KAACX;oBAAOe,WAAWZ,MAAMY,SAAS;8BAChC,cAAA,KAACZ,MAAMQ,IAAI;kBAEf;;;;AAKZ,EAAE"}

package/lib/components/PromptListbox/usePromptListbox.js

@@ -57,7 +57,8 @@ export const usePromptListbox_unstable = (props, ref) => {
       defaultProps: {
         disableAutoFocus: true,
         id: listboxId,
-        tabIndex: undefined
+        tabIndex: undefined,
+        role: 'menu'
       },
       elementType: Listbox
     })

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

@@ -1 +1 @@
-{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n  props: PromptListboxProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n  const {\n    id,\n    onActiveOptionChange,\n    inlinePopup = false,\n    mountNode = undefined,\n    open = true,\n    activeDescendantController,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n  } = props;\n  const listboxId = useId('prompt-listbox', id);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n    const nextOption = getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  const state: PromptListboxState = {\n    ...deprecatedPropsDefaults,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n    onActiveDescendantChange,\n    activeDescendantController,\n    inlinePopup,\n    mountNode,\n\n    components: {\n      root: Listbox,\n    },\n\n    root: slot.always(\n      { ...props, selectedOptions },\n      {\n        defaultProps: {\n          disableAutoFocus: true,\n          id: listboxId,\n          tabIndex: undefined,\n        },\n        elementType: Listbox,\n      },\n    ),\n  };\n\n  state.root.ref = useMergedRefs(ref, state.root.ref);\n  state.root.onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onMouseDown),\n  );\n\n  state.root.onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onClick),\n  );\n\n  return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n  PromptListboxContextState,\n  'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: noop,\n  onOptionClick: noop,\n};\n"],"names":["Listbox","slot","useMergedRefs","mergeCallbacks","useEventCallback","useId","usePromptListbox_unstable","props","ref","id","onActiveOptionChange","inlinePopup","mountNode","undefined","open","activeDescendantController","getOptionById","getOptionsMatchingValue","selectedOptions","selectOption","registerOption","listboxId","onActiveDescendantChange","event","previousOption","detail","previousId","nextOption","type","state","deprecatedPropsDefaults","components","root","always","defaultProps","disableAutoFocus","tabIndex","elementType","onMouseDown","preventDefault","onClick","noop","activeOption","focusVisible","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,OAAO,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC1E,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAMpF,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,EAAE,EACFC,oBAAoB,EACpBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,OAAO,IAAI,EACXC,0BAA0B,EAC1BC,aAAa,EACbC,uBAAuB,EACvBC,eAAe,EACfC,YAAY,EACZC,cAAc,EACf,GAAGb;IACJ,MAAMc,YAAYhB,MAAM,kBAAkBI;IAE1C,MAAMa,2BAA2BlB,iBAAiB,CAACmB;QACjD,MAAMC,iBAAiBD,MAAME,MAAM,CAACC,UAAU,GAAGV,cAAcO,MAAME,MAAM,CAACC,UAAU,IAAI;QAC1F,MAAMC,aAAaX,cAAcO,MAAME,MAAM,CAAChB,EAAE;QAChDC,iCAAAA,2CAAAA,qBAAuBa,OAAO;YAAEA;YAAOK,MAAM;YAAUJ;YAAgBG;QAAW;IACpF;IAEA,MAAME,QAA4B;QAChC,GAAGC,uBAAuB;QAC1BhB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAP;QACAJ;QACAC;QAEAmB,YAAY;YACVC,MAAMhC;QACR;QAEAgC,MAAM/B,KAAKgC,MAAM,CACf;YAAE,GAAG1B,KAAK;YAAEW;QAAgB,GAC5B;YACEgB,cAAc;gBACZC,kBAAkB;gBAClB1B,IAAIY;gBACJe,UAAUvB;YACZ;YACAwB,aAAarC;QACf;IAEJ;IAEA6B,MAAMG,IAAI,CAACxB,GAAG,GAAGN,cAAcM,KAAKqB,MAAMG,IAAI,CAACxB,GAAG;IAClDqB,MAAMG,IAAI,CAACM,WAAW,GAAGlC,iBACvBD,eAAe,CAACoB;QACdA,MAAMgB,cAAc;IACtB,GAAGV,MAAMG,IAAI,CAACM,WAAW;IAG3BT,MAAMG,IAAI,CAACQ,OAAO,GAAGpC,iBACnBD,eAAe,CAACoB;QACdA,MAAMgB,cAAc;IACtB,GAAGV,MAAMG,IAAI,CAACQ,OAAO;IAGvB,OAAOX;AACT,EAAE;AAEF,MAAMY,OAAO,IAAM;AAEnB,MAAMX,0BAGF;IACFY,cAAc7B;IACd8B,cAAc;IACdC,iBAAiBH;IACjBI,eAAeJ;AACjB"}
+{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n  props: PromptListboxProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n  const {\n    id,\n    onActiveOptionChange,\n    inlinePopup = false,\n    mountNode = undefined,\n    open = true,\n    activeDescendantController,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n  } = props;\n  const listboxId = useId('prompt-listbox', id);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n    const nextOption = getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  const state: PromptListboxState = {\n    ...deprecatedPropsDefaults,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    selectedOptions,\n    selectOption,\n    registerOption,\n    onActiveDescendantChange,\n    activeDescendantController,\n    inlinePopup,\n    mountNode,\n\n    components: {\n      root: Listbox,\n    },\n\n    root: slot.always(\n      { ...props, selectedOptions },\n      {\n        defaultProps: {\n          disableAutoFocus: true,\n          id: listboxId,\n          tabIndex: undefined,\n          role: 'menu',\n        },\n        elementType: Listbox,\n      },\n    ),\n  };\n\n  state.root.ref = useMergedRefs(ref, state.root.ref);\n  state.root.onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onMouseDown),\n  );\n\n  state.root.onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, state.root.onClick),\n  );\n\n  return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n  PromptListboxContextState,\n  'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: noop,\n  onOptionClick: noop,\n};\n"],"names":["Listbox","slot","useMergedRefs","mergeCallbacks","useEventCallback","useId","usePromptListbox_unstable","props","ref","id","onActiveOptionChange","inlinePopup","mountNode","undefined","open","activeDescendantController","getOptionById","getOptionsMatchingValue","selectedOptions","selectOption","registerOption","listboxId","onActiveDescendantChange","event","previousOption","detail","previousId","nextOption","type","state","deprecatedPropsDefaults","components","root","always","defaultProps","disableAutoFocus","tabIndex","role","elementType","onMouseDown","preventDefault","onClick","noop","activeOption","focusVisible","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,OAAO,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC1E,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAKpF,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,EAAE,EACFC,oBAAoB,EACpBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,OAAO,IAAI,EACXC,0BAA0B,EAC1BC,aAAa,EACbC,uBAAuB,EACvBC,eAAe,EACfC,YAAY,EACZC,cAAc,EACf,GAAGb;IACJ,MAAMc,YAAYhB,MAAM,kBAAkBI;IAE1C,MAAMa,2BAA2BlB,iBAAiB,CAACmB;QACjD,MAAMC,iBAAiBD,MAAME,MAAM,CAACC,UAAU,GAAGV,cAAcO,MAAME,MAAM,CAACC,UAAU,IAAI;QAC1F,MAAMC,aAAaX,cAAcO,MAAME,MAAM,CAAChB,EAAE;QAChDC,iCAAAA,2CAAAA,qBAAuBa,OAAO;YAAEA;YAAOK,MAAM;YAAUJ;YAAgBG;QAAW;IACpF;IAEA,MAAME,QAA4B;QAChC,GAAGC,uBAAuB;QAC1BhB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAP;QACAJ;QACAC;QAEAmB,YAAY;YACVC,MAAMhC;QACR;QAEAgC,MAAM/B,KAAKgC,MAAM,CACf;YAAE,GAAG1B,KAAK;YAAEW;QAAgB,GAC5B;YACEgB,cAAc;gBACZC,kBAAkB;gBAClB1B,IAAIY;gBACJe,UAAUvB;gBACVwB,MAAM;YACR;YACAC,aAAatC;QACf;IAEJ;IAEA6B,MAAMG,IAAI,CAACxB,GAAG,GAAGN,cAAcM,KAAKqB,MAAMG,IAAI,CAACxB,GAAG;IAClDqB,MAAMG,IAAI,CAACO,WAAW,GAAGnC,iBACvBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACO,WAAW;IAG3BV,MAAMG,IAAI,CAACS,OAAO,GAAGrC,iBACnBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACS,OAAO;IAGvB,OAAOZ;AACT,EAAE;AAEF,MAAMa,OAAO,IAAM;AAEnB,MAAMZ,0BAGF;IACFa,cAAc9B;IACd+B,cAAc;IACdC,iBAAiBH;IACjBI,eAAeJ;AACjB"}

package/lib/components/PromptOption/PromptOption.js

@@ -0,0 +1,12 @@
+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
+export const PromptOption = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePromptOption_unstable(props, ref);
+  usePromptOptionStyles_unstable(state);
+  return renderPromptOption_unstable(state);
+});
+PromptOption.displayName = 'PromptOption';
+//# sourceMappingURL=PromptOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// PromptOption component - TODO: add more docs\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n  const state = usePromptOption_unstable(props, ref);\n\n  usePromptOptionStyles_unstable(state);\n  return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["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"}

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

@@ -0,0 +1,4 @@
+/**
+ * State used in rendering PromptOption
+ */export {};
+//# sourceMappingURL=PromptOption.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptOption.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, OptionProps, OptionState, Slot } from '@fluentui/react-components';\n\nexport type PromptOptionSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * PromptOption Props\n */\nexport type PromptOptionProps = ComponentProps<PromptOptionSlots> &\n  Pick<OptionProps, 'disabled' | 'value'> &\n  (\n    | {\n        /**\n         * An optional override the string value of the PromptOption's display text,\n         * defaulting to the PromptOption's child content.\n         * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the PromptOption's display text when the PromptOption's children are not a string.\n         * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering PromptOption\n */\nexport type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAiCA;;CAEC,GACD,WAA+G"}

package/lib/components/PromptOption/index.js

@@ -0,0 +1,6 @@
+export * from './PromptOption';
+export * from './PromptOption.types';
+export * from './renderPromptOption';
+export * from './usePromptOption';
+export * from './usePromptOptionStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PromptOption';\nexport * from './PromptOption.types';\nexport * from './renderPromptOption';\nexport * from './usePromptOption';\nexport * from './usePromptOptionStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/PromptOption/renderPromptOption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of PromptOption
+ */
+export const renderPromptOption_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsx(state.root, {});
+};
+//# sourceMappingURL=renderPromptOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPromptOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\n\n/**\n * Render the final JSX of PromptOption\n */\nexport const renderPromptOption_unstable = (state: PromptOptionState) => {\n  assertSlots<PromptOptionSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderPromptOption_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/PromptOption/usePromptOption.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';
+import { useListboxContext_unstable } from '@fluentui/react-combobox';
+import { useActiveDescendantContext } from '@fluentui/react-aria';
+// If you add JSX to this file, be sure to change the file type to .tsx
+/**
+ * Create the state required to render PromptOption.
+ *
+ * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,
+ * before being passed to renderPromptOption_unstable.
+ *
+ * @param props - props from this instance of PromptOption
+ * @param ref - reference to root HTMLElement of PromptOption
+ */
+export const usePromptOption_unstable = (props, ref) => {
+  const {
+    children,
+    disabled,
+    text,
+    value
+  } = props;
+  const optionRef = React.useRef(null);
+  const optionText = getTextString(text, children);
+  const optionValue = value !== null && value !== void 0 ? value : optionText;
+  // use the id if provided, otherwise use a generated id
+  const id = useId('fluent-option', props.id);
+  // data used for context registration & events
+  const optionData = React.useMemo(() => ({
+    id,
+    disabled,
+    text: optionText,
+    value: optionValue
+  }), [id, disabled, optionText, optionValue]);
+  // context values
+  const {
+    controller: activeDescendantController
+  } = useActiveDescendantContext();
+  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);
+  const selected = useListboxContext_unstable(ctx => {
+    const selectedOptions = ctx.selectedOptions;
+    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;
+  });
+  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);
+  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);
+  const onClick = event => {
+    var _props_onClick;
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    activeDescendantController.focus(id);
+    // handle selection change
+    selectOption(event, optionData);
+    onOptionClick(event);
+    (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+  };
+  // register option data with context
+  React.useEffect(() => {
+    if (id && optionRef.current) {
+      return registerOption(optionData, optionRef.current);
+    }
+  }, [id, optionData, registerOption]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: slot.always(getIntrinsicElementProps('div', {
+      ref: useMergedRefs(ref, optionRef),
+      'aria-disabled': disabled ? true : undefined,
+      id,
+      role: 'menuitem',
+      ...props,
+      onClick
+    }), {
+      elementType: 'div'
+    }),
+    disabled,
+    selected
+  };
+};
+function getTextString(text, children) {
+  if (text !== undefined) {
+    return text;
+  }
+  let textString = '';
+  let hasNonStringChild = false;
+  React.Children.forEach(children, child => {
+    if (typeof child === 'string') {
+      textString += child;
+    } else {
+      hasNonStringChild = true;
+    }
+  });
+  // warn if an Option has non-string children and no text prop
+  if (hasNonStringChild) {
+    // eslint-disable-next-line no-console
+    console.warn('Provide a `text` prop to Option components when they contain non-string children.');
+  }
+  return textString;
+}
+//# sourceMappingURL=usePromptOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useListboxContext_unstable } from '@fluentui/react-combobox';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { PromptOptionProps, PromptOptionState } from './PromptOption.types';\nimport type { OptionValue } from '../utils/OptionCollection.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptOption.\n *\n * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,\n * before being passed to renderPromptOption_unstable.\n *\n * @param props - props from this instance of PromptOption\n * @param ref - reference to root HTMLElement of PromptOption\n */\nexport const usePromptOption_unstable = (\n  props: PromptOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptOptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLDivElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, optionRef),\n        'aria-disabled': disabled ? true : undefined,\n        id,\n        role: 'menuitem',\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    disabled,\n    selected,\n  };\n};\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useListboxContext_unstable","useActiveDescendantContext","usePromptOption_unstable","props","ref","children","disabled","text","value","optionRef","useRef","optionText","getTextString","optionValue","id","optionData","useMemo","controller","activeDescendantController","registerOption","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","components","root","always","role","elementType","textString","hasNonStringChild","Children","forEach","child","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,6BAA6B;AAClG,SAASC,0BAA0B,QAAQ,2BAA2B;AACtE,SAASC,0BAA0B,QAAQ,uBAAuB;AAIlE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAC5C,MAAMM,YAAYd,MAAMe,MAAM,CAAiB;IAC/C,MAAMC,aAAaC,cAAcL,MAAMF;IACvC,MAAMQ,cAAcL,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAMG,KAAKhB,MAAM,iBAAiBK,MAAMW,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAapB,MAAMqB,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIR;YAAUC,MAAMI;YAAYH,OAAOK;QAAY,CAAA,GAC5D;QAACC;QAAIR;QAAUK;QAAYE;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEI,YAAYC,0BAA0B,EAAE,GAAGjB;IACnD,MAAMkB,iBAAiBnB,2BAA2BoB,CAAAA,MAAOA,IAAID,cAAc;IAC3E,MAAME,WAAWrB,2BAA2BoB,CAAAA;QAC1C,MAAME,kBAAkBF,IAAIE,eAAe;QAE3C,OAAOT,gBAAgBU,aAAaD,gBAAgBE,IAAI,CAACC,CAAAA,IAAKA,MAAMZ,iBAAiBU;IACvF;IACA,MAAMG,eAAe1B,2BAA2BoB,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgB3B,2BAA2BoB,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,MAAMC,UAAU,CAACC;YAYf1B;QAXA,IAAIG,UAAU;YACZuB,MAAMC,cAAc;YACpB;QACF;QAEAZ,2BAA2Ba,KAAK,CAACjB;QAEjC,0BAA0B;QAC1BY,aAAaG,OAAOd;QAEpBY,cAAcE;SACd1B,iBAAAA,MAAMyB,OAAO,cAAbzB,qCAAAA,oBAAAA,OAAgB0B;IAClB;IAEA,oCAAoC;IACpClC,MAAMqC,SAAS,CAAC;QACd,IAAIlB,MAAML,UAAUwB,OAAO,EAAE;YAC3B,OAAOd,eAAeJ,YAAYN,UAAUwB,OAAO;QACrD;IACF,GAAG;QAACnB;QAAIC;QAAYI;KAAe;IAEnC,OAAO;QACLe,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtC,KAAKuC,MAAM,CACfxC,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKK;YACxB,iBAAiBH,WAAW,OAAOiB;YACnCT;YACAuB,MAAM;YACN,GAAGlC,KAAK;YACRyB;QACF,IACA;YAAEU,aAAa;QAAM;QAEvBhC;QACAe;IACF;AACF,EAAE;AAEF,SAAST,cAAcL,IAAwB,EAAEF,QAAyB;IACxE,IAAIE,SAASgB,WAAW;QACtB,OAAOhB;IACT;IAEA,IAAIgC,aAAa;IACjB,IAAIC,oBAAoB;IACxB7C,MAAM8C,QAAQ,CAACC,OAAO,CAACrC,UAAUsC,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT"}

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

@@ -0,0 +1,88 @@
+import { __styles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
+export const promptOptionClassNames = {
+  root: 'fai-PromptOption'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = __styles({
+  root: {
+    Bt984gj: "f122n59",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    sj55zd: "f19n0e5",
+    i8kkvl: "f1ufnopg",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f22iagw",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "fp2oml8",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1tdddsa",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    qhf8xq: "f10pi13n",
+    Jwef8y: "f1knas48",
+    Bi91k9c: "feu1g3u",
+    ecr2s2: "fb40n2d",
+    lj723h: "f1g4hkjv"
+  },
+  active: {
+    Bowz1zl: "f11vrvdw",
+    oxogb1: "f17hxjb7",
+    Ix2sn8: "f1dha69c",
+    q7v32p: "f1lm7500",
+    Bqfxd14: "f1n5bo3l",
+    B53xpsf: ["fp57yr3", "f48q4c"],
+    B1wzb3v: "fg547j0",
+    f0sref: ["f48q4c", "fp57yr3"],
+    Btq9bd3: "fuyp35s",
+    Bertapg: ["f1a9nstl", "fhk0hgg"],
+    b50fsz: "f1rdp6f1",
+    avt0cx: ["fhk0hgg", "f1a9nstl"],
+    B39dzdd: "ffd7rjx",
+    Be3o27t: ["fobu5kn", "f1dbet5w"],
+    Bewtojm: "f1ap9jj5",
+    B37u8z8: ["f1dbet5w", "fobu5kn"],
+    Bttcd12: ["ftb4b3e", "f1scq65d"],
+    Fffuxt: ["f1scq65d", "ftb4b3e"],
+    Bqougee: ["f2me9eq", "fgk4qqi"],
+    Beitzug: ["fgk4qqi", "f2me9eq"],
+    Bhijsxg: "fwq15dy",
+    kktds4: "f1pb3wry",
+    Bmau3bo: ["ftjv2f4", "f1flhb1f"],
+    npektv: ["f1flhb1f", "ftjv2f4"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Jwef8y: "f9ql6rf",
+    Bi91k9c: "fvgxktp",
+    ecr2s2: "fgj9um3",
+    lj723h: "f19wldhg",
+    B7iucu3: "f1cyfu5x"
+  }
+}, {
+  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}", ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}", ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}", ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}", ".f1n5bo3l[data-activedescendant-focusvisible]::after{border-top-width:var(--strokeWidthThick);}", ".fp57yr3[data-activedescendant-focusvisible]::after{border-right-width:var(--strokeWidthThick);}", ".f48q4c[data-activedescendant-focusvisible]::after{border-left-width:var(--strokeWidthThick);}", ".fg547j0[data-activedescendant-focusvisible]::after{border-bottom-width:var(--strokeWidthThick);}", ".fuyp35s[data-activedescendant-focusvisible]::after{border-top-style:solid;}", ".f1a9nstl[data-activedescendant-focusvisible]::after{border-right-style:solid;}", ".fhk0hgg[data-activedescendant-focusvisible]::after{border-left-style:solid;}", ".f1rdp6f1[data-activedescendant-focusvisible]::after{border-bottom-style:solid;}", ".ffd7rjx[data-activedescendant-focusvisible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fobu5kn[data-activedescendant-focusvisible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1dbet5w[data-activedescendant-focusvisible]::after{border-left-color:var(--colorStrokeFocus2);}", ".f1ap9jj5[data-activedescendant-focusvisible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".ftb4b3e[data-activedescendant-focusvisible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1scq65d[data-activedescendant-focusvisible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2me9eq[data-activedescendant-focusvisible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fgk4qqi[data-activedescendant-focusvisible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
+  a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the PromptOption slots based on the state
+ */
+export const usePromptOptionStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    disabled
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(promptOptionClassNames.root, styles.root, styles.active, disabled && styles.disabled, state.root.className);
+  return state;
+};
+//# sourceMappingURL=usePromptOptionStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n  root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  active: {\n    [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    promptOptionClassNames.root,\n    styles.root,\n    styles.active,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","promptOptionClassNames","root","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","strokeWidthThick","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","usePromptOptionStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAC1F,SAASC,uCAAuC,QAAQ,uBAAuB;AAI/E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,YAAY;QACZ,GAAGN,WAAWO,YAAY,CAACN,OAAOO,kBAAkB,CAAC;QACrDC,OAAOR,OAAOS,uBAAuB;QACrCC,WAAWV,OAAOW,mBAAmB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAYd,OAAOe,cAAc;QACjCC,UAAUhB,OAAOiB,eAAe;QAChCC,YAAYlB,OAAOmB,iBAAiB;QACpC,GAAGpB,WAAWqB,OAAO,CAACpB,OAAOqB,qBAAqB,EAAErB,OAAOsB,kBAAkB,CAAC;QAC9EC,UAAU;QAEV,UAAU;YACRC,iBAAiBxB,OAAOyB,4BAA4B;YACpDjB,OAAOR,OAAO0B,4BAA4B;QAC5C;QAEA,WAAW;YACTF,iBAAiBxB,OAAO2B,8BAA8B;YACtDnB,OAAOR,OAAO4B,8BAA8B;QAC9C;IACF;IAEAC,QAAQ;QACN,CAAC,CAAC,CAAC,EAAE5B,wCAAwC,QAAQ,CAAC,CAAC,EAAE;YACvD6B,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGjC,WAAWkC,MAAM,CAACjC,OAAOkC,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAElC,OAAOmC,iBAAiB,CAAC;YAChF,GAAGpC,WAAWO,YAAY,CAACN,OAAOO,kBAAkB,CAAC;YAErD6B,KAAK;YACLC,QAAQ;YACRC,MAAM;YACNC,OAAO;QACT;IACF;IAEAC,UAAU;QACRhC,OAAOR,OAAOyC,8BAA8B;QAE5C,UAAU;YACRjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,kCAAkC;YAChCjC,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASzC;IACfwC,MAAMzC,IAAI,CAAC2C,SAAS,GAAGhD,aACrBI,uBAAuBC,IAAI,EAC3B0C,OAAO1C,IAAI,EACX0C,OAAOhB,MAAM,EACbW,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMzC,IAAI,CAAC2C,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

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

package/lib/components/utils/usePromptListboxFunctionality.js

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