npm - @fluentui/react-toolbar - Versions diffs - 9.7.7 → 9.8.1 - Mend

@fluentui/react-toolbar 9.7.7 → 9.8.1

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

Files changed (99) hide show

package/lib/components/ToolbarGroup/useToolbarGroup.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**

package/lib/components/ToolbarGroup/useToolbarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/*\n Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n /\nexport const useToolbarGroup_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n return useToolbarGroupBase_unstable(props, ref);\n};\n\n/\n Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n ref,\n role: 'presentation',\n ...props,\n }),\n { elementType: 'div' },\n ),\n vertical,\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAG/B,SAASC,~~wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAA+B,CAC1CF,OACAC;IAEA,MAAME,WAAWL,2BAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/*\n Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n /\nexport const useToolbarGroup_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n return useToolbarGroupBase_unstable(props, ref);\n};\n\n/\n Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n ref,\n role: 'presentation',\n ...props,\n }),\n { elementType: 'div' },\n ),\n vertical,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAKA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAA+B,CAC1CF,OACAC;IAEA,MAAME,WAAWL,2BAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js CHANGED Viewed

@@ -26,6 +26,7 @@ export const useToolbarGroupStyles_unstable = state => {
     vertical
   } = state;
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
   return state;
 };

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/*\n Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { vertical } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;~~EAC1BQ~~,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/*\n Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { vertical } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B;EACAQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js CHANGED Viewed

@@ -19,6 +19,7 @@ const useStyles = makeStyles({
     'use no memo';
     const { vertical } = state;
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/*\n Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n 'use no memo';\n\n const { vertical } = state;\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n toolbarGroupClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;~~IAEfO~~,MAAMR,IAAI,CAACU,SAAS,GAAGZ,aACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/*\n Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n 'use no memo';\n\n const { vertical } = state;\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarGroupClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGZ,aACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarRadioButton Props\n /\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle' \| 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/\n State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarRadioButtonProps, 'name' \| 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' \| 'size'>;\n"],"names":[],"mappings":"AAuBA,~~WAA2G~~"}
1	+ {"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarRadioButton Props\n /\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle' \| 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/\n State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarRadioButtonProps, 'name' \| 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' \| 'size' \| 'shape'>;\n"],"names":[],"mappings":"AAuBA,WAAqH"}

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js CHANGED Viewed

@@ -1,7 +1,6 @@
 'use client';
-import * as React from 'react';
 import { useEventCallback } from '@fluentui/react-utilities';
-import { useToggleButton_unstable } from '@fluentui/react-button';
+import { useToggleButtonBase_unstable } from '@fluentui/react-button';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
@@ -9,13 +8,14 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
  * @param props - User provided props to the RadioButton component.
  * @param ref - User provided ref to be passed to the RadioButton component.
  */ export const useToolbarRadioButton_unstable = (props, ref)=>{
-    const { appearance = 'secondary' } = props;
-    const size = useToolbarContext_unstable((ctx)=>ctx.size);
-    const state = useToolbarRadioButtonBase_unstable(props, ref);
+    const contextSize = useToolbarContext_unstable((ctx)=>ctx.size);
+    const { appearance = 'subtle', size = contextSize, ...baseProps } = props;
+    const state = useToolbarRadioButtonBase_unstable(baseProps, ref);
     return {
         ...state,
         appearance,
-        size: props.size || size
+        size,
+        shape: 'rounded'
     };
 };
 /**
@@ -32,7 +32,7 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
     const { onClick: onClickOriginal } = props;
-    const toggleButtonState = useToggleButton_unstable({
+    const toggleButtonState = useToggleButtonBase_unstable({
         checked,
         role: 'radio',
         'aria-checked': checked,
@@ -47,7 +47,9 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
         handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
         onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.root['aria-pressed'] = undefined;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.onClick = handleOnClick;
     return state;
 };

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ~~useToggleButton_unstable~~ } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/*\n Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n /\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const { appearance = '~~secondary~~' } = ~~props;\n const~~ ~~size~~ = ~~useToolbarContext_unstable(ctx => ctx.size)~~;\n const state = useToolbarRadioButtonBase_unstable(~~props~~, ref);\n\n return {\n ...state,\n\n appearance,\n size: ~~props.size \|\| size~~,\n };\n};\n\n/\n Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = ~~useToggleButton_unstable~~(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["~~React","~~useEventCallback","~~useToggleButton_unstable~~","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","~~appearance~~","size","~~ctx~~","state","useToolbarRadioButtonBase_unstable","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,~~wBAAwB~~,QAAQ,yBAAyB;~~AAClE~~,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EAAEC,aAAa,~~WAAW~~,~~EAAE~~,~~GAAGF;IACrC~~,~~MAAMG~~,~~OAAOL~~,~~2BAA2BM~~,~~CAAAA~~,~~MAAOA,IAAID,IAAI~~;~~IACvD~~,~~MAAME~~,QAAQC,~~mCAAmCN~~,~~OAAOC~~;~~IAExD~~,OAAO;QACL,~~GAAGI~~,KAAK;~~QAERH~~;~~QACAC~~,~~MAAMH,MAAMG,IAAI,IAAIA~~;~~IACtB~~;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,~~MAAMG~~,qCAAqC,~~CAChDN~~,OACAC;IAEA,~~MAAMM~~,~~cAAcT~~,~~2BAA2BM~~,CAAAA,MAAOA,~~IAAIG~~,WAAW;IACrE,MAAMC,~~UAAUV~~,~~2BAA2BM~~,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,~~IAAIK~~,aAAa,~~CAACT~~,~~MAAMU~~,IAAI,CAAC,~~cAA7BN~~,oDAAAA,8BAA+BO,QAAQ,~~CAACX~~,~~MAAMY~~,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,~~GAAGd~~;IACrC,~~MAAMe~~,~~oBAAoBlB~~,~~yBACxB~~;~~QAAEW~~;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,~~GAAGR~~,KAAK;IAAC,GAC5DC;IAEF,~~MAAMI~~,QAAqC;QACzC,~~GAAGU~~,iBAAiB;QACpBL,~~MAAMV~~,~~MAAMU~~,IAAI;QAChBE,~~OAAOZ~~,~~MAAMY~~,KAAK;IACpB;IAEA,MAAMK,~~gBAAgBrB~~,iBACpB,~~CAACsB~~;QACCX,wBAAAA,kCAAAA,YAAcW,~~GAAGb~~,~~MAAMK~~,IAAI,~~EAAEL~~,~~MAAMO~~,KAAK,~~EAAEP~~,~~MAAMG~~,OAAO;QACvDM,4BAAAA,sCAAAA,gBAAkBI;IACpB;~~IAEFb~~,~~MAAMc~~,IAAI,CAAC,eAAe,GAAGC;~~IAC7Bf~~,~~MAAMc~~,IAAI,CAACN,OAAO,GAAGI;IAErB,~~OAAOZ~~;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/*\n Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n /\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/\n Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n // eslint-disable-next-line react-hooks/immutability\n state.root['aria-pressed'] = undefined;\n // eslint-disable-next-line react-hooks/immutability\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,4BAA4B,QAAQ,yBAAyB;AACtE,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,qCAAqC,CAChDR,OACAC;IAEA,MAAMS,cAAcZ,2BAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,UAAUb,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIS,aAAa,CAACZ,MAAMa,IAAI,CAAC,cAA7BV,oDAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,oBAAoBrB,6BACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,gBAAgBxB,iBACpB,CAACyB;QACCX,wBAAAA,kCAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,4BAAAA,sCAAAA,gBAAkBI;IACpB;IAEF,oDAAoD;IACpDd,MAAMe,IAAI,CAAC,eAAe,GAAGC;IAC7B,oDAAoD;IACpDhB,MAAMe,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOb;AACT,EAAE"}

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js CHANGED Viewed

@@ -21,8 +21,10 @@ export const useToolbarRadioButtonStyles_unstable = state => {
   'use no memo';
   const toggleButtonStyles = useBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
   }
   useToggleButtonStyles_unstable(state);

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state / selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/\n Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;~~EAC1CO~~,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;~~IACZL~~,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state / selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/\n Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1C;EACAO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZ;IACAL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js CHANGED Viewed

@@ -16,8 +16,10 @@ const useBaseStyles = makeStyles({
  */ export const useToolbarRadioButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     useToggleButtonStyles_unstable(state);

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state /\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/\n Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD;IAEA,MAAMC,qBAAqBV;~~IAE3BS~~,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;~~QACdL~~,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state /\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/\n Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD;IAEA,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarToggleButton Props\n /\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle' \| 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/\n State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' \| 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;\n"],"names":[],"mappings":"AAuBA,~~WAAoG~~"}
1	+ {"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarToggleButton Props\n /\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle' \| 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/\n State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' \| 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' \| 'size' \| 'shape'>;\n"],"names":[],"mappings":"AAuBA,WAAuH"}

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
-import * as React from 'react';
-import { useToggleButton_unstable } from '@fluentui/react-button';
+import { useToggleButtonBase_unstable } from '@fluentui/react-button';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -8,11 +7,14 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */ export const useToolbarToggleButton_unstable = (props, ref)=>{
-    const { appearance = 'subtle', ...baseProps } = props;
+    const contextSize = useToolbarContext_unstable((ctx)=>ctx.size);
+    const { appearance = 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
     const state = useToolbarToggleButtonBase_unstable(baseProps, ref);
     return {
+        ...state,
         appearance,
-        ...state
+        size,
+        shape: 'rounded'
     };
 };
 /**
@@ -29,7 +31,7 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
     const { onClick: onClickOriginal } = props;
-    const toggleButtonState = useToggleButton_unstable({
+    const toggleButtonState = useToggleButtonBase_unstable({
         checked,
         ...props
     }, ref);

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ~~useToggleButton_unstable~~ } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarToggleButtonProps,\n ToolbarToggleButtonState,\n ToolbarToggleButtonBaseProps,\n ToolbarToggleButtonBaseState,\n} from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n /\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const { appearance = 'subtle', ...baseProps } = props;\n const state = useToolbarToggleButtonBase_unstable(baseProps, ref);\n return {\n appearance,\n ~~...state~~,\n };\n};\n\n/\n Base hook that builds Toolbar ToggleButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButtonBase_unstable = (\n props: ToolbarToggleButtonBaseProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonBaseState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = ~~useToggleButton_unstable~~({ checked, ...props }, ref);\n const state: ToolbarToggleButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled \|\| state.disabledFocusable) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["~~React~~","~~useToggleButton_unstable","~~useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","appearance","baseProps","state","useToolbarToggleButtonBase_unstable","~~handleToggleButton~~","~~ctx~~","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","handleOnClick","e","disabled","disabledFocusable","preventDefault","stopPropagation","root"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW~~,QAAQ~~;AAC/B~~,~~SAASC,wBAAwB,QAAQ,~~yBAAyB;~~AAClE~~,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,~~GAAGC~~,WAAW,~~GAAGH~~;~~IAChD~~,~~MAAMI~~,QAAQC,oCAAoCF,~~WAAWF~~;~~IAC7D~~,OAAO;~~QACLC;QACA~~,~~GAAGE~~,KAAK;~~IACV~~;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,~~MAAMC~~,sCAAsC,~~CACjDL~~,OACAC;IAEA,~~MAAMK~~,~~qBAAqBR~~,~~2BAA2BS~~,CAAAA,MAAOA,~~IAAID~~,kBAAkB;IACnF,~~MAAME~~,~~UAAUV~~,~~2BAA2BS~~,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,~~IAAIE~~,aAAa,~~CAACT~~,~~MAAMU~~,IAAI,CAAC,~~cAA7BH~~,oDAAAA,8BAA+BI,QAAQ,~~CAACX~~,~~MAAMY~~,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,~~GAAGd~~;IACrC,~~MAAMe~~,~~oBAAoBlB~~,~~yBAAyB~~;~~QAAEW~~;QAAS,~~GAAGR~~,KAAK;IAAC,GAAGC;~~IAC1E~~,~~MAAMG~~,QAAsC;QAC1C,GAAGW,iBAAiB;QACpBL,~~MAAMV~~,~~MAAMU~~,IAAI;QAChBE,~~OAAOZ~~,~~MAAMY~~,KAAK;IACpB;IAEA,MAAMI,gBAAgB,CACpBC;QAEA,IAAIb,MAAMc,QAAQ,IAAId,MAAMe,iBAAiB,EAAE;YAC7CF,EAAEG,cAAc;YAChBH,EAAEI,eAAe;YACjB;QACF;~~QAEAf~~,+BAAAA,yCAAAA,~~mBAAqBW~~,GAAGb,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QAC9DM,4BAAAA,sCAAAA,gBAAkBG;IACpB;IAEAb,MAAMkB,IAAI,CAACT,OAAO,GAAGG;IACrB,OAAOZ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarToggleButtonProps,\n ToolbarToggleButtonState,\n ToolbarToggleButtonBaseProps,\n ToolbarToggleButtonBaseState,\n} from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n /\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize ?? 'medium', ...baseProps } = props;\n const state = useToolbarToggleButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/\n Base hook that builds Toolbar ToggleButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n \n @internal\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButtonBase_unstable = (\n props: ToolbarToggleButtonBaseProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonBaseState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable({ checked, ...props }, ref);\n const state: ToolbarToggleButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled \|\| state.disabledFocusable) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarToggleButtonBase_unstable","shape","handleToggleButton","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","handleOnClick","e","disabled","disabledFocusable","preventDefault","stopPropagation","root"],"mappings":"AAAA;AAGA,SAASA,4BAA4B,QAAQ,yBAAyB;AACtE,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGI,WAAW,GAAGN;IAChF,MAAMO,QAAQC,oCAAoCF,WAAWL;IAE7D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,sCAAsC,CACjDR,OACAC;IAEA,MAAMS,qBAAqBZ,2BAA2BK,CAAAA,MAAOA,IAAIO,kBAAkB;IACnF,MAAMC,UAAUb,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIS,aAAa,CAACZ,MAAMa,IAAI,CAAC,cAA7BV,oDAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,oBAAoBrB,6BAA6B;QAAEc;QAAS,GAAGX,KAAK;IAAC,GAAGC;IAC9E,MAAMM,QAAsC;QAC1C,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMI,gBAAgB,CACpBC;QAEA,IAAIb,MAAMc,QAAQ,IAAId,MAAMe,iBAAiB,EAAE;YAC7CF,EAAEG,cAAc;YAChBH,EAAEI,eAAe;YACjB;QACF;QAEAd,+BAAAA,yCAAAA,mBAAqBU,GAAGb,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QAC9DM,4BAAAA,sCAAAA,gBAAkBG;IACpB;IAEAb,MAAMkB,IAAI,CAACT,OAAO,GAAGG;IACrB,OAAOZ;AACT,EAAE"}

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js CHANGED Viewed

@@ -21,8 +21,10 @@ export const useToolbarToggleButtonStyles_unstable = state => {
   'use no memo';
   const toggleButtonStyles = useBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
   }
   useToggleButtonStyles_unstable(state);

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state / selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/\n Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC9D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;~~EAC1CO~~,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;~~IACZL~~,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state / selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/\n Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC9D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1C;EACAO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZ;IACAL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js CHANGED Viewed

@@ -16,8 +16,10 @@ const useBaseStyles = makeStyles({
  */ export const useToolbarToggleButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     useToggleButtonStyles_unstable(state);

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state /\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/\n Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,qBAAqBV;~~IAE3BS~~,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;~~QACdL~~,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state /\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/\n Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}

