npm - @fluentui-copilot/react-prompt-starter - Versions diffs - 0.10.5 → 0.10.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,73 @@
   "name": "@fluentui-copilot/react-prompt-starter",
   "entries": [
     {
-      "date": "Wed, 27 Aug 2025 23:19:12 GMT",
+      "date": "Tue, 14 Oct 2025 00:02:53 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.10.7",
+      "version": "0.10.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "ced6fa3a284cc90eae5ca16357e15b349f720ca0",
+            "comment": "fix: migrate to React 19 compatible JSX and Ref types."
+          },
+          {
+            "author": "twatanabe@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "068a3c71be5da80beeab05640fe768ef631b0c00",
+            "comment": "chore: bump @fluentui/react-components peer dep minbar to ^9.70.0."
+          },
+          {
+            "author": "estebanmu@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "0916bdc6c719a111ee9fd0a827e9705daa874df8",
+            "comment": "feat: Add animateOnMount prop to PromptStarterList to allow disabling onMount animation."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "74cfcbd7c8afdc8fe3f4b512a9a421613fa32841",
+            "comment": "chore: update react peer deps to support React 19."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "9a3bf49a3c6302529b2c9b6bc3fc63f549aaf88f",
+            "comment": "chore: enforce explicit return types."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "7c7739c88f639719f043afbe8d2b1d0b75b2b92e",
+            "comment": "feat: Add category slot to PromptStarterV2, add actions slot to PromptStarterList"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 29 Sep 2025 20:26:50 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.10.6",
+      "version": "0.10.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "eb866bbd84d778637cb17f869920ae47a3eeec50",
+            "comment": "fix: type issues after React 18 upgrade."
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "633f78c5587d6752c9b1b9aae9cf6a99776911b7",
+            "comment": "fix: some semantic fixes for PromptStarter v2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 27 Aug 2025 23:20:53 GMT",
       "tag": "@fluentui-copilot/react-prompt-starter_v0.10.5",
       "version": "0.10.5",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,36 @@
 # Change Log - @fluentui-copilot/react-prompt-starter
-This log was last generated on Wed, 27 Aug 2025 23:19:12 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Oct 2025 00:02:53 GMT and should not be manually modified.
 <!-- Start content -->
+## [0.10.7](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.7)
+Tue, 14 Oct 2025 00:02:53 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.6..@fluentui-copilot/react-prompt-starter_v0.10.7)
+### Patches
+- fix: migrate to React 19 compatible JSX and Ref types. ([PR #3355](https://github.com/microsoft/fluentai/pull/3355) by tristan.watanabe@gmail.com)
+- chore: bump @fluentui/react-components peer dep minbar to ^9.70.0. ([PR #3344](https://github.com/microsoft/fluentai/pull/3344) by twatanabe@microsoft.com)
+- feat: Add animateOnMount prop to PromptStarterList to allow disabling onMount animation. ([PR #3365](https://github.com/microsoft/fluentai/pull/3365) by estebanmu@microsoft.com)
+- chore: update react peer deps to support React 19. ([PR #3361](https://github.com/microsoft/fluentai/pull/3361) by tristan.watanabe@gmail.com)
+- chore: enforce explicit return types. ([PR #3360](https://github.com/microsoft/fluentai/pull/3360) by tristan.watanabe@gmail.com)
+- feat: Add category slot to PromptStarterV2, add actions slot to PromptStarterList ([PR #3382](https://github.com/microsoft/fluentai/pull/3382) by jiangemma@microsoft.com)
+## [0.10.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.6)
+Mon, 29 Sep 2025 20:26:50 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.5..@fluentui-copilot/react-prompt-starter_v0.10.6)
+### Patches
+- fix: type issues after React 18 upgrade. ([PR #3341](https://github.com/microsoft/fluentai/pull/3341) by tristan.watanabe@gmail.com)
+- fix: some semantic fixes for PromptStarter v2 ([PR #3358](https://github.com/microsoft/fluentai/pull/3358) by sarah.higley@microsoft.com)
 ## [0.10.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.5)
-Wed, 27 Aug 2025 23:19:12 GMT
+Wed, 27 Aug 2025 23:20:53 GMT
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.4..@fluentui-copilot/react-prompt-starter_v0.10.5)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { DesignVersion } from '@fluentui-copilot/react-provider';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
@@ -42,11 +43,18 @@ export declare type PromptStarterListProps = ComponentProps<Partial<PromptStarte
      * default: {  axis: 'horizontal', memorizeCurrent: true }
      */
     arrowNavigationOptions?: UseArrowNavigationGroupOptions;
+    /**
+     * Whether to animate the entrance of its items when it first mounts.
+     *
+     * @default true
+     */
+    animateOnMount?: boolean;
 };
 export declare type PromptStarterListSlots = {
     root: NonNullable<Slot<'div'>>;
     gridWrapper: NonNullable<Slot<'div'>>;
+    actions?: Slot<'span'>;
     expandButton?: Slot<typeof Button>;
 };
@@ -89,6 +97,7 @@ export declare type PromptStarterV2Slots = {
     root: NonNullable<Slot<'div'>>;
     primaryAction: NonNullable<Slot<'button'>>;
     icon?: Slot<'span'>;
+    category?: Slot<'span'>;
     prompt: NonNullable<Slot<'span'>>;
     reasonMarker?: Slot<'span'>;
     actions?: Slot<'span'>;
@@ -101,14 +110,14 @@ export declare type PromptStarterV2State = ComponentState<PromptStarterV2Slots>
     isSingleColumn?: boolean;
 };
-export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSX.Element;
+export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSXElement;
 /**
  * Render the final JSX of PromptStarterList
  */
-export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSX.Element;
+export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSXElement;
-export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSX.Element;
+export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSXElement;
 /**
  * Create the state required to render PromptStarter.

package/lib/components/PromptStarter/renderPromptStarter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.icon />\n <state.category>\n {state.category.children} {state.badge && <state.badge />}\n </state.category>\n {state.prompt && <state.prompt />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;~~AAGzD~~,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,IAAI;0BACX,MAACF,MAAMG,QAAQ;;oBACZH,MAAMG,QAAQ,CAACC,QAAQ;oBAAC;oBAAEJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;YAEvDL,MAAMM,MAAM,kBAAI,KAACN,MAAMM,MAAM;;;AAGpC,EAAE"}
1	+ {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.icon />\n <state.category>\n {state.category.children} {state.badge && <state.badge />}\n </state.category>\n {state.prompt && <state.prompt />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","icon","category","children","badge","prompt"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,IAAI;0BACX,MAACF,MAAMG,QAAQ;;oBACZH,MAAMG,QAAQ,CAACC,QAAQ;oBAAC;oBAAEJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;YAEvDL,MAAMM,MAAM,kBAAI,KAACN,MAAMM,MAAM;;;AAGpC,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n prompt: NonNullable<Slot<'span'>>;\n reasonMarker?: Slot<'span'>;\n actions?: Slot<'span'>;\n};\n\n/*\n PromptStarter Props\n /\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/\n State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"~~AAgBA~~;;CAEC,GACD,WAEE"}
1	+ {"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n category?: Slot<'span'>;\n prompt: NonNullable<Slot<'span'>>;\n reasonMarker?: Slot<'span'>;\n actions?: Slot<'span'>;\n};\n\n/*\n PromptStarter Props\n /\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/\n State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAiBA;;CAEC,GACD,WAEE"}

package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js CHANGED Viewed

@@ -7,6 +7,7 @@ export const renderPromptStarter_unstable = (state)=>{
             /*#__PURE__*/ _jsxs(state.primaryAction, {
                 children: [
                     state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+                    state.category && /*#__PURE__*/ _jsx(state.category, {}),
                     /*#__PURE__*/ _jsx(state.prompt, {}),
                     state.reasonMarker && /*#__PURE__*/ _jsx(state.reasonMarker, {})
                 ]

package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.primaryAction>\n {state.icon && <state.icon />}\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","primaryAction","icon","prompt","reasonMarker","actions"],"rangeMappings":"~~;;;;;;;;;;;;;;;;~~","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;~~AAGzD~~,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;~~kCAC1B~~,~~KAACH~~,MAAMI,~~MAAM~~;~~oBACZJ~~,MAAMK,YAAY,kBAAI,~~KAACL~~,~~MAAMK~~,YAAY;;;~~YAE3CL~~,~~MAAMM~~,OAAO,kBAAI,~~KAACN~~,~~MAAMM~~,OAAO;;;AAGtC,EAAE"}
1	+ {"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState): JSXElement => {\n assertSlots<PromptStarterSlots>(state);\n\n return (\n <state.root>\n <state.primaryAction>\n {state.icon && <state.icon />}\n {state.category && <state.category />}\n <state.prompt />\n {state.reasonMarker && <state.reasonMarker />}\n </state.primaryAction>\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","primaryAction","icon","category","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;oBACzBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;kCAClC,KAACJ,MAAMK,MAAM;oBACZL,MAAMM,YAAY,kBAAI,KAACN,MAAMM,YAAY;;;YAE3CN,MAAMO,OAAO,kBAAI,KAACP,MAAMO,OAAO;;;AAGtC,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js CHANGED Viewed

@@ -12,6 +12,8 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
     const id = useId('prompt-starter');
     const focusAttrs = useFocusableGroup();
     const numberOfColumns = usePromptStarterListContext((ctx)=>ctx.numberOfColumns);
+    // if this is defined, the context exists and the Prompt is within PromptStarterList
+    const isWithinList = typeof numberOfColumns === 'number';
     const isSingleColumn = numberOfColumns === 1;
     const state = {
         isSingleColumn,
@@ -19,20 +21,24 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
             root: 'div',
             primaryAction: 'button',
             icon: 'span',
+            category: 'span',
             prompt: 'span',
             reasonMarker: 'span',
             actions: 'span'
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref,
-            'aria-labelledby': `${id}-prompt`,
-            'aria-describedby': `${id}-icon, ${id}-reasonMarker`,
+            role: isWithinList ? 'listitem' : undefined,
             ...focusAttrs,
             ...props
         }), {
             elementType: 'div'
         }),
         primaryAction: slot.always(props.primaryAction, {
+            defaultProps: {
+                'aria-labelledby': `${id}-category ${id}-prompt`,
+                'aria-describedby': `${id}-icon ${id}-reasonMarker`
+            },
             elementType: 'button'
         }),
         icon: !isSingleColumn ? slot.optional(props.icon, {
@@ -41,6 +47,12 @@ import { usePromptStarterListContext } from '../../../contexts/PromptStarterList
             },
             elementType: 'span'
         }) : undefined,
+        category: !isSingleColumn ? slot.optional(props.category, {
+            defaultProps: {
+                id: `${id}-category`
+            },
+            elementType: 'span'
+        }) : undefined,
         prompt: slot.always(props.prompt, {
             defaultProps: {
                 id: `${id}-prompt`

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/*\n Create the state required to render PromptStarter.\n \n The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n \n @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n const isSingleColumn = numberOfColumns === 1;\n\n const state: PromptStarterState = {\n isSingleColumn,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n 'aria-labelledby': `${id}-prompt`,\n 'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n ~~...focusAttrs,\n ...props,\n~~ }),\n { elementType: '~~div~~' },\n ),\n ~~primaryAction~~: slot.~~always~~(props.~~primaryAction~~, {\n elementType: '~~button~~',\n }),\n ~~icon~~: !isSingleColumn\n ? slot.optional(props.~~icon~~, {\n defaultProps: { id: `${id}-~~icon~~` },\n elementType: 'span',\n })\n : undefined,\n prompt: slot.always(props.prompt, {\n defaultProps: { id: `${id}-prompt` },\n elementType: 'span',\n }),\n reasonMarker: !isSingleColumn\n ? slot.optional(props.reasonMarker, {\n defaultProps: { id: `${id}-reasonMarker` },\n elementType: 'span',\n })\n : undefined,\n actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n };\n\n return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","isSingleColumn","state","components","root","primaryAction","icon","prompt","reasonMarker","actions","always","~~elementType~~","~~optional~~","defaultProps","~~undefined~~"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,KAAK,QAAQ,6BAA6B;AACtG,SAASC,2BAA2B,QAAQ,6CAA6C;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKL,MAAM;IACjB,MAAMM,aAAaP;IAEnB,MAAMQ,kBAAkBN,4BAA4BO,CAAAA,MAAOA,IAAID,eAAe;~~IAE9E~~,MAAME,~~iBAAiBF~~,oBAAoB;~~IAE3C~~,MAAMG,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;~~QACAL~~,~~MAAMd~~,~~KAAKoB~~,MAAM,~~CACfrB~~,yBAAyB,OAAO;YAC9BO;~~YACA~~,mBAAmB,CAAC,~~EAAEC~~,GAAG,OAAO,CAAC;~~YACjC~~,oBAAoB,CAAC,EAAEA,GAAG,~~OAAO~~,EAAEA,GAAG,aAAa,CAAC;~~YACpD~~,~~GAAGC,UAAU~~;~~YACb~~,~~GAAGH~~,~~KAAK;QACV~~,~~IACA~~;~~YAAEgB~~,~~aAAa~~;~~QAAM;QAEvBN~~,~~eAAef~~,~~KAAKoB~~,~~MAAM~~,~~CAACf~~,~~MAAMU~~,~~aAAa,EAAE~~;~~YAC9CM~~,aAAa;QACf;~~QACAL~~,~~MAAM~~,~~CAACL~~,~~iBACHX~~,~~KAAKsB~~,QAAQ,~~CAACjB~~,~~MAAMW~~,~~IAAI~~,EAAE;~~YACxBO~~,cAAc;~~gBAAEhB~~,IAAI,CAAC,EAAEA,GAAG,~~KAAK~~,CAAC;YAAC;~~YACjCc~~,aAAa;QACf,~~KACAG~~;~~QACJP~~,~~QAAQjB~~,~~KAAKoB~~,MAAM,~~CAACf~~,~~MAAMY~~,MAAM,EAAE;~~YAChCM~~,cAAc;~~gBAAEhB~~,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;~~YACnCc~~,aAAa;QACf;~~QACAH~~,cAAc,~~CAACP~~,~~iBACXX~~,~~KAAKsB~~,QAAQ,~~CAACjB~~,~~MAAMa~~,YAAY,EAAE;~~YAChCK~~,cAAc;~~gBAAEhB~~,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;~~YACzCc~~,aAAa;QACf,~~KACAG~~;~~QACJL~~,SAAS,~~CAACR~~,~~iBAAiBX~~,~~KAAKsB~~,QAAQ,~~CAACjB~~,~~MAAMc~~,OAAO,EAAE;~~YAAEE~~,aAAa;QAAO,~~KAAKG~~;IACrF;IAEA,~~OAAOZ~~;AACT,EAAE"}
1	+ {"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/*\n Create the state required to render PromptStarter.\n \n The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n \n @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n props: PromptStarterProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n const id = useId('prompt-starter');\n const focusAttrs = useFocusableGroup();\n\n const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n // if this is defined, the context exists and the Prompt is within PromptStarterList\n const isWithinList = typeof numberOfColumns === 'number';\n\n const isSingleColumn = numberOfColumns === 1;\n\n const state: PromptStarterState = {\n isSingleColumn,\n components: {\n root: 'div',\n primaryAction: 'button',\n icon: 'span',\n category: 'span',\n prompt: 'span',\n reasonMarker: 'span',\n actions: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: isWithinList ? 'listitem' : undefined,\n ...focusAttrs,\n ...props,\n }),\n { elementType: 'div' },\n ),\n primaryAction: slot.always(props.primaryAction, {\n defaultProps: {\n 'aria-labelledby': `${id}-category ${id}-prompt`,\n 'aria-describedby': `${id}-icon ${id}-reasonMarker`,\n },\n elementType: 'button',\n }),\n icon: !isSingleColumn\n ? slot.optional(props.icon, {\n defaultProps: { id: `${id}-icon` },\n elementType: 'span',\n })\n : undefined,\n category: !isSingleColumn\n ? slot.optional(props.category, {\n defaultProps: { id: `${id}-category` },\n elementType: 'span',\n })\n : undefined,\n prompt: slot.always(props.prompt, {\n defaultProps: { id: `${id}-prompt` },\n elementType: 'span',\n }),\n reasonMarker: !isSingleColumn\n ? slot.optional(props.reasonMarker, {\n defaultProps: { id: `${id}-reasonMarker` },\n elementType: 'span',\n })\n : undefined,\n actions: !isSingleColumn ? slot.optional(props.actions, { elementType: 'span' }) : undefined,\n };\n\n return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","isWithinList","isSingleColumn","state","components","root","primaryAction","icon","category","prompt","reasonMarker","actions","always","role","undefined","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,KAAK,QAAQ,6BAA6B;AACtG,SAASC,2BAA2B,QAAQ,6CAA6C;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKL,MAAM;IACjB,MAAMM,aAAaP;IAEnB,MAAMQ,kBAAkBN,4BAA4BO,CAAAA,MAAOA,IAAID,eAAe;IAC9E,oFAAoF;IACpF,MAAME,eAAe,OAAOF,oBAAoB;IAEhD,MAAMG,iBAAiBH,oBAAoB;IAE3C,MAAMI,QAA4B;QAChCD;QACAE,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,UAAU;YACVC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAN,MAAMf,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9BO;YACAiB,MAAMZ,eAAe,aAAaa;YAClC,GAAGhB,UAAU;YACb,GAAGH,KAAK;QACV,IACA;YAAEoB,aAAa;QAAM;QAEvBT,eAAehB,KAAKsB,MAAM,CAACjB,MAAMW,aAAa,EAAE;YAC9CU,cAAc;gBACZ,mBAAmB,CAAC,EAAEnB,GAAG,UAAU,EAAEA,GAAG,OAAO,CAAC;gBAChD,oBAAoB,CAAC,EAAEA,GAAG,MAAM,EAAEA,GAAG,aAAa,CAAC;YACrD;YACAkB,aAAa;QACf;QACAR,MAAM,CAACL,iBACHZ,KAAK2B,QAAQ,CAACtB,MAAMY,IAAI,EAAE;YACxBS,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCkB,aAAa;QACf,KACAD;QACJN,UAAU,CAACN,iBACPZ,KAAK2B,QAAQ,CAACtB,MAAMa,QAAQ,EAAE;YAC5BQ,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,SAAS,CAAC;YAAC;YACrCkB,aAAa;QACf,KACAD;QACJL,QAAQnB,KAAKsB,MAAM,CAACjB,MAAMc,MAAM,EAAE;YAChCO,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCkB,aAAa;QACf;QACAL,cAAc,CAACR,iBACXZ,KAAK2B,QAAQ,CAACtB,MAAMe,YAAY,EAAE;YAChCM,cAAc;gBAAEnB,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCkB,aAAa;QACf,KACAD;QACJH,SAAS,CAACT,iBAAiBZ,KAAK2B,QAAQ,CAACtB,MAAMgB,OAAO,EAAE;YAAEI,aAAa;QAAO,KAAKD;IACrF;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js CHANGED Viewed

@@ -4,6 +4,7 @@ export const promptStarterClassNames = {
   root: 'fai-PromptStarter',
   primaryAction: 'fai-PromptStarter__primaryAction',
   icon: 'fai-PromptStarter__icon',
+  category: 'fai-PromptStarter__category',
   prompt: 'fai-PromptStarter__prompt',
   reasonMarker: 'fai-PromptStarter__reasonMarker',
   actions: 'fai-PromptStarter__actions'
@@ -17,9 +18,10 @@ const useStyles = __styles({
     Bw0ie65: 0,
     Br312pm: 0,
     Beweih1: "f1eb8yyf",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
     qhf8xq: "f10pi13n",
+    mc9l5x: "f13qh94s",
+    Budl1dq: "fwggfk1",
+    v29qe6: "f1wv14k0",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -31,7 +33,8 @@ const useStyles = __styles({
     Bceei9c: "f1k6fduh",
     oeaueh: "f1s6fcnf",
     fsow6f: ["f1o700av", "fes3tcz"],
-    Belr9w4: "fylz90v",
+    i8kkvl: "f6ave1s",
+    Belr9w4: "f1wn3y0l",
     Byoj8tv: 0,
     uwmqm3: 0,
     z189sj: 0,
@@ -103,7 +106,27 @@ const useStyles = __styles({
   icon: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    sshi5w: "fntfeoj"
+    sshi5w: "fntfeoj",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f12k0sjh"
+  },
+  category: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fm1owph",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz"
   },
   actions: {
     jrapky: 0,
@@ -126,6 +149,10 @@ const useStyles = __styles({
     Bkqvd7p: 0,
     Bi2q7bf: "f1964ud6"
   },
+  actionsWithCategory: {
+    De3pzq: "fxugw4r",
+    E5pizo: ["f1u7pq1e", "f1pdyzui"]
+  },
   prompt: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -134,9 +161,24 @@ const useStyles = __styles({
     mc9l5x: "f1rvi9lw",
     Fd1uvx: "fpfc2by",
     Bh9c35c: "f1lvsx7g",
-    Bmxbyg5: "f1sil6mw"
+    Bmxbyg5: "f1sil6mw",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f1daok31",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf"
+  },
+  promptNoReasonMarker: {
+    Bh9c35c: "f197wrh9"
   },
   reasonMarker: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f17e42vn",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "figsok6",
@@ -147,9 +189,9 @@ const useStyles = __styles({
     p: -1
   }], [".f1eb8yyf{grid-column:1/3;}", {
     p: -1
-  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f10pi13n{position:relative;}", [".f14w4nd{border-radius:28px;}", {
+  }], ".f10pi13n{position:relative;}", ".f13qh94s{display:grid;}", ".fwggfk1{grid-template-columns:max-content 1fr;}", ".f1wv14k0{grid-auto-rows:max-content 1fr max-content;}", [".f14w4nd{border-radius:28px;}", {
     p: -1
-  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f6ave1s{column-gap:var(--spacingHorizontalMNudge);}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
     p: -1
   }], ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
@@ -157,7 +199,15 @@ const useStyles = __styles({
     p: -1
   }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f15ncuxf{transform:scale(1.03);}", [".ffrhwuo{transition:transform var(--durationNormal) var(--curveDecelerateMin);}", {
     p: -1
-  }], ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+  }], ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f12k0sjh{grid-column:1/2;}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm1owph{grid-row:1;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
+    p: -1
+  }], [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
     p: -1
   }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
     p: -1
@@ -167,7 +217,15 @@ const useStyles = __styles({
     p: -1
   }], ".f5p0z4x{opacity:1;}", [".f1964ud6{transition:opacity var(--durationFast) var(--curveLinear);}", {
     p: -1
-  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
+  }], ".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;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f197wrh9{-webkit-line-clamp:3;}", [".f17e42vn{grid-row:3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
@@ -180,6 +238,7 @@ const useStyles = __styles({
 });
 const useSingleColumnStyles = __styles({
   primaryAction: {
+    mc9l5x: "f22iagw",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -233,7 +292,7 @@ const useSingleColumnStyles = __styles({
     Bg96gwp: "fwrc4pm"
   }
 }, {
-  d: [[".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
+  d: [".f22iagw{display:flex;}", [".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
     p: -1
   }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
     p: -2
@@ -264,12 +323,15 @@ export const usePromptStarterStyles_unstable = state => {
   if (state.icon) {
     state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
   }
-  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+  if (state.category) {
+    state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className);
+  }
+  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
   if (state.reasonMarker) {
     state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
   }
   if (state.actions) {
-    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);
+    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.category && styles.actionsWithCategory, state.actions.className);
   }
   return state;
 };

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n primaryAction: 'fai-PromptStarter__primaryAction',\n icon: 'fai-PromptStarter__icon',\n prompt: 'fai-PromptStarter__prompt',\n reasonMarker: 'fai-PromptStarter__reasonMarker',\n actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr auto',\n gridTemplateRows: 'max-content auto',\n minWidth: '214px',\n\n // Apply styles to the primary action on hover / active states\n '&:hover': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n '&:active': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow8,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n\n // Hide actions when not focused or hovered\n ':not(:focus-within):not(:hover)': {\n [`& .${promptStarterClassNames.actions}`]: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n opacity: 0,\n },\n },\n});\n\nconst useStyles = makeStyles({\n primaryAction: {\n gridRow: '1 / 3',\n gridColumn: '1 / 3',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius: '28px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground2,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n rowGap: tokens.spacingHorizontalS,\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n },\n\n primaryActionHovered: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n minHeight: tokens.spacingVerticalXXL,\n },\n actions: {\n margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n position: 'relative',\n gridRow: '1 / 2',\n gridColumn: '2 / 3',\n\n opacity: 1,\n transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n },\n prompt: {\n ...typographyStyles.body1Strong,\n\n // Truncate text after two lines.\n display: '-webkit-box',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n overflowY: 'hidden',\n },\n reasonMarker: {\n ...typographyStyles.caption2,\n },\n});\n\nconst useSingleColumnStyles = makeStyles({\n primaryAction: {\n borderRadius: tokens.borderRadius2XL,\n ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n },\n prompt: {\n ...typographyStyles.caption1Strong,\n },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { isSingleColumn } = state;\n\n const styles = useStyles();\n const rootResetStyles = useRootResetStyles();\n const singleColumnStyles = useSingleColumnStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n isSingleColumn && singleColumnStyles.primaryAction,\n state.primaryAction.className,\n );\n if (state.icon) {\n state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n }\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n isSingleColumn && singleColumnStyles.prompt,\n state.prompt.className,\n );\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","body1Strong","overflowY","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n primaryAction: 'fai-PromptStarter__primaryAction',\n icon: 'fai-PromptStarter__icon',\n category: 'fai-PromptStarter__category',\n prompt: 'fai-PromptStarter__prompt',\n reasonMarker: 'fai-PromptStarter__reasonMarker',\n actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr auto',\n gridTemplateRows: 'max-content auto',\n minWidth: '214px',\n\n // Apply styles to the primary action on hover / active states\n '&:hover': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n '&:active': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow8,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n\n // Hide actions when not focused or hovered\n ':not(:focus-within):not(:hover)': {\n [`& .${promptStarterClassNames.actions}`]: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n opacity: 0,\n },\n },\n});\n\nconst useStyles = makeStyles({\n primaryAction: {\n gridRow: '1 / 3',\n gridColumn: '1 / 3',\n position: 'relative',\n display: 'grid',\n gridTemplateColumns: 'max-content 1fr',\n gridAutoRows: 'max-content 1fr max-content',\n borderRadius: '28px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground2,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n columnGap: tokens.spacingHorizontalMNudge,\n rowGap: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n },\n\n primaryActionHovered: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n minHeight: tokens.spacingVerticalXXL,\n gridRow: 1,\n gridColumn: '1 / 2',\n },\n category: {\n display: 'flex',\n alignItems: 'center',\n ...typographyStyles.body1Strong,\n\n gridRow: 1,\n gridColumn: '2 / 3',\n },\n actions: {\n margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n position: 'relative',\n gridRow: '1 / 2',\n gridColumn: '2 / 3',\n\n opacity: 1,\n transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n },\n actionsWithCategory: {\n // Add a background and gradient fade to truncate the title if applicable\n backgroundColor: tokens.colorNeutralBackground1,\n\n boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`,\n },\n prompt: {\n ...typographyStyles.body1Strong,\n\n // Truncate text after two lines.\n display: '-webkit-box',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n overflowY: 'hidden',\n gridRow: '2',\n gridColumn: '1 / 3',\n },\n promptNoReasonMarker: {\n // Truncate text after three lines when no reason marker is present.\n '-webkit-line-clamp': '3',\n },\n reasonMarker: {\n gridRow: '3',\n gridColumn: '1 / 3',\n ...typographyStyles.caption2,\n },\n});\n\nconst useSingleColumnStyles = makeStyles({\n primaryAction: {\n display: 'flex',\n borderRadius: tokens.borderRadius2XL,\n ...createFocusOutlineStyle({ style: { outlineRadius: tokens.borderRadius2XL } }),\n },\n prompt: {\n ...typographyStyles.caption1Strong,\n },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { isSingleColumn } = state;\n\n const styles = useStyles();\n const rootResetStyles = useRootResetStyles();\n const singleColumnStyles = useSingleColumnStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n isSingleColumn && singleColumnStyles.primaryAction,\n state.primaryAction.className,\n );\n if (state.icon) {\n state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.category) {\n state.category.className = mergeClasses(\n promptStarterClassNames.category,\n styles.category,\n state.category.className,\n );\n }\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n !state.reasonMarker && styles.promptNoReasonMarker,\n isSingleColumn && singleColumnStyles.prompt,\n state.prompt.className,\n );\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n promptStarterClassNames.actions,\n styles.actions,\n state.category && styles.actionsWithCategory,\n state.actions.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","category","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","gridAutoRows","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","columnGap","spacingHorizontalMNudge","rowGap","spacingVerticalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","body1Strong","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","actionsWithCategory","overflowY","promptNoReasonMarker","caption2","useSingleColumnStyles","borderRadius2XL","caption1Strong","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","singleColumnStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js CHANGED Viewed

@@ -4,6 +4,7 @@ export const promptStarterClassNames = {
     root: 'fai-PromptStarter',
     primaryAction: 'fai-PromptStarter__primaryAction',
     icon: 'fai-PromptStarter__icon',
+    category: 'fai-PromptStarter__category',
     prompt: 'fai-PromptStarter__prompt',
     reasonMarker: 'fai-PromptStarter__reasonMarker',
     actions: 'fai-PromptStarter__actions'
@@ -46,9 +47,10 @@ const useStyles = makeStyles({
     primaryAction: {
         gridRow: '1 / 3',
         gridColumn: '1 / 3',
-        display: 'flex',
-        flexDirection: 'column',
         position: 'relative',
+        display: 'grid',
+        gridTemplateColumns: 'max-content 1fr',
+        gridAutoRows: 'max-content 1fr max-content',
         borderRadius: '28px',
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground2,
@@ -56,7 +58,8 @@ const useStyles = makeStyles({
         cursor: 'pointer',
         outlineStyle: 'none',
         textAlign: 'left',
-        rowGap: tokens.spacingHorizontalS,
+        columnGap: tokens.spacingHorizontalMNudge,
+        rowGap: tokens.spacingVerticalS,
         padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,
         ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
         ...createFocusOutlineStyle({
@@ -73,7 +76,16 @@ const useStyles = makeStyles({
     icon: {
         display: 'flex',
         alignItems: 'center',
-        minHeight: tokens.spacingVerticalXXL
+        minHeight: tokens.spacingVerticalXXL,
+        gridRow: 1,
+        gridColumn: '1 / 2'
+    },
+    category: {
+        display: 'flex',
+        alignItems: 'center',
+        ...typographyStyles.body1Strong,
+        gridRow: 1,
+        gridColumn: '2 / 3'
     },
     actions: {
         margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}
@@ -84,20 +96,34 @@ const useStyles = makeStyles({
         opacity: 1,
         transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`
     },
+    actionsWithCategory: {
+        // Add a background and gradient fade to truncate the title if applicable
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: `-12px 0 12px 0 ${tokens.colorNeutralBackground1}`
+    },
     prompt: {
         ...typographyStyles.body1Strong,
         // Truncate text after two lines.
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': '2',
-        overflowY: 'hidden'
+        overflowY: 'hidden',
+        gridRow: '2',
+        gridColumn: '1 / 3'
+    },
+    promptNoReasonMarker: {
+        // Truncate text after three lines when no reason marker is present.
+        '-webkit-line-clamp': '3'
     },
     reasonMarker: {
+        gridRow: '3',
+        gridColumn: '1 / 3',
         ...typographyStyles.caption2
     }
 });
 const useSingleColumnStyles = makeStyles({
     primaryAction: {
+        display: 'flex',
         borderRadius: tokens.borderRadius2XL,
         ...createFocusOutlineStyle({
             style: {
@@ -120,12 +146,15 @@ export const usePromptStarterStyles_unstable = (state)=>{
     if (state.icon) {
         state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.icon.className);
     }
-    state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
+    if (state.category) {
+        state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className);
+    }
+    state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, !state.reasonMarker && styles.promptNoReasonMarker, isSingleColumn && singleColumnStyles.prompt, state.prompt.className);
     if (state.reasonMarker) {
         state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, state.reasonMarker.className);
     }
     if (state.actions) {
-        state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.actions.className);
+        state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, state.category && styles.actionsWithCategory, state.actions.className);
     }
     return state;
 };