npm - @fluentui/react-button - Versions diffs - 9.6.11 → 9.7.0 - Mend

@fluentui/react-button 9.6.11 → 9.7.0

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 (78) hide show

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n 'use no memo';\n\n const { appearance, disabled, disabledFocusable, shape, size, icon, iconOnly } = state;\n const expanded = !!state.root['aria-expanded'];\n\n state.root.className = [\n menuButtonClassNames.root,\n\n // Appearance\n appearance && `${menuButtonClassNames.root}--${appearance}`,\n\n // Size\n size && `${menuButtonClassNames.root}--${size}`,\n\n // Shape\n shape && `${menuButtonClassNames.root}--${shape}`,\n\n // Disabled styles\n disabled && `${menuButtonClassNames.root}--disabled`,\n disabledFocusable && `${menuButtonClassNames.root}--disabledFocusable`,\n\n // Expanded\n expanded && `${menuButtonClassNames.root}--expanded`,\n\n // Icons\n icon && iconOnly && `${menuButtonClassNames.root}--iconOnly`,\n\n // User provided class name\n state.root.className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (state.icon) {\n state.icon.className = [menuButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = [menuButtonClassNames.menuIcon, state.menuIcon.className].filter(Boolean).join(' ');\n }\n\n return state;\n};\n"],"names":["menuButtonClassNames","root","icon","menuIcon","useMenuButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","iconOnly","expanded","className","filter","Boolean","join"],"mappings":"AAAA;;;;;;;;;;;;IAKaA,oBAAAA;;;gCASAI;;;;AATN,6BAA8D;IACnEH,MAAM;IACNC,MAAM;IACNC,UAAU;AACZ,EAAE;AAKK,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAER,IAAI,EAAES,QAAQ,EAAE,GAAGN;IACjF,MAAMO,WAAW,CAAC,CAACP,MAAMJ,IAAI,CAAC,gBAAgB;IAE9CI,MAAMJ,IAAI,CAACY,SAAS,GAAG;QACrBb,qBAAqBC,IAAI;QAEzB,aAAa;QACbK,cAAc,GAAGN,qBAAqBC,IAAI,CAAC,EAAE,EAAEK,YAAY;QAE3D,OAAO;QACPI,QAAQ,GAAGV,qBAAqBC,IAAI,CAAC,EAAE,EAAES,MAAM;QAE/C,QAAQ;QACRD,SAAS,GAAGT,qBAAqBC,IAAI,CAAC,EAAE,EAAEQ,OAAO;QAEjD,kBAAkB;QAClBF,YAAY,GAAGP,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QACpDO,qBAAqB,GAAGR,qBAAqBC,IAAI,CAAC,mBAAmB,CAAC;QAEtE,WAAW;QACXW,YAAY,GAAGZ,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAEpD,QAAQ;QACRC,QAAQS,YAAY,GAAGX,qBAAqBC,IAAI,CAAC,UAAU,CAAC;QAE5D,2BAA2B;QAC3BI,MAAMJ,IAAI,CAACY,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMH,IAAI,EAAE;QACdG,MAAMH,IAAI,CAACW,SAAS,GAAG;YAACb,qBAAqBE,IAAI;YAAEG,MAAMH,IAAI,CAACW,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAChG;IAEA,IAAIX,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACU,SAAS,GAAG;YAACb,qBAAqBG,QAAQ;YAAEE,MAAMF,QAAQ,CAACU,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAC5G;IAEA,OAAOX;AACT,EAAE"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js ADDED Viewed

@@ -0,0 +1,55 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    splitButtonClassNames: function() {
+        return splitButtonClassNames;
+    },
+    useSplitButtonStyles_unstable: function() {
+        return useSplitButtonStyles_unstable;
+    }
+});
+const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size } = state;
+    state.root.className = [
+        splitButtonClassNames.root,
+        // Appearance
+        appearance && `${splitButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${splitButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${splitButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${splitButtonClassNames.root}--disabled`,
+        disabledFocusable && !disabled && `${splitButtonClassNames.root}--disabledFocusable`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = [
+            splitButtonClassNames.primaryActionButton,
+            state.primaryActionButton.className
+        ].filter(Boolean).join(' ');
+    }
+    if (state.menuButton) {
+        state.menuButton.className = [
+            splitButtonClassNames.menuButton,
+            state.menuButton.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const { appearance, disabled, disabledFocusable, shape, size } = state;\n\n state.root.className = [\n splitButtonClassNames.root,\n\n // Appearance\n appearance && `${splitButtonClassNames.root}--${appearance}`,\n\n // Size\n size && `${splitButtonClassNames.root}--${size}`,\n\n // Shape\n shape && `${splitButtonClassNames.root}--${shape}`,\n\n // Disabled styles\n disabled && `${splitButtonClassNames.root}--disabled`,\n disabledFocusable && !disabled && `${splitButtonClassNames.root}--disabledFocusable`,\n\n // User provided class name\n state.root.className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = [\n splitButtonClassNames.primaryActionButton,\n state.primaryActionButton.className,\n ]\n .filter(Boolean)\n .join(' ');\n }\n\n if (state.menuButton) {\n state.menuButton.className = [splitButtonClassNames.menuButton, state.menuButton.className]\n .filter(Boolean)\n .join(' ');\n }\n\n return state;\n};\n"],"names":["splitButtonClassNames","root","menuButton","primaryActionButton","useSplitButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","className","filter","Boolean","join"],"mappings":"AAAA;;;;;;;;;;;;IAKaA,qBAAAA;;;iCASAI;;;;AATN,8BAAgE;IACrEH,MAAM;IACNC,YAAY;IACZC,qBAAqB;AACvB,EAAE;AAKK,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGL;IAEjEA,MAAMJ,IAAI,CAACU,SAAS,GAAG;QACrBX,sBAAsBC,IAAI;QAE1B,aAAa;QACbK,cAAc,GAAGN,sBAAsBC,IAAI,CAAC,EAAE,EAAEK,YAAY;QAE5D,OAAO;QACPI,QAAQ,GAAGV,sBAAsBC,IAAI,CAAC,EAAE,EAAES,MAAM;QAEhD,QAAQ;QACRD,SAAS,GAAGT,sBAAsBC,IAAI,CAAC,EAAE,EAAEQ,OAAO;QAElD,kBAAkB;QAClBF,YAAY,GAAGP,sBAAsBC,IAAI,CAAC,UAAU,CAAC;QACrDO,qBAAqB,CAACD,YAAY,GAAGP,sBAAsBC,IAAI,CAAC,mBAAmB,CAAC;QAEpF,2BAA2B;QAC3BI,MAAMJ,IAAI,CAACU,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIT,MAAMF,mBAAmB,EAAE;QAC7BE,MAAMF,mBAAmB,CAACQ,SAAS,GAAG;YACpCX,sBAAsBG,mBAAmB;YACzCE,MAAMF,mBAAmB,CAACQ,SAAS;SACpC,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,IAAIT,MAAMH,UAAU,EAAE;QACpBG,MAAMH,UAAU,CAACS,SAAS,GAAG;YAACX,sBAAsBE,UAAU;YAAEG,MAAMH,UAAU,CAACS,SAAS;SAAC,CACxFC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,OAAOT;AACT,EAAE"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js CHANGED Viewed

@@ -99,21 +99,21 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fdwdeeo",
             "f1ezdslh"
         ],
-        Brbpp8k: [
-            "fckzjn8",
-            "f8ohr2i"
+        vlshuh: [
+            "f1ju2vgk",
+            "f1r6p88l"
         ],
-        Bcsxniv: [
-            "ff0tx2l",
-            "fnrj3rw"
+        B3s9tpx: [
+            "f2z0mmn",
+            "f12iqdwp"
         ],
-        tl7e51: [
-            "f3jppgx",
-            "f1m2s8ie"
+        rfylfo: [
+            "f1btorfl",
+            "fxofj4p"
         ],
-        mba178: [
-            "f96h41g",
-            "fdxf0pi"
+        k5lds2: [
+            "f161sdhp",
+            "f10m3pjc"
         ]
     },
     secondary: {},
@@ -126,9 +126,9 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "ffl6mx9",
             "f1t5sw6t"
         ],
-        Brbpp8k: [
-            "f1t42bc8",
-            "fsw5hli"
+        vlshuh: [
+            "f1mww3cx",
+            "f1wtv0vd"
         ]
     },
     transparent: {
@@ -140,9 +140,9 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "ffl6mx9",
             "f1t5sw6t"
         ],
-        Brbpp8k: [
-            "f1t42bc8",
-            "fsw5hli"
+        vlshuh: [
+            "f1mww3cx",
+            "f1wtv0vd"
         ]
     },
     circular: {},
@@ -157,23 +157,23 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f11fwhjz",
             "f18vtcsx"
         ],
-        Brbpp8k: [
-            "f31btwb",
-            "fzgm9gq"
+        vlshuh: [
+            "f12kx9re",
+            "f1hyxdqk"
         ]
     },
     disabledHighContrast: {
-        Bcsxniv: [
-            "fj2q5vi",
-            "f13tct40"
+        B3s9tpx: [
+            "fslo9ob",
+            "ftovg2z"
         ],
-        tl7e51: [
-            "fb2mzc7",
-            "f179dhpp"
+        rfylfo: [
+            "f1fuq5cn",
+            "f168zpha"
         ],
-        mba178: [
-            "f1ma39qa",
-            "f1nzpdru"
+        k5lds2: [
+            "f1t6bo0o",
+            "f1dnwhli"
         ]
     }
 }, {
@@ -203,50 +203,50 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     h: [
         ".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
         ".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
-        ".fckzjn8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
-        ".f8ohr2i:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
+        ".f1ju2vgk:hover:active .fui-SplitButton__primaryActionButton,.f1ju2vgk:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
+        ".f1r6p88l:hover:active .fui-SplitButton__primaryActionButton,.f1r6p88l:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
         ".ffl6mx9:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundHover);}",
         ".f1t5sw6t:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundHover);}",
-        ".f1t42bc8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundPressed);}",
-        ".fsw5hli:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundPressed);}",
+        ".f1mww3cx:hover:active .fui-SplitButton__primaryActionButton,.f1mww3cx:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundPressed);}",
+        ".f1wtv0vd:hover:active .fui-SplitButton__primaryActionButton,.f1wtv0vd:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundPressed);}",
         ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
         ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}",
-        ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
-        ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
+        ".f12kx9re:hover:active .fui-SplitButton__primaryActionButton,.f12kx9re:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
+        ".f1hyxdqk:hover:active .fui-SplitButton__primaryActionButton,.f1hyxdqk:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
     ],
     m: [
         [
-            "@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}",
+            "@media (forced-colors: active){.f12iqdwp .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}.f2z0mmn .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}",
+            "@media (forced-colors: active){.f1btorfl:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fxofj4p:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.f96h41g:hover:active .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fdxf0pi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}",
+            "@media (forced-colors: active){.f10m3pjc:hover:active .fui-SplitButton__primaryActionButton,.f10m3pjc:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f161sdhp:hover:active .fui-SplitButton__primaryActionButton,.f161sdhp:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
+            "@media (forced-colors: active){.fslo9ob .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.ftovg2z .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
+            "@media (forced-colors: active){.f168zpha:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.f1fuq5cn:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
             {
                 m: "(forced-colors: active)"
             }
         ],
         [
-            "@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}",
+            "@media (forced-colors: active){.f1dnwhli:hover:active .fui-SplitButton__primaryActionButton,.f1dnwhli:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.f1t6bo0o:hover:active .fui-SplitButton__primaryActionButton,.f1t6bo0o:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
             {
                 m: "(forced-colors: active)"
             }

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","~~Brbpp8k~~","~~Bcsxniv~~","~~tl7e51~~","~~mba178~~","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,qBAAqB;;;iCA6IQ;;;;uBAhJD,gBAAgB;AAGlD,8BAA8B;IACjCC,IAAI,EAAE,iBAAiB;IACvBC,UAAU,EAAE,6BAA6B;IACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,+FAAA;AACA,gEAAA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAO,mBAAA,EAAA;QAAAG,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAL,UAAA,EAAA;QAAAM,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,GAAGhB,mBAAA,EAAA;IAAAiB,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,~~OAAA~~,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAP,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,~~OAAA~~,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,WAAA,EAAA;QAAAR,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,~~OAAA~~,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,QAAA,EAAA,CAAA;IAAAC,OAAA,EAAA,CAAA;IAAAC,MAAA,EAAA,CAAA;IAAAC,QAAA,EAAA;QAAAZ,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,~~OAAA~~,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAW,oBAAA,EAAA;QAAAV,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAApB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAA6B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAyHrB,CAAC;AACK,MAAMC,iCAAiCC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;IAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;IACpC,MAAM,EAAEyC,UAAU,EAAER,QAAQ,EAAES,iBAAAA,EAAmB,GAAGJ,KAAK;IACzDA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,uBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAAA,CAAiB,IAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAAA,CAAiB,IAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;IACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;QAClByC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,OAAGnD,mBAAY,EAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;IACnI;IACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;QAC3BwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,OAAGnD,mBAAY,EAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;IACvK;IACA,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js ADDED Viewed

@@ -0,0 +1,55 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    splitButtonClassNames: function() {
+        return splitButtonClassNames;
+    },
+    useSplitButtonStyles_unstable: function() {
+        return useSplitButtonStyles_unstable;
+    }
+});
+const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size } = state;
+    state.root.className = [
+        splitButtonClassNames.root,
+        // Appearance
+        appearance && `${splitButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${splitButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${splitButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${splitButtonClassNames.root}--disabled`,
+        disabledFocusable && !disabled && `${splitButtonClassNames.root}--disabledFocusable`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = [
+            splitButtonClassNames.primaryActionButton,
+            state.primaryActionButton.className
+        ].filter(Boolean).join(' ');
+    }
+    if (state.menuButton) {
+        state.menuButton.className = [
+            splitButtonClassNames.menuButton,
+            state.menuButton.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js.map ADDED Viewed

@@ -0,0 +1 @@

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js CHANGED Viewed

@@ -68,7 +68,7 @@ const useRootStyles = (0, _react.makeStyles)({
                 borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${splitButtonClassNames.primaryActionButton}`]: {
                 borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
             }
@@ -82,7 +82,7 @@ const useRootStyles = (0, _react.makeStyles)({
                     borderRightColor: 'Highlight'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 [`& .${splitButtonClassNames.primaryActionButton}`]: {
                     borderRightColor: 'Highlight'
                 }
@@ -99,7 +99,7 @@ const useRootStyles = (0, _react.makeStyles)({
                 borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${splitButtonClassNames.primaryActionButton}`]: {
                 borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
             }
@@ -114,7 +114,7 @@ const useRootStyles = (0, _react.makeStyles)({
                 borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${splitButtonClassNames.primaryActionButton}`]: {
                 borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
             }
@@ -134,7 +134,7 @@ const useRootStyles = (0, _react.makeStyles)({
                 borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             [`& .${splitButtonClassNames.primaryActionButton}`]: {
                 borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
             }
@@ -151,7 +151,7 @@ const useRootStyles = (0, _react.makeStyles)({
                     borderRightColor: 'GrayText'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 [`& .${splitButtonClassNames.primaryActionButton}`]: {
                     borderRightColor: 'GrayText'
                 }

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js ADDED Viewed

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toggleButtonClassNames: function() {
+        return toggleButtonClassNames;
+    },
+    useToggleButtonStyles_unstable: function() {
+        return useToggleButtonStyles_unstable;
+    }
+});
+const toggleButtonClassNames = {
+    root: 'fui-ToggleButton',
+    icon: 'fui-ToggleButton__icon'
+};
+const useToggleButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, shape, size, checked, iconOnly } = state;
+    state.root.className = [
+        toggleButtonClassNames.root,
+        // Appearance
+        appearance && `${toggleButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${toggleButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${toggleButtonClassNames.root}--${shape}`,
+        // Checked
+        checked && `${toggleButtonClassNames.root}--checked`,
+        // Icons
+        iconOnly && `${toggleButtonClassNames.root}--iconOnly`,
+        // Disabled
+        disabled && `${toggleButtonClassNames.root}--disabled`,
+        disabledFocusable && `${toggleButtonClassNames.root}--disabledFocusable`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            toggleButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const { appearance, disabled, disabledFocusable, shape, size, checked, iconOnly } = state;\n\n state.root.className = [\n toggleButtonClassNames.root,\n\n // Appearance\n appearance && `${toggleButtonClassNames.root}--${appearance}`,\n\n // Size\n size && `${toggleButtonClassNames.root}--${size}`,\n\n // Shape\n shape && `${toggleButtonClassNames.root}--${shape}`,\n\n // Checked\n checked && `${toggleButtonClassNames.root}--checked`,\n\n // Icons\n iconOnly && `${toggleButtonClassNames.root}--iconOnly`,\n\n // Disabled\n disabled && `${toggleButtonClassNames.root}--disabled`,\n disabledFocusable && `${toggleButtonClassNames.root}--disabledFocusable`,\n\n // User provided class name\n state.root.className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (state.icon) {\n state.icon.className = [toggleButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n }\n\n return state;\n};\n"],"names":["toggleButtonClassNames","root","icon","useToggleButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","checked","iconOnly","className","filter","Boolean","join"],"mappings":"AAAA;;;;;;;;;;;;IAMaA,sBAAAA;;;kCAQAG;;;;AARN,+BAA4D;IACjEF,MAAM;IACNC,MAAM;AACR,EAAE;AAKK,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGP;IAEpFA,MAAMH,IAAI,CAACW,SAAS,GAAG;QACrBZ,uBAAuBC,IAAI;QAE3B,aAAa;QACbI,cAAc,GAAGL,uBAAuBC,IAAI,CAAC,EAAE,EAAEI,YAAY;QAE7D,OAAO;QACPI,QAAQ,GAAGT,uBAAuBC,IAAI,CAAC,EAAE,EAAEQ,MAAM;QAEjD,QAAQ;QACRD,SAAS,GAAGR,uBAAuBC,IAAI,CAAC,EAAE,EAAEO,OAAO;QAEnD,UAAU;QACVE,WAAW,GAAGV,uBAAuBC,IAAI,CAAC,SAAS,CAAC;QAEpD,QAAQ;QACRU,YAAY,GAAGX,uBAAuBC,IAAI,CAAC,UAAU,CAAC;QAEtD,WAAW;QACXK,YAAY,GAAGN,uBAAuBC,IAAI,CAAC,UAAU,CAAC;QACtDM,qBAAqB,GAAGP,uBAAuBC,IAAI,CAAC,mBAAmB,CAAC;QAExE,2BAA2B;QAC3BG,MAAMH,IAAI,CAACW,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,GAAG;YAACZ,uBAAuBE,IAAI;YAAEE,MAAMF,IAAI,CAACU,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IAEA,OAAOX;AACT,EAAE"}