package/lib/index.js CHANGED Viewed

@@ -1,18 +1,7 @@
-export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable, useToolbarContextValues_unstable, useToolbarContext_unstable } from './Toolbar';
-export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable } from './ToolbarButton';
-export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './ToolbarDivider';
-export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable } from './ToolbarToggleButton';
-export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable } from './ToolbarRadioButton';
+export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable, useToolbarContextValues_unstable, useToolbarContext_unstable, useToolbarBase_unstable } from './Toolbar';
+export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable, useToolbarButtonBase_unstable } from './ToolbarButton';
+export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './ToolbarDivider';
+export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './ToolbarToggleButton';
+export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './ToolbarRadioButton';
 export { ToolbarGroup, useToolbarGroupStyles_unstable, useToolbarGroup_unstable, renderToolbarGroup_unstable, toolbarGroupClassNames } from './ToolbarGroup';
 export { ToolbarRadioGroup } from './ToolbarRadioGroup';
- // Experimental APIs
- // export type { ToolbarBaseState, ToolbarBaseProps } from './Toolbar';
- // export { useToolbarBase_unstable } from './Toolbar';
- // export type { ToolbarButtonBaseState, ToolbarButtonBaseProps } from './ToolbarButton';
- // export { useToolbarButtonBase_unstable } from './ToolbarButton';
- // export type { ToolbarDividerBaseState, ToolbarDividerBaseProps } from './ToolbarDivider';
- // export { useToolbarDividerBase_unstable } from './ToolbarDivider';
- // export type { ToolbarRadioButtonBaseState, ToolbarRadioButtonBaseProps } from './ToolbarRadioButton';
- // export { useToolbarRadioButtonBase_unstable } from './ToolbarRadioButton';
- // export type { ToolbarToggleButtonBaseState, ToolbarToggleButtonBaseProps } from './ToolbarToggleButton';
- // export { useToolbarToggleButtonBase_unstable } from './ToolbarToggleButton';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n useToolbarContextValues_unstable,\n useToolbarContext_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport {\n ToolbarToggleButton,\n useToolbarToggleButtonStyles_unstable,\n useToolbarToggleButton_unstable,\n} from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport {\n ToolbarRadioButton,\n useToolbarRadioButtonStyles_unstable,\n useToolbarRadioButton_unstable,\n} from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\nexport {\n ToolbarGroup,\n useToolbarGroupStyles_unstable,\n useToolbarGroup_unstable,\n renderToolbarGroup_unstable,\n toolbarGroupClassNames,\n} from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\nexport { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';\n\n// Experimental APIs\n// export type { ToolbarBaseState, ToolbarBaseProps } from './Toolbar';\n// export { useToolbarBase_unstable } from './Toolbar';\n// export type { ToolbarButtonBaseState, ToolbarButtonBaseProps } from './ToolbarButton';\n// export { useToolbarButtonBase_unstable } from './ToolbarButton';\n// export type { ToolbarDividerBaseState, ToolbarDividerBaseProps } from './ToolbarDivider';\n// export { useToolbarDividerBase_unstable } from './ToolbarDivider';\n// export type { ToolbarRadioButtonBaseState, ToolbarRadioButtonBaseProps } from './ToolbarRadioButton';\n// export { useToolbarRadioButtonBase_unstable } from './ToolbarRadioButton';\n// export type { ToolbarToggleButtonBaseState, ToolbarToggleButtonBaseProps } from './ToolbarToggleButton';\n// export { useToolbarToggleButtonBase_unstable } from './ToolbarToggleButton';\n"],"names":["Toolbar","renderToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable","useToolbar_unstable","useToolbarContextValues_unstable","useToolbarContext_unstable","ToolbarButton","useToolbarButtonStyles_unstable","useToolbarButton_unstable","ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","ToolbarToggleButton","useToolbarToggleButtonStyles_unstable","useToolbarToggleButton_unstable","ToolbarRadioButton","useToolbarRadioButtonStyles_unstable","useToolbarRadioButton_unstable","ToolbarGroup","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","renderToolbarGroup_unstable","toolbarGroupClassNames","ToolbarRadioGroup"],"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,gCAAgC,EAChCC,0BAA0B,~~QACrB~~,YAAY;~~AAEnB~~,~~SAASC~~,aAAa,~~EAAEC~~,+BAA+B,~~EAAEC~~,yBAAyB,~~QAAQ~~,kBAAkB;~~AAE5G~~,~~SAASC~~,cAAc,~~EAAEC~~,gCAAgC,~~EAAEC~~,0BAA0B,~~QAAQ~~,mBAAmB;~~AAEhH~~,SACEC,mBAAmB,EACnBC,qCAAqC,EACrCC,+BAA+B,~~QAC1B~~,wBAAwB;~~AAE~~/B,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,~~QACzB~~,uBAAuB;~~AAE9B~~,SACEC,YAAY,EACZC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,EAC3BC,sBAAsB,QACjB,iBAAiB;AAExB,SAASC,iBAAiB,QAAQ,sBAAsB~~;CAGxD,oBAAoB;CACpB,uEAAuE;CACvE,uDAAuD;CACvD,yFAAyF;CACzF,mEAAmE;CACnE,4FAA4F;CAC5F,qEAAqE;CACrE,wGAAwG;CACxG,6EAA6E;CAC7E,2GAA2G;CAC3G,+EAA+E~~"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n useToolbarContextValues_unstable,\n useToolbarContext_unstable,\n useToolbarBase_unstable,\n} from './Toolbar';\nexport type {\n ToolbarContextValue,\n ToolbarContextValues,\n ToolbarProps,\n ToolbarSlots,\n ToolbarState,\n ToolbarBaseState,\n ToolbarBaseProps,\n} from './Toolbar';\nexport {\n ToolbarButton,\n useToolbarButtonStyles_unstable,\n useToolbarButton_unstable,\n useToolbarButtonBase_unstable,\n} from './ToolbarButton';\nexport type {\n ToolbarButtonProps,\n ToolbarButtonState,\n ToolbarButtonBaseState,\n ToolbarButtonBaseProps,\n} from './ToolbarButton';\nexport {\n ToolbarDivider,\n useToolbarDividerStyles_unstable,\n useToolbarDivider_unstable,\n useToolbarDividerBase_unstable,\n} from './ToolbarDivider';\nexport type {\n ToolbarDividerProps,\n ToolbarDividerState,\n ToolbarDividerBaseState,\n ToolbarDividerBaseProps,\n} from './ToolbarDivider';\nexport {\n ToolbarToggleButton,\n useToolbarToggleButtonStyles_unstable,\n useToolbarToggleButton_unstable,\n useToolbarToggleButtonBase_unstable,\n} from './ToolbarToggleButton';\nexport type {\n ToolbarToggleButtonProps,\n ToolbarToggleButtonState,\n ToolbarToggleButtonBaseState,\n ToolbarToggleButtonBaseProps,\n} from './ToolbarToggleButton';\nexport {\n ToolbarRadioButton,\n useToolbarRadioButtonStyles_unstable,\n useToolbarRadioButton_unstable,\n useToolbarRadioButtonBase_unstable,\n} from './ToolbarRadioButton';\nexport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseState,\n ToolbarRadioButtonBaseProps,\n} from './ToolbarRadioButton';\nexport {\n ToolbarGroup,\n useToolbarGroupStyles_unstable,\n useToolbarGroup_unstable,\n renderToolbarGroup_unstable,\n toolbarGroupClassNames,\n} from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\nexport { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';\n"],"names":["Toolbar","renderToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable","useToolbar_unstable","useToolbarContextValues_unstable","useToolbarContext_unstable","useToolbarBase_unstable","ToolbarButton","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useToolbarButtonBase_unstable","ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","useToolbarDividerBase_unstable","ToolbarToggleButton","useToolbarToggleButtonStyles_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonBase_unstable","ToolbarRadioButton","useToolbarRadioButtonStyles_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonBase_unstable","ToolbarGroup","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","renderToolbarGroup_unstable","toolbarGroupClassNames","ToolbarRadioGroup"],"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,uBAAuB,QAClB,YAAY;AAUnB,SACEC,aAAa,EACbC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,kBAAkB;AAOzB,SACEC,cAAc,EACdC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,mBAAmB;AAO1B,SACEC,mBAAmB,EACnBC,qCAAqC,EACrCC,+BAA+B,EAC/BC,mCAAmC,QAC9B,wBAAwB;AAO/B,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,kCAAkC,QAC7B,uBAAuB;AAO9B,SACEC,YAAY,EACZC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,EAC3BC,sBAAsB,QACjB,iBAAiB;AAExB,SAASC,iBAAiB,QAAQ,sBAAsB"}

