@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20251016-0037-d64d1d29.1 → 0.0.0-nightly-20251017-0406-90196598.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-prompt-starter",
   "entries": [
     {
-      "date": "Thu, 16 Oct 2025 00:43:55 GMT",
-      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251016-0037-d64d1d29.1",
-      "version": "0.0.0-nightly-20251016-0037-d64d1d29.1",
+      "date": "Fri, 17 Oct 2025 04:12:53 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251017-0406-90196598.1",
+      "version": "0.0.0-nightly-20251017-0406-90196598.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # Change Log - @fluentui-copilot/react-prompt-starter
 
-This log was last generated on Thu, 16 Oct 2025 00:43:55 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Oct 2025 04:12:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20251016-0037-d64d1d29.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251016-0037-d64d1d29.1)
+## [0.0.0-nightly-20251017-0406-90196598.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251017-0406-90196598.1)
 
-Thu, 16 Oct 2025 00:43:55 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.7..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251016-0037-d64d1d29.1)
+Fri, 17 Oct 2025 04:12:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.7..@fluentui-copilot/react-prompt-starter_v0.0.0-nightly-20251017-0406-90196598.1)
 
 ### Changes
 

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { BadgeProps } from '@fluentui/react-components';
 import type { Button } from '@fluentui/react-components';
 import type { ComponentProps } from '@fluentui/react-components';
@@ -24,6 +26,22 @@ declare type PromptStarterListContextValue = Pick<PromptStarterListState, 'numbe
  * PromptStarterList Props
  */
 export declare type PromptStarterListProps = ComponentProps<Partial<PromptStarterListSlots>, 'gridWrapper'> & DesignVersion & {
+    /**
+     * Uncontrolled initial value for the expanded prop.
+     *
+     *  @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls whether the PromptStarterList is expanded.
+     */
+    isExpanded?: boolean;
+    /**
+     * Callback to execute when the expanded state changes.
+     */
+    onExpandedChange?: (event: React.MouseEvent<HTMLElement>, data: {
+        isExpanded: boolean;
+    }) => void;
     /**
      * Text for the expand button when the list is collapsed.
      *
@@ -49,6 +67,13 @@ export declare type PromptStarterListProps = ComponentProps<Partial<PromptStarte
      * @default true
      */
     animateOnMount?: boolean;
+    /**
+     * The number of rows that are visible in the two and three column layouts.
+     * In the one column layout, there will always be three visible PromptStarters.
+     *
+     * @default 1
+     */
+    visibleRows?: number;
 };
 
 export declare type PromptStarterListSlots = {

package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js.map

@@ -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  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"}
+{"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     * Uncontrolled initial value for the expanded prop.\n     *\n     *  @default false\n     */\n    defaultExpanded?: boolean;\n\n    /**\n     * Controls whether the PromptStarterList is expanded.\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Callback to execute when the expanded state changes.\n     */\n    onExpandedChange?: (event: React.MouseEvent<HTMLElement>, data: { isExpanded: boolean }) => void;\n\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n\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     * The number of rows that are visible in the two and three column layouts.\n     * In the one column layout, there will always be three visible PromptStarters.\n     *\n     * @default 1\n     */\n    visibleRows?: number;\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":"AAqFA,WAA2G"}

package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js

@@ -3,6 +3,7 @@ import { getIntrinsicElementProps, slot, Button, useArrowNavigationGroup, mergeC
 import { useDesignVersion } from '@fluentui-copilot/react-provider';
 import { ChevronDown12Regular } from '@fluentui/react-icons';
 import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
+import { useControllableState } from '@fluentui/react-utilities';
 /**
  * Create the state required to render PromptStarterList.
  *
@@ -12,7 +13,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
  * @param props - props from this instance of PromptStarterList
  * @param ref - reference to root HTMLElement of PromptStarterList
  */ export const usePromptStarterList_unstable = (props, ref)=>{
-    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', animateOnMount = true } = props;
+    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', onExpandedChange, animateOnMount = true, visibleRows = 1 } = props;
     const designVersion = useDesignVersion(props.designVersion);
     var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
     const focusAttrs = useArrowNavigationGroup({
@@ -20,7 +21,22 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
         axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'both',
         memorizeCurrent: (_arrowNavigationOptions_memorizeCurrent = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.memorizeCurrent) !== null && _arrowNavigationOptions_memorizeCurrent !== void 0 ? _arrowNavigationOptions_memorizeCurrent : true
     });
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [isExpanded, setIsExpanded] = useControllableState({
+        state: props.isExpanded,
+        defaultState: props.defaultExpanded,
+        initialState: false
+    });
+    const toggleExpanded = React.useCallback((event)=>{
+        setIsExpanded((prevExpanded)=>{
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(event, {
+                isExpanded: !prevExpanded
+            });
+            return !prevExpanded;
+        });
+    }, [
+        setIsExpanded,
+        onExpandedChange
+    ]);
     const [numberOfColumns, setNumberOfColumns] = React.useState(3);
     const gridWrapperRef = React.useRef(null);
     const { targetDocument } = useFluent();
@@ -42,7 +58,7 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
     ]);
     const state = {
         numberOfColumns: numberOfColumns,
-        isExpanded,
+        isExpanded: isExpanded,
         designVersion,
         components: {
             root: 'div',
@@ -93,10 +109,9 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
             if (!/*#__PURE__*/ React.isValidElement(child) || child.type === React.Fragment) {
                 throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
             }
-            // In the collapsed state, if there is one column, we show three children.
-            // If there are two or three columns, we show two or three. All children
-            // are shown in the expanded state.
-            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
+            // In the collapsed state, if there is one column, we show three children. If there are two or three columns,
+            // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.
+            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns * visibleRows || isExpanded;
             return /*#__PURE__*/ React.createElement(PromptStarterMotion, {
                 appear: animateOnMount,
                 key: index,
@@ -110,8 +125,12 @@ import { PromptStarterMotion } from '../PromptStarter/promptStarterMotion';
         isExpanded
     ]);
     state.root.children = childrenWithMotion;
+    const numChildren = childrenArray.length;
+    if (numberOfColumns === 1 && numChildren <= 3 || numChildren <= numberOfColumns * visibleRows) {
+        state.expandButton = undefined;
+    }
     if (state.expandButton) {
-        state.expandButton.onClick = mergeCallbacks(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
+        state.expandButton.onClick = mergeCallbacks(state.expandButton.onClick, toggleExpanded);
     }
     return state;
 };

package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map

@@ -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 {\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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"}
+{"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';\nimport { useControllableState } from '@fluentui/react-utilities';\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    onExpandedChange,\n    animateOnMount = true,\n    visibleRows = 1,\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] = useControllableState({\n    state: props.isExpanded,\n    defaultState: props.defaultExpanded,\n    initialState: false,\n  });\n  const toggleExpanded = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      setIsExpanded(prevExpanded => {\n        onExpandedChange?.(event, { isExpanded: !prevExpanded });\n        return !prevExpanded;\n      });\n    },\n    [setIsExpanded, onExpandedChange],\n  );\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: 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. If there are two or three columns,\n        // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.\n        const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns * visibleRows || 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  const numChildren = childrenArray.length;\n  if ((numberOfColumns === 1 && numChildren <= 3) || numChildren <= numberOfColumns * visibleRows) {\n    state.expandButton = undefined;\n  }\n\n  if (state.expandButton) {\n    state.expandButton.onClick = mergeCallbacks(\n      state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n      toggleExpanded,\n    );\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","Button","useArrowNavigationGroup","mergeCallbacks","useFluent","useMergedRefs","useDesignVersion","ChevronDown12Regular","PromptStarterMotion","useControllableState","usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","onExpandedChange","animateOnMount","visibleRows","designVersion","focusAttrs","axis","memorizeCurrent","isExpanded","setIsExpanded","state","defaultState","defaultExpanded","initialState","toggleExpanded","useCallback","event","prevExpanded","numberOfColumns","setNumberOfColumns","useState","gridWrapperRef","useRef","targetDocument","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","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","numChildren","undefined","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js.map

@@ -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  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":""}
+{"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     * Uncontrolled initial value for the expanded prop.\n     *\n     *  @default false\n     */\n    defaultExpanded?: boolean;\n\n    /**\n     * Controls whether the PromptStarterList is expanded.\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Callback to execute when the expanded state changes.\n     */\n    onExpandedChange?: (event: React.MouseEvent<HTMLElement>, data: { isExpanded: boolean }) => void;\n\n    /**\n     * Text for the expand button when the list is collapsed.\n     *\n     * default: \"Show more\"\n     */\n    expandButtonLabel?: string;\n\n    /**\n     * Text for the expand button when the list is expanded.\n     *\n     * default: \"Show less\"\n     */\n    collapseButtonLabel?: string;\n\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     * The number of rows that are visible in the two and three column layouts.\n     * In the one column layout, there will always be three visible PromptStarters.\n     *\n     * @default 1\n     */\n    visibleRows?: number;\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":""}

package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js

@@ -14,8 +14,9 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactprovider = require("@fluentui-copilot/react-provider");
 const _reacticons = require("@fluentui/react-icons");
 const _promptStarterMotion = require("../PromptStarter/promptStarterMotion");
+const _reactutilities = require("@fluentui/react-utilities");
 const usePromptStarterList_unstable = (props, ref)=>{
-    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', animateOnMount = true } = props;
+    const { arrowNavigationOptions, expandButtonLabel = 'Show more', collapseButtonLabel = 'Show less', onExpandedChange, animateOnMount = true, visibleRows = 1 } = props;
     const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
     var _arrowNavigationOptions_axis, _arrowNavigationOptions_memorizeCurrent;
     const focusAttrs = (0, _reactcomponents.useArrowNavigationGroup)({
@@ -23,7 +24,22 @@ const usePromptStarterList_unstable = (props, ref)=>{
         axis: (_arrowNavigationOptions_axis = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.axis) !== null && _arrowNavigationOptions_axis !== void 0 ? _arrowNavigationOptions_axis : 'both',
         memorizeCurrent: (_arrowNavigationOptions_memorizeCurrent = arrowNavigationOptions === null || arrowNavigationOptions === void 0 ? void 0 : arrowNavigationOptions.memorizeCurrent) !== null && _arrowNavigationOptions_memorizeCurrent !== void 0 ? _arrowNavigationOptions_memorizeCurrent : true
     });
-    const [isExpanded, setIsExpanded] = _react.useState(false);
+    const [isExpanded, setIsExpanded] = (0, _reactutilities.useControllableState)({
+        state: props.isExpanded,
+        defaultState: props.defaultExpanded,
+        initialState: false
+    });
+    const toggleExpanded = _react.useCallback((event)=>{
+        setIsExpanded((prevExpanded)=>{
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(event, {
+                isExpanded: !prevExpanded
+            });
+            return !prevExpanded;
+        });
+    }, [
+        setIsExpanded,
+        onExpandedChange
+    ]);
     const [numberOfColumns, setNumberOfColumns] = _react.useState(3);
     const gridWrapperRef = _react.useRef(null);
     const { targetDocument } = (0, _reactcomponents.useFluent)();
@@ -45,7 +61,7 @@ const usePromptStarterList_unstable = (props, ref)=>{
     ]);
     const state = {
         numberOfColumns: numberOfColumns,
-        isExpanded,
+        isExpanded: isExpanded,
         designVersion,
         components: {
             root: 'div',
@@ -96,10 +112,9 @@ const usePromptStarterList_unstable = (props, ref)=>{
             if (!/*#__PURE__*/ _react.isValidElement(child) || child.type === _react.Fragment) {
                 throw new Error('You should only use PromptStarter components as the children of PromptStarterList.');
             }
-            // In the collapsed state, if there is one column, we show three children.
-            // If there are two or three columns, we show two or three. All children
-            // are shown in the expanded state.
-            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns || isExpanded;
+            // In the collapsed state, if there is one column, we show three children. If there are two or three columns,
+            // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.
+            const visibility = numberOfColumns === 1 && index < 3 || index < numberOfColumns * visibleRows || isExpanded;
             return /*#__PURE__*/ _react.createElement(_promptStarterMotion.PromptStarterMotion, {
                 appear: animateOnMount,
                 key: index,
@@ -113,8 +128,12 @@ const usePromptStarterList_unstable = (props, ref)=>{
         isExpanded
     ]);
     state.root.children = childrenWithMotion;
+    const numChildren = childrenArray.length;
+    if (numberOfColumns === 1 && numChildren <= 3 || numChildren <= numberOfColumns * visibleRows) {
+        state.expandButton = undefined;
+    }
     if (state.expandButton) {
-        state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, ()=>setIsExpanded(!isExpanded));
+        state.expandButton.onClick = (0, _reactcomponents.mergeCallbacks)(state.expandButton.onClick, toggleExpanded);
     }
     return state;
 };

package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map

@@ -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 {\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":["usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","animateOnMount","designVersion","useDesignVersion","focusAttrs","useArrowNavigationGroup","axis","memorizeCurrent","isExpanded","setIsExpanded","React","useState","numberOfColumns","setNumberOfColumns","gridWrapperRef","useRef","targetDocument","useFluent","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","state","components","root","gridWrapper","actions","expandButton","Button","slot","always","getIntrinsicElementProps","elementType","defaultProps","role","optional","appearance","size","shape","icon","createElement","ChevronDown12Regular","iconPosition","children","renderByDefault","useMergedRefs","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","PromptStarterMotion","appear","key","visible","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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';\nimport { useControllableState } from '@fluentui/react-utilities';\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    onExpandedChange,\n    animateOnMount = true,\n    visibleRows = 1,\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] = useControllableState({\n    state: props.isExpanded,\n    defaultState: props.defaultExpanded,\n    initialState: false,\n  });\n  const toggleExpanded = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      setIsExpanded(prevExpanded => {\n        onExpandedChange?.(event, { isExpanded: !prevExpanded });\n        return !prevExpanded;\n      });\n    },\n    [setIsExpanded, onExpandedChange],\n  );\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: 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. If there are two or three columns,\n        // we show two or three (or four or six, if there are two visible rows). All children are shown in the isExpanded state.\n        const visibility = (numberOfColumns === 1 && index < 3) || index < numberOfColumns * visibleRows || 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  const numChildren = childrenArray.length;\n  if ((numberOfColumns === 1 && numChildren <= 3) || numChildren <= numberOfColumns * visibleRows) {\n    state.expandButton = undefined;\n  }\n\n  if (state.expandButton) {\n    state.expandButton.onClick = mergeCallbacks(\n      state.expandButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n      toggleExpanded,\n    );\n  }\n\n  return state;\n};\n"],"names":["usePromptStarterList_unstable","props","ref","arrowNavigationOptions","expandButtonLabel","collapseButtonLabel","onExpandedChange","animateOnMount","visibleRows","designVersion","useDesignVersion","focusAttrs","useArrowNavigationGroup","axis","memorizeCurrent","isExpanded","setIsExpanded","useControllableState","state","defaultState","defaultExpanded","initialState","toggleExpanded","React","useCallback","event","prevExpanded","numberOfColumns","setNumberOfColumns","useState","gridWrapperRef","useRef","targetDocument","useFluent","win","defaultView","useEffect","current","promptStarterGrid","updateNumberOfColumns","numColumns","getComputedStyle","gridTemplateColumns","split","length","ro","ResizeObserver","observe","unobserve","components","root","gridWrapper","actions","expandButton","Button","slot","always","getIntrinsicElementProps","elementType","defaultProps","role","optional","appearance","size","shape","icon","createElement","ChevronDown12Regular","iconPosition","children","renderByDefault","useMergedRefs","childrenArray","useMemo","Children","toArray","childrenWithMotion","map","child","index","isValidElement","type","Fragment","Error","visibility","PromptStarterMotion","appear","key","visible","numChildren","undefined","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-prompt-starter",
-  "version": "0.0.0-nightly-20251016-0037-d64d1d29.1",
+  "version": "0.0.0-nightly-20251017-0406-90196598.1",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,8 +12,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20251016-0037-d64d1d29.1",
-    "@fluentui-copilot/tokens": "0.0.0-nightly-20251016-0037-d64d1d29.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20251017-0406-90196598.1",
+    "@fluentui-copilot/tokens": "0.0.0-nightly-20251017-0406-90196598.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {