@fluentui-copilot/react-prompt-starter 0.10.2 → 0.10.3
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 +16 -1
- package/CHANGELOG.md +11 -2
- package/lib/PromptStarter.js +0 -1
- package/lib/PromptStarterList.js +0 -1
- package/lib/PromptStarterV2.js +0 -1
- package/lib/components/PromptStarter/PromptStarter.js +5 -6
- package/lib/components/PromptStarter/PromptStarter.types.js +1 -2
- package/lib/components/PromptStarter/index.js +0 -1
- package/lib/components/PromptStarter/renderPromptStarter.js +16 -9
- package/lib/components/PromptStarter/usePromptStarter.js +42 -44
- package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js +94 -0
- package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
- package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.js +5 -6
- package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +1 -2
- package/lib/components/PromptStarterV2/PromptStarter/index.js +0 -1
- package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +61 -50
- package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +15 -9
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js +49 -51
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +119 -0
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
- package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +5 -6
- package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +1 -2
- package/lib/components/PromptStarterV2/PromptStarterList/index.js +0 -1
- package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +15 -14
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +97 -97
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +4 -7
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +61 -0
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -0
- package/lib/contexts/PromptStarterListContext.js +2 -3
- package/lib/index.js +0 -1
- package/lib-commonjs/PromptStarter.js +0 -1
- package/lib-commonjs/PromptStarterList.js +0 -1
- package/lib-commonjs/PromptStarterV2.js +0 -1
- package/lib-commonjs/components/PromptStarter/PromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/PromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/PromptStarter.types.js +0 -1
- package/lib-commonjs/components/PromptStarter/index.js +0 -1
- package/lib-commonjs/components/PromptStarter/renderPromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js +112 -0
- package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/index.js +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +137 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/index.js +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +77 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/PromptStarterListContext.js +1 -1
- package/lib-commonjs/contexts/PromptStarterListContext.js.map +1 -1
- package/lib-commonjs/index.js +0 -1
- package/package.json +3 -3
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { makeStyles, makeResetStyles, mergeClasses, shorthands, typographyStyles, createFocusOutlineStyle } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const promptStarterClassNames = {
|
|
4
|
+
root: 'fai-PromptStarter',
|
|
5
|
+
primaryAction: 'fai-PromptStarter__primaryAction',
|
|
6
|
+
icon: 'fai-PromptStarter__icon',
|
|
7
|
+
prompt: 'fai-PromptStarter__prompt',
|
|
8
|
+
reasonMarker: 'fai-PromptStarter__reasonMarker',
|
|
9
|
+
actions: 'fai-PromptStarter__actions'
|
|
10
|
+
};
|
|
11
|
+
const useRootResetStyles = makeResetStyles({
|
|
12
|
+
display: 'grid',
|
|
13
|
+
gridTemplateColumns: '1fr auto',
|
|
14
|
+
gridTemplateRows: 'max-content auto',
|
|
15
|
+
minWidth: '214px',
|
|
16
|
+
// Apply styles to the primary action on hover / active states
|
|
17
|
+
'&:hover': {
|
|
18
|
+
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
19
|
+
boxShadow: tokens.shadow16,
|
|
20
|
+
transform: 'scale(1.03)',
|
|
21
|
+
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
'&:active': {
|
|
25
|
+
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
26
|
+
boxShadow: tokens.shadow8,
|
|
27
|
+
transform: 'scale(1.03)',
|
|
28
|
+
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
// Hide actions when not focused or hovered
|
|
32
|
+
':not(:focus-within):not(:hover)': {
|
|
33
|
+
[`& .${promptStarterClassNames.actions}`]: {
|
|
34
|
+
clip: 'rect(0px, 0px, 0px, 0px)',
|
|
35
|
+
height: '1px',
|
|
36
|
+
margin: '-1px',
|
|
37
|
+
overflow: 'hidden',
|
|
38
|
+
padding: '0px',
|
|
39
|
+
width: '1px',
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
opacity: 0
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const useStyles = makeStyles({
|
|
46
|
+
primaryAction: {
|
|
47
|
+
gridRow: '1 / 3',
|
|
48
|
+
gridColumn: '1 / 3',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
flexDirection: 'column',
|
|
51
|
+
position: 'relative',
|
|
52
|
+
borderRadius: '28px',
|
|
53
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
54
|
+
color: tokens.colorNeutralForeground2,
|
|
55
|
+
fontFamily: tokens.fontFamilyBase,
|
|
56
|
+
cursor: 'pointer',
|
|
57
|
+
outlineStyle: 'none',
|
|
58
|
+
textAlign: 'left',
|
|
59
|
+
rowGap: tokens.spacingHorizontalS,
|
|
60
|
+
padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,
|
|
61
|
+
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
|
|
62
|
+
...createFocusOutlineStyle({
|
|
63
|
+
style: {
|
|
64
|
+
outlineRadius: '28px'
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
},
|
|
68
|
+
primaryActionHovered: {
|
|
69
|
+
boxShadow: tokens.shadow16,
|
|
70
|
+
transform: 'scale(1.03)',
|
|
71
|
+
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
72
|
+
},
|
|
73
|
+
icon: {
|
|
74
|
+
display: 'flex',
|
|
75
|
+
alignItems: 'center',
|
|
76
|
+
minHeight: tokens.spacingVerticalXXL
|
|
77
|
+
},
|
|
78
|
+
actions: {
|
|
79
|
+
margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}
|
|
80
|
+
${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,
|
|
81
|
+
position: 'relative',
|
|
82
|
+
gridRow: '1 / 2',
|
|
83
|
+
gridColumn: '2 / 3',
|
|
84
|
+
opacity: 1,
|
|
85
|
+
transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`
|
|
86
|
+
},
|
|
87
|
+
prompt: {
|
|
88
|
+
...typographyStyles.body1Strong,
|
|
89
|
+
// Truncate text after two lines.
|
|
90
|
+
display: '-webkit-box',
|
|
91
|
+
'-webkit-box-orient': 'vertical',
|
|
92
|
+
'-webkit-line-clamp': '2',
|
|
93
|
+
overflowY: 'hidden'
|
|
94
|
+
},
|
|
95
|
+
reasonMarker: {
|
|
96
|
+
...typographyStyles.caption2
|
|
97
|
+
},
|
|
98
|
+
// Hide icon, actions, and reason marker in single column appearance
|
|
99
|
+
singleColumnStyles: {
|
|
100
|
+
display: 'none'
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
export const usePromptStarterStyles_unstable = (state)=>{
|
|
104
|
+
'use no memo';
|
|
105
|
+
const { isSingleColumn } = state;
|
|
106
|
+
const styles = useStyles();
|
|
107
|
+
const rootResetStyles = useRootResetStyles();
|
|
108
|
+
state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);
|
|
109
|
+
state.primaryAction.className = mergeClasses(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
|
|
110
|
+
state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
|
|
111
|
+
state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
|
|
112
|
+
if (state.reasonMarker) {
|
|
113
|
+
state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
|
|
114
|
+
}
|
|
115
|
+
if (state.actions) {
|
|
116
|
+
state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
|
|
117
|
+
}
|
|
118
|
+
return state;
|
|
119
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n primaryAction: 'fai-PromptStarter__primaryAction',\n icon: 'fai-PromptStarter__icon',\n prompt: 'fai-PromptStarter__prompt',\n reasonMarker: 'fai-PromptStarter__reasonMarker',\n actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr auto',\n gridTemplateRows: 'max-content auto',\n minWidth: '214px',\n\n // Apply styles to the primary action on hover / active states\n '&:hover': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n '&:active': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow8,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n\n // Hide actions when not focused or hovered\n ':not(:focus-within):not(:hover)': {\n [`& .${promptStarterClassNames.actions}`]: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n opacity: 0,\n },\n },\n});\n\nconst useStyles = makeStyles({\n primaryAction: {\n gridRow: '1 / 3',\n gridColumn: '1 / 3',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius: '28px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground2,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n rowGap: tokens.spacingHorizontalS,\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n },\n\n primaryActionHovered: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n minHeight: tokens.spacingVerticalXXL,\n },\n actions: {\n margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n position: 'relative',\n gridRow: '1 / 2',\n gridColumn: '2 / 3',\n\n opacity: 1,\n transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n },\n prompt: {\n ...typographyStyles.body1Strong,\n\n // Truncate text after two lines.\n display: '-webkit-box',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n overflowY: 'hidden',\n },\n reasonMarker: {\n ...typographyStyles.caption2,\n },\n\n // Hide icon, actions, and reason marker in single column appearance\n singleColumnStyles: {\n display: 'none',\n },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { isSingleColumn } = state;\n\n const styles = useStyles();\n const rootResetStyles = useRootResetStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n state.primaryAction.className,\n );\n state.icon.className = mergeClasses(\n promptStarterClassNames.icon,\n styles.icon,\n isSingleColumn && styles.singleColumnStyles,\n state.icon.className,\n );\n state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n isSingleColumn && styles.singleColumnStyles,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n promptStarterClassNames.actions,\n styles.actions,\n isSingleColumn && styles.singleColumnStyles,\n state.actions.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","body1Strong","overflowY","caption2","singleColumnStyles","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -3,11 +3,10 @@ import { usePromptStarterList_unstable } from './usePromptStarterList';
|
|
|
3
3
|
import { renderPromptStarterList_unstable } from './renderPromptStarterList';
|
|
4
4
|
import { usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';
|
|
5
5
|
import { usePromptStarterListContextValues } from './usePromptStarterListContextValues';
|
|
6
|
-
export const PromptStarterList = /*#__PURE__*/React.forwardRef((props, ref)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
export const PromptStarterList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
7
|
+
const state = usePromptStarterList_unstable(props, ref);
|
|
8
|
+
const contextValues = usePromptStarterListContextValues(state);
|
|
9
|
+
usePromptStarterListStyles_unstable(state);
|
|
10
|
+
return renderPromptStarterList_unstable(state, contextValues);
|
|
11
11
|
});
|
|
12
12
|
PromptStarterList.displayName = 'PromptStarterList';
|
|
13
|
-
//# sourceMappingURL=PromptStarterList.js.map
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=PromptStarterList.types.js.map
|
|
1
|
+
export { };
|
|
@@ -2,4 +2,3 @@ export { PromptStarterList } from './PromptStarterList';
|
|
|
2
2
|
export { renderPromptStarterList_unstable } from './renderPromptStarterList';
|
|
3
3
|
export { usePromptStarterList_unstable } from './usePromptStarterList';
|
|
4
4
|
export { promptStarterListClassNames, usePromptStarterListStyles_unstable } from './usePromptStarterListStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots, PresenceGroup } from '@fluentui/react-components';
|
|
3
3
|
import { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of PromptStarterList
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
*/ export const renderPromptStarterList_unstable = (state, contextValue)=>{
|
|
7
|
+
assertSlots(state);
|
|
8
|
+
return /*#__PURE__*/ _jsx(PromptStarterListProvider, {
|
|
9
|
+
value: contextValue,
|
|
10
|
+
children: /*#__PURE__*/ _jsxs(state.root, {
|
|
11
|
+
children: [
|
|
12
|
+
/*#__PURE__*/ _jsx(PresenceGroup, {
|
|
13
|
+
children: /*#__PURE__*/ _jsx(state.gridWrapper, {
|
|
14
|
+
children: state.root.children
|
|
15
|
+
})
|
|
16
|
+
}),
|
|
17
|
+
state.expandButton && /*#__PURE__*/ _jsx(state.expandButton, {})
|
|
18
|
+
]
|
|
15
19
|
})
|
|
16
|
-
|
|
17
|
-
})
|
|
18
|
-
});
|
|
20
|
+
});
|
|
19
21
|
};
|
|
20
|
-
//# sourceMappingURL=renderPromptStarterList.js.map
|
|
@@ -11,103 +11,103 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
|
|
|
11
11
|
*
|
|
12
12
|
* @param props - props from this instance of PromptStarterList
|
|
13
13
|
* @param ref - reference to root HTMLElement of PromptStarterList
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
14
|
+
*/ export const usePromptStarterList_unstable = (props, ref)=>{
|
|
15
|
+
const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;
|
|
16
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
17
|
+
var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
|
|
18
|
+
const focusAttrs = useArrowNavigationGroup({
|
|
19
|
+
...arrowNavigationOptions,
|
|
20
|
+
axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'grid-linear',
|
|
21
|
+
memorizeCurrent: (_arrowNavigationOptions_memorizeCurrent = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.memorizeCurrent) !== null && _arrowNavigationOptions_memorizeCurrent !== void 0 ? _arrowNavigationOptions_memorizeCurrent : true
|
|
22
|
+
});
|
|
23
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
24
|
+
const [numberOfColumns, setNumberOfColumns] = React.useState(3);
|
|
25
|
+
const gridWrapperRef = React.useRef(null);
|
|
26
|
+
const { targetDocument } = useFluent();
|
|
27
|
+
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
28
|
+
React.useEffect(()=>{
|
|
29
|
+
if (!win || !gridWrapperRef.current) return;
|
|
30
|
+
const promptStarterGrid = gridWrapperRef.current;
|
|
31
|
+
const updateNumberOfColumns = ()=>{
|
|
32
|
+
const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;
|
|
33
|
+
setNumberOfColumns(numColumns);
|
|
34
|
+
};
|
|
35
|
+
const ro = new win.ResizeObserver(updateNumberOfColumns);
|
|
36
|
+
ro.observe(promptStarterGrid);
|
|
37
|
+
return ()=>{
|
|
38
|
+
ro.unobserve(promptStarterGrid);
|
|
39
|
+
};
|
|
40
|
+
}, [
|
|
41
|
+
win
|
|
42
|
+
]);
|
|
43
|
+
const state = {
|
|
44
|
+
numberOfColumns: numberOfColumns,
|
|
45
|
+
isExpanded,
|
|
46
|
+
designVersion,
|
|
47
|
+
components: {
|
|
48
|
+
root: 'div',
|
|
49
|
+
gridWrapper: 'div',
|
|
50
|
+
expandButton: Button
|
|
51
|
+
},
|
|
52
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
53
|
+
ref,
|
|
54
|
+
...props
|
|
55
|
+
}), {
|
|
56
|
+
elementType: 'div'
|
|
57
|
+
}),
|
|
58
|
+
gridWrapper: slot.always(props.gridWrapper, {
|
|
59
|
+
defaultProps: {
|
|
60
|
+
role: 'group',
|
|
61
|
+
...focusAttrs
|
|
62
|
+
},
|
|
63
|
+
elementType: 'div'
|
|
64
|
+
}),
|
|
65
|
+
expandButton: slot.optional(props.expandButton, {
|
|
66
|
+
defaultProps: {
|
|
67
|
+
appearance: 'subtle',
|
|
68
|
+
size: 'small',
|
|
69
|
+
shape: 'rounded',
|
|
70
|
+
icon: /*#__PURE__*/ React.createElement(ChevronDown12Regular, null),
|
|
71
|
+
iconPosition: 'after',
|
|
72
|
+
'aria-expanded': isExpanded,
|
|
73
|
+
children: isExpanded ? collapseButtonLabel : expandButtonLabel
|
|
74
|
+
},
|
|
75
|
+
renderByDefault: true,
|
|
76
|
+
elementType: Button
|
|
77
|
+
})
|
|
41
78
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
shape: 'rounded',
|
|
75
|
-
icon: /*#__PURE__*/React.createElement(ChevronDown12Regular, null),
|
|
76
|
-
iconPosition: 'after',
|
|
77
|
-
'aria-expanded': isExpanded,
|
|
78
|
-
children: isExpanded ? collapseButtonLabel : expandButtonLabel
|
|
79
|
-
},
|
|
80
|
-
renderByDefault: true,
|
|
81
|
-
elementType: Button
|
|
82
|
-
})
|
|
83
|
-
};
|
|
84
|
-
state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);
|
|
85
|
-
// Get the array of children.
|
|
86
|
-
const childrenArray = React.useMemo(() => {
|
|
87
|
-
return React.Children.toArray(state.root.children);
|
|
88
|
-
}, [state.root.children]);
|
|
89
|
-
// Add motion to the children.
|
|
90
|
-
const childrenWithMotion = React.useMemo(() => childrenArray.map((child, index) => {
|
|
91
|
-
// Throw error if the child is not a valid React element or is a Fragment.
|
|
92
|
-
if (! /*#__PURE__*/React.isValidElement(child) || child.type === React.Fragment) {
|
|
93
|
-
throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
|
|
79
|
+
state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);
|
|
80
|
+
// Get the array of children.
|
|
81
|
+
const childrenArray = React.useMemo(()=>{
|
|
82
|
+
return React.Children.toArray(state.root.children);
|
|
83
|
+
}, [
|
|
84
|
+
state.root.children
|
|
85
|
+
]);
|
|
86
|
+
// Add motion to the children.
|
|
87
|
+
const childrenWithMotion = React.useMemo(()=>childrenArray.map((child, index)=>{
|
|
88
|
+
// Throw error if the child is not a valid React element or is a Fragment.
|
|
89
|
+
if (!/*#__PURE__*/ React.isValidElement(child) || child.type === React.Fragment) {
|
|
90
|
+
throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
|
|
91
|
+
}
|
|
92
|
+
// In the collapsed state, if there is one column, we show three children.
|
|
93
|
+
// If there are two or three columns, we show two or three. All children
|
|
94
|
+
// are shown in the expanded state.
|
|
95
|
+
const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
|
|
96
|
+
return /*#__PURE__*/ React.createElement(PromptStarterMotion, {
|
|
97
|
+
appear: true,
|
|
98
|
+
key: index,
|
|
99
|
+
index: index,
|
|
100
|
+
visible: visibility,
|
|
101
|
+
numberOfColumns: numberOfColumns
|
|
102
|
+
}, child);
|
|
103
|
+
}), [
|
|
104
|
+
childrenArray,
|
|
105
|
+
numberOfColumns,
|
|
106
|
+
isExpanded
|
|
107
|
+
]);
|
|
108
|
+
state.root.children = childrenWithMotion;
|
|
109
|
+
if (state.expandButton) {
|
|
110
|
+
state.expandButton.onClick = mergeCallbacks(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
|
|
94
111
|
}
|
|
95
|
-
|
|
96
|
-
// If there are two or three columns, we show two or three. All children
|
|
97
|
-
// are shown in the expanded state.
|
|
98
|
-
const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
|
|
99
|
-
return /*#__PURE__*/React.createElement(PromptStarterMotion, {
|
|
100
|
-
appear: true,
|
|
101
|
-
key: index,
|
|
102
|
-
index: index,
|
|
103
|
-
visible: visibility,
|
|
104
|
-
numberOfColumns: numberOfColumns
|
|
105
|
-
}, child);
|
|
106
|
-
}), [childrenArray, numberOfColumns, isExpanded]);
|
|
107
|
-
state.root.children = childrenWithMotion;
|
|
108
|
-
if (state.expandButton) {
|
|
109
|
-
state.expandButton.onClick = mergeCallbacks(state.expandButton.onClick, () => setIsExpanded(!isExpanded));
|
|
110
|
-
}
|
|
111
|
-
return state;
|
|
112
|
+
return state;
|
|
112
113
|
};
|
|
113
|
-
//# sourceMappingURL=usePromptStarterList.js.map
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
export function usePromptStarterListContextValues(state) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
numberOfColumns
|
|
7
|
-
};
|
|
2
|
+
const { numberOfColumns } = state;
|
|
3
|
+
return {
|
|
4
|
+
numberOfColumns
|
|
5
|
+
};
|
|
8
6
|
}
|
|
9
|
-
//# sourceMappingURL=usePromptStarterListContextValues.js.map
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const promptStarterListClassNames = {
|
|
4
|
+
root: 'fai-PromptStarterList',
|
|
5
|
+
gridWrapper: 'fai-PromptStarterList__gridWrapper',
|
|
6
|
+
expandButton: 'fai-PromptStarterList__expandButton'
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Styles for the root slot
|
|
10
|
+
*/ const useRootClassName = makeResetStyles({
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'column',
|
|
13
|
+
maxWidth: '772px',
|
|
14
|
+
gap: tokens.spacingHorizontalXL
|
|
15
|
+
});
|
|
16
|
+
const useStyles = makeStyles({
|
|
17
|
+
gridWrapper: {
|
|
18
|
+
display: 'grid',
|
|
19
|
+
gap: tokens.spacingHorizontalL,
|
|
20
|
+
gridAutoColumns: 'max-content',
|
|
21
|
+
gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,
|
|
22
|
+
gridAutoFlow: 'unset'
|
|
23
|
+
},
|
|
24
|
+
expandButton: {
|
|
25
|
+
alignSelf: 'end',
|
|
26
|
+
[`& .${buttonClassNames.icon}`]: {
|
|
27
|
+
fontSize: '12px',
|
|
28
|
+
height: '12px',
|
|
29
|
+
width: '12px'
|
|
30
|
+
},
|
|
31
|
+
':hover': {
|
|
32
|
+
[`& .${buttonClassNames.icon}`]: {
|
|
33
|
+
color: tokens.colorNeutralForeground2Hover
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
':hover:active': {
|
|
37
|
+
[`& .${buttonClassNames.icon}`]: {
|
|
38
|
+
color: tokens.colorNeutralForeground2Pressed
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
expandButtonExpanded: {
|
|
43
|
+
[`& > .${buttonClassNames.icon}`]: {
|
|
44
|
+
transform: 'rotate(180deg)'
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
/**
|
|
49
|
+
* Apply styling to the PromptStarterList slots based on the state
|
|
50
|
+
*/ export const usePromptStarterListStyles_unstable = (state)=>{
|
|
51
|
+
'use no memo';
|
|
52
|
+
const { isExpanded } = state;
|
|
53
|
+
const rootClassName = useRootClassName();
|
|
54
|
+
const styles = useStyles();
|
|
55
|
+
state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
|
|
56
|
+
state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
|
|
57
|
+
if (state.expandButton) {
|
|
58
|
+
state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
|
|
59
|
+
}
|
|
60
|
+
return state;
|
|
61
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n root: 'fai-PromptStarterList',\n gridWrapper: 'fai-PromptStarterList__gridWrapper',\n expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '772px',\n gap: tokens.spacingHorizontalXL,\n});\n\nconst useStyles = makeStyles({\n gridWrapper: {\n display: 'grid',\n gap: tokens.spacingHorizontalL,\n gridAutoColumns: 'max-content',\n\n gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n gridAutoFlow: 'unset',\n },\n\n expandButton: {\n alignSelf: 'end',\n [`& .${buttonClassNames.icon}`]: {\n fontSize: '12px',\n height: '12px',\n width: '12px',\n },\n ':hover': {\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':hover:active': {\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n expandButtonExpanded: {\n [`& > .${buttonClassNames.icon}`]: {\n transform: 'rotate(180deg)',\n },\n },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n 'use no memo';\n\n const { isExpanded } = state;\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n state.gridWrapper.className = mergeClasses(\n promptStarterListClassNames.gridWrapper,\n styles.gridWrapper,\n state.gridWrapper.className,\n );\n if (state.expandButton) {\n state.expandButton.className = mergeClasses(\n promptStarterListClassNames.expandButton,\n styles.expandButton,\n isExpanded && styles.expandButtonExpanded,\n state.expandButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","expandButton","useRootClassName","display","flexDirection","maxWidth","gap","spacingHorizontalXL","useStyles","spacingHorizontalL","gridAutoColumns","gridTemplateColumns","gridAutoFlow","alignSelf","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBR,gBAAgB;IACvCS,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,KAAKT,OAAOU,mBAAmB;AACjC;AAEA,MAAMC,YAAYb,WAAW;IAC3BK,aAAa;QACXG,SAAS;QACTG,KAAKT,OAAOY,kBAAkB;QAC9BC,iBAAiB;QAEjBC,qBAAqB,CAAC,oCAAoC,CAAC;QAC3DC,cAAc;IAChB;IAEAX,cAAc;QACZY,WAAW;QACX,CAAC,CAAC,GAAG,EAAEpB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAExB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOsB,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE1B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOuB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAE5B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgBxB;IACtB,MAAMyB,SAASnB;IACfgB,MAAMzB,IAAI,CAAC6B,SAAS,GAAGhC,aAAaE,4BAA4BC,IAAI,EAAE2B,eAAeF,MAAMzB,IAAI,CAAC6B,SAAS;IACzGJ,MAAMxB,WAAW,CAAC4B,SAAS,GAAGhC,aAC5BE,4BAA4BE,WAAW,EACvC2B,OAAO3B,WAAW,EAClBwB,MAAMxB,WAAW,CAAC4B,SAAS;IAE7B,IAAIJ,MAAMvB,YAAY,EAAE;QACtBuB,MAAMvB,YAAY,CAAC2B,SAAS,GAAGhC,aAC7BE,4BAA4BG,YAAY,EACxC0B,OAAO1B,YAAY,EACnBwB,cAAcE,OAAON,oBAAoB,EACzCG,MAAMvB,YAAY,CAAC2B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
export const PromptStarterListContext = createContext(undefined);
|
|
3
3
|
const promptStarterListContextDefaultValue = {
|
|
4
|
-
|
|
4
|
+
numberOfColumns: 3
|
|
5
5
|
};
|
|
6
|
-
export const usePromptStarterListContext = selector
|
|
6
|
+
export const usePromptStarterListContext = (selector)=>useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue)=>selector(ctx));
|
|
7
7
|
export const PromptStarterListProvider = PromptStarterListContext.Provider;
|
|
8
|
-
//# sourceMappingURL=PromptStarterListContext.js.map
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { PromptStarter, promptStarterClassNames, renderPromptStarter_unstable, usePromptStarterStyles_unstable, usePromptStarter_unstable } from './PromptStarter';
|
|
2
2
|
export { PromptStarter as PromptStarterV2, promptStarterClassNames as promptStarterV2ClassNames, renderPromptStarter_unstable as renderPromptStarterV2_unstable, usePromptStarterStyles_unstable as usePromptStarterV2Styles_unstable, usePromptStarter_unstable as usePromptStarterV2_unstable } from './PromptStarterV2';
|
|
3
3
|
export { PromptStarterList, renderPromptStarterList_unstable, usePromptStarterList_unstable, promptStarterListClassNames, usePromptStarterListStyles_unstable } from './PromptStarterList';
|
|
4
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -20,4 +20,4 @@ const PromptStarter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
20
20
|
(0, _reactprovider.useCustomStyleHook)('usePromptStarterStyles')(state);
|
|
21
21
|
return (0, _renderPromptStarter.renderPromptStarter_unstable)(state);
|
|
22
22
|
});
|
|
23
|
-
PromptStarter.displayName = 'PromptStarter';
|
|
23
|
+
PromptStarter.displayName = 'PromptStarter';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptStarter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarter_unstable } from './usePromptStarter';\nimport { renderPromptStarter_unstable } from './renderPromptStarter';\nimport { usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport type { PromptStarterProps } from './PromptStarter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PromptStarter: ForwardRefComponent<PromptStarterProps> = React.forwardRef((props, ref) => {\n const state = usePromptStarter_unstable(props, ref);\n\n usePromptStarterStyles_unstable(state);\n useCustomStyleHook('usePromptStarterStyles')(state);\n\n return renderPromptStarter_unstable(state);\n});\n\nPromptStarter.displayName = 'PromptStarter';\n"],"names":["PromptStarter","React","forwardRef","props","state","usePromptStarter_unstable","usePromptStarterStyles_unstable","useCustomStyleHook","renderPromptStarter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;kCACmB;qCACG;8CACG;+BACb;AAI5B,MAAMA,gBAAAA,WAAAA,
|
|
1
|
+
{"version":3,"sources":["PromptStarter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarter_unstable } from './usePromptStarter';\nimport { renderPromptStarter_unstable } from './renderPromptStarter';\nimport { usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport type { PromptStarterProps } from './PromptStarter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PromptStarter: ForwardRefComponent<PromptStarterProps> = React.forwardRef((props, ref) => {\n const state = usePromptStarter_unstable(props, ref);\n\n usePromptStarterStyles_unstable(state);\n useCustomStyleHook('usePromptStarterStyles')(state);\n\n return renderPromptStarter_unstable(state);\n});\n\nPromptStarter.displayName = 'PromptStarter';\n"],"names":["PromptStarter","React","forwardRef","props","ref","state","usePromptStarter_unstable","usePromptStarterStyles_unstable","useCustomStyleHook","renderPromptStarter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;kCACmB;qCACG;8CACG;+BACb;AAI5B,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAE/CG,IAAAA,6DAAAA,EAAgCF;IAChCG,IAAAA,iCAAAA,EAAmB,0BAA0BH;IAE7C,OAAOI,IAAAA,iDAAAA,EAA6BJ;AACtC;AAEAL,cAAcU,WAAW,GAAG"}
|
|
@@ -29,4 +29,3 @@ const _PromptStarter = require("./PromptStarter");
|
|
|
29
29
|
const _renderPromptStarter = require("./renderPromptStarter");
|
|
30
30
|
const _usePromptStarter = require("./usePromptStarter");
|
|
31
31
|
const _usePromptStarterStylesstyles = require("./usePromptStarterStyles.styles");
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.icon />\n <state.category>\n {state.category.children} {state.badge && <state.badge />}\n </state.category>\n {state.prompt && <state.prompt />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","icon","
|
|
1
|
+
{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.icon />\n <state.category>\n {state.category.children} {state.badge && <state.badge />}\n </state.category>\n {state.prompt && <state.prompt />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","_jsx","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE4B;AAGrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;0BACXH,IAAAA,gBAAA,EAACF,MAAMM,QAAQ,EAAA;;oBACZN,MAAMM,QAAQ,CAACC,QAAQ;oBAAC;oBAAEP,MAAMQ,KAAK,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACJ,MAAMQ,KAAK,EAAA,CAAA;;;YAEvDR,MAAMS,MAAM,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACJ,MAAMS,MAAM,EAAA,CAAA;;;AAGpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { Badge, getIntrinsicElementProps, slot, useId } from '@fluentui/react-components';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLButtonElement>,\n): PromptStarterState => {\n const designVersion = useDesignVersion(props.designVersion);\n const idPrefix = useId('prompt-starter');\n\n return {\n components: {\n root: 'button',\n icon: 'span',\n category: 'span',\n prompt: 'span',\n badge: Badge,\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-labelledby': `${idPrefix}-category`,\n 'aria-describedby': `${idPrefix}-prompt`,\n ...props,\n }),\n { elementType: 'button' },\n ),\n icon: slot.always(props.icon, { elementType: 'span' }),\n category: slot.always(props.category, { defaultProps: { id: `${idPrefix}-category` }, elementType: 'span' }),\n prompt: slot.optional(props.prompt, { defaultProps: { id: `${idPrefix}-prompt` }, elementType: 'span' }),\n badge: slot.optional(props.badge, { defaultProps: { appearance: 'tint' }, elementType: Badge }),\n designVersion,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { Badge, getIntrinsicElementProps, slot, useId } from '@fluentui/react-components';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLButtonElement>,\n): PromptStarterState => {\n const designVersion = useDesignVersion(props.designVersion);\n const idPrefix = useId('prompt-starter');\n\n return {\n components: {\n root: 'button',\n icon: 'span',\n category: 'span',\n prompt: 'span',\n badge: Badge,\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-labelledby': `${idPrefix}-category`,\n 'aria-describedby': `${idPrefix}-prompt`,\n ...props,\n }),\n { elementType: 'button' },\n ),\n icon: slot.always(props.icon, { elementType: 'span' }),\n category: slot.always(props.category, { defaultProps: { id: `${idPrefix}-category` }, elementType: 'span' }),\n prompt: slot.optional(props.prompt, { defaultProps: { id: `${idPrefix}-prompt` }, elementType: 'span' }),\n badge: slot.optional(props.badge, { defaultProps: { appearance: 'tint' }, elementType: Badge }),\n designVersion,\n };\n};\n"],"names":["usePromptStarter_unstable","props","ref","designVersion","useDesignVersion","idPrefix","useId","components","root","icon","category","prompt","badge","Badge","slot","always","getIntrinsicElementProps","elementType","defaultProps","id","optional","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;+BAboB;iCAC4B;AAYtD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,gBAAgBC,IAAAA,+BAAAA,EAAiBH,MAAME,aAAa;IAC1D,MAAME,WAAWC,IAAAA,sBAAAA,EAAM;IAEvB,OAAO;QACLC,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,OAAOC,sBAAAA;QACT;QACAL,MAAMM,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,UAAU;YACjCd;YACA,mBAAmB,CAAC,EAAEG,SAAS,SAAS,CAAC;YACzC,oBAAoB,CAAC,EAAEA,SAAS,OAAO,CAAC;YACxC,GAAGJ,KAAK;QACV,IACA;YAAEgB,aAAa;QAAS;QAE1BR,MAAMK,qBAAAA,CAAKC,MAAM,CAACd,MAAMQ,IAAI,EAAE;YAAEQ,aAAa;QAAO;QACpDP,UAAUI,qBAAAA,CAAKC,MAAM,CAACd,MAAMS,QAAQ,EAAE;YAAEQ,cAAc;gBAAEC,IAAI,CAAC,EAAEd,SAAS,SAAS,CAAC;YAAC;YAAGY,aAAa;QAAO;QAC1GN,QAAQG,qBAAAA,CAAKM,QAAQ,CAACnB,MAAMU,MAAM,EAAE;YAAEO,cAAc;gBAAEC,IAAI,CAAC,EAAEd,SAAS,OAAO,CAAC;YAAC;YAAGY,aAAa;QAAO;QACtGL,OAAOE,qBAAAA,CAAKM,QAAQ,CAACnB,MAAMW,KAAK,EAAE;YAAEM,cAAc;gBAAEG,YAAY;YAAO;YAAGJ,aAAaJ,sBAAAA;QAAM;QAC7FV;IACF;AACF"}
|