package/lib-commonjs/components/Toolbar/Toolbar.types.js CHANGED Viewed

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/Toolbar/Toolbar.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/Toolbar.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked /\n checkedItems: string[];\n /* The name of the value /\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent \| React.KeyboardEvent;\n\n/\n Toolbar Props\n /\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /\n Toolbar can have small or medium size\n \n @default medium\n /\n size?: 'small' \| 'medium' \| 'large';\n\n /\n Toolbar can be vertical styled\n * @default false\n /\n vertical?: boolean;\n\n /\n Map of all checked values\n /\n checkedValues?: Record<string, string[]>;\n\n /\n Default values to be checked on mount\n /\n defaultCheckedValues?: Record<string, string[]>;\n\n /\n Callback when checked items change for value with a name\n \n @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n /\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\nexport type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;\n\n/\n State used in rendering Toolbar\n /\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' \| 'checkedValues' \| 'vertical'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' \| 'onCheckedValueChange'> & {\n /\n * Toggles the state of a ToggleButton item\n /\n handleToggleButton: ToggableHandler;\n /\n * Toggles the state of a ToggleButton item\n */\n handleRadio: ToggableHandler;\n };\n\nexport type ToolbarBaseState = Omit<ToolbarState, 'size'>;\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' \| 'vertical' \| 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarBaseState, 'checkedValues' \| 'handleToggleButton' \| 'handleRadio'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent \| React.KeyboardEvent,\n name: string,\n value: string,\n checked?: boolean,\n) => void;\n"],"names":[~~"React"~~],"mappings":"~~;;;;;iEAAuB,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/Toolbar/Toolbar.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked /\n checkedItems: string[];\n /* The name of the value /\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent \| React.KeyboardEvent;\n\n/\n Toolbar Props\n /\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /\n Toolbar can have small or medium size\n \n @default medium\n /\n size?: 'small' \| 'medium' \| 'large';\n\n /\n Toolbar can be vertical styled\n * @default false\n /\n vertical?: boolean;\n\n /\n Map of all checked values\n /\n checkedValues?: Record<string, string[]>;\n\n /\n Default values to be checked on mount\n /\n defaultCheckedValues?: Record<string, string[]>;\n\n /\n Callback when checked items change for value with a name\n \n @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n /\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\nexport type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;\n\n/\n State used in rendering Toolbar\n /\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' \| 'checkedValues' \| 'vertical'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' \| 'onCheckedValueChange'> & {\n /\n * Toggles the state of a ToggleButton item\n /\n handleToggleButton: ToggableHandler;\n /\n * Toggles the state of a ToggleButton item\n */\n handleRadio: ToggableHandler;\n };\n\nexport type ToolbarBaseState = Omit<ToolbarState, 'size'>;\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' \| 'vertical' \| 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarBaseState, 'checkedValues' \| 'handleToggleButton' \| 'handleRadio'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent \| React.KeyboardEvent,\n name: string,\n value: string,\n checked?: boolean,\n) => void;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Toolbar/ToolbarContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["'use client';\n\nimport { ~~ContextSelector,~~ createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue \| undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;8BAUAQ;;;;~~sCAdsD~~,mCAAmC;~~AAI/F~~,MAAMR,qBAAiBF,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue \| undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;8BAUAQ;;;;sCAdqC,mCAAmC;AAI9E,MAAMR,qBAAiBF,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}

package/lib-commonjs/components/Toolbar/renderToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ~~ToolbarState~~, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/\n Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ~~ToolbarState~~, contextValues: ToolbarContextValues): JSXElement => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGzB,mBAAmB;AAK3C,+BAA+B,CAACC,~~OAAqBC~~;~~QAC1DJ~~,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
1	+ {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarBaseState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/\n Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarBaseState, contextValues: ToolbarContextValues): JSXElement => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGzB,mBAAmB;AAK3C,+BAA+B,CAACC,OAAyBC;QAC9DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

package/lib-commonjs/components/Toolbar/useToolbar.js CHANGED Viewed

@@ -20,8 +20,6 @@ _export(exports, {
         return useToolbar_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttabster = require("@fluentui/react-tabster");
 const useToolbar_unstable = (props, ref)=>{

package/lib-commonjs/components/Toolbar/useToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n ToggableHandler,\n ToolbarBaseProps,\n ToolbarBaseState,\n ToolbarProps,\n ToolbarState,\n UninitializedToolbarState,\n} from './Toolbar.types';\nimport { TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render Toolbar.\n \n The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n \n @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n /\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium' } = props;\n const state = useToolbarBase_unstable(props, ref);\n const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();\n\n return {\n size,\n ...state,\n root: {\n ...state.root,\n ...arrowNavigationProps,\n },\n };\n};\n\n/\n Base hook that builds Toolbar state for behavior and structure only.\n * It does not add arrow key navigation, which is handled by `useToolbar_unstable`.\n \n @internal\n * @param props - Props for this Toolbar instance.\n * @param ref - Ref to the root HTMLElement.\n /\nexport const useToolbarBase_unstable = (props: ToolbarBaseProps, ref: React.Ref<HTMLElement>): ToolbarBaseState => {\n const { vertical = false } = props;\n\n const initialState: UninitializedToolbarState = {\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'toolbar',\n ref: ref as React.Ref<HTMLDivElement>,\n ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent \| React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] \|\| [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent \| React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/\n Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n /\nconst useToolbarSelectableState = (\n state: Pick<ToolbarBaseProps, 'checkedValues' \| 'defaultCheckedValues' \| 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarBaseState['onCheckedValueChange'] = useEventCallback(\n (e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n },\n );\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\n/\n Hook to add arrow navigation props to the Toolbar.\n \n @internal\n * @returns - Tabster DOM attributes for arrow navigation\n */\nexport const useToolbarArrowNavigationProps_unstable = (): TabsterDOMAttribute => {\n return useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n};\n"],"names":["~~React","~~useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","state","useToolbarBase_unstable","arrowNavigationProps","useToolbarArrowNavigationProps_unstable","root","vertical","initialState","components","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s","circular","axis"],"mappings":"AAAA;;;;;;;;;;;;~~2CA+Iaa~~;;;IAjGAF,uBAAAA;;;uBAvBAL~~;;;;;iEArBU~~,~~QAAQ;gCACwD,~~4BAA4B;~~8BAStD~~,0BAA0B;~~AAWhF~~,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGF;IAC5B,MAAMG,QAAQC,wBAAwBJ,OAAOC;IAC7C,MAAMI,uBAAuBC;IAE7B,OAAO;QACLJ;QACA,GAAGC,KAAK;QACRI,MAAM;YACJ,GAAGJ,MAAMI,IAAI;YACb,GAAGF,oBAAoB;QACzB;IACF;AACF,EAAE;AAUK,gCAAgC,CAACL,OAAyBC;IAC/D,MAAM,EAAEO,WAAW,KAAK,EAAE,GAAGR;IAE7B,MAAMS,eAA0C;QAC9CD;QACA,sCAAsC;QACtCE,YAAY;YACV,iDAAiD;YACjDH,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMV,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BgB,MAAM;YACNX,KAAKA;YACL,GAAIO,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGR,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAed,MAAMc,aAAa;QAClCG,sBAAsBjB,MAAMiB,oBAAoB;QAChDF,sBAAsBf,MAAMe,oBAAoB;IAClD;IAEA,MAAMG,yBAAsCxB,gCAAAA,EAC1C,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe,CAACM,~~KAAAA~~,~~AAAK~~,~~KAAI~~,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,kBAA+BlC,gCAAAA,EACnC,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGZ,YAAY;QACfS;QACAU;QACAd,eAAeA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCb;IAEA,MAAM,CAACW,eAAee,iBAAiB,OAAGlC,oCAAAA,EAAqB;QAC7DQ,OAAOA,MAAMW,aAAa;QAC1BgB,cAAc3B,MAAMc,oBAAoB;QACxCR,cAAc,CAAC;IACjB;IACA,MAAM,EAAEM,sBAAsBgB,4BAA4B,EAAE,GAAG5B;IAC/D,MAAMY,2BAAiErB,gCAAAA,EACrE,CAACyB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QACxB,IAAIQ,8BAA8B;YAChCA,6BAA6BZ,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAM,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACZ,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAGF,OAAO;QAACT;QAAeC;KAAqB;AAC9C;AAQO,MAAMT,0CAA0C;IACrD,WAAOR,qCAAAA,EAAwB;QAC7BmC,UAAU;QACVC,MAAM;IACR;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n ToggableHandler,\n ToolbarBaseProps,\n ToolbarBaseState,\n ToolbarProps,\n ToolbarState,\n UninitializedToolbarState,\n} from './Toolbar.types';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render Toolbar.\n \n The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n \n @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n /\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium' } = props;\n const state = useToolbarBase_unstable(props, ref);\n const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();\n\n return {\n size,\n ...state,\n root: {\n ...state.root,\n ...arrowNavigationProps,\n },\n };\n};\n\n/\n Base hook that builds Toolbar state for behavior and structure only.\n * It does not add arrow key navigation, which is handled by `useToolbar_unstable`.\n \n @internal\n * @param props - Props for this Toolbar instance.\n * @param ref - Ref to the root HTMLElement.\n /\nexport const useToolbarBase_unstable = (props: ToolbarBaseProps, ref: React.Ref<HTMLElement>): ToolbarBaseState => {\n const { vertical = false } = props;\n\n const initialState: UninitializedToolbarState = {\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'toolbar',\n ref: ref as React.Ref<HTMLDivElement>,\n ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent \| React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] \|\| [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent \| React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/\n Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n /\nconst useToolbarSelectableState = (\n state: Pick<ToolbarBaseProps, 'checkedValues' \| 'defaultCheckedValues' \| 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarBaseState['onCheckedValueChange'] = useEventCallback(\n (e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n },\n );\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\n/\n Hook to add arrow navigation props to the Toolbar.\n \n @internal\n * @returns - Tabster DOM attributes for arrow navigation\n */\nexport const useToolbarArrowNavigationProps_unstable = (): TabsterDOMAttribute => {\n return useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n};\n"],"names":["useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","state","useToolbarBase_unstable","arrowNavigationProps","useToolbarArrowNavigationProps_unstable","root","vertical","initialState","components","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s","circular","axis"],"mappings":"AAAA;;;;;;;;;;;;2CAgJaY;;;IAjGAF,uBAAAA;;;uBAvBAL;;;;gCArB0E,4BAA4B;8BAU3E,0BAA0B;AAW3D,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGF;IAC5B,MAAMG,QAAQC,wBAAwBJ,OAAOC;IAC7C,MAAMI,uBAAuBC;IAE7B,OAAO;QACLJ;QACA,GAAGC,KAAK;QACRI,MAAM;YACJ,GAAGJ,MAAMI,IAAI;YACb,GAAGF,oBAAoB;QACzB;IACF;AACF,EAAE;AAUK,gCAAgC,CAACL,OAAyBC;IAC/D,MAAM,EAAEO,WAAW,KAAK,EAAE,GAAGR;IAE7B,MAAMS,eAA0C;QAC9CD;QACA,sCAAsC;QACtCE,YAAY;YACV,iDAAiD;YACjDH,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMV,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BgB,MAAM;YACNX,KAAKA;YACL,GAAIO,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGR,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAed,MAAMc,aAAa;QAClCG,sBAAsBjB,MAAMiB,oBAAoB;QAChDF,sBAAsBf,MAAMe,oBAAoB;IAClD;IAEA,MAAMG,yBAAsCxB,gCAAAA,EAC1C,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe,CAACM,KAAK,AAALA,KAAS,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,kBAA+BlC,gCAAAA,EACnC,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGZ,YAAY;QACfS;QACAU;QACAd,eAAeA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCb;IAEA,MAAM,CAACW,eAAee,iBAAiB,OAAGlC,oCAAAA,EAAqB;QAC7DQ,OAAOA,MAAMW,aAAa;QAC1BgB,cAAc3B,MAAMc,oBAAoB;QACxCR,cAAc,CAAC;IACjB;IACA,MAAM,EAAEM,sBAAsBgB,4BAA4B,EAAE,GAAG5B;IAC/D,MAAMY,2BAAiErB,gCAAAA,EACrE,CAACyB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QACxB,IAAIQ,8BAA8B;YAChCA,6BAA6BZ,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAM,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACZ,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAGF,OAAO;QAACT;QAAeC;KAAqB;AAC9C;AAQO,MAAMT,0CAA0C;IACrD,WAAOR,qCAAAA,EAAwB;QAC7BmC,UAAU;QACVC,MAAM;IACR;AACF,EAAE"}

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -8,16 +9,23 @@ Object.defineProperty(exports, "useToolbarContextValues_unstable", {
         return useToolbarContextValues_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useToolbarContextValues_unstable(state) {
     const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const toolbar = {
+    const toolbar = _react.useMemo(()=>({
+            size,
+            vertical,
+            handleToggleButton,
+            handleRadio,
+            checkedValues
+        }), [
         size,
         vertical,
         handleToggleButton,
         handleRadio,
         checkedValues
-    };
+    ]);
     return {
         toolbar
     };

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["~~import~~ type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n ~~// This context is created with~~ \~~"@fluentui/react-context-selector\", these is no sense to memoize it\~~n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"mappings":"~~;;;;+BAEgBA;;;;;;AAAT~~,~~0CAA0CC~~,KAAmB;IAClE,MAAM,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGL;~~IAC3E~~,~~mGAAmG~~;~~IACnG~~,~~MAAMM~~,~~UAA+B~~;~~QACnCL~~;~~QACAE~~;~~QACAD~~;~~QACAG~~;~~QACAD~~;~~IACF~~;~~IAEA~~,OAAO;QAAEE;IAAQ;AACnB"}
1	+ {"version":3,"sources":["../src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n\n const toolbar = React.useMemo<ToolbarContextValue>(\n () => ({\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n }),\n [size, vertical, handleToggleButton, handleRadio, checkedValues],\n );\n\n return { toolbar };\n}\n"],"names":["React","useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,iCAAiCC,KAAmB;IAClE,MAAM,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGL;IAE3E,MAAMM,UAAUR,OAAMS,OAAO,CAC3B,IAAO,CAAA;YACLN;YACAE;YACAD;YACAG;YACAD;SACF,CAAA,EACA;QAACH;QAAME;QAAUD;QAAoBG;QAAaD;KAAc;IAGlE,OAAO;QAAEE;IAAQ;AACnB"}

package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js CHANGED Viewed

@@ -94,6 +94,7 @@ const useToolbarStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { vertical, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
     return state;
 };

package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/\n Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { vertical, size } = state;\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,~~kCAAmCE~~,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;~~IAChCA~~,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/\n Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChC,oDAAA;IACAA,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js CHANGED Viewed

@@ -47,6 +47,7 @@ const useToolbarStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { vertical, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
     return state;
 };

package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/\n Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n 'use no memo';\n\n const styles = useStyles();\n const { vertical, size } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;~~IAC3BA~~,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/\n Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n 'use no memo';\n\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3B,oDAAoD;IACpDA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}