@fluentui-copilot/react-prompt-listbox 0.0.0-nightly-20240722-0406-476bfcb7.1 → 0.0.0-nightly-20240724-0406-74b90794.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 +54 -15
- package/CHANGELOG.md +22 -9
- package/dist/index.d.ts +22 -3
- package/lib/components/PromptListbox/renderPromptListbox.js +10 -4
- package/lib/components/PromptListbox/renderPromptListbox.js.map +1 -1
- package/lib/components/PromptListbox/usePromptListbox.js +2 -1
- package/lib/components/PromptListbox/usePromptListbox.js.map +1 -1
- package/lib/components/PromptOption/PromptOption.types.js +1 -2
- package/lib/components/PromptOption/PromptOption.types.js.map +1 -1
- package/lib/components/PromptOption/renderPromptOption.js +0 -1
- package/lib/components/PromptOption/renderPromptOption.js.map +1 -1
- package/lib/components/PromptOption/usePromptOption.js +80 -8
- package/lib/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js +71 -6
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +2 -2
- package/lib/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.js +8 -4
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js +2 -1
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js.map +1 -1
- package/lib-commonjs/components/PromptOption/PromptOption.types.js +0 -2
- package/lib-commonjs/components/PromptOption/PromptOption.types.js.map +1 -1
- package/lib-commonjs/components/PromptOption/renderPromptOption.js +0 -1
- package/lib-commonjs/components/PromptOption/renderPromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +83 -8
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js +179 -5
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +2 -2
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 24 Jul 2024 04:13:29 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240724-0406-74b90794.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,38 +16,77 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
20
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
26
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
32
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
37
|
-
"comment": "Bump @fluentui-copilot/react-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
38
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
43
|
-
"comment": "Bump @fluentui-copilot/react-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
44
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
49
|
-
"comment": "Bump @fluentui-copilot/text-editor to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
50
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
55
|
+
"comment": "Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240724-0406-74b90794.1",
|
|
56
|
+
"commit": "b8fd64d6036866520957c195cff5cd6b3fddef3a"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Tue, 23 Jul 2024 00:56:25 GMT",
|
|
63
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.1",
|
|
64
|
+
"version": "0.0.1",
|
|
65
|
+
"comments": {
|
|
66
|
+
"patch": [
|
|
67
|
+
{
|
|
68
|
+
"author": "estebanmu@microsoft.com",
|
|
69
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
70
|
+
"commit": "8c2c06410ced474386f2b375722a15e3cd22a22c",
|
|
71
|
+
"comment": "feat: Add PromptOption implementation and update to follow a11y guidelines."
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "estebanmu@microsoft.com",
|
|
75
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
76
|
+
"commit": "00be29817006f88b9bc3083ba6907c5a77f4eb19",
|
|
77
|
+
"comment": "chore: Scaffold PromptOption."
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "estebanmu@microsoft.com",
|
|
81
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
82
|
+
"commit": "12d03f775a8c8f6bc8894233fea3b3897786fcad",
|
|
83
|
+
"comment": "chore: Move Listbox into its own package."
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "jiangemma@microsoft.com",
|
|
87
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
88
|
+
"commit": "d142c9d1467313beed45ac50baf938436cc2c18a",
|
|
89
|
+
"comment": "chore: Rename targetRef to containerRef"
|
|
51
90
|
}
|
|
52
91
|
]
|
|
53
92
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-prompt-listbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jul 2024 04:13:29 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240724-0406-74b90794.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240724-0406-74b90794.1)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Wed, 24 Jul 2024 04:13:29 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.0.1..@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240724-0406-74b90794.1)
|
|
10
11
|
|
|
11
12
|
### Changes
|
|
12
13
|
|
|
13
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
14
|
-
- Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-
|
|
15
|
-
- Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/react-
|
|
18
|
-
- Bump @fluentui-copilot/react-
|
|
19
|
-
- Bump @fluentui-copilot/text-editor to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
18
|
+
- Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
19
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
20
|
+
- Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
21
|
+
- Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240724-0406-74b90794.1 ([commit](https://github.com/microsoft/fluentai/commit/b8fd64d6036866520957c195cff5cd6b3fddef3a) by beachball)
|
|
22
|
+
|
|
23
|
+
## [0.0.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.1)
|
|
24
|
+
|
|
25
|
+
Tue, 23 Jul 2024 00:56:25 GMT
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- feat: Add PromptOption implementation and update to follow a11y guidelines. ([PR #1904](https://github.com/microsoft/fluentai/pull/1904) by estebanmu@microsoft.com)
|
|
30
|
+
- chore: Scaffold PromptOption. ([PR #1900](https://github.com/microsoft/fluentai/pull/1900) by estebanmu@microsoft.com)
|
|
31
|
+
- chore: Move Listbox into its own package. ([PR #1884](https://github.com/microsoft/fluentai/pull/1884) by estebanmu@microsoft.com)
|
|
32
|
+
- chore: Rename targetRef to containerRef ([PR #1888](https://github.com/microsoft/fluentai/pull/1888) by jiangemma@microsoft.com)
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ import { InitialConfigType } from '@lexical/react/LexicalComposer';
|
|
|
13
13
|
import type { Listbox } from '@fluentui/react-components';
|
|
14
14
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
15
15
|
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';
|
|
16
18
|
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
|
|
17
19
|
import type { PortalProps } from '@fluentui/react-components';
|
|
18
20
|
import type { PositioningShorthand } from '@fluentui/react-components';
|
|
@@ -151,16 +153,33 @@ export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
|
|
|
151
153
|
/**
|
|
152
154
|
* PromptOption Props
|
|
153
155
|
*/
|
|
154
|
-
export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & {
|
|
156
|
+
export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps, 'disabled' | 'value'> & ({
|
|
157
|
+
/**
|
|
158
|
+
* An optional override the string value of the PromptOption's display text,
|
|
159
|
+
* defaulting to the PromptOption's child content.
|
|
160
|
+
* This is used as the PromptInput button's or PromptInput input's value when the option is selected,
|
|
161
|
+
* and as the comparison for type-to-find keyboard functionality.
|
|
162
|
+
*/
|
|
163
|
+
text?: string;
|
|
164
|
+
children: string;
|
|
165
|
+
} | {
|
|
166
|
+
/**
|
|
167
|
+
* The string value of the PromptOption's display text when the PromptOption's children are not a string.
|
|
168
|
+
* This is used as the PromptInput button's or PromptInput input's value when the option is selected,
|
|
169
|
+
* and as the comparison for type-to-find keyboard functionality.
|
|
170
|
+
*/
|
|
171
|
+
text: string;
|
|
172
|
+
children?: React.ReactNode;
|
|
173
|
+
});
|
|
155
174
|
|
|
156
175
|
export declare type PromptOptionSlots = {
|
|
157
|
-
root: Slot<'div'
|
|
176
|
+
root: NonNullable<Slot<'div'>>;
|
|
158
177
|
};
|
|
159
178
|
|
|
160
179
|
/**
|
|
161
180
|
* State used in rendering PromptOption
|
|
162
181
|
*/
|
|
163
|
-
export declare type PromptOptionState = ComponentState<PromptOptionSlots>;
|
|
182
|
+
export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;
|
|
164
183
|
|
|
165
184
|
/**
|
|
166
185
|
* Render the final JSX of PromptListbox
|
|
@@ -6,14 +6,20 @@ import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
|
|
|
6
6
|
*/
|
|
7
7
|
export const renderPromptListbox_unstable = (state, contextValues) => {
|
|
8
8
|
assertSlots(state);
|
|
9
|
+
const {
|
|
10
|
+
open
|
|
11
|
+
} = state;
|
|
9
12
|
return /*#__PURE__*/_jsx(ListboxProvider, {
|
|
10
13
|
value: contextValues.listbox,
|
|
11
14
|
children: /*#__PURE__*/_jsx(ActiveDescendantContextProvider, {
|
|
12
15
|
value: contextValues.activeDescendant,
|
|
13
|
-
children:
|
|
14
|
-
|
|
15
|
-
children: /*#__PURE__*/_jsx(state.root, {})
|
|
16
|
-
|
|
16
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
17
|
+
"aria-owns": open ? state.root.id : undefined,
|
|
18
|
+
children: open && (state.inlinePopup ? /*#__PURE__*/_jsx(state.root, {}) : /*#__PURE__*/_jsx(Portal, {
|
|
19
|
+
mountNode: state.mountNode,
|
|
20
|
+
children: /*#__PURE__*/_jsx(state.root, {})
|
|
21
|
+
}))
|
|
22
|
+
})
|
|
17
23
|
})
|
|
18
24
|
});
|
|
19
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n assertSlots<PromptListboxSlots>(state);\n\n return (\n <ListboxProvider value={contextValues.listbox}>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n {state.open &&\n
|
|
1
|
+
{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n assertSlots<PromptListboxSlots>(state);\n const { open } = state;\n\n return (\n <ListboxProvider value={contextValues.listbox}>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <span aria-owns={open ? state.root.id : undefined}>\n {open &&\n (state.inlinePopup ? (\n <state.root />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.root />\n </Portal>\n ))}\n </span>\n </ActiveDescendantContextProvider>\n </ListboxProvider>\n );\n};\n"],"names":["assertSlots","ListboxProvider","Portal","ActiveDescendantContextProvider","renderPromptListbox_unstable","state","contextValues","open","value","listbox","activeDescendant","span","aria-owns","root","id","undefined","inlinePopup","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAQ,6BAA6B;AAClF,SAASC,+BAA+B,QAAQ,uBAAuB;AAGvE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEN,YAAgCK;IAChC,MAAM,EAAEE,IAAI,EAAE,GAAGF;IAEjB,qBACE,KAACJ;QAAgBO,OAAOF,cAAcG,OAAO;kBAC3C,cAAA,KAACN;YAAgCK,OAAOF,cAAcI,gBAAgB;sBACpE,cAAA,KAACC;gBAAKC,aAAWL,OAAOF,MAAMQ,IAAI,CAACC,EAAE,GAAGC;0BACrCR,QACEF,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMQ,IAAI,sBAEX,KAACX;oBAAOe,WAAWZ,MAAMY,SAAS;8BAChC,cAAA,KAACZ,MAAMQ,IAAI;kBAEf;;;;AAKZ,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type
|
|
1
|
+
{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n props: PromptListboxProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n const {\n id,\n onActiveOptionChange,\n inlinePopup = false,\n mountNode = undefined,\n open = true,\n activeDescendantController,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n } = props;\n const listboxId = useId('prompt-listbox', id);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n const nextOption = getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n const state: PromptListboxState = {\n ...deprecatedPropsDefaults,\n open,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n onActiveDescendantChange,\n activeDescendantController,\n inlinePopup,\n mountNode,\n\n components: {\n root: Listbox,\n },\n\n root: slot.always(\n { ...props, selectedOptions },\n {\n defaultProps: {\n disableAutoFocus: true,\n id: listboxId,\n tabIndex: undefined,\n role: 'menu',\n },\n elementType: Listbox,\n },\n ),\n };\n\n state.root.ref = useMergedRefs(ref, state.root.ref);\n state.root.onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onMouseDown),\n );\n\n state.root.onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onClick),\n );\n\n return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n PromptListboxContextState,\n 'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: noop,\n onOptionClick: noop,\n};\n"],"names":["Listbox","slot","useMergedRefs","mergeCallbacks","useEventCallback","useId","usePromptListbox_unstable","props","ref","id","onActiveOptionChange","inlinePopup","mountNode","undefined","open","activeDescendantController","getOptionById","getOptionsMatchingValue","selectedOptions","selectOption","registerOption","listboxId","onActiveDescendantChange","event","previousOption","detail","previousId","nextOption","type","state","deprecatedPropsDefaults","components","root","always","defaultProps","disableAutoFocus","tabIndex","role","elementType","onMouseDown","preventDefault","onClick","noop","activeOption","focusVisible","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,OAAO,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC1E,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAKpF,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,EAAE,EACFC,oBAAoB,EACpBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,OAAO,IAAI,EACXC,0BAA0B,EAC1BC,aAAa,EACbC,uBAAuB,EACvBC,eAAe,EACfC,YAAY,EACZC,cAAc,EACf,GAAGb;IACJ,MAAMc,YAAYhB,MAAM,kBAAkBI;IAE1C,MAAMa,2BAA2BlB,iBAAiB,CAACmB;QACjD,MAAMC,iBAAiBD,MAAME,MAAM,CAACC,UAAU,GAAGV,cAAcO,MAAME,MAAM,CAACC,UAAU,IAAI;QAC1F,MAAMC,aAAaX,cAAcO,MAAME,MAAM,CAAChB,EAAE;QAChDC,iCAAAA,2CAAAA,qBAAuBa,OAAO;YAAEA;YAAOK,MAAM;YAAUJ;YAAgBG;QAAW;IACpF;IAEA,MAAME,QAA4B;QAChC,GAAGC,uBAAuB;QAC1BhB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAP;QACAJ;QACAC;QAEAmB,YAAY;YACVC,MAAMhC;QACR;QAEAgC,MAAM/B,KAAKgC,MAAM,CACf;YAAE,GAAG1B,KAAK;YAAEW;QAAgB,GAC5B;YACEgB,cAAc;gBACZC,kBAAkB;gBAClB1B,IAAIY;gBACJe,UAAUvB;gBACVwB,MAAM;YACR;YACAC,aAAatC;QACf;IAEJ;IAEA6B,MAAMG,IAAI,CAACxB,GAAG,GAAGN,cAAcM,KAAKqB,MAAMG,IAAI,CAACxB,GAAG;IAClDqB,MAAMG,IAAI,CAACO,WAAW,GAAGnC,iBACvBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACO,WAAW;IAG3BV,MAAMG,IAAI,CAACS,OAAO,GAAGrC,iBACnBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACS,OAAO;IAGvB,OAAOZ;AACT,EAAE;AAEF,MAAMa,OAAO,IAAM;AAEnB,MAAMZ,0BAGF;IACFa,cAAc9B;IACd+B,cAAc;IACdC,iBAAiBH;IACjBI,eAAeJ;AACjB"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* State used in rendering PromptOption
|
|
3
|
-
*/export {};
|
|
4
|
-
// & Required<Pick<PromptOptionProps, 'propName'>>
|
|
3
|
+
*/export {};
|
|
5
4
|
//# sourceMappingURL=PromptOption.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptOption.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptOptionSlots = {\n root: Slot<'div'
|
|
1
|
+
{"version":3,"sources":["PromptOption.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, OptionProps, OptionState, Slot } from '@fluentui/react-components';\n\nexport type PromptOptionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * PromptOption Props\n */\nexport type PromptOptionProps = ComponentProps<PromptOptionSlots> &\n Pick<OptionProps, 'disabled' | 'value'> &\n (\n | {\n /**\n * An optional override the string value of the PromptOption's display text,\n * defaulting to the PromptOption's child content.\n * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the PromptOption's display text when the PromptOption's children are not a string.\n * This is used as the PromptInput button's or PromptInput input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering PromptOption\n */\nexport type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState, 'disabled' | 'selected'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAiCA;;CAEC,GACD,WAA+G"}
|
|
@@ -5,7 +5,6 @@ import { assertSlots } from '@fluentui/react-components';
|
|
|
5
5
|
*/
|
|
6
6
|
export const renderPromptOption_unstable = state => {
|
|
7
7
|
assertSlots(state);
|
|
8
|
-
// TODO Add additional slots in the appropriate place
|
|
9
8
|
return /*#__PURE__*/_jsx(state.root, {});
|
|
10
9
|
};
|
|
11
10
|
//# sourceMappingURL=renderPromptOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPromptOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type {
|
|
1
|
+
{"version":3,"sources":["renderPromptOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\n\n/**\n * Render the final JSX of PromptOption\n */\nexport const renderPromptOption_unstable = (state: PromptOptionState) => {\n assertSlots<PromptOptionSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderPromptOption_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';
|
|
3
|
+
import { useListboxContext_unstable } from '@fluentui/react-combobox';
|
|
4
|
+
import { useActiveDescendantContext } from '@fluentui/react-aria';
|
|
2
5
|
// If you add JSX to this file, be sure to change the file type to .tsx
|
|
3
6
|
/**
|
|
4
7
|
* Create the state required to render PromptOption.
|
|
@@ -10,20 +13,89 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
|
|
|
10
13
|
* @param ref - reference to root HTMLElement of PromptOption
|
|
11
14
|
*/
|
|
12
15
|
export const usePromptOption_unstable = (props, ref) => {
|
|
16
|
+
const {
|
|
17
|
+
children,
|
|
18
|
+
disabled,
|
|
19
|
+
text,
|
|
20
|
+
value
|
|
21
|
+
} = props;
|
|
22
|
+
const optionRef = React.useRef(null);
|
|
23
|
+
const optionText = getTextString(text, children);
|
|
24
|
+
const optionValue = value !== null && value !== void 0 ? value : optionText;
|
|
25
|
+
// use the id if provided, otherwise use a generated id
|
|
26
|
+
const id = useId('fluent-option', props.id);
|
|
27
|
+
// data used for context registration & events
|
|
28
|
+
const optionData = React.useMemo(() => ({
|
|
29
|
+
id,
|
|
30
|
+
disabled,
|
|
31
|
+
text: optionText,
|
|
32
|
+
value: optionValue
|
|
33
|
+
}), [id, disabled, optionText, optionValue]);
|
|
34
|
+
// context values
|
|
35
|
+
const {
|
|
36
|
+
controller: activeDescendantController
|
|
37
|
+
} = useActiveDescendantContext();
|
|
38
|
+
const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);
|
|
39
|
+
const selected = useListboxContext_unstable(ctx => {
|
|
40
|
+
const selectedOptions = ctx.selectedOptions;
|
|
41
|
+
return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;
|
|
42
|
+
});
|
|
43
|
+
const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);
|
|
44
|
+
const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);
|
|
45
|
+
const onClick = event => {
|
|
46
|
+
var _props_onClick;
|
|
47
|
+
if (disabled) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
activeDescendantController.focus(id);
|
|
52
|
+
// handle selection change
|
|
53
|
+
selectOption(event, optionData);
|
|
54
|
+
onOptionClick(event);
|
|
55
|
+
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
|
|
56
|
+
};
|
|
57
|
+
// register option data with context
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (id && optionRef.current) {
|
|
60
|
+
return registerOption(optionData, optionRef.current);
|
|
61
|
+
}
|
|
62
|
+
}, [id, optionData, registerOption]);
|
|
13
63
|
return {
|
|
14
|
-
// TODO add appropriate props/defaults
|
|
15
64
|
components: {
|
|
16
|
-
// TODO add each slot's element type or component
|
|
17
65
|
root: 'div'
|
|
18
66
|
},
|
|
19
|
-
// TODO add appropriate slots, for example:
|
|
20
|
-
// mySlot: slot.optional(props.mySlot),
|
|
21
67
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
22
|
-
ref,
|
|
23
|
-
|
|
68
|
+
ref: useMergedRefs(ref, optionRef),
|
|
69
|
+
'aria-disabled': disabled ? true : undefined,
|
|
70
|
+
id,
|
|
71
|
+
role: 'menuitem',
|
|
72
|
+
...props,
|
|
73
|
+
onClick
|
|
24
74
|
}), {
|
|
25
75
|
elementType: 'div'
|
|
26
|
-
})
|
|
76
|
+
}),
|
|
77
|
+
disabled,
|
|
78
|
+
selected
|
|
27
79
|
};
|
|
28
80
|
};
|
|
81
|
+
function getTextString(text, children) {
|
|
82
|
+
if (text !== undefined) {
|
|
83
|
+
return text;
|
|
84
|
+
}
|
|
85
|
+
let textString = '';
|
|
86
|
+
let hasNonStringChild = false;
|
|
87
|
+
React.Children.forEach(children, child => {
|
|
88
|
+
if (typeof child === 'string') {
|
|
89
|
+
textString += child;
|
|
90
|
+
} else {
|
|
91
|
+
hasNonStringChild = true;
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
// warn if an Option has non-string children and no text prop
|
|
95
|
+
if (hasNonStringChild) {
|
|
96
|
+
// eslint-disable-next-line no-console
|
|
97
|
+
console.warn('Provide a `text` prop to Option components when they contain non-string children.');
|
|
98
|
+
}
|
|
99
|
+
return textString;
|
|
100
|
+
}
|
|
29
101
|
//# sourceMappingURL=usePromptOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptOption.
|
|
1
|
+
{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useListboxContext_unstable } from '@fluentui/react-combobox';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { PromptOptionProps, PromptOptionState } from './PromptOption.types';\nimport type { OptionValue } from '../utils/OptionCollection.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptOption.\n *\n * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,\n * before being passed to renderPromptOption_unstable.\n *\n * @param props - props from this instance of PromptOption\n * @param ref - reference to root HTMLElement of PromptOption\n */\nexport const usePromptOption_unstable = (\n props: PromptOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptOptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLDivElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n activeDescendantController.focus(id);\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? true : undefined,\n id,\n role: 'menuitem',\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n disabled,\n selected,\n };\n};\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useListboxContext_unstable","useActiveDescendantContext","usePromptOption_unstable","props","ref","children","disabled","text","value","optionRef","useRef","optionText","getTextString","optionValue","id","optionData","useMemo","controller","activeDescendantController","registerOption","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","components","root","always","role","elementType","textString","hasNonStringChild","Children","forEach","child","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,6BAA6B;AAClG,SAASC,0BAA0B,QAAQ,2BAA2B;AACtE,SAASC,0BAA0B,QAAQ,uBAAuB;AAIlE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAC5C,MAAMM,YAAYd,MAAMe,MAAM,CAAiB;IAC/C,MAAMC,aAAaC,cAAcL,MAAMF;IACvC,MAAMQ,cAAcL,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAMG,KAAKhB,MAAM,iBAAiBK,MAAMW,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAapB,MAAMqB,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIR;YAAUC,MAAMI;YAAYH,OAAOK;QAAY,CAAA,GAC5D;QAACC;QAAIR;QAAUK;QAAYE;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEI,YAAYC,0BAA0B,EAAE,GAAGjB;IACnD,MAAMkB,iBAAiBnB,2BAA2BoB,CAAAA,MAAOA,IAAID,cAAc;IAC3E,MAAME,WAAWrB,2BAA2BoB,CAAAA;QAC1C,MAAME,kBAAkBF,IAAIE,eAAe;QAE3C,OAAOT,gBAAgBU,aAAaD,gBAAgBE,IAAI,CAACC,CAAAA,IAAKA,MAAMZ,iBAAiBU;IACvF;IACA,MAAMG,eAAe1B,2BAA2BoB,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgB3B,2BAA2BoB,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,MAAMC,UAAU,CAACC;YAYf1B;QAXA,IAAIG,UAAU;YACZuB,MAAMC,cAAc;YACpB;QACF;QAEAZ,2BAA2Ba,KAAK,CAACjB;QAEjC,0BAA0B;QAC1BY,aAAaG,OAAOd;QAEpBY,cAAcE;SACd1B,iBAAAA,MAAMyB,OAAO,cAAbzB,qCAAAA,oBAAAA,OAAgB0B;IAClB;IAEA,oCAAoC;IACpClC,MAAMqC,SAAS,CAAC;QACd,IAAIlB,MAAML,UAAUwB,OAAO,EAAE;YAC3B,OAAOd,eAAeJ,YAAYN,UAAUwB,OAAO;QACrD;IACF,GAAG;QAACnB;QAAIC;QAAYI;KAAe;IAEnC,OAAO;QACLe,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtC,KAAKuC,MAAM,CACfxC,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKK;YACxB,iBAAiBH,WAAW,OAAOiB;YACnCT;YACAuB,MAAM;YACN,GAAGlC,KAAK;YACRyB;QACF,IACA;YAAEU,aAAa;QAAM;QAEvBhC;QACAe;IACF;AACF,EAAE;AAEF,SAAST,cAAcL,IAAwB,EAAEF,QAAyB;IACxE,IAAIE,SAASgB,WAAW;QACtB,OAAOhB;IACT;IAEA,IAAIgC,aAAa;IACjB,IAAIC,oBAAoB;IACxB7C,MAAM8C,QAAQ,CAACC,OAAO,CAACrC,UAAUsC,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __styles, mergeClasses } from '@fluentui/react-components';
|
|
1
|
+
import { __styles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
|
|
2
|
+
import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
|
|
2
3
|
export const promptOptionClassNames = {
|
|
3
4
|
root: 'fai-PromptOption'
|
|
4
5
|
};
|
|
@@ -6,18 +7,82 @@ export const promptOptionClassNames = {
|
|
|
6
7
|
* Styles for the root slot
|
|
7
8
|
*/
|
|
8
9
|
const useStyles = __styles({
|
|
9
|
-
root: {
|
|
10
|
-
|
|
10
|
+
root: {
|
|
11
|
+
Bt984gj: "f122n59",
|
|
12
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
13
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
14
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
15
|
+
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
16
|
+
sj55zd: "f19n0e5",
|
|
17
|
+
i8kkvl: "f1ufnopg",
|
|
18
|
+
Bceei9c: "f1k6fduh",
|
|
19
|
+
mc9l5x: "f22iagw",
|
|
20
|
+
Bahqtrf: "fk6fouc",
|
|
21
|
+
Be2twd7: "fkhj508",
|
|
22
|
+
Bg96gwp: "f1i3iumi",
|
|
23
|
+
z8tnut: "fp2oml8",
|
|
24
|
+
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
25
|
+
Byoj8tv: "f1tdddsa",
|
|
26
|
+
uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
|
|
27
|
+
qhf8xq: "f10pi13n",
|
|
28
|
+
Jwef8y: "f1knas48",
|
|
29
|
+
Bi91k9c: "feu1g3u",
|
|
30
|
+
ecr2s2: "fb40n2d",
|
|
31
|
+
lj723h: "f1g4hkjv"
|
|
32
|
+
},
|
|
33
|
+
active: {
|
|
34
|
+
Bowz1zl: "f11vrvdw",
|
|
35
|
+
oxogb1: "f17hxjb7",
|
|
36
|
+
Ix2sn8: "f1dha69c",
|
|
37
|
+
q7v32p: "f1lm7500",
|
|
38
|
+
Bqfxd14: "f1n5bo3l",
|
|
39
|
+
B53xpsf: ["fp57yr3", "f48q4c"],
|
|
40
|
+
B1wzb3v: "fg547j0",
|
|
41
|
+
f0sref: ["f48q4c", "fp57yr3"],
|
|
42
|
+
Btq9bd3: "fuyp35s",
|
|
43
|
+
Bertapg: ["f1a9nstl", "fhk0hgg"],
|
|
44
|
+
b50fsz: "f1rdp6f1",
|
|
45
|
+
avt0cx: ["fhk0hgg", "f1a9nstl"],
|
|
46
|
+
B39dzdd: "ffd7rjx",
|
|
47
|
+
Be3o27t: ["fobu5kn", "f1dbet5w"],
|
|
48
|
+
Bewtojm: "f1ap9jj5",
|
|
49
|
+
B37u8z8: ["f1dbet5w", "fobu5kn"],
|
|
50
|
+
Bttcd12: ["ftb4b3e", "f1scq65d"],
|
|
51
|
+
Fffuxt: ["f1scq65d", "ftb4b3e"],
|
|
52
|
+
Bqougee: ["f2me9eq", "fgk4qqi"],
|
|
53
|
+
Beitzug: ["fgk4qqi", "f2me9eq"],
|
|
54
|
+
Bhijsxg: "fwq15dy",
|
|
55
|
+
kktds4: "f1pb3wry",
|
|
56
|
+
Bmau3bo: ["ftjv2f4", "f1flhb1f"],
|
|
57
|
+
npektv: ["f1flhb1f", "ftjv2f4"]
|
|
58
|
+
},
|
|
59
|
+
disabled: {
|
|
60
|
+
sj55zd: "f1s2aq7o",
|
|
61
|
+
Jwef8y: "f9ql6rf",
|
|
62
|
+
Bi91k9c: "fvgxktp",
|
|
63
|
+
ecr2s2: "fgj9um3",
|
|
64
|
+
lj723h: "f19wldhg",
|
|
65
|
+
B7iucu3: "f1cyfu5x"
|
|
66
|
+
}
|
|
67
|
+
}, {
|
|
68
|
+
d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}", ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}", ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}", ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}", ".f1n5bo3l[data-activedescendant-focusvisible]::after{border-top-width:var(--strokeWidthThick);}", ".fp57yr3[data-activedescendant-focusvisible]::after{border-right-width:var(--strokeWidthThick);}", ".f48q4c[data-activedescendant-focusvisible]::after{border-left-width:var(--strokeWidthThick);}", ".fg547j0[data-activedescendant-focusvisible]::after{border-bottom-width:var(--strokeWidthThick);}", ".fuyp35s[data-activedescendant-focusvisible]::after{border-top-style:solid;}", ".f1a9nstl[data-activedescendant-focusvisible]::after{border-right-style:solid;}", ".fhk0hgg[data-activedescendant-focusvisible]::after{border-left-style:solid;}", ".f1rdp6f1[data-activedescendant-focusvisible]::after{border-bottom-style:solid;}", ".ffd7rjx[data-activedescendant-focusvisible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fobu5kn[data-activedescendant-focusvisible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1dbet5w[data-activedescendant-focusvisible]::after{border-left-color:var(--colorStrokeFocus2);}", ".f1ap9jj5[data-activedescendant-focusvisible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".ftb4b3e[data-activedescendant-focusvisible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1scq65d[data-activedescendant-focusvisible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2me9eq[data-activedescendant-focusvisible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fgk4qqi[data-activedescendant-focusvisible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
69
|
+
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
|
|
70
|
+
a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}"],
|
|
71
|
+
m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
|
|
72
|
+
m: "(forced-colors: active)"
|
|
73
|
+
}]]
|
|
74
|
+
});
|
|
11
75
|
/**
|
|
12
76
|
* Apply styling to the PromptOption slots based on the state
|
|
13
77
|
*/
|
|
14
78
|
export const usePromptOptionStyles_unstable = state => {
|
|
15
79
|
'use no memo';
|
|
16
80
|
|
|
81
|
+
const {
|
|
82
|
+
disabled
|
|
83
|
+
} = state;
|
|
17
84
|
const styles = useStyles();
|
|
18
|
-
state.root.className = mergeClasses(promptOptionClassNames.root, styles.root, state.root.className);
|
|
19
|
-
// TODO Add class names to slots, for example:
|
|
20
|
-
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
85
|
+
state.root.className = mergeClasses(promptOptionClassNames.root, styles.root, styles.active, disabled && styles.disabled, state.root.className);
|
|
21
86
|
return state;
|
|
22
87
|
};
|
|
23
88
|
//# sourceMappingURL=usePromptOptionStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n root: 'fai-PromptOption',\n
|
|
1
|
+
{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n 'use no memo';\n\n const { disabled } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n promptOptionClassNames.root,\n styles.root,\n styles.active,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","promptOptionClassNames","root","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","strokeWidthThick","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","usePromptOptionStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAC1F,SAASC,uCAAuC,QAAQ,uBAAuB;AAI/E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,YAAY;QACZ,GAAGN,WAAWO,YAAY,CAACN,OAAOO,kBAAkB,CAAC;QACrDC,OAAOR,OAAOS,uBAAuB;QACrCC,WAAWV,OAAOW,mBAAmB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAYd,OAAOe,cAAc;QACjCC,UAAUhB,OAAOiB,eAAe;QAChCC,YAAYlB,OAAOmB,iBAAiB;QACpC,GAAGpB,WAAWqB,OAAO,CAACpB,OAAOqB,qBAAqB,EAAErB,OAAOsB,kBAAkB,CAAC;QAC9EC,UAAU;QAEV,UAAU;YACRC,iBAAiBxB,OAAOyB,4BAA4B;YACpDjB,OAAOR,OAAO0B,4BAA4B;QAC5C;QAEA,WAAW;YACTF,iBAAiBxB,OAAO2B,8BAA8B;YACtDnB,OAAOR,OAAO4B,8BAA8B;QAC9C;IACF;IAEAC,QAAQ;QACN,CAAC,CAAC,CAAC,EAAE5B,wCAAwC,QAAQ,CAAC,CAAC,EAAE;YACvD6B,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGjC,WAAWkC,MAAM,CAACjC,OAAOkC,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAElC,OAAOmC,iBAAiB,CAAC;YAChF,GAAGpC,WAAWO,YAAY,CAACN,OAAOO,kBAAkB,CAAC;YAErD6B,KAAK;YACLC,QAAQ;YACRC,MAAM;YACNC,OAAO;QACT;IACF;IAEAC,UAAU;QACRhC,OAAOR,OAAOyC,8BAA8B;QAE5C,UAAU;YACRjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,kCAAkC;YAChCjC,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASzC;IACfwC,MAAMzC,IAAI,CAAC2C,SAAS,GAAGhD,aACrBI,uBAAuBC,IAAI,EAC3B0C,OAAO1C,IAAI,EACX0C,OAAOhB,MAAM,EACbW,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMzC,IAAI,CAAC2C,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useActiveDescendant } from '@fluentui/react-aria';
|
|
3
|
-
import { optionClassNames } from '@fluentui/react-components';
|
|
4
3
|
import { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
5
4
|
import { getDropdownActionFromKey } from './dropdownKeyActions';
|
|
6
5
|
import { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';
|
|
@@ -10,6 +9,7 @@ import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-ke
|
|
|
10
9
|
import { useComboboxPositioning } from './useComboboxPositioning';
|
|
11
10
|
import { useTriggerKeydown } from './useTriggerKeyDown';
|
|
12
11
|
import { PromptListbox } from '../PromptListbox';
|
|
12
|
+
import { promptOptionClassNames } from '../PromptOption';
|
|
13
13
|
export function usePromptListboxFunctionality(params) {
|
|
14
14
|
const {
|
|
15
15
|
positioning,
|
|
@@ -22,7 +22,7 @@ export function usePromptListboxFunctionality(params) {
|
|
|
22
22
|
activeParentRef,
|
|
23
23
|
controller: activeDescendantController
|
|
24
24
|
} = useActiveDescendant({
|
|
25
|
-
matchOption: el => el.classList.contains(
|
|
25
|
+
matchOption: el => el.classList.contains(promptOptionClassNames.root)
|
|
26
26
|
});
|
|
27
27
|
// useMergedRefs to normalize the ref into a React.RefObject type
|
|
28
28
|
const triggerRef = useMergedRefs(activeParentRef);
|