@fluentui-copilot/react-prompt-starter 0.10.7 → 0.10.8

package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js

@@ -176,20 +176,32 @@ const useStyles = (0, _reactcomponents.__styles)({
         Beweih1: "f12k0sjh"
     },
     category: {
-        mc9l5x: "f22iagw",
-        Bt984gj: "f122n59",
+        nk6f5a: 0,
+        Ijaq50: 0,
+        h3tjnc: "fm1owph",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        Beweih1: "f14q5zaz",
+        qb2dma: "f7nlbp4",
+        sj55zd: "f19n0e5",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
         Bhrd7zp: "fl43uef",
         Bg96gwp: "f1i3iumi",
+        mc9l5x: "f1rvi9lw",
+        Fd1uvx: "fpfc2by",
+        Bh9c35c: "fvvof4m",
+        Bmxbyg5: "f1sil6mw",
+        Biipf1f: "f9ijwd5"
+    },
+    actions: {
         nk6f5a: 0,
         Ijaq50: 0,
-        h3tjnc: "fm1owph",
+        h3tjnc: "f3hl5xl",
         Bw0ie65: 0,
         Br312pm: 0,
-        Beweih1: "f14q5zaz"
-    },
-    actions: {
+        Beweih1: "f14q5zaz",
+        qhf8xq: "f10pi13n",
         jrapky: 0,
         Frg6f3: 0,
         t21cq0: 0,
@@ -198,13 +210,6 @@ const useStyles = (0, _reactcomponents.__styles)({
             "foizga4",
             "f5m8a6r"
         ],
-        qhf8xq: "f10pi13n",
-        nk6f5a: 0,
-        Ijaq50: 0,
-        h3tjnc: "f3hl5xl",
-        Bw0ie65: 0,
-        Br312pm: 0,
-        Beweih1: "f14q5zaz",
         abs64n: "f5p0z4x",
         Bn62ygk: 0,
         Cwk7ip: 0,
@@ -221,6 +226,12 @@ const useStyles = (0, _reactcomponents.__styles)({
         ]
     },
     prompt: {
+        nk6f5a: 0,
+        Ijaq50: 0,
+        h3tjnc: "f1daok31",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        Beweih1: "f1eb8yyf",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
         Bhrd7zp: "fl43uef",
@@ -229,12 +240,7 @@ const useStyles = (0, _reactcomponents.__styles)({
         Fd1uvx: "fpfc2by",
         Bh9c35c: "f1lvsx7g",
         Bmxbyg5: "f1sil6mw",
-        nk6f5a: 0,
-        Ijaq50: 0,
-        h3tjnc: "f1daok31",
-        Bw0ie65: 0,
-        Br312pm: 0,
-        Beweih1: "f1eb8yyf"
+        Biipf1f: "f9ijwd5"
     },
     promptNoReasonMarker: {
         Bh9c35c: "f197wrh9"
@@ -249,7 +255,12 @@ const useStyles = (0, _reactcomponents.__styles)({
         Bahqtrf: "fk6fouc",
         Be2twd7: "f13mqy1h",
         Bhrd7zp: "figsok6",
-        Bg96gwp: "fcpl73t"
+        Bg96gwp: "fcpl73t",
+        mc9l5x: "f1rvi9lw",
+        Fd1uvx: "fpfc2by",
+        Bh9c35c: "fvvof4m",
+        Bmxbyg5: "f1sil6mw",
+        Biipf1f: "f9ijwd5"
     }
 }, {
     d: [
@@ -349,9 +360,6 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
-        ".fkhj508{font-size:var(--fontSizeBase300);}",
-        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
-        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         [
             ".fm1owph{grid-row:1;}",
             {
@@ -364,26 +372,36 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
+        ".f7nlbp4{align-self:center;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1rvi9lw{display:-webkit-box;}",
+        ".fpfc2by{-webkit-box-orient:vertical;}",
+        ".fvvof4m{-webkit-line-clamp:1;}",
+        ".f1sil6mw{overflow-y:hidden;}",
+        ".f9ijwd5{word-break:break-word;}",
         [
-            ".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}",
+            ".f3hl5xl{grid-row:1/2;}",
             {
                 p: -1
             }
         ],
         [
-            ".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}",
+            ".f14q5zaz{grid-column:2/3;}",
             {
                 p: -1
             }
         ],
         [
-            ".f3hl5xl{grid-row:1/2;}",
+            ".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}",
             {
                 p: -1
             }
         ],
         [
-            ".f14q5zaz{grid-column:2/3;}",
+            ".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}",
             {
                 p: -1
             }
@@ -397,10 +415,6 @@ const useStyles = (0, _reactcomponents.__styles)({
         ],
         ".f1u7pq1e{box-shadow:-12px 0 12px 0 var(--colorNeutralBackground1);}",
         ".f1pdyzui{box-shadow:12px 0 12px 0 var(--colorNeutralBackground1);}",
-        ".f1rvi9lw{display:-webkit-box;}",
-        ".fpfc2by{-webkit-box-orient:vertical;}",
-        ".f1lvsx7g{-webkit-line-clamp:2;}",
-        ".f1sil6mw{overflow-y:hidden;}",
         [
             ".f1daok31{grid-row:2;}",
             {
@@ -413,6 +427,7 @@ const useStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
+        ".f1lvsx7g{-webkit-line-clamp:2;}",
         ".f197wrh9{-webkit-line-clamp:3;}",
         [
             ".f17e42vn{grid-row:3;}",
@@ -460,6 +475,12 @@ const useStyles = (0, _reactcomponents.__styles)({
 const useSingleColumnStyles = (0, _reactcomponents.__styles)({
     primaryAction: {
         mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fcvcxyf",
         Beyfa6y: 0,
         Bbmb7ep: 0,
         Btl43ni: 0,
@@ -524,15 +545,30 @@ const useSingleColumnStyles = (0, _reactcomponents.__styles)({
             "f4stah7"
         ]
     },
+    category: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm",
+        qb2dma: "fio29c6"
+    },
     prompt: {
         Bahqtrf: "fk6fouc",
         Be2twd7: "fy9rknc",
         Bhrd7zp: "fl43uef",
-        Bg96gwp: "fwrc4pm"
+        Bg96gwp: "fwrc4pm",
+        Bh9c35c: "f1lvsx7g"
     }
 }, {
     d: [
         ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        [
+            ".fcvcxyf{padding:var(--spacingVerticalM) var(--spacingHorizontalM);}",
+            {
+                p: -1
+            }
+        ],
         [
             ".f1jxijnj{border-radius:var(--borderRadius2XL);}",
             {
@@ -566,7 +602,9 @@ const useSingleColumnStyles = (0, _reactcomponents.__styles)({
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fy9rknc{font-size:var(--fontSizeBase200);}",
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
-        ".fwrc4pm{line-height:var(--lineHeightBase200);}"
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".fio29c6{align-self:auto;}",
+        ".f1lvsx7g{-webkit-line-clamp:2;}"
     ],
     f: [
         ".ftqa4ok:focus{outline-style:none;}"
@@ -607,7 +645,7 @@ const usePromptStarterStyles_unstable = (state)=>{
         state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
     }
     if (state.category) {
-        state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, state.category.className);
+        state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, isSingleColumn && singleColumnStyles.category, state.category.className);
     }
     state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
     if (state.reasonMarker) {

package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map

@@ -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  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":["promptStarterClassNames","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","v29qe6","Beyfa6y","sj55zd","Bahqtrf","Bceei9c","clip","height","margin","overflow","padding","width","position","opacity","Bekrc4i","Bn0qgzm","ibv6hh","useStyles","makeStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","color","fontFamily","cursor","outlineStyle","textAlign","columnGap","rowGap","spacingVerticalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","B6dhp37","typographyStyles","Bkh64rk","spacingVerticalNone","Bz10aip","actionsWithCategory","Bkqvd7p","overflowY","promptNoReasonMarker","Bhrd7zp","Bg96gwp","nk6f5a","useSingleColumnStyles","Frg6f3","B74szlk","qhf8xq","Ijaq50","isSingleColumn","styles","Br312pm","rootResetStyles","Beweih1","singleColumnStyles","state","Cwk7ip","Bmy1vo4","className","De3pzq","Be2twd7"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;cACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;gBACAC;iBACF;QACFC,QAAA;QACAC,SAAA;iBACO;iBACHJ;iBACAC;gBACAC;gBACF;QACFG,QAAA;QAEAC,SAAA;QACAC,SAAA;gBACI;gBACAC;YAAAA;YAAM;SAAA;gBACNC;iBACAC;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACF;QACFC,SAAA;YAAA;YAAA;SAAA;QACFC,SAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BnC,QAAAA;gBACEoC;YAAAA;YAAS;SAAA;gBACTC;gBACAR;YAAAA;YAAU;SAAA;gBACVrB;gBACAE;YAAAA;YAAAA;SAAqB;iBACrB4B;gBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;iBACAC;iBACAC;YAAAA;YAAQ;SAAA;gBACRC;iBACAC;YAAAA;YAAW;SAAA;iBACXC;iBACAC;YAAAA;YAAeC;SAAAA;iBACfrB;iBACGsB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACExC;iBACAC;iBACAC;QACFuC,SAAA;QAEAvD,SAAM;gBACJO;gBACAiD;gBACAC;gBACAtB;iBACAC;QACFsB,SAAA;QACAzD,SAAAA;iBACEM;gBACAiD;gBACGG;iBAEHxB;gBACAC;QACFwB,SAAA;QACAxD,QAAAA;gBACEoB;iBACS;YAAA;YAASqC;SAAAA;iBAClBjC;gBACAO;YAAAA;YAAS;SAAA;;0BAGA;gBACTnB;QACF8C,SAAA;QACAC,SAAAA;gBACE;iBACAxB;iBAEAzB;QACFkD,SAAA;QACA9D,SAAQ;;UAGN;gBACAK;iBACA;gBACA;gBACA0D;gBACA9B;gBACAC;QACFvB,SAAA;QACAqD,SAAAA;iBACE;;cAEF;QACA/D,QAAAA;iBACEgC;iBACAC;iBACGuB;QACLQ,SAAA;QACFC,SAAA;QAEAC,QAAMC;QACJvE,QAAAA;gBACEQ;iBACA+B;iBACGa;iBAA0BC;;;gBAAmD;QAClFmB,QAAA;QACArE,QAAQ;iBACHyD;QACLa,SAAA;YAAA;YAAA;SAAA;QACFC,QAAA;QAEAJ,QAAO;QACLK,QAAA;QAEA9D,QAAQ+D;QAER9D,SAAM+D;QACNC,SAAMC;QACNC,SAAMC;QACNC,QAAMnF;QACNmF,SAAMlF;QAMNmF,QAAID;iBACFA;QACFE,SAAA;QACAnB,SAAIiB;iBACFA;;yBAMWG;QAObC,QAAIJ;gBACFA;YAAAA;YAAM9E;SAAsB;;YAM1B8E;iBACFA;QAMFK,SAAA;QAEAnB,SAAOc;QACPb,SAAA"}
+{"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    gridRow: 1,\n    gridColumn: '2 / 3',\n    alignSelf: 'center',\n\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after one line.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '1',\n    overflowY: 'hidden',\n    wordBreak: 'break-word',\n  },\n  actions: {\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n    position: 'relative',\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\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    gridRow: '2',\n    gridColumn: '1 / 3',\n\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    wordBreak: 'break-word',\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\n    ...typographyStyles.caption2,\n\n    // Truncate text after one line.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '1',\n    overflowY: 'hidden',\n    wordBreak: 'break-word',\n  },\n});\n\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  category: {\n    ...typographyStyles.caption1Strong,\n    alignSelf: 'auto',\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\n\n    // Always truncate after two lines in single column layout.\n    '-webkit-line-clamp': '2',\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      isSingleColumn && singleColumnStyles.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":["promptStarterClassNames","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","__styles","gridTemplateColumns","gridTemplateRows","minWidth","h3tjnc","Bw0ie65","boxShadow","transform","transition","v29qe6","Beyfa6y","sj55zd","Bahqtrf","Bceei9c","clip","height","margin","overflow","padding","width","position","opacity","Bekrc4i","Bn0qgzm","ibv6hh","useStyles","makeStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","color","fontFamily","cursor","outlineStyle","textAlign","columnGap","rowGap","spacingVerticalS","shorthands","border","strokeWidthThin","createFocusOutlineStyle","style","Boxcth7","primaryActionHovered","Blkhhs4","alignItems","minHeight","B6dhp37","alignSelf","typographyStyles","overflowY","wordBreak","Bi2q7bf","sshi5w","promptNoReasonMarker","qb2dma","nk6f5a","useSingleColumnStyles","flexDirection","B74szlk","B3o57yi","De3pzq","E5pizo","usePromptStarterStyles_unstable","styles","Ijaq50","rootResetStyles","singleColumnStyles","state","Beweih1","Be2twd7","Bhrd7zp","mc9l5x","Bh9c35c","Biipf1f","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,uBAAAA;eAAAA;;;;;;iCANY;AAMlB,MAAMA,0BAA8D;UACzEC;mBACAC;UACAC;cACAC;YACAC;kBACAC;aACAC;AACF;AAEA,MAAMC,qBAAqBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACzCC,YAASC,IAAAA,yBAAA,EAAA;mBACTC;QACAC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;QACAC,SAAA;iBACO;iBACHC;gBACAC;gBACAC;iBACF;QACFC,QAAA;QACAC,SAAA;iBACO;iBACHJ;iBACAC;gBACAC;gBACF;QACFG,QAAA;QAEAC,SAAA;QACAC,SAAA;gBACI;gBACAC;YAAAA;YAAM;SAAA;gBACNC;iBACAC;iBACAC;gBACAC;gBACAC;gBACAC;iBACAC;iBACF;QACFC,SAAA;YAAA;YAAA;SAAA;QACFC,SAAA;QAEAC,QAAMC;YAAAA;YAAYC;SAAW;QAC3BnC,QAAAA;gBACEoC;YAAAA;YAAS;SAAA;gBACTC;gBACAR;YAAAA;YAAU;SAAA;gBACVrB;gBACAE;YAAAA;YAAAA;SAAqB;iBACrB4B;gBACAC;YAAAA;YAAc;SAAA;iBACdC;iBACAC;iBACAC;iBACAC;YAAAA;YAAQ;SAAA;gBACRC;iBACAC;YAAAA;YAAW;SAAA;iBACXC;iBACAC;YAAAA;YAAeC;SAAAA;iBACfrB;iBACGsB;YAAAA;YAAWC;SAAcC;iBACzBC;iBAA0BC;;iBAA+B;gBAAI;QAClEC,SAAA;QAEAC,SAAAA;gBACExC;iBACAC;iBACAC;QACFuC,SAAA;QAEAvD,SAAM;gBACJO;gBACAiD;gBACAC;gBACAtB;iBACAC;QACFsB,SAAA;QACAzD,SAAAA;iBACEkC;gBACAC;gBACAuB;iBAEAnB;gBACGoB;iBAEH;gBACArD;gBACA;iBACA;YAAA;YAAA;SAAsB;iBACtBsD;gBACAC;YAAAA;YAAW;SAAA;;0BAEJ;gBACP3B;iBACAC;iBACAR;gBACAJ;iBACS;iBACTK;iBACAb;QACF+C,SAAA;;UAEE;gBACAxB;iBAEAzB;QACFkD,QAAA;QACA9D,QAAQ;gBACNiC;gBACAC;iBAEGwB;iBAEH;iBACArD;;cAEA;gBACAsD;gBACAC;QACFlD,QAAA;QACAqD,SAAAA;iBACE;iBACA;QACFC,QAAA;QACA/D,QAAAA;iBACEgC;iBACAC;iBAEGwB;iBAEH;gBACArD;gBACA;iBACA;iBACAsD;iBACAC;;IAEJ1D,SAAA;QAEA+D,QAAMC;QACJrE,QAAAA;gBACEQ;iBACA8D;iBACA3C;iBACAY;gBACGa;gBAA0BC;;gBAA+C;iBAAI;QAClFkB,SAAA;YAAA;YAAA;SAAA;QACArE,QAAAA;iBACK2D;gBACHD;QACFY,SAAA;QACArE,SAAQ;iBACH0D;iBAEH;;yBAEF;QACFY,QAAA;QAEAC,QAAO;YAAMC;YAAAA;SAAAA;;YAGL;QAENP,QAAMQ;QACNC,QAAMC;QACNjE,QAAMkE;QACNC,SAAMjF;QACNiF,SAAMhF;QAMNiF,SAAID;iBACFA;QACFE,SAAA;QACAC,SAAIH;iBACFA;QAMFI,QAAA;QACAJ,QAAM7E;QAONkF,SAAIL;iBACFA;QAKFM,SAAA;;0BAEgBC;QAMhBF,SAAA;;IAGAjF,cAAA"}

package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js

@@ -99,18 +99,24 @@ const useStyles = (0, _reactcomponents.makeStyles)({
         gridColumn: '1 / 2'
     },
     category: {
-        display: 'flex',
-        alignItems: 'center',
-        ..._reactcomponents.typographyStyles.body1Strong,
         gridRow: 1,
-        gridColumn: '2 / 3'
+        gridColumn: '2 / 3',
+        alignSelf: 'center',
+        color: _tokens.tokens.colorNeutralForeground1,
+        ..._reactcomponents.typographyStyles.body1Strong,
+        // Truncate text after one line.
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': '1',
+        overflowY: 'hidden',
+        wordBreak: 'break-word'
     },
     actions: {
-        margin: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}
-             ${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalNone}`,
-        position: 'relative',
         gridRow: '1 / 2',
         gridColumn: '2 / 3',
+        position: 'relative',
+        margin: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}
+             ${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalNone}`,
         opacity: 1,
         transition: `opacity ${_tokens.tokens.durationFast} ${_tokens.tokens.curveLinear}`
     },
@@ -120,14 +126,15 @@ const useStyles = (0, _reactcomponents.makeStyles)({
         boxShadow: `-12px 0 12px 0 ${_tokens.tokens.colorNeutralBackground1}`
     },
     prompt: {
+        gridRow: '2',
+        gridColumn: '1 / 3',
         ..._reactcomponents.typographyStyles.body1Strong,
         // Truncate text after two lines.
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': '2',
         overflowY: 'hidden',
-        gridRow: '2',
-        gridColumn: '1 / 3'
+        wordBreak: 'break-word'
     },
     promptNoReasonMarker: {
         // Truncate text after three lines when no reason marker is present.
@@ -136,12 +143,20 @@ const useStyles = (0, _reactcomponents.makeStyles)({
     reasonMarker: {
         gridRow: '3',
         gridColumn: '1 / 3',
-        ..._reactcomponents.typographyStyles.caption2
+        ..._reactcomponents.typographyStyles.caption2,
+        // Truncate text after one line.
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': '1',
+        overflowY: 'hidden',
+        wordBreak: 'break-word'
     }
 });
 const useSingleColumnStyles = (0, _reactcomponents.makeStyles)({
     primaryAction: {
         display: 'flex',
+        flexDirection: 'column',
+        padding: `${_tokens.tokens.spacingVerticalM} ${_tokens.tokens.spacingHorizontalM}`,
         borderRadius: _tokens.tokens.borderRadius2XL,
         ...(0, _reactcomponents.createFocusOutlineStyle)({
             style: {
@@ -149,8 +164,14 @@ const useSingleColumnStyles = (0, _reactcomponents.makeStyles)({
             }
         })
     },
+    category: {
+        ..._reactcomponents.typographyStyles.caption1Strong,
+        alignSelf: 'auto'
+    },
     prompt: {
-        ..._reactcomponents.typographyStyles.caption1Strong
+        ..._reactcomponents.typographyStyles.caption1Strong,
+        // Always truncate after two lines in single column layout.
+        '-webkit-line-clamp': '2'
     }
 });
 const usePromptStarterStyles_unstable = (state)=>{
@@ -165,7 +186,7 @@ const usePromptStarterStyles_unstable = (state)=>{
         state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.icon.className);
     }
     if (state.category) {
-        state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, state.category.className);
+        state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, isSingleColumn && singleColumnStyles.category, state.category.className);
     }
     state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
     if (state.reasonMarker) {

package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map

@@ -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  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":["promptStarterClassNames","usePromptStarterStyles_unstable","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","tokens","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","makeStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","shorthands","border","strokeWidthThin","colorNeutralStroke2","createFocusOutlineStyle","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","typographyStyles","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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    gridRow: 1,\n    gridColumn: '2 / 3',\n    alignSelf: 'center',\n\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1Strong,\n\n    // Truncate text after one line.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '1',\n    overflowY: 'hidden',\n    wordBreak: 'break-word',\n  },\n  actions: {\n    gridRow: '1 / 2',\n    gridColumn: '2 / 3',\n    position: 'relative',\n    margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n             ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\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    gridRow: '2',\n    gridColumn: '1 / 3',\n\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    wordBreak: 'break-word',\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\n    ...typographyStyles.caption2,\n\n    // Truncate text after one line.\n    display: '-webkit-box',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '1',\n    overflowY: 'hidden',\n    wordBreak: 'break-word',\n  },\n});\n\nconst useSingleColumnStyles = makeStyles({\n  primaryAction: {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,\n    borderRadius: tokens.borderRadius2XL,\n    ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n  },\n  category: {\n    ...typographyStyles.caption1Strong,\n    alignSelf: 'auto',\n  },\n  prompt: {\n    ...typographyStyles.caption1Strong,\n\n    // Always truncate after two lines in single column layout.\n    '-webkit-line-clamp': '2',\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      isSingleColumn && singleColumnStyles.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":["promptStarterClassNames","usePromptStarterStyles_unstable","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","makeResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","tokens","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","makeStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","shorthands","border","strokeWidthThin","colorNeutralStroke2","createFocusOutlineStyle","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","alignSelf","colorNeutralForeground1","typographyStyles","body1Strong","overflowY","wordBreak","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","promptNoReasonMarker","caption2","useSingleColumnStyles","flexDirection","spacingVerticalM","spacingHorizontalM","borderRadius2XL","caption1Strong","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className","mergeClasses"],"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.10.7",
+  "version": "0.10.8",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",