@fluentui-copilot/react-prompt-starter 0.10.5 → 0.10.7
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 +67 -1
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +12 -3
- package/lib/components/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +1 -0
- package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js +14 -2
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js +74 -12
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +36 -7
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +1 -0
- package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +8 -4
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js +30 -4
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js.map +1 -1
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +16 -4
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -1
- package/lib/contexts/PromptStarterListContext.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js +14 -2
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js +117 -13
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +36 -7
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +8 -4
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js +41 -4
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +16 -4
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/contexts/PromptStarterListContext.js.map +1 -1
- package/package.json +12 -12
package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map
CHANGED
|
@@ -1 +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\nconst useSingleColumnStyles = makeStyles({\n primaryAction: {\n borderRadius: tokens.borderRadius2XL,\n ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n },\n prompt: {\n ...typographyStyles.caption1Strong,\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 const singleColumnStyles = useSingleColumnStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n isSingleColumn && singleColumnStyles.primaryAction,\n state.primaryAction.className,\n );\n if (state.icon) {\n state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n }\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n isSingleColumn && singleColumnStyles.prompt,\n state.prompt.className,\n );\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);\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","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
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 category: 'fai-PromptStarter__category',\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 position: 'relative',\n display: 'grid',\n gridTemplateColumns: 'max-content 1fr',\n gridAutoRows: 'max-content 1fr max-content',\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 columnGap: tokens.spacingHorizontalMNudge,\n rowGap: tokens.spacingVerticalS,\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 gridRow: 1,\n gridColumn: '1 / 2',\n },\n category: {\n display: 'flex',\n alignItems: 'center',\n ...typographyStyles.body1Strong,\n\n gridRow: 1,\n gridColumn: '2 / 3',\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 actionsWithCategory: {\n // Add a background and gradient fade to truncate the title if applicable\n backgroundColor: tokens.colorNeutralBackground1,\n\n boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`,\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 gridRow: '2',\n gridColumn: '1 / 3',\n },\n promptNoReasonMarker: {\n // Truncate text after three lines when no reason marker is present.\n '-webkit-line-clamp': '3',\n },\n reasonMarker: {\n gridRow: '3',\n gridColumn: '1 / 3',\n ...typographyStyles.caption2,\n },\n});\n\nconst useSingleColumnStyles = makeStyles({\n primaryAction: {\n display: 'flex',\n borderRadius: tokens.borderRadius2XL,\n ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n },\n prompt: {\n ...typographyStyles.caption1Strong,\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 const singleColumnStyles = useSingleColumnStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n isSingleColumn && singleColumnStyles.primaryAction,\n state.primaryAction.className,\n );\n if (state.icon) {\n state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.category) {\n state.category.className = mergeClasses(\n promptStarterClassNames.category,\n styles.category,\n state.category.className,\n );\n }\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n !state.reasonMarker && styles.promptNoReasonMarker,\n isSingleColumn && singleColumnStyles.prompt,\n state.prompt.className,\n );\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n promptStarterClassNames.actions,\n styles.actions,\n state.category && styles.actionsWithCategory,\n state.actions.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","category","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","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptStarterList.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n ComponentProps,\n ComponentState,\n Slot,\n Button,\n UseArrowNavigationGroupOptions,\n} from '@fluentui/react-components';\n\nexport type PromptStarterListSlots = {\n root: NonNullable<Slot<'div'>>;\n gridWrapper: NonNullable<Slot<'div'>>;\n expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\n DesignVersion & {\n /**\n * Text for the expand button when the list is collapsed.\n *\n * default: \"Show more\"\n */\n expandButtonLabel?: string;\n /**\n * Text for the expand button when the list is expanded.\n *\n * default: \"Show less\"\n */\n collapseButtonLabel?: string;\n /**\n * Arrow navigation options. This can be used to customize Tabster's direction,\n * tab behavior, and memoization options.\n *\n * default: { axis: 'horizontal', memorizeCurrent: true }\n */\n arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n };\n\n/**\n * State used in rendering PromptStarterList\n */\nexport type PromptStarterListState = ComponentState<PromptStarterListSlots> &\n Required<Pick<PromptStarterListProps, 'designVersion'>> & {\n numberOfColumns: number;\n isExpanded?: boolean;\n };\n\nexport type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;\n"],"names":[],"rangeMappings":"","mappings":"
|
|
1
|
+
{"version":3,"sources":["PromptStarterList.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type {\n ComponentProps,\n ComponentState,\n Slot,\n Button,\n UseArrowNavigationGroupOptions,\n} from '@fluentui/react-components';\n\nexport type PromptStarterListSlots = {\n root: NonNullable<Slot<'div'>>;\n gridWrapper: NonNullable<Slot<'div'>>;\n actions?: Slot<'span'>;\n expandButton?: Slot<typeof Button>;\n};\n\n/**\n * PromptStarterList Props\n */\nexport type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> &\n DesignVersion & {\n /**\n * Text for the expand button when the list is collapsed.\n *\n * default: \"Show more\"\n */\n expandButtonLabel?: string;\n /**\n * Text for the expand button when the list is expanded.\n *\n * default: \"Show less\"\n */\n collapseButtonLabel?: string;\n /**\n * Arrow navigation options. This can be used to customize Tabster's direction,\n * tab behavior, and memoization options.\n *\n * default: { axis: 'horizontal', memorizeCurrent: true }\n */\n arrowNavigationOptions?: UseArrowNavigationGroupOptions;\n\n /**\n * Whether to animate the entrance of its items when it first mounts.\n *\n * @default true\n */\n animateOnMount?: boolean;\n };\n\n/**\n * State used in rendering PromptStarterList\n */\nexport type PromptStarterListState = ComponentState<PromptStarterListSlots> &\n Required<Pick<PromptStarterListProps, 'designVersion'>> & {\n numberOfColumns: number;\n isExpanded?: boolean;\n };\n\nexport type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;\n"],"names":[],"rangeMappings":"","mappings":"AA0DA,WAA2G"}
|
|
@@ -14,6 +14,7 @@ import { PromptStarterListProvider } from '../../../contexts/PromptStarterListCo
|
|
|
14
14
|
children: state.root.children
|
|
15
15
|
})
|
|
16
16
|
}),
|
|
17
|
+
state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
|
|
17
18
|
state.expandButton && /*#__PURE__*/ _jsx(state.expandButton, {})
|
|
18
19
|
]
|
|
19
20
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPromptStarterList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, PresenceGroup } from '@fluentui/react-components';\nimport { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';\nimport type {\n PromptStarterListState,\n PromptStarterListSlots,\n PromptStarterListContextValue,\n} from './PromptStarterList.types';\n\n/**\n * Render the final JSX of PromptStarterList\n */\nexport const renderPromptStarterList_unstable = (\n state: PromptStarterListState,\n contextValue: PromptStarterListContextValue,\n) => {\n assertSlots<PromptStarterListSlots>(state);\n\n return (\n <PromptStarterListProvider value={contextValue}>\n <state.root>\n <PresenceGroup>\n <state.gridWrapper>{state.root.children}</state.gridWrapper>\n </PresenceGroup>\n {state.expandButton && <state.expandButton />}\n </state.root>\n </PromptStarterListProvider>\n );\n};\n"],"names":["assertSlots","PresenceGroup","PromptStarterListProvider","renderPromptStarterList_unstable","state","contextValue","value","root","gridWrapper","children","expandButton"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["renderPromptStarterList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, PresenceGroup } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport { PromptStarterListProvider } from '../../../contexts/PromptStarterListContext';\nimport type {\n PromptStarterListState,\n PromptStarterListSlots,\n PromptStarterListContextValue,\n} from './PromptStarterList.types';\n\n/**\n * Render the final JSX of PromptStarterList\n */\nexport const renderPromptStarterList_unstable = (\n state: PromptStarterListState,\n contextValue: PromptStarterListContextValue,\n): JSXElement => {\n assertSlots<PromptStarterListSlots>(state);\n\n return (\n <PromptStarterListProvider value={contextValue}>\n <state.root>\n <PresenceGroup>\n <state.gridWrapper>{state.root.children}</state.gridWrapper>\n </PresenceGroup>\n {state.actions && <state.actions />}\n {state.expandButton && <state.expandButton />}\n </state.root>\n </PromptStarterListProvider>\n );\n};\n"],"names":["assertSlots","PresenceGroup","PromptStarterListProvider","renderPromptStarterList_unstable","state","contextValue","value","root","gridWrapper","children","actions","expandButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,aAAa,QAAQ,6BAA6B;AAExE,SAASC,yBAAyB,QAAQ,6CAA6C;AAOvF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEAL,YAAoCI;IAEpC,qBACE,KAACF;QAA0BI,OAAOD;kBAChC,cAAA,MAACD,MAAMG,IAAI;;8BACT,KAACN;8BACC,cAAA,KAACG,MAAMI,WAAW;kCAAEJ,MAAMG,IAAI,CAACE,QAAQ;;;gBAExCL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;gBAC/BN,MAAMO,YAAY,kBAAI,KAACP,MAAMO,YAAY;;;;AAIlD,EAAE"}
|
|
@@ -12,12 +12,12 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
|
|
|
12
12
|
* @param props - props from this instance of PromptStarterList
|
|
13
13
|
* @param ref - reference to root HTMLElement of PromptStarterList
|
|
14
14
|
*/ export const usePromptStarterList_unstable = (props, ref)=>{
|
|
15
|
-
const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;
|
|
15
|
+
const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', animateOnMount = true } = props;
|
|
16
16
|
const designVersion = useDesignVersion(props.designVersion);
|
|
17
17
|
var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
|
|
18
18
|
const focusAttrs = useArrowNavigationGroup({
|
|
19
19
|
...arrowNavigationOptions,
|
|
20
|
-
axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : '
|
|
20
|
+
axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'both',
|
|
21
21
|
memorizeCurrent: (_arrowNavigationOptions_memorizeCurrent = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.memorizeCurrent) !== null && _arrowNavigationOptions_memorizeCurrent !== void 0 ? _arrowNavigationOptions_memorizeCurrent : true
|
|
22
22
|
});
|
|
23
23
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
@@ -47,6 +47,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
|
|
|
47
47
|
components: {
|
|
48
48
|
root: 'div',
|
|
49
49
|
gridWrapper: 'div',
|
|
50
|
+
actions: 'span',
|
|
50
51
|
expandButton: Button
|
|
51
52
|
},
|
|
52
53
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
@@ -57,11 +58,14 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
|
|
|
57
58
|
}),
|
|
58
59
|
gridWrapper: slot.always(props.gridWrapper, {
|
|
59
60
|
defaultProps: {
|
|
60
|
-
role: '
|
|
61
|
+
role: 'list',
|
|
61
62
|
...focusAttrs
|
|
62
63
|
},
|
|
63
64
|
elementType: 'div'
|
|
64
65
|
}),
|
|
66
|
+
actions: slot.optional(props.actions, {
|
|
67
|
+
elementType: 'span'
|
|
68
|
+
}),
|
|
65
69
|
expandButton: slot.optional(props.expandButton, {
|
|
66
70
|
defaultProps: {
|
|
67
71
|
appearance: 'subtle',
|
|
@@ -94,7 +98,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
|
|
|
94
98
|
// are shown in the expanded state.
|
|
95
99
|
const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
|
|
96
100
|
return /*#__PURE__*/ React.createElement(PromptStarterMotion, {
|
|
97
|
-
appear:
|
|
101
|
+
appear: animateOnMount,
|
|
98
102
|
key: index,
|
|
99
103
|
index: index,
|
|
100
104
|
visible: visibility,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n Button,\n useArrowNavigationGroup,\n mergeCallbacks,\n useFluent,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n props: PromptStarterListProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n const {
|
|
1
|
+
{"version":3,"sources":["usePromptStarterList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n Button,\n useArrowNavigationGroup,\n mergeCallbacks,\n useFluent,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { PromptStarterListProps, PromptStarterListState } from './PromptStarterList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ChevronDown12Regular } from '@fluentui/react-icons';\nimport { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';\n\n/**\n * Create the state required to render PromptStarterList.\n *\n * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,\n * before being passed to renderPromptStarterList_unstable.\n *\n * @param props - props from this instance of PromptStarterList\n * @param ref - reference to root HTMLElement of PromptStarterList\n */\nexport const usePromptStarterList_unstable = (\n props: PromptStarterListProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterListState => {\n const {\n arrowNavigationOptions,\n expandButtonLabel = 'Show more',\n collapseButtonLabel = 'Show less',\n animateOnMount = true,\n } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'both',\n memorizeCurrent: arrowNavigationOptions?.memorizeCurrent ?? true,\n });\n\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [numberOfColumns, setNumberOfColumns] = React.useState<number>(3);\n\n const gridWrapperRef = React.useRef<HTMLDivElement>(null);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n React.useEffect(() => {\n if (!win || !gridWrapperRef.current) return;\n\n const promptStarterGrid = gridWrapperRef.current;\n\n const updateNumberOfColumns = () => {\n const numColumns = win.getComputedStyle(promptStarterGrid).gridTemplateColumns.split(' ').length;\n setNumberOfColumns(numColumns);\n };\n\n const ro = new win.ResizeObserver(updateNumberOfColumns);\n ro.observe(promptStarterGrid);\n\n return () => {\n ro.unobserve(promptStarterGrid);\n };\n }, [win]);\n\n const state: PromptStarterListState = {\n numberOfColumns: numberOfColumns,\n isExpanded,\n designVersion,\n components: {\n root: 'div',\n gridWrapper: 'div',\n actions: 'span',\n expandButton: Button,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n gridWrapper: slot.always(props.gridWrapper, {\n defaultProps: {\n role: 'list',\n ...focusAttrs,\n },\n elementType: 'div',\n }),\n actions: slot.optional(props.actions, {\n elementType: 'span',\n }),\n expandButton: slot.optional(props.expandButton, {\n defaultProps: {\n appearance: 'subtle',\n size: 'small',\n shape: 'rounded',\n icon: <ChevronDown12Regular />,\n iconPosition: 'after',\n 'aria-expanded': isExpanded,\n children: isExpanded ? collapseButtonLabel : expandButtonLabel,\n },\n renderByDefault: true,\n elementType: Button,\n }),\n };\n\n state.gridWrapper.ref = useMergedRefs(gridWrapperRef, state.gridWrapper.ref);\n\n // Get the array of children.\n const childrenArray = React.useMemo<\n (React.ReactElement<any> | number | string | Iterable<React.ReactNode> | React.ReactPortal)[]\n >(() => {\n return React.Children.toArray(state.root.children);\n }, [state.root.children]);\n\n // Add motion to the children.\n const childrenWithMotion = React.useMemo(\n () =>\n childrenArray.map((child, index) => {\n // Throw error if the child is not a valid React element or is a Fragment.\n if (!React.isValidElement(child) || child.type === React.Fragment) {\n throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');\n }\n\n // In the collapsed state, if there is one column, we show three children.\n // If there are two or three columns, we show two or three. All children\n // are shown in the expanded state.\n const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns || isExpanded;\n\n return (\n <PromptStarterMotion\n appear={animateOnMount}\n key={index}\n index={index}\n visible={visibility}\n numberOfColumns={numberOfColumns}\n >\n {child}\n </PromptStarterMotion>\n );\n }),\n [childrenArray, numberOfColumns, isExpanded],\n );\n\n state.root.children = childrenWithMotion;\n\n if (state.expandButton) {\n state.expandButton.onClick = mergeCallbacks(\n state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n () => setIsExpanded(!isExpanded),\n );\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","Button","useArrowNavigationGroup","mergeCallbacks","useFluent","useMergedRefs","useDesignVersion","ChevronDown12Regular","PromptStarterMotion","usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","animateOnMount","designVersion","focusAttrs","axis","memorizeCurrent","isExpanded","setIsExpanded","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","actions","expandButton","always","elementType","defaultProps","role","optional","appearance","size","shape","icon","iconPosition","children","renderByDefault","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","appear","key","visible","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js
CHANGED
|
@@ -3,14 +3,20 @@ import { tokens } from '@fluentui-copilot/tokens';
|
|
|
3
3
|
export const promptStarterListClassNames = {
|
|
4
4
|
root: 'fai-PromptStarterList',
|
|
5
5
|
gridWrapper: 'fai-PromptStarterList__gridWrapper',
|
|
6
|
+
actions: 'fai-PromptStarterList__actions',
|
|
6
7
|
expandButton: 'fai-PromptStarterList__expandButton'
|
|
7
8
|
};
|
|
8
9
|
/**
|
|
9
10
|
* Styles for the root slot
|
|
10
11
|
*/
|
|
11
|
-
const useRootClassName = __resetStyles("
|
|
12
|
+
const useRootClassName = __resetStyles("r1svwxtk", null, [".r1svwxtk{display:grid;grid-template-columns:1fr max-content max-content;grid-template-rows:max-content max-content;grid-template-areas:\"grid grid grid\" \". actions expandButton\";max-width:772px;row-gap:var(--spacingVerticalXL);column-gap:var(--spacingHorizontalSNudge);}"]);
|
|
12
13
|
const useStyles = __styles({
|
|
13
14
|
gridWrapper: {
|
|
15
|
+
Bw0ie65: 0,
|
|
16
|
+
Br312pm: 0,
|
|
17
|
+
nk6f5a: 0,
|
|
18
|
+
Ijaq50: 0,
|
|
19
|
+
Bq1tomu: "fl4njfv",
|
|
14
20
|
mc9l5x: "f13qh94s",
|
|
15
21
|
i8kkvl: 0,
|
|
16
22
|
Belr9w4: 0,
|
|
@@ -19,8 +25,19 @@ const useStyles = __styles({
|
|
|
19
25
|
Budl1dq: "fvo7o13",
|
|
20
26
|
Bxotwcr: "f1nkeedh"
|
|
21
27
|
},
|
|
28
|
+
actions: {
|
|
29
|
+
Bw0ie65: 0,
|
|
30
|
+
Br312pm: 0,
|
|
31
|
+
nk6f5a: 0,
|
|
32
|
+
Ijaq50: 0,
|
|
33
|
+
Bq1tomu: "fceb517"
|
|
34
|
+
},
|
|
22
35
|
expandButton: {
|
|
23
|
-
|
|
36
|
+
Bw0ie65: 0,
|
|
37
|
+
Br312pm: 0,
|
|
38
|
+
nk6f5a: 0,
|
|
39
|
+
Ijaq50: 0,
|
|
40
|
+
Bq1tomu: "f1najgz0",
|
|
24
41
|
wrk2wx: "f11k2d1d",
|
|
25
42
|
dutsh0: "f1iwh30k",
|
|
26
43
|
B4u5nao: "fn63aq9",
|
|
@@ -31,9 +48,15 @@ const useStyles = __styles({
|
|
|
31
48
|
Bs9jjb3: ["f5l68jj", "f1i29bk4"]
|
|
32
49
|
}
|
|
33
50
|
}, {
|
|
34
|
-
d: [".
|
|
51
|
+
d: [[".fl4njfv{grid-area:grid;}", {
|
|
52
|
+
p: -1
|
|
53
|
+
}], ".f13qh94s{display:grid;}", [".f1p93rwu{gap:var(--spacingHorizontalL);}", {
|
|
54
|
+
p: -1
|
|
55
|
+
}], ".f4wu0r3{grid-auto-columns:max-content;}", ".fvo7o13{grid-template-columns:repeat(auto-fit, minmax(214px, 1fr));}", ".f1nkeedh{grid-auto-flow:unset;}", [".fceb517{grid-area:actions;}", {
|
|
35
56
|
p: -1
|
|
36
|
-
}], ".
|
|
57
|
+
}], [".f1najgz0{grid-area:expandButton;}", {
|
|
58
|
+
p: -1
|
|
59
|
+
}], ".f11k2d1d .fui-Button__icon{font-size:12px;}", ".f1iwh30k .fui-Button__icon{height:12px;}", ".fn63aq9 .fui-Button__icon{width:12px;}", ".f5l68jj>.fui-Button__icon{transform:rotate(180deg);}", ".f1i29bk4>.fui-Button__icon{transform:rotate(-180deg);}"],
|
|
37
60
|
h: [".fm7zj7h:hover .fui-Button__icon{color:var(--colorNeutralForeground2Hover);}", ".fuzcl37:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2Pressed);}"]
|
|
38
61
|
});
|
|
39
62
|
/**
|
|
@@ -49,6 +72,9 @@ export const usePromptStarterListStyles_unstable = state => {
|
|
|
49
72
|
const styles = useStyles();
|
|
50
73
|
state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
|
|
51
74
|
state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
|
|
75
|
+
if (state.actions) {
|
|
76
|
+
state.actions.className = mergeClasses(promptStarterListClassNames.actions, styles.actions, state.actions.className);
|
|
77
|
+
}
|
|
52
78
|
if (state.expandButton) {
|
|
53
79
|
state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
|
|
54
80
|
}
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.js.map
CHANGED
|
@@ -1 +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: '
|
|
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 actions: 'fai-PromptStarterList__actions',\n expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr max-content max-content',\n gridTemplateRows: 'max-content max-content',\n gridTemplateAreas: `\"grid grid grid\"\n \". actions expandButton\"`,\n maxWidth: '772px',\n rowGap: tokens.spacingVerticalXL,\n columnGap: tokens.spacingHorizontalSNudge,\n});\n\nconst useStyles = makeStyles({\n gridWrapper: {\n gridArea: 'grid',\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 actions: {\n gridArea: 'actions',\n },\n\n expandButton: {\n gridArea: 'expandButton',\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.actions) {\n state.actions.className = mergeClasses(\n promptStarterListClassNames.actions,\n styles.actions,\n state.actions.className,\n );\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","actions","expandButton","useRootClassName","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","spacingVerticalXL","columnGap","spacingHorizontalSNudge","useStyles","gridArea","gap","spacingHorizontalL","gridAutoColumns","gridAutoFlow","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,SAAS;IACTC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB,CAAC;8CACwB,CAAC;IAC7CC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAWd,OAAOe,uBAAuB;AAC3C;AAEA,MAAMC,YAAYlB,WAAW;IAC3BK,aAAa;QACXc,UAAU;QACVV,SAAS;QACTW,KAAKlB,OAAOmB,kBAAkB;QAC9BC,iBAAiB;QAEjBZ,qBAAqB,CAAC,oCAAoC,CAAC;QAC3Da,cAAc;IAChB;IAEAjB,SAAS;QACPa,UAAU;IACZ;IAEAZ,cAAc;QACZY,UAAU;QACV,CAAC,CAAC,GAAG,EAAErB,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAE7B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO2B,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE/B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO4B,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAEjC,iBAAiB0B,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,gBAAgB5B;IACtB,MAAM6B,SAASnB;IACfgB,MAAM9B,IAAI,CAACkC,SAAS,GAAGrC,aAAaE,4BAA4BC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACkC,SAAS;IACzGJ,MAAM7B,WAAW,CAACiC,SAAS,GAAGrC,aAC5BE,4BAA4BE,WAAW,EACvCgC,OAAOhC,WAAW,EAClB6B,MAAM7B,WAAW,CAACiC,SAAS;IAE7B,IAAIJ,MAAM5B,OAAO,EAAE;QACjB4B,MAAM5B,OAAO,CAACgC,SAAS,GAAGrC,aACxBE,4BAA4BG,OAAO,EACnC+B,OAAO/B,OAAO,EACd4B,MAAM5B,OAAO,CAACgC,SAAS;IAE3B;IACA,IAAIJ,MAAM3B,YAAY,EAAE;QACtB2B,MAAM3B,YAAY,CAAC+B,SAAS,GAAGrC,aAC7BE,4BAA4BI,YAAY,EACxC8B,OAAO9B,YAAY,EACnB4B,cAAcE,OAAON,oBAAoB,EACzCG,MAAM3B,YAAY,CAAC+B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js
CHANGED
|
@@ -3,26 +3,35 @@ import { tokens } from '@fluentui-copilot/tokens';
|
|
|
3
3
|
export const promptStarterListClassNames = {
|
|
4
4
|
root: 'fai-PromptStarterList',
|
|
5
5
|
gridWrapper: 'fai-PromptStarterList__gridWrapper',
|
|
6
|
+
actions: 'fai-PromptStarterList__actions',
|
|
6
7
|
expandButton: 'fai-PromptStarterList__expandButton'
|
|
7
8
|
};
|
|
8
9
|
/**
|
|
9
10
|
* Styles for the root slot
|
|
10
11
|
*/ const useRootClassName = makeResetStyles({
|
|
11
|
-
display: '
|
|
12
|
-
|
|
12
|
+
display: 'grid',
|
|
13
|
+
gridTemplateColumns: '1fr max-content max-content',
|
|
14
|
+
gridTemplateRows: 'max-content max-content',
|
|
15
|
+
gridTemplateAreas: `"grid grid grid"
|
|
16
|
+
". actions expandButton"`,
|
|
13
17
|
maxWidth: '772px',
|
|
14
|
-
|
|
18
|
+
rowGap: tokens.spacingVerticalXL,
|
|
19
|
+
columnGap: tokens.spacingHorizontalSNudge
|
|
15
20
|
});
|
|
16
21
|
const useStyles = makeStyles({
|
|
17
22
|
gridWrapper: {
|
|
23
|
+
gridArea: 'grid',
|
|
18
24
|
display: 'grid',
|
|
19
25
|
gap: tokens.spacingHorizontalL,
|
|
20
26
|
gridAutoColumns: 'max-content',
|
|
21
27
|
gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,
|
|
22
28
|
gridAutoFlow: 'unset'
|
|
23
29
|
},
|
|
30
|
+
actions: {
|
|
31
|
+
gridArea: 'actions'
|
|
32
|
+
},
|
|
24
33
|
expandButton: {
|
|
25
|
-
|
|
34
|
+
gridArea: 'expandButton',
|
|
26
35
|
[`& .${buttonClassNames.icon}`]: {
|
|
27
36
|
fontSize: '12px',
|
|
28
37
|
height: '12px',
|
|
@@ -54,6 +63,9 @@ const useStyles = makeStyles({
|
|
|
54
63
|
const styles = useStyles();
|
|
55
64
|
state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
|
|
56
65
|
state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
|
|
66
|
+
if (state.actions) {
|
|
67
|
+
state.actions.className = mergeClasses(promptStarterListClassNames.actions, styles.actions, state.actions.className);
|
|
68
|
+
}
|
|
57
69
|
if (state.expandButton) {
|
|
58
70
|
state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
|
|
59
71
|
}
|
|
@@ -1 +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: '
|
|
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 actions: 'fai-PromptStarterList__actions',\n expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr max-content max-content',\n gridTemplateRows: 'max-content max-content',\n gridTemplateAreas: `\"grid grid grid\"\n \". actions expandButton\"`,\n maxWidth: '772px',\n rowGap: tokens.spacingVerticalXL,\n columnGap: tokens.spacingHorizontalSNudge,\n});\n\nconst useStyles = makeStyles({\n gridWrapper: {\n gridArea: 'grid',\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 actions: {\n gridArea: 'actions',\n },\n\n expandButton: {\n gridArea: 'expandButton',\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.actions) {\n state.actions.className = mergeClasses(\n promptStarterListClassNames.actions,\n styles.actions,\n state.actions.className,\n );\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","actions","expandButton","useRootClassName","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","maxWidth","rowGap","spacingVerticalXL","columnGap","spacingHorizontalSNudge","useStyles","gridArea","gap","spacingHorizontalL","gridAutoColumns","gridAutoFlow","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,SAAS;IACTC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB,CAAC;8CACwB,CAAC;IAC7CC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAWd,OAAOe,uBAAuB;AAC3C;AAEA,MAAMC,YAAYlB,WAAW;IAC3BK,aAAa;QACXc,UAAU;QACVV,SAAS;QACTW,KAAKlB,OAAOmB,kBAAkB;QAC9BC,iBAAiB;QAEjBZ,qBAAqB,CAAC,oCAAoC,CAAC;QAC3Da,cAAc;IAChB;IAEAjB,SAAS;QACPa,UAAU;IACZ;IAEAZ,cAAc;QACZY,UAAU;QACV,CAAC,CAAC,GAAG,EAAErB,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAE7B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO2B,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE/B,iBAAiB0B,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAO1B,OAAO4B,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAEjC,iBAAiB0B,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,gBAAgB5B;IACtB,MAAM6B,SAASnB;IACfgB,MAAM9B,IAAI,CAACkC,SAAS,GAAGrC,aAAaE,4BAA4BC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACkC,SAAS;IACzGJ,MAAM7B,WAAW,CAACiC,SAAS,GAAGrC,aAC5BE,4BAA4BE,WAAW,EACvCgC,OAAOhC,WAAW,EAClB6B,MAAM7B,WAAW,CAACiC,SAAS;IAE7B,IAAIJ,MAAM5B,OAAO,EAAE;QACjB4B,MAAM5B,OAAO,CAACgC,SAAS,GAAGrC,aACxBE,4BAA4BG,OAAO,EACnC+B,OAAO/B,OAAO,EACd4B,MAAM5B,OAAO,CAACgC,SAAS;IAE3B;IACA,IAAIJ,MAAM3B,YAAY,EAAE;QACtB2B,MAAM3B,YAAY,CAAC+B,SAAS,GAAGrC,aAC7BE,4BAA4BI,YAAY,EACxC8B,OAAO9B,YAAY,EACnB4B,cAAcE,OAAON,oBAAoB,EACzCG,MAAM3B,YAAY,CAAC+B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>) =>\n useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["createContext","useContextSelector","PromptStarterListContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","usePromptStarterListContext","selector","ctx","PromptStarterListProvider","Provider"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,2BAA2BF,cAAyDG,WAAW;AAE5G,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEA,OAAO,MAAMC,8BAA8B,CAAIC,WAC7CN,mBAAmBC,0BAA0B,CAACM,MAAMJ,oCAAoC,GAAKG,SAASC,MAAM;AAC9G,OAAO,MAAMC,4BAA4BP,yBAAyBQ,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>): T =>\n useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["createContext","useContextSelector","PromptStarterListContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","usePromptStarterListContext","selector","ctx","PromptStarterListProvider","Provider"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,2BAA2BF,cAAyDG,WAAW;AAE5G,MAAMC,uCAAsE;IAC1EC,iBAAiB;AACnB;AAEA,OAAO,MAAMC,8BAA8B,CAAIC,WAC7CN,mBAAmBC,0BAA0B,CAACM,MAAMJ,oCAAoC,GAAKG,SAASC,MAAM;AAC9G,OAAO,MAAMC,4BAA4BP,yBAAyBQ,QAAQ,CAAC"}
|
|
@@ -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","_jsx","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\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":";;;;+BAOaA;;;eAAAA;;;4BANb;iCAE4B;AAIrB,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":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n prompt: NonNullable<Slot<'span'>>;\n reasonMarker?: Slot<'span'>;\n actions?: Slot<'span'>;\n};\n\n/**\n * PromptStarter Props\n */\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/**\n * State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"
|
|
1
|
+
{"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n category?: Slot<'span'>;\n prompt: NonNullable<Slot<'span'>>;\n reasonMarker?: Slot<'span'>;\n actions?: Slot<'span'>;\n};\n\n/**\n * PromptStarter Props\n */\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/**\n * State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAiBA;;CAEC"}
|
|
@@ -17,6 +17,7 @@ const renderPromptStarter_unstable = (state)=>{
|
|
|
17
17
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
|
|
18
18
|
children: [
|
|
19
19
|
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
|
|
20
|
+
state.category && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.category, {}),
|
|
20
21
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.prompt, {}),
|
|
21
22
|
state.reasonMarker && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.reasonMarker, {})
|
|
22
23
|
]
|
|
@@ -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.primaryAction>\n {state.icon && <state.icon />}\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","primaryAction","icon","_jsx","prompt","reasonMarker","actions"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.primaryAction>\n {state.icon && <state.icon />}\n {state.category && <state.category />}\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["renderPromptStarter_unstable","state","assertSlots","_jsxs","root","primaryAction","icon","_jsx","category","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;4BANb;iCAE4B;AAIrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTD,IAAAA,gBAAA,EAACF,MAAMI,aAAa,EAAA;;oBACjBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;oBACzBL,MAAMO,QAAQ,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,QAAQ,EAAA,CAAA;kCAClCD,IAAAA,eAAA,EAACN,MAAMQ,MAAM,EAAA,CAAA;oBACZR,MAAMS,YAAY,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACN,MAAMS,YAAY,EAAA,CAAA;;;YAE3CT,MAAMU,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACN,MAAMU,OAAO,EAAA,CAAA;;;AAGtC"}
|
|
@@ -14,6 +14,8 @@ const usePromptStarter_unstable = (props, ref)=>{
|
|
|
14
14
|
const id = (0, _reactcomponents.useId)('prompt-starter');
|
|
15
15
|
const focusAttrs = (0, _reactcomponents.useFocusableGroup)();
|
|
16
16
|
const numberOfColumns = (0, _PromptStarterListContext.usePromptStarterListContext)((ctx)=>ctx.numberOfColumns);
|
|
17
|
+
// if this is defined, the context exists and the Prompt is within PromptStarterList
|
|
18
|
+
const isWithinList = typeof numberOfColumns === 'number';
|
|
17
19
|
const isSingleColumn = numberOfColumns === 1;
|
|
18
20
|
const state = {
|
|
19
21
|
isSingleColumn,
|
|
@@ -21,20 +23,24 @@ const usePromptStarter_unstable = (props, ref)=>{
|
|
|
21
23
|
root: 'div',
|
|
22
24
|
primaryAction: 'button',
|
|
23
25
|
icon: 'span',
|
|
26
|
+
category: 'span',
|
|
24
27
|
prompt: 'span',
|
|
25
28
|
reasonMarker: 'span',
|
|
26
29
|
actions: 'span'
|
|
27
30
|
},
|
|
28
31
|
root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
|
|
29
32
|
ref,
|
|
30
|
-
'
|
|
31
|
-
'aria-describedby': `${id}-icon, ${id}-reasonMarker`,
|
|
33
|
+
role: isWithinList ? 'listitem' : undefined,
|
|
32
34
|
...focusAttrs,
|
|
33
35
|
...props
|
|
34
36
|
}), {
|
|
35
37
|
elementType: 'div'
|
|
36
38
|
}),
|
|
37
39
|
primaryAction: _reactcomponents.slot.always(props.primaryAction, {
|
|
40
|
+
defaultProps: {
|
|
41
|
+
'aria-labelledby': `${id}-category ${id}-prompt`,
|
|
42
|
+
'aria-describedby': `${id}-icon ${id}-reasonMarker`
|
|
43
|
+
},
|
|
38
44
|
elementType: 'button'
|
|
39
45
|
}),
|
|
40
46
|
icon: !isSingleColumn ? _reactcomponents.slot.optional(props.icon, {
|
|
@@ -43,6 +49,12 @@ const usePromptStarter_unstable = (props, ref)=>{
|
|
|
43
49
|
},
|
|
44
50
|
elementType: 'span'
|
|
45
51
|
}) : undefined,
|
|
52
|
+
category: !isSingleColumn ? _reactcomponents.slot.optional(props.category, {
|
|
53
|
+
defaultProps: {
|
|
54
|
+
id: `${id}-category`
|
|
55
|
+
},
|
|
56
|
+
elementType: 'span'
|
|
57
|
+
}) : undefined,
|
|
46
58
|
prompt: _reactcomponents.slot.always(props.prompt, {
|
|
47
59
|
defaultProps: {
|
|
48
60
|
id: `${id}-prompt`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\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<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n const isSingleColumn = numberOfColumns === 1;\n\n const state: PromptStarterState = {\n isSingleColumn,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n 'aria-labelledby': `${id}-prompt`,\n 'aria-describedby': `${id}-icon
|
|
1
|
+
{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\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<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n // if this is defined, the context exists and the Prompt is within PromptStarterList\n const isWithinList = typeof numberOfColumns === 'number';\n\n const isSingleColumn = numberOfColumns === 1;\n\n const state: PromptStarterState = {\n isSingleColumn,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n category: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: isWithinList ? 'listitem' : undefined,\n ...focusAttrs,\n ...props,\n }),\n { elementType: 'div' },\n ),\n primaryAction: slot.always(props.primaryAction, {\n defaultProps: {\n 'aria-labelledby': `${id}-category ${id}-prompt`,\n 'aria-describedby': `${id}-icon ${id}-reasonMarker`,\n },\n elementType: 'button',\n }),\n icon: !isSingleColumn\n ? slot.optional(props.icon, {\n defaultProps: { id: `${id}-icon` },\n elementType: 'span',\n })\n : undefined,\n category: !isSingleColumn\n ? slot.optional(props.category, {\n defaultProps: { id: `${id}-category` },\n elementType: 'span',\n })\n : undefined,\n prompt: slot.always(props.prompt, {\n defaultProps: { id: `${id}-prompt` },\n elementType: 'span',\n }),\n reasonMarker: !isSingleColumn\n ? slot.optional(props.reasonMarker, {\n defaultProps: { id: `${id}-reasonMarker` },\n elementType: 'span',\n })\n : undefined,\n actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n };\n\n return state;\n};\n"],"names":["usePromptStarter_unstable","props","ref","id","useId","focusAttrs","useFocusableGroup","numberOfColumns","usePromptStarterListContext","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","category","prompt","reasonMarker","actions","slot","always","getIntrinsicElementProps","role","undefined","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAb4D;0CAC7B;AAYrC,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKC,IAAAA,sBAAAA,EAAM;IACjB,MAAMC,aAAaC,IAAAA,kCAAAA;IAEnB,MAAMC,kBAAkBC,IAAAA,qDAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,eAAe;IAC9E,oFAAoF;IACpF,MAAMG,eAAe,OAAOH,oBAAoB;IAEhD,MAAMI,iBAAiBJ,oBAAoB;IAE3C,MAAMK,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAN,MAAMO,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BrB;YACAsB,MAAMd,eAAe,aAAae;YAClC,GAAGpB,UAAU;YACb,GAAGJ,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;QAEvBX,eAAeM,qBAAAA,CAAKC,MAAM,CAACrB,MAAMc,aAAa,EAAE;YAC9CY,cAAc;gBACZ,mBAAmB,CAAC,EAAExB,GAAG,UAAU,EAAEA,GAAG,OAAO,CAAC;gBAChD,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAuB,aAAa;QACf;QACAV,MAAM,CAACL,iBACHU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMe,IAAI,EAAE;YACxBW,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCuB,aAAa;QACf,KACAD;QACJR,UAAU,CAACN,iBACPU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMgB,QAAQ,EAAE;YAC5BU,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,SAAS,CAAC;YAAC;YACrCuB,aAAa;QACf,KACAD;QACJP,QAAQG,qBAAAA,CAAKC,MAAM,CAACrB,MAAMiB,MAAM,EAAE;YAChCS,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCuB,aAAa;QACf;QACAP,cAAc,CAACR,iBACXU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMkB,YAAY,EAAE;YAChCQ,cAAc;gBAAExB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCuB,aAAa;QACf,KACAD;QACJL,SAAS,CAACT,iBAAiBU,qBAAAA,CAAKO,QAAQ,CAAC3B,MAAMmB,OAAO,EAAE;YAAEM,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOb;AACT"}
|