@fluentui-copilot/react-prompt-starter 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui-copilot/react-prompt-starter",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 12 Jun 2025 17:49:28 GMT",
5
+ "date": "Tue, 24 Jun 2025 22:20:58 GMT",
6
+ "tag": "@fluentui-copilot/react-prompt-starter_v0.10.1",
7
+ "version": "0.10.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "jiangemma@microsoft.com",
12
+ "package": "@fluentui-copilot/react-prompt-starter",
13
+ "commit": "485ea952bff02c151ee8ad54af79cf5cebb3975f",
14
+ "comment": "feat: Add exit fade when collapsing PromptStarterList"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 12 Jun 2025 17:50:58 GMT",
6
21
  "tag": "@fluentui-copilot/react-prompt-starter_v0.10.0",
7
22
  "version": "0.10.0",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui-copilot/react-prompt-starter
2
2
 
3
- This log was last generated on Thu, 12 Jun 2025 17:49:28 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 24 Jun 2025 22:20:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.10.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.1)
8
+
9
+ Tue, 24 Jun 2025 22:20:58 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.0..@fluentui-copilot/react-prompt-starter_v0.10.1)
11
+
12
+ ### Patches
13
+
14
+ - feat: Add exit fade when collapsing PromptStarterList ([PR #3137](https://github.com/microsoft/fluentai/pull/3137) by jiangemma@microsoft.com)
15
+
7
16
  ## [0.10.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.0)
8
17
 
9
- Thu, 12 Jun 2025 17:49:28 GMT
18
+ Thu, 12 Jun 2025 17:50:58 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.9.4..@fluentui-copilot/react-prompt-starter_v0.10.0)
11
20
 
12
21
  ### Patches
@@ -6,11 +6,12 @@ export const PromptStarterMotion = createPresenceComponent(({
6
6
  const isFirstRow = index < numberOfColumns;
7
7
  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;
8
8
  const opacityDuration = 100;
9
- const opacityOffset = delay / (delay + 100);
9
+ const opacityOffset = delay / (delay + opacityDuration);
10
10
  const opacityEasing = 'linear';
11
11
  const scaleDuration = 500;
12
12
  const scaleOffset = delay / (delay + scaleDuration);
13
13
  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;
14
+ const opacityExitDuration = 200;
14
15
  return {
15
16
  enter: [{
16
17
  keyframes: [{
@@ -36,7 +37,15 @@ export const PromptStarterMotion = createPresenceComponent(({
36
37
  duration: scaleDuration + delay
37
38
  }],
38
39
  exit: {
39
- keyframes: []
40
+ keyframes: [{
41
+ opacity: 1
42
+ }, {
43
+ opacity: 1
44
+ }, {
45
+ opacity: 0
46
+ }],
47
+ easing: opacityEasing,
48
+ duration: opacityExitDuration
40
49
  }
41
50
  };
42
51
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n const isFirstRow = index < numberOfColumns;\n const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n const opacityDuration = 100;\n const opacityOffset = delay / (delay + 100);\n const opacityEasing = 'linear';\n\n const scaleDuration = 500;\n const scaleOffset = delay / (delay + scaleDuration);\n const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n return {\n enter: [\n {\n keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n easing: opacityEasing,\n duration: opacityDuration + delay,\n },\n {\n keyframes: [\n { transform: 'scale(0.9)' },\n { transform: 'scale(0.9)', offset: scaleOffset },\n { transform: 'scale(1)' },\n ],\n easing: scaleEasing,\n duration: scaleDuration + delay,\n },\n ],\n exit: {\n keyframes: [],\n },\n };\n});\n"],"names":["createPresenceComponent","PromptStarterMotion","index","numberOfColumns","isFirstRow","delay","opacityDuration","opacityOffset","opacityEasing","scaleDuration","scaleOffset","scaleEasing","enter","keyframes","opacity","offset","easing","duration","transform","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,6BAA6B;AAIrE,OAAO,MAAMC,sBAAsBD,wBAAmD,CAAC,EAAEE,KAAK,EAAEC,eAAe,EAAE;IAC/G,MAAMC,aAAaF,QAAQC;IAC3B,MAAME,QAAQD,aAAaF,QAAQ,KAAK,AAACA,CAAAA,QAAQC,eAAc,IAAK;IAEpE,MAAMG,kBAAkB;IACxB,MAAMC,gBAAgBF,QAASA,CAAAA,QAAQ,GAAE;IACzC,MAAMG,gBAAgB;IAEtB,MAAMC,gBAAgB;IACtB,MAAMC,cAAcL,QAASA,CAAAA,QAAQI,aAAY;IACjD,MAAME,cAAc,CAAC,iCAAiC,CAAC;IAEvD,OAAO;QACLC,OAAO;YACL;gBACEC,WAAW;oBAAC;wBAAEC,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;wBAAGC,QAAQR;oBAAc;oBAAG;wBAAEO,SAAS;oBAAE;iBAAE;gBAClFE,QAAQR;gBACRS,UAAUX,kBAAkBD;YAC9B;YACA;gBACEQ,WAAW;oBACT;wBAAEK,WAAW;oBAAa;oBAC1B;wBAAEA,WAAW;wBAAcH,QAAQL;oBAAY;oBAC/C;wBAAEQ,WAAW;oBAAW;iBACzB;gBACDF,QAAQL;gBACRM,UAAUR,gBAAgBJ;YAC5B;SACD;QACDc,MAAM;YACJN,WAAW,EAAE;QACf;IACF;AACF,GAAG"}
1
+ {"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n const isFirstRow = index < numberOfColumns;\n const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n const opacityDuration = 100;\n const opacityOffset = delay / (delay + opacityDuration);\n const opacityEasing = 'linear';\n\n const scaleDuration = 500;\n const scaleOffset = delay / (delay + scaleDuration);\n const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n const opacityExitDuration = 200;\n\n return {\n enter: [\n {\n keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n easing: opacityEasing,\n duration: opacityDuration + delay,\n },\n {\n keyframes: [\n { transform: 'scale(0.9)' },\n { transform: 'scale(0.9)', offset: scaleOffset },\n { transform: 'scale(1)' },\n ],\n easing: scaleEasing,\n duration: scaleDuration + delay,\n },\n ],\n exit: {\n keyframes: [{ opacity: 1 }, { opacity: 1 }, { opacity: 0 }],\n easing: opacityEasing,\n duration: opacityExitDuration,\n },\n };\n});\n"],"names":["createPresenceComponent","PromptStarterMotion","index","numberOfColumns","isFirstRow","delay","opacityDuration","opacityOffset","opacityEasing","scaleDuration","scaleOffset","scaleEasing","opacityExitDuration","enter","keyframes","opacity","offset","easing","duration","transform","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,6BAA6B;AAIrE,OAAO,MAAMC,sBAAsBD,wBAAmD,CAAC,EAAEE,KAAK,EAAEC,eAAe,EAAE;IAC/G,MAAMC,aAAaF,QAAQC;IAC3B,MAAME,QAAQD,aAAaF,QAAQ,KAAK,AAACA,CAAAA,QAAQC,eAAc,IAAK;IAEpE,MAAMG,kBAAkB;IACxB,MAAMC,gBAAgBF,QAASA,CAAAA,QAAQC,eAAc;IACrD,MAAME,gBAAgB;IAEtB,MAAMC,gBAAgB;IACtB,MAAMC,cAAcL,QAASA,CAAAA,QAAQI,aAAY;IACjD,MAAME,cAAc,CAAC,iCAAiC,CAAC;IAEvD,MAAMC,sBAAsB;IAE5B,OAAO;QACLC,OAAO;YACL;gBACEC,WAAW;oBAAC;wBAAEC,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;wBAAGC,QAAQT;oBAAc;oBAAG;wBAAEQ,SAAS;oBAAE;iBAAE;gBAClFE,QAAQT;gBACRU,UAAUZ,kBAAkBD;YAC9B;YACA;gBACES,WAAW;oBACT;wBAAEK,WAAW;oBAAa;oBAC1B;wBAAEA,WAAW;wBAAcH,QAAQN;oBAAY;oBAC/C;wBAAES,WAAW;oBAAW;iBACzB;gBACDF,QAAQN;gBACRO,UAAUT,gBAAgBJ;YAC5B;SACD;QACDe,MAAM;YACJN,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;YAC3DE,QAAQT;YACRU,UAAUN;QACZ;IACF;AACF,GAAG"}
@@ -92,20 +92,19 @@ export const usePromptStarterList_unstable = (props, ref) => {
92
92
  if (! /*#__PURE__*/React.isValidElement(child) || child.type === React.Fragment) {
93
93
  throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
94
94
  }
95
+ // In the collapsed state, if there is one column, we show three children.
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;
95
99
  return /*#__PURE__*/React.createElement(PromptStarterMotion, {
96
100
  appear: true,
97
101
  key: index,
98
102
  index: index,
103
+ visible: visibility,
99
104
  numberOfColumns: numberOfColumns
100
105
  }, child);
101
- }), [childrenArray, numberOfColumns]);
102
- // In the collapsed state, we only show 2-3 children depending on the number of numberOfColumns.
103
- if (!isExpanded) {
104
- const collapsedVisibleItems = numberOfColumns === 2 ? 2 : 3;
105
- state.root.children = childrenWithMotion.slice(0, collapsedVisibleItems);
106
- } else {
107
- state.root.children = childrenWithMotion;
108
- }
106
+ }), [childrenArray, numberOfColumns, isExpanded]);
107
+ state.root.children = childrenWithMotion;
109
108
  if (state.expandButton) {
110
109
  state.expandButton.onClick = mergeCallbacks(state.expandButton.onClick, () => setIsExpanded(!isExpanded));
111
110
  }
@@ -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 { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\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 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: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\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<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\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 return (\n <PromptStarterMotion appear key={index} index={index} numberOfColumns={numberOfColumns}>\n {child}\n </PromptStarterMotion>\n );\n }),\n [childrenArray, numberOfColumns],\n );\n\n // In the collapsed state, we only show 2-3 children depending on the number of numberOfColumns.\n if (!isExpanded) {\n const collapsedVisibleItems = numberOfColumns === 2 ? 2 : 3;\n state.root.children = childrenWithMotion.slice(0, collapsedVisibleItems);\n } else {\n state.root.children = childrenWithMotion;\n }\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","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","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","appear","key","collapsedVisibleItems","slice","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\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 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: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\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<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\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 appear key={index} index={index} visible={visibility} numberOfColumns={numberOfColumns}>\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","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","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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"}
@@ -13,11 +13,12 @@ const PromptStarterMotion = (0, _reactcomponents.createPresenceComponent)(({ ind
13
13
  const isFirstRow = index < numberOfColumns;
14
14
  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;
15
15
  const opacityDuration = 100;
16
- const opacityOffset = delay / (delay + 100);
16
+ const opacityOffset = delay / (delay + opacityDuration);
17
17
  const opacityEasing = 'linear';
18
18
  const scaleDuration = 500;
19
19
  const scaleOffset = delay / (delay + scaleDuration);
20
20
  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;
21
+ const opacityExitDuration = 200;
21
22
  return {
22
23
  enter: [
23
24
  {
@@ -54,7 +55,19 @@ const PromptStarterMotion = (0, _reactcomponents.createPresenceComponent)(({ ind
54
55
  }
55
56
  ],
56
57
  exit: {
57
- keyframes: []
58
+ keyframes: [
59
+ {
60
+ opacity: 1
61
+ },
62
+ {
63
+ opacity: 1
64
+ },
65
+ {
66
+ opacity: 0
67
+ }
68
+ ],
69
+ easing: opacityEasing,
70
+ duration: opacityExitDuration
58
71
  }
59
72
  };
60
73
  }); //# sourceMappingURL=promptStarterMotion.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n const isFirstRow = index < numberOfColumns;\n const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n const opacityDuration = 100;\n const opacityOffset = delay / (delay + 100);\n const opacityEasing = 'linear';\n\n const scaleDuration = 500;\n const scaleOffset = delay / (delay + scaleDuration);\n const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n return {\n enter: [\n {\n keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n easing: opacityEasing,\n duration: opacityDuration + delay,\n },\n {\n keyframes: [\n { transform: 'scale(0.9)' },\n { transform: 'scale(0.9)', offset: scaleOffset },\n { transform: 'scale(1)' },\n ],\n easing: scaleEasing,\n duration: scaleDuration + delay,\n },\n ],\n exit: {\n keyframes: [],\n },\n };\n});\n"],"names":["PromptStarterMotion","createPresenceComponent","delay","isFirstRow","opacityOffset","opacityEasing","index","numberOfColumns","opacityDuration","scaleDuration","enter","duration","keyframes","scaleOffset"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJ2B;AAIjC,MAAMA,sBAAsBC,IAAAA,wCAAAA,EAAmD,CAAC,OACrF,iBACMC;UAGNC,aAAMC,QAAgBF;UACtBA,QAAMG,aAAgBC,QAAA,KAAA,AAAAA,CAAAA,QAAAC,eAAA,IAAA;UAEtBC,kBAAsB;UACtBJ,gBAAoBF,QAASA,CAAAA,QAAQO,GAAAA;UACrCJ,gBAAoB;UAEpBI,gBAAO;UACLC,cAAOR,QAAAA,CAAAA,QAAAO,aAAA;wBACL,CAAA,iCAAA,CAAA;;;;;;;;;;;;;;;;;4CACoFP;;;2BAElFS;oBAAAA;mCACF;;;mCAEEC;;;;;;;;0CAEqCC;;;;;;;mDAIXX"}
1
+ {"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n const isFirstRow = index < numberOfColumns;\n const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n const opacityDuration = 100;\n const opacityOffset = delay / (delay + opacityDuration);\n const opacityEasing = 'linear';\n\n const scaleDuration = 500;\n const scaleOffset = delay / (delay + scaleDuration);\n const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n const opacityExitDuration = 200;\n\n return {\n enter: [\n {\n keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n easing: opacityEasing,\n duration: opacityDuration + delay,\n },\n {\n keyframes: [\n { transform: 'scale(0.9)' },\n { transform: 'scale(0.9)', offset: scaleOffset },\n { transform: 'scale(1)' },\n ],\n easing: scaleEasing,\n duration: scaleDuration + delay,\n },\n ],\n exit: {\n keyframes: [{ opacity: 1 }, { opacity: 1 }, { opacity: 0 }],\n easing: opacityEasing,\n duration: opacityExitDuration,\n },\n };\n});\n"],"names":["PromptStarterMotion","createPresenceComponent","delay","isFirstRow","opacityOffset","opacityEasing","index","numberOfColumns","opacityDuration","scaleDuration","opacityExitDuration","scaleOffset","enter","duration","keyframes","easing"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJ2B;AAIjC,MAAMA,sBAAsBC,IAAAA,wCAAAA,EAAmD,CAAC,OACrF,iBACMC;UAGNC,aAAMC,QAAgBF;UACtBA,QAAMG,aAAgBC,QAAA,KAAA,AAAAA,CAAAA,QAAAC,eAAA,IAAA;UAEtBC,kBAAsB;UACtBJ,gBAAoBF,QAASA,CAAAA,QAAQO,eAAY;UACjDJ,gBAAoB;UAEpBI,gBAAMC;UAENC,cAAOT,QAAAA,CAAAA,QAAAO,aAAA;UACLG,cAAO,CAAA,iCAAA,CAAA;gCACL;;;;;;;;;;;;;;;;;4CACoFV;;;2BAElFW;oBAAAA;mCACF;;;mCAEEC;;;;;;;;0CAEqCH;;;;;;;;;6BAGrCI;;;6BAEF;;;oBAEIV;sBACJS;;;mDAA4B"}
@@ -92,23 +92,23 @@ const usePromptStarterList_unstable = (props, ref)=>{
92
92
  if (!/*#__PURE__*/ _react.isValidElement(child) || child.type === _react.Fragment) {
93
93
  throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
94
94
  }
95
+ // In the collapsed state, if there is one column, we show three children.
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;
95
99
  return /*#__PURE__*/ _react.createElement(_promptStarterMotion.PromptStarterMotion, {
96
100
  appear: true,
97
101
  key: index,
98
102
  index: index,
103
+ visible: visibility,
99
104
  numberOfColumns: numberOfColumns
100
105
  }, child);
101
106
  }), [
102
107
  childrenArray,
103
- numberOfColumns
108
+ numberOfColumns,
109
+ isExpanded
104
110
  ]);
105
- // In the collapsed state, we only show 2-3 children depending on the number of numberOfColumns.
106
- if (!isExpanded) {
107
- const collapsedVisibleItems = numberOfColumns === 2 ? 2 : 3;
108
- state.root.children = childrenWithMotion.slice(0, collapsedVisibleItems);
109
- } else {
110
- state.root.children = childrenWithMotion;
111
- }
111
+ state.root.children = childrenWithMotion;
112
112
  if (state.expandButton) {
113
113
  state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
114
114
  }
@@ -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 { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\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 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: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\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<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\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 return (\n <PromptStarterMotion appear key={index} index={index} numberOfColumns={numberOfColumns}>\n {child}\n </PromptStarterMotion>\n );\n }),\n [childrenArray, numberOfColumns],\n );\n\n // In the collapsed state, we only show 2-3 children depending on the number of numberOfColumns.\n if (!isExpanded) {\n const collapsedVisibleItems = numberOfColumns === 2 ? 2 : 3;\n state.root.children = childrenWithMotion.slice(0, collapsedVisibleItems);\n } else {\n state.root.children = childrenWithMotion;\n }\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":["arrowNavigationOptions","expandButtonLabel","useArrowNavigationGroup","memorizeCurrent","_arrowNavigationOptions_axis","_arrowNavigationOptions_memorizeCurrent","focusAttrs","isExpanded","React","setNumberOfColumns","axis","gridWrapperRef","targetDocument","useFluent","setIsExpanded","useState","numberOfColumns","promptStarterGrid","numColumns","win","defaultView","useEffect","ro","observe","current","getComputedStyle","gridTemplateColumns","split","length","ResizeObserver","updateNumberOfColumns","state","components","root","gridWrapper","slot","ref","props","Button","always","getIntrinsicElementProps","defaultProps","elementType","expandButton","size","icon","iconPosition","renderByDefault","createElement","ChevronDown12Regular","children","collapseButtonLabel","childrenArray","useMemo","childrenWithMotion","Error","map","child","index","isValidElement","PromptStarterMotion","appear","collapsedVisibleItems","slice","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less' } = props;\n const designVersion = useDesignVersion(props.designVersion);\n const focusAttrs = useArrowNavigationGroup({\n ...arrowNavigationOptions,\n axis: arrowNavigationOptions?.axis ?? 'grid-linear',\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 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: 'group',\n ...focusAttrs,\n },\n elementType: 'div',\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<(React.ReactChild | React.ReactFragment | React.ReactPortal)[]>(() => {\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 appear key={index} index={index} visible={visibility} numberOfColumns={numberOfColumns}>\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":["arrowNavigationOptions","expandButtonLabel","useArrowNavigationGroup","memorizeCurrent","_arrowNavigationOptions_axis","_arrowNavigationOptions_memorizeCurrent","focusAttrs","isExpanded","React","setNumberOfColumns","axis","gridWrapperRef","targetDocument","useFluent","setIsExpanded","useState","numberOfColumns","promptStarterGrid","numColumns","win","defaultView","useEffect","ro","observe","current","getComputedStyle","gridTemplateColumns","split","length","ResizeObserver","updateNumberOfColumns","state","components","root","gridWrapper","slot","ref","props","Button","always","getIntrinsicElementProps","defaultProps","elementType","expandButton","size","icon","iconPosition","renderByDefault","createElement","ChevronDown12Regular","children","collapseButtonLabel","childrenArray","useMemo","childrenWithMotion","Error","map","child","index","isValidElement","type","Fragment","PromptStarterMotion","appear","visibility","mergeCallbacks","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-prompt-starter",
3
- "version": "0.10.0",
3
+ "version": "0.10.1",
4
4
  "description": "A Fluent AI package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,7 +12,7 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.12.0",
15
+ "@fluentui-copilot/react-provider": "^0.12.1",
16
16
  "@fluentui-copilot/tokens": "^0.3.11",
17
17
  "@swc/helpers": "^0.5.1"
18
18
  },