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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -1,6 +1,42 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-prompt-listbox",
3
3
  "entries": [
4
+ {
5
+ "date": "Fri, 07 Feb 2025 02:01:25 GMT",
6
+ "tag": "@fluentui-copilot/react-prompt-listbox_v0.5.1",
7
+ "version": "0.5.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "owcampbe@microsoft.com",
12
+ "package": "@fluentui-copilot/react-prompt-listbox",
13
+ "commit": "70796f91c6f172c0a1de2dd0989cec7eb8e1f803",
14
+ "comment": "chore: Use InputListbox's isInSelectionMode state."
15
+ },
16
+ {
17
+ "author": "estebanmu@microsoft.com",
18
+ "package": "@fluentui-copilot/react-prompt-listbox",
19
+ "commit": "4d2e21f84ca14afa287a9b81387169da3e26664a",
20
+ "comment": "feat: Add onActiveOptionChange to InputListbox."
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 29 Jan 2025 01:37:03 GMT",
27
+ "tag": "@fluentui-copilot/react-prompt-listbox_v0.5.0",
28
+ "version": "0.5.0",
29
+ "comments": {
30
+ "minor": [
31
+ {
32
+ "author": "estebanmu@microsoft.com",
33
+ "package": "@fluentui-copilot/react-prompt-listbox",
34
+ "commit": "d1fe11212018f106bfdcb4ad94c57c5fd7e93326",
35
+ "comment": "feat: Deprecate old promptlistbox resources and PromptOption, rename old promptlistbox hooks and export new inputlistbox based hooks."
36
+ }
37
+ ]
38
+ }
39
+ },
4
40
  {
5
41
  "date": "Thu, 09 Jan 2025 01:15:37 GMT",
6
42
  "tag": "@fluentui-copilot/react-prompt-listbox_v0.4.0",
package/CHANGELOG.md CHANGED
@@ -1,9 +1,28 @@
1
1
  # Change Log - @fluentui-copilot/react-prompt-listbox
2
2
 
3
- This log was last generated on Thu, 09 Jan 2025 01:15:37 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 07 Feb 2025 02:01:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.5.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.1)
8
+
9
+ Fri, 07 Feb 2025 02:01:25 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.5.0..@fluentui-copilot/react-prompt-listbox_v0.5.1)
11
+
12
+ ### Patches
13
+
14
+ - chore: Use InputListbox's isInSelectionMode state. ([PR #2625](https://github.com/microsoft/fluentai/pull/2625) by owcampbe@microsoft.com)
15
+ - feat: Add onActiveOptionChange to InputListbox. ([PR #2639](https://github.com/microsoft/fluentai/pull/2639) by estebanmu@microsoft.com)
16
+
17
+ ## [0.5.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.0)
18
+
19
+ Wed, 29 Jan 2025 01:37:03 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.4.0..@fluentui-copilot/react-prompt-listbox_v0.5.0)
21
+
22
+ ### Minor changes
23
+
24
+ - 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)
25
+
7
26
  ## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.4.0)
8
27
 
9
28
  Thu, 09 Jan 2025 01:15:37 GMT
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
 
3
3
  import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
4
+ import { ActiveOptionChangeData } from '@fluentui-copilot/react-input-listbox';
4
5
  import type { ComboboxBaseState } from '@fluentui/react-combobox';
5
6
  import type { ComboboxProps } from '@fluentui/react-components';
6
7
  import type { ComboboxState } from '@fluentui/react-combobox';
@@ -10,36 +11,72 @@ import type { EditorInputProps } from '@fluentui-copilot/react-editor-input';
10
11
  import type { EventData } from '@fluentui/react-utilities';
11
12
  import type { EventHandler } from '@fluentui/react-utilities';
12
13
  import type { ForwardRefComponent } from '@fluentui/react-components';
14
+ import type { InputListboxProps } from '@fluentui-copilot/react-input-listbox';
13
15
  import type { Listbox } from '@fluentui/react-components';
14
16
  import type { ListboxContextValue } from '@fluentui/react-combobox';
15
17
  import type { ListboxContextValue as ListboxContextValue_2 } from '@fluentui/react-components';
16
- import type { OptionProps } from '@fluentui/react-components';
17
- import type { OptionState } from '@fluentui/react-components';
18
+ import { Option as Option_2 } from '@fluentui-copilot/react-input-listbox';
19
+ import { optionClassNames } from '@fluentui-copilot/react-input-listbox';
20
+ import { OptionOnSelectData } from '@fluentui-copilot/react-input-listbox';
21
+ import { OptionProps } from '@fluentui-copilot/react-input-listbox';
22
+ import type { OptionProps as OptionProps_2 } from '@fluentui/react-components';
23
+ import { OptionSlots } from '@fluentui-copilot/react-input-listbox';
24
+ import { OptionState } from '@fluentui-copilot/react-input-listbox';
25
+ import type { OptionState as OptionState_2 } from '@fluentui/react-components';
26
+ import { OptionValue } from '@fluentui-copilot/react-input-listbox';
27
+ import { OverrideActionHandler } from '@fluentui-copilot/react-input-listbox';
28
+ import { OverrideActionHandlerOptions } from '@fluentui-copilot/react-input-listbox';
29
+ import { OverrideActionHandlerResult } from '@fluentui-copilot/react-input-listbox';
18
30
  import type { PortalProps } from '@fluentui/react-components';
19
- import type { PositioningShorthand } from '@fluentui/react-components';
31
+ import type { PositioningShorthand } from '@fluentui/react-positioning';
32
+ import type { PositioningShorthand as PositioningShorthand_2 } from '@fluentui/react-components';
20
33
  import * as React_2 from 'react';
21
34
  import type { default as React_3 } from 'react';
35
+ import { renderOption_unstable } from '@fluentui-copilot/react-input-listbox';
22
36
  import type { Slot } from '@fluentui/react-components';
23
37
  import type { SlotClassNames } from '@fluentui/react-components';
38
+ import type { UseInputListboxFunctionalityParams } from '@fluentui-copilot/react-input-listbox';
39
+ import { useOption_unstable } from '@fluentui-copilot/react-input-listbox';
40
+ import { useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
24
41
 
25
- export declare type OnOpenChangeData = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
42
+ export { ActiveOptionChangeData }
43
+
44
+ export declare type OnOpenChangeData = (EventData<'click', React_2.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_2.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_2.KeyboardEvent<HTMLSpanElement>>) & {
26
45
  open: boolean;
27
46
  };
28
47
 
48
+ export declare type OnOpenChangeDataDeprecated = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
49
+ open: boolean;
50
+ };
51
+
52
+ export { Option_2 as Option }
53
+
54
+ export { optionClassNames }
55
+
29
56
  declare type OptionCollectionState = {
30
57
  /** The total number of options in the collection. */
31
58
  getCount: () => number;
32
59
  /** Returns the option data by key. */
33
- getOptionById(id: string): OptionValue | undefined;
60
+ getOptionById(id: string): OptionValue_2 | undefined;
34
61
  /** Returns an array of options filtered by a value matching function against the option's value string. */
35
- getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
62
+ getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue_2[];
36
63
  /** The unordered option data. */
37
- options: OptionValue[];
64
+ options: OptionValue_2[];
38
65
  /** A function that child options call to register their values. Returns a function to unregister the option. */
39
- registerOption: (option: OptionValue, element: HTMLElement) => () => void;
66
+ registerOption: (option: OptionValue_2, element: HTMLElement) => () => void;
40
67
  };
41
68
 
42
- declare type OptionValue = {
69
+ export { OptionOnSelectData }
70
+
71
+ export { OptionProps }
72
+
73
+ export { OptionSlots }
74
+
75
+ export { OptionState }
76
+
77
+ export { OptionValue }
78
+
79
+ declare type OptionValue_2 = {
43
80
  /** The disabled state of the option. */
44
81
  disabled?: boolean;
45
82
  /** The `id` attribute of the option. */
@@ -50,10 +87,17 @@ declare type OptionValue = {
50
87
  value: string;
51
88
  };
52
89
 
53
- export declare type ProcessedPromptListboxProps = Partial<Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>> & {
90
+ export { OverrideActionHandler }
91
+
92
+ export { OverrideActionHandlerOptions }
93
+
94
+ export { OverrideActionHandlerResult }
95
+
96
+ export declare type ProcessedPromptListboxPropsDeprecated = Partial<Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>> & {
54
97
  ref?: React_3.MutableRefObject<any>;
55
98
  };
56
99
 
100
+ /**@deprecated - use InputListbox instead */
57
101
  export declare const PromptListbox: ForwardRefComponent<PromptListboxProps>;
58
102
 
59
103
  export declare const promptListboxClassNames: SlotClassNames<PromptListboxSlots>;
@@ -92,6 +136,7 @@ export declare type PromptListboxSlots = {
92
136
  */
93
137
  export declare type PromptListboxState = ComponentState<PromptListboxSlots> & PromptListboxContextState & Required<Pick<PromptListboxProps, 'open' | 'inlinePopup'>> & Pick<PromptListboxProps, 'mountNode'>;
94
138
 
139
+ /**@deprecated - use Option instead */
95
140
  export declare const PromptOption: ForwardRefComponent<PromptOptionProps>;
96
141
 
97
142
  export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
@@ -99,7 +144,7 @@ export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
99
144
  /**
100
145
  * PromptOption Props
101
146
  */
102
- export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps, 'disabled' | 'value'> & ({
147
+ export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps_2, 'disabled' | 'value'> & ({
103
148
  /**
104
149
  * An optional override the string value of the PromptOption's display text,
105
150
  * defaulting to the PromptOption's child content.
@@ -125,7 +170,9 @@ export declare type PromptOptionSlots = {
125
170
  /**
126
171
  * State used in rendering PromptOption
127
172
  */
128
- export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;
173
+ export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState_2, 'disabled' | 'selected'>;
174
+
175
+ export { renderOption_unstable }
129
176
 
130
177
  /**
131
178
  * Render the final JSX of PromptListbox
@@ -144,9 +191,13 @@ declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.Keyboa
144
191
  declare type SelectionState = {
145
192
  clearSelection: (event: SelectionEvents) => void;
146
193
  selectedOptions: string[];
147
- selectOption: (event: SelectionEvents, option: OptionValue) => void;
194
+ selectOption: (event: SelectionEvents, option: OptionValue_2) => void;
148
195
  };
149
196
 
197
+ export { useOption_unstable }
198
+
199
+ export { useOptionStyles_unstable }
200
+
150
201
  /**
151
202
  * Create the state required to render PromptListbox.
152
203
  *
@@ -158,7 +209,41 @@ declare type SelectionState = {
158
209
  */
159
210
  export declare const usePromptListbox_unstable: (props: PromptListboxProps, ref: React_2.Ref<HTMLDivElement>) => PromptListboxState;
160
211
 
161
- export declare type UsePromptListboxFunctionality = {
212
+ export declare type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {
213
+ /**
214
+ * Component to be rendered in the Input component. This should be passed to the listbox prop.
215
+ */
216
+ promptListbox: JSX.Element;
217
+ /**
218
+ * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to
219
+ * work correctly.
220
+ */
221
+ triggerProps: {
222
+ ref: React_2.RefObject<HTMLSpanElement>;
223
+ /**
224
+ * Whether the listbox is being used to go through options or the user is currently typing.
225
+ */
226
+ isInSelectionMode: boolean;
227
+ } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;
228
+ /**
229
+ * Ref used to point which element the listbox should be anchored to. Most use cases
230
+ * will provide this prop to the PromptInput's EditorInput (since this is the root slot,
231
+ * this is provided directly to the component and not the slot).
232
+ *
233
+ * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs
234
+ * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`
235
+ */
236
+ containerRef: React_2.RefObject<ContainerElementType>;
237
+ /**
238
+ * Plugin used to tell where the cursor is in the EditorInput, this is important for the
239
+ * keyboard behavior. This should be passed as children in the PromptInput.
240
+ */
241
+ cursorPositionPlugin: JSX.Element;
242
+ };
243
+
244
+ export declare function usePromptListboxFunctionality<TriggerElementType extends HTMLElement = HTMLSpanElement, ContainerElementType extends HTMLElement = HTMLDivElement>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType>;
245
+
246
+ export declare type UsePromptListboxFunctionalityDeprecated = {
162
247
  /**
163
248
  * Component to be rendered in the Input component. This should be passed to the listbox prop.
164
249
  */
@@ -190,13 +275,57 @@ export declare type UsePromptListboxFunctionality = {
190
275
  cursorPositionPlugin: JSX.Element;
191
276
  };
192
277
 
193
- export declare function usePromptListboxFunctionality(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality;
278
+ /**
279
+ * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
280
+ */
281
+ export declare function usePromptListboxFunctionalityDeprecated(params: UsePromptListboxFunctionalityParamsDeprecated): UsePromptListboxFunctionalityDeprecated;
194
282
 
195
- export declare type UsePromptListboxFunctionalityParams = {
283
+ export declare type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {
196
284
  open?: boolean;
197
285
  defaultOpen?: boolean;
198
286
  onOpenChange?: EventHandler<OnOpenChangeData>;
199
287
  positioning?: PositioningShorthand;
288
+ /**
289
+ * Whether the listbox's width should take all the available space or only
290
+ * the required space.
291
+ *
292
+ * @default false
293
+ */
294
+ fluid?: boolean;
295
+ /**
296
+ * Props to be passed to the InputListbox component
297
+ */
298
+ listboxProps?: Partial<InputListboxProps> & {
299
+ ref?: React_2.RefObject<HTMLDivElement>;
300
+ };
301
+ /**
302
+ * Whether to allow reaching the listbox options by arrowing up at the start of the input.
303
+ * Note, this prop is meant to be used with the following positioning props:
304
+ * ```ts
305
+ * usePromptListboxFunctionality({
306
+ * positioning: {
307
+ * position: 'above',
308
+ * fallbackPositions: ['above']
309
+ * }
310
+ * });
311
+ * ```
312
+ * This is useful when using PromptListbox with other components such as ChatInput since
313
+ * the input will always stay at the bottom therefore the listbox would always get cut.
314
+ *
315
+ * @default false
316
+ */
317
+ allowArrowUpNavigation?: boolean;
318
+ /**
319
+ * Whether to render the listbox inline or use a portal.
320
+ */
321
+ inline?: boolean;
322
+ } & Pick<PortalProps, 'mountNode'>;
323
+
324
+ export declare type UsePromptListboxFunctionalityParamsDeprecated = {
325
+ open?: boolean;
326
+ defaultOpen?: boolean;
327
+ onOpenChange?: EventHandler<OnOpenChangeDataDeprecated>;
328
+ positioning?: PositioningShorthand_2;
200
329
  /**
201
330
  * Callback to call when the selection mode (selecting an action vs typing) changes.
202
331
  */
@@ -204,7 +333,7 @@ export declare type UsePromptListboxFunctionalityParams = {
204
333
  /**
205
334
  * Props to be passed to the ListboxComponent
206
335
  */
207
- listboxProps?: ProcessedPromptListboxProps;
336
+ listboxProps?: ProcessedPromptListboxPropsDeprecated;
208
337
  /**
209
338
  * Whether the listbox's width should take all the available space or only
210
339
  * the required space.
@@ -3,7 +3,7 @@ import { usePromptListbox_unstable } from './usePromptListbox';
3
3
  import { renderPromptListbox_unstable } from './renderPromptListbox';
4
4
  import { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';
5
5
  import { usePromptListboxContextValues } from './usePromptListboxContextValues';
6
- // PromptListbox component - TODO: add more docs
6
+ /**@deprecated - use InputListbox instead */
7
7
  export const PromptListbox = /*#__PURE__*/React.forwardRef((props, ref) => {
8
8
  const state = usePromptListbox_unstable(props, ref);
9
9
  const contextValues = usePromptListboxContextValues(state);
@@ -1 +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"}
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/**@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"}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { usePromptOption_unstable } from './usePromptOption';
3
3
  import { renderPromptOption_unstable } from './renderPromptOption';
4
4
  import { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';
5
- // PromptOption component - TODO: add more docs
5
+ /**@deprecated - use Option instead */
6
6
  export const PromptOption = /*#__PURE__*/React.forwardRef((props, ref) => {
7
7
  const state = usePromptOption_unstable(props, ref);
8
8
  usePromptOptionStyles_unstable(state);
@@ -1 +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"}
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/**@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"}
@@ -20,9 +20,9 @@ export function useListboxPositioning(props) {
20
20
  ...resolvePositioningShorthand(positioning)
21
21
  };
22
22
  const {
23
- targetRef,
24
- containerRef
23
+ containerRef: listboxRef,
24
+ targetRef: anchorRef
25
25
  } = usePositioning(popperOptions);
26
- return [containerRef, targetRef];
26
+ return [listboxRef, anchorRef];
27
27
  }
28
28
  //# sourceMappingURL=useListboxPositioning.js.map
@@ -1 +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"}
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 { 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"}
@@ -9,6 +9,9 @@ import { useTriggerKeydown } from './useTriggerKeyDown';
9
9
  import { PromptListbox } from '../PromptListbox';
10
10
  import { promptOptionClassNames } from '../PromptOption';
11
11
  import { PromptListboxMotion } from '../motion/PromptListboxMotion';
12
+ /**
13
+ * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
14
+ */
12
15
  export function usePromptListboxFunctionality(params) {
13
16
  const {
14
17
  positioning,
@@ -1 +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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"}
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\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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,4BAA4B;AAChF,SAASC,oBAAoB,QAAQ,qCAAqC;AAC1E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,gCAAgC;AAOpE;;CAEC,GACD,OAAO,SAASC,8BACdC,MAA2C;IAE3C,MAAM,EACJC,WAAW,EACXC,YAAY,EACZC,qBAAqB,EACrBC,YAAY,EACZC,QAAQ,KAAK,EACbC,yBAAyB,KAAK,EAC/B,GAAGN;IACJ,MAAM,EACJO,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,YAAYC,0BAA0B,EACvC,GAAGvB,oBAAqD;QACvDwB,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAAClB,uBAAuBmB,IAAI;IACtE;IACA,iEAAiE;IACjE,MAAMC,aAAa3B,cAAcmB;IACjC,MAAMS,iBAAiBzB,aAAaW,yBAAAA,0BAAAA,eAAgB,CAAC;IACrD,MAAM,EAAEe,YAAY,EAAE,GAAGD;IACzB,MAAME,mBAAmB5B;IACzB,MAAM,EAAE6B,aAAa,EAAE,GAAGD;IAC1B,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGpC,MAAMqC,QAAQ,CAAiB;IAC3E,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGvC,MAAMqC,QAAQ,CAAC;IACjE,MAAM,CAACG,MAAMC,QAAQ,GAAGvC,qBAAqB;QAC3CwC,OAAO7B,OAAO2B,IAAI;QAClBG,cAAc9B,OAAO+B,WAAW;QAChCC,cAAc;IAChB;IAEA,MAAMC,mBAAmB9C,MAAM+C,WAAW,CACxC,CAACC;QACC,IAAIA,kBAAkB,OAAO;YAC3BxB,2BAA2ByB,IAAI;YAC/BC,wBAAwB;QAC1B,OAAO;YACLA,wBAAwB;QAC1B;QAEAX,qBAAqBS;QACrBhC,kCAAAA,4CAAAA,sBAAwBgC;IAC1B,GACA;QAACxB;QAA4BR;KAAsB;IAGrD,MAAMmC,SAAS,CAACC;QACdX,QAAQ;QACR1B,yBAAAA,mCAAAA,aAAeqC,OAAO;YAAEA;YAAOC,MAAM;YAASb,MAAM;QAAM;QAC1DM,iBAAiB;IACnB;IAEA,MAAMQ,UAAU,CAACF;QACf,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EAAE;YACxCf,QAAQ;YACR1B,yBAAAA,mCAAAA,aAAeqC,OAAO;gBAAEA;gBAAOC,MAAM;gBAASb,MAAM;YAAK;QAC3D;IACF;IAEA,MAAMiB,qCAAuB,oBAACrD;QAAqBgC,mBAAmBA;;IAEtE,MAAMsB,gBAAgB1D,MAAM+C,WAAW,CAAC;QACtCD,iBAAiB;QACjB9B,kCAAAA,4CAAAA,sBAAwB;IAC1B,GAAG;QAACA;QAAuB8B;KAAiB;IAE5C,uCAAuC;IACvC,MAAMa,YAAYnD,kBAAkB;QAClC,GAAGyB,gBAAgB;QACnBd;QACAK;QACAU;QACAiB,QAAQO;QACR1B;QACAG;QACAK;QACAoB,aAAa;QACbtB;QACAQ;IACF;IAEA,uGAAuG;IACvG,0GAA0G;IAC1G,kFAAkF;IAClF,MAAM,CAACe,sBAAsBX,wBAAwB,GAAGlD,MAAMqC,QAAQ,CAAC;IAEvErC,MAAM8D,SAAS,CAAC;QACd,IAAID,sBAAsB;gBACxB/B;aAAAA,sBAAAA,WAAWiC,OAAO,cAAlBjC,0CAAAA,oBAAoBkC,eAAe,CAAC;QACtC;IACA,oFAAoF;IACpF,kFAAkF;IAClF,gEAAgE;IAChE,yDAAyD;IACzD,uDAAuD;IACzD,GAAG;QAACH;KAAqB;IAEzB,MAAM,CAACI,kBAAkBC,kBAAkB,GAAG3D,sBAAsB;QAAEO;QAAaI;IAAM;IAEzF,MAAMiD,mBAAmBhE,cAAc8D,kBAAkB5C,4BAA4BJ,yBAAAA,mCAAAA,aAAcmD,GAAG;IACtG,MAAMC,UAAUrE,MAAMsE,OAAO,CAAC;QAC5B,qBACE,oBAAC3D;YAAoB4D,SAAS/B;yBAC5B,oBAAC/B;YACC+B,MAAMA;YACL,GAAGvB,YAAY;YACf,GAAGgB,gBAAgB;YACnB,GAAGF,cAAc;YAClBqC,KAAKD;YACL3C,4BAA4BA;;IAIpC,GAAG;QAACA;QAA4B2C;QAAkBlD;QAAcuB;QAAMP;QAAkBF;KAAe;IAEvG,OAAO;QACLyC,eAAeH;QACfI,cAAc;YACZL,KAAKtC;YACLqB;YACAG;YACAK;YACArB;QACF;QACAoC,cAAcR;QACdT;IACF;AACF"}
@@ -0,0 +1,139 @@
1
+ import * as React from 'react';
2
+ import { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';
3
+ import { PromptListboxMotion } from '../motion/PromptListboxMotion';
4
+ import { mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
5
+ import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
6
+ import { useListboxPositioning } from './useListboxPositioning';
7
+ import { Portal } from '@fluentui/react-components';
8
+ export function usePromptListboxFunctionality(params) {
9
+ var _params_listboxProps, _params_listboxProps1;
10
+ const {
11
+ fluid = false,
12
+ allowArrowUpNavigation = false,
13
+ onSelectionModeChange
14
+ } = params;
15
+ const [open, setOpen] = useControllableState({
16
+ state: params.open,
17
+ defaultState: params.defaultOpen,
18
+ initialState: false
19
+ });
20
+ const [cursorPosition, setCursorPosition] = React.useState('end');
21
+ const overrideActionHandler = (e, {
22
+ activeOption,
23
+ action,
24
+ activeDescendantController,
25
+ isInSelectionMode
26
+ }) => {
27
+ var _params_overrideActionHandler;
28
+ const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
29
+ const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
30
+ let newAction = undefined;
31
+ let newIsInSelection = undefined;
32
+ const firstOption = activeDescendantController.first({
33
+ passive: true
34
+ });
35
+ switch (action) {
36
+ case 'Next':
37
+ if (!isInSelectionMode && !atEnd) {
38
+ newAction = 'Type';
39
+ newIsInSelection = false;
40
+ }
41
+ break;
42
+ case 'Previous':
43
+ if (!isInSelectionMode && !atStart) {
44
+ newAction = 'Type';
45
+ newIsInSelection = false;
46
+ } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
47
+ newAction = 'Type';
48
+ newIsInSelection = false;
49
+ e.preventDefault();
50
+ }
51
+ break;
52
+ case 'First':
53
+ case 'Last':
54
+ case 'PageDown':
55
+ case 'PageUp':
56
+ if (!isInSelectionMode) {
57
+ newAction = 'Type';
58
+ newIsInSelection = false;
59
+ }
60
+ break;
61
+ }
62
+ const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
63
+ activeOption,
64
+ action,
65
+ activeDescendantController,
66
+ isInSelectionMode
67
+ });
68
+ return {
69
+ action: newAction,
70
+ isInSelectionMode: newIsInSelection,
71
+ ...userOverrides
72
+ };
73
+ };
74
+ const baseListboxFunctionality = useInputListboxFunctionality({
75
+ ...params,
76
+ onSelectionModeChange,
77
+ overrideActionHandler
78
+ });
79
+ const {
80
+ onBlur: baseOnBlur,
81
+ onKeyDown: baseOnKeyDown,
82
+ ref: triggerRef,
83
+ isInSelectionMode
84
+ } = baseListboxFunctionality.triggerProps;
85
+ const onFocus = event => {
86
+ if (event.target === event.currentTarget) {
87
+ var _params_onOpenChange;
88
+ setOpen(true);
89
+ (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
90
+ event,
91
+ type: 'focus',
92
+ open: true
93
+ });
94
+ }
95
+ };
96
+ const onBlur = useEventCallback(mergeCallbacks(baseOnBlur, e => {
97
+ var _params_onOpenChange;
98
+ setOpen(false);
99
+ (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
100
+ event: e,
101
+ type: 'focus',
102
+ open: false
103
+ });
104
+ }));
105
+ const [listboxRef, anchorRef] = useListboxPositioning({
106
+ fluid,
107
+ positioning: params.positioning
108
+ });
109
+ const listboxId = useId('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
110
+ const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
111
+ setCursorPosition: setCursorPosition
112
+ });
113
+ const innerListbox = /*#__PURE__*/React.createElement(InputListbox, {
114
+ ...params.listboxProps,
115
+ ...baseListboxFunctionality.inputListboxProps,
116
+ id: listboxId,
117
+ ref: useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
118
+ });
119
+ const listbox = /*#__PURE__*/React.createElement(PromptListboxMotion, {
120
+ visible: open
121
+ }, /*#__PURE__*/React.createElement("span", {
122
+ "aria-owns": open ? listboxId : undefined
123
+ }, open && (params.inline ? innerListbox : /*#__PURE__*/React.createElement(Portal, {
124
+ mountNode: params.mountNode
125
+ }, innerListbox))));
126
+ return {
127
+ promptListbox: listbox,
128
+ cursorPositionPlugin,
129
+ triggerProps: {
130
+ ref: triggerRef,
131
+ isInSelectionMode,
132
+ onFocus,
133
+ onKeyDown: baseOnKeyDown,
134
+ onBlur
135
+ },
136
+ containerRef: anchorRef
137
+ };
138
+ }
139
+ //# sourceMappingURL=usePromptListboxFunctionalityV2.js.map
@@ -0,0 +1 @@
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, onSelectionModeChange } = 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\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 baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = 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","onSelectionModeChange","open","setOpen","state","defaultState","defaultOpen","initialState","cursorPosition","setCursorPosition","useState","overrideActionHandler","e","activeOption","action","activeDescendantController","isInSelectionMode","atStart","atEnd","newAction","undefined","newIsInSelection","firstOption","first","passive","id","preventDefault","userOverrides","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 CHANGED
@@ -1,4 +1,6 @@
1
1
  export { PromptListbox, promptListboxClassNames, renderPromptListbox_unstable, usePromptListboxStyles_unstable, usePromptListbox_unstable } from './PromptListbox';
2
- export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';
2
+ export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';
3
+ export { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';
3
4
  export { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';
5
+ export { Option, optionClassNames, renderOption_unstable, useOption_unstable, useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
4
6
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +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"}
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/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 ActiveOptionChangeData,\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;AAaxB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,wBAAwB,QACnB,wCAAwC"}
@@ -1 +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"}
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/**@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"}
@@ -1 +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"}
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/**@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"}
@@ -28,9 +28,9 @@ function useListboxPositioning(props) {
28
28
  autoSize: true,
29
29
  ...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
30
30
  };
31
- const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(popperOptions);
31
+ const { containerRef: listboxRef, targetRef: anchorRef } = (0, _reactpositioning.usePositioning)(popperOptions);
32
32
  return [
33
- containerRef,
34
- targetRef
33
+ listboxRef,
34
+ anchorRef
35
35
  ];
36
36
  } //# sourceMappingURL=useListboxPositioning.js.map
@@ -1 +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"}
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 { 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"}
@@ -1 +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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"}
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\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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"}
@@ -0,0 +1,135 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "usePromptListboxFunctionality", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return usePromptListboxFunctionality;
9
+ }
10
+ });
11
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
14
+ const _PromptListboxMotion = require("../motion/PromptListboxMotion");
15
+ const _reactutilities = require("@fluentui/react-utilities");
16
+ const _CursorPositionPlugin = require("../../plugins/CursorPositionPlugin");
17
+ const _useListboxPositioning = require("./useListboxPositioning");
18
+ const _reactcomponents = require("@fluentui/react-components");
19
+ function usePromptListboxFunctionality(params) {
20
+ var _params_listboxProps, _params_listboxProps1;
21
+ const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;
22
+ const [open, setOpen] = (0, _reactutilities.useControllableState)({
23
+ state: params.open,
24
+ defaultState: params.defaultOpen,
25
+ initialState: false
26
+ });
27
+ const [cursorPosition, setCursorPosition] = _react.useState('end');
28
+ const overrideActionHandler = (e, { activeOption, action, activeDescendantController, isInSelectionMode })=>{
29
+ var _params_overrideActionHandler;
30
+ const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
31
+ const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
32
+ let newAction = undefined;
33
+ let newIsInSelection = undefined;
34
+ const firstOption = activeDescendantController.first({
35
+ passive: true
36
+ });
37
+ switch(action){
38
+ case 'Next':
39
+ if (!isInSelectionMode && !atEnd) {
40
+ newAction = 'Type';
41
+ newIsInSelection = false;
42
+ }
43
+ break;
44
+ case 'Previous':
45
+ if (!isInSelectionMode && !atStart) {
46
+ newAction = 'Type';
47
+ newIsInSelection = false;
48
+ } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
49
+ newAction = 'Type';
50
+ newIsInSelection = false;
51
+ e.preventDefault();
52
+ }
53
+ break;
54
+ case 'First':
55
+ case 'Last':
56
+ case 'PageDown':
57
+ case 'PageUp':
58
+ if (!isInSelectionMode) {
59
+ newAction = 'Type';
60
+ newIsInSelection = false;
61
+ }
62
+ break;
63
+ }
64
+ const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
65
+ activeOption,
66
+ action,
67
+ activeDescendantController,
68
+ isInSelectionMode
69
+ });
70
+ return {
71
+ action: newAction,
72
+ isInSelectionMode: newIsInSelection,
73
+ ...userOverrides
74
+ };
75
+ };
76
+ const baseListboxFunctionality = (0, _reactinputlistbox.useInputListboxFunctionality)({
77
+ ...params,
78
+ onSelectionModeChange,
79
+ overrideActionHandler
80
+ });
81
+ const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef, isInSelectionMode } = baseListboxFunctionality.triggerProps;
82
+ const onFocus = (event)=>{
83
+ if (event.target === event.currentTarget) {
84
+ var _params_onOpenChange;
85
+ setOpen(true);
86
+ (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
87
+ event,
88
+ type: 'focus',
89
+ open: true
90
+ });
91
+ }
92
+ };
93
+ const onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(baseOnBlur, (e)=>{
94
+ var _params_onOpenChange;
95
+ setOpen(false);
96
+ (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
97
+ event: e,
98
+ type: 'focus',
99
+ open: false
100
+ });
101
+ }));
102
+ const [listboxRef, anchorRef] = (0, _useListboxPositioning.useListboxPositioning)({
103
+ fluid,
104
+ positioning: params.positioning
105
+ });
106
+ const listboxId = (0, _reactutilities.useId)('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
107
+ const cursorPositionPlugin = /*#__PURE__*/ _react.createElement(_CursorPositionPlugin.CursorPositionPlugin, {
108
+ setCursorPosition: setCursorPosition
109
+ });
110
+ const innerListbox = /*#__PURE__*/ _react.createElement(_reactinputlistbox.InputListbox, {
111
+ ...params.listboxProps,
112
+ ...baseListboxFunctionality.inputListboxProps,
113
+ id: listboxId,
114
+ ref: (0, _reactutilities.useMergedRefs)(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
115
+ });
116
+ const listbox = /*#__PURE__*/ _react.createElement(_PromptListboxMotion.PromptListboxMotion, {
117
+ visible: open
118
+ }, /*#__PURE__*/ _react.createElement("span", {
119
+ "aria-owns": open ? listboxId : undefined
120
+ }, open && (params.inline ? innerListbox : /*#__PURE__*/ _react.createElement(_reactcomponents.Portal, {
121
+ mountNode: params.mountNode
122
+ }, innerListbox))));
123
+ return {
124
+ promptListbox: listbox,
125
+ cursorPositionPlugin,
126
+ triggerProps: {
127
+ ref: triggerRef,
128
+ isInSelectionMode,
129
+ onFocus,
130
+ onKeyDown: baseOnKeyDown,
131
+ onBlur
132
+ },
133
+ containerRef: anchorRef
134
+ };
135
+ } //# sourceMappingURL=usePromptListboxFunctionalityV2.js.map
@@ -0,0 +1 @@
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, onSelectionModeChange } = 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\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 baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = 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","useControllableState","state","cursorPosition","defaultState","overrideActionHandler","e","React","undefined","newIsInSelection","allowArrowUpNavigation","atEnd","activeDescendantController","first","isInSelectionMode","newAction","atStart","activeOption","id","firstOption","userOverrides","_params_overrideActionHandler","call","action","baseOnBlur","event","useInputListboxFunctionality","onKeyDown","baseOnKeyDown","ref","triggerRef","useEventCallback","triggerProps","onOpenChange","_params_onOpenChange","type","listboxRef","onBlur","cursorPositionPlugin","setCursorPosition","innerListbox","InputListbox","baseListboxFunctionality","listboxId","listbox","useListboxPositioning","PromptListboxMotion","positioning","inline","listboxProps","Portal","mountNode","createElement","CursorPositionPlugin","promptListbox","inputListboxProps","containerRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -9,25 +9,43 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ Option: function() {
13
+ return _reactinputlistbox.Option;
14
+ },
12
15
  PromptListbox: function() {
13
16
  return _PromptListbox.PromptListbox;
14
17
  },
15
18
  PromptOption: function() {
16
19
  return _PromptOption.PromptOption;
17
20
  },
21
+ optionClassNames: function() {
22
+ return _reactinputlistbox.optionClassNames;
23
+ },
18
24
  promptListboxClassNames: function() {
19
25
  return _PromptListbox.promptListboxClassNames;
20
26
  },
21
27
  promptOptionClassNames: function() {
22
28
  return _PromptOption.promptOptionClassNames;
23
29
  },
30
+ renderOption_unstable: function() {
31
+ return _reactinputlistbox.renderOption_unstable;
32
+ },
24
33
  renderPromptListbox_unstable: function() {
25
34
  return _PromptListbox.renderPromptListbox_unstable;
26
35
  },
27
36
  renderPromptOption_unstable: function() {
28
37
  return _PromptOption.renderPromptOption_unstable;
29
38
  },
39
+ useOptionStyles_unstable: function() {
40
+ return _reactinputlistbox.useOptionStyles_unstable;
41
+ },
42
+ useOption_unstable: function() {
43
+ return _reactinputlistbox.useOption_unstable;
44
+ },
30
45
  usePromptListboxFunctionality: function() {
46
+ return _usePromptListboxFunctionalityV2.usePromptListboxFunctionality;
47
+ },
48
+ usePromptListboxFunctionalityDeprecated: function() {
31
49
  return _usePromptListboxFunctionality.usePromptListboxFunctionality;
32
50
  },
33
51
  usePromptListboxStyles_unstable: function() {
@@ -44,6 +62,8 @@ _export(exports, {
44
62
  }
45
63
  });
46
64
  const _PromptListbox = require("./PromptListbox");
65
+ const _usePromptListboxFunctionalityV2 = require("./components/utils/usePromptListboxFunctionalityV2");
47
66
  const _usePromptListboxFunctionality = require("./components/utils/usePromptListboxFunctionality");
48
67
  const _PromptOption = require("./PromptOption");
68
+ const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
49
69
  //# sourceMappingURL=index.js.map
@@ -1 +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"}
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/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 ActiveOptionChangeData,\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":";;;;;;;;;;;IA6CEA,MAAM;eAANA,yBAAM;;IA3CNC,aAAa;eAAbA,4BAAa;;IAwBbC,YAAY;eAAZA,0BAAY;;IAoBZC,gBAAgB;eAAhBA,mCAAgB;;IA3ChBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,sBAAsB;eAAtBA,oCAAsB;;IAoBtBC,qBAAqB;eAArBA,wCAAqB;;IA3CrBC,4BAA4B;eAA5BA,2CAA4B;;IAwB5BC,2BAA2B;eAA3BA,yCAA2B;;IAqB3BC,wBAAwB;eAAxBA,2CAAwB;;IADxBC,kBAAkB;eAAlBA,qCAAkB;;IAvCXC,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;mCAmBA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-prompt-listbox",
3
- "version": "0.4.1",
3
+ "version": "0.5.1",
4
4
  "description": "PromptListbox for input components using EditorInput.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,10 +12,11 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/chat-input-plugins": "^0.4.1",
16
- "@fluentui-copilot/react-chat-input-plugins": "^0.4.1",
17
- "@fluentui-copilot/react-editor-input": "^0.4.1",
18
- "@fluentui-copilot/react-prompt-input": "^0.5.1",
15
+ "@fluentui-copilot/chat-input-plugins": "^0.4.2",
16
+ "@fluentui-copilot/react-chat-input-plugins": "^0.4.2",
17
+ "@fluentui-copilot/react-editor-input": "^0.4.3",
18
+ "@fluentui-copilot/react-input-listbox": "^0.1.2",
19
+ "@fluentui-copilot/react-prompt-input": "^0.5.3",
19
20
  "@fluentui-copilot/react-provider": "^0.9.3",
20
21
  "@fluentui-copilot/react-text-editor": "^0.4.1",
21
22
  "@fluentui-copilot/text-editor": "^0.3.1",