@fluentui/react-button 0.0.0-nightly-20250702-0405.1 → 0.0.0-nightly-20250703-1103.1

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js

@@ -0,0 +1,253 @@
+"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, {
+    compoundButtonClassNames: function() {
+        return compoundButtonClassNames;
+    },
+    useCompoundButtonStyles_unstable: function() {
+        return useCompoundButtonStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+const useRootStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        height: 'auto',
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {},
+    primary: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'HighlightText'
+            }
+        }
+    },
+    secondary: {},
+    subtle: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Pressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            }
+        }
+    },
+    transparent: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
+            }
+        }
+    },
+    // Size variations
+    small: {
+        padding: `${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalMNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300
+    },
+    medium: {
+        padding: `14px ${_reacttheme.tokens.spacingHorizontalM} ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalM}`,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300
+    },
+    large: {
+        padding: `18px ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalXL} ${_reacttheme.tokens.spacingHorizontalL}`,
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        lineHeight: _reacttheme.tokens.lineHeightBase400
+    },
+    // Disabled styles
+    disabled: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'GrayText'
+            },
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useRootIconOnlyStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        padding: _reacttheme.tokens.spacingHorizontalXS,
+        maxWidth: '48px',
+        minWidth: '48px'
+    },
+    medium: {
+        padding: _reacttheme.tokens.spacingHorizontalSNudge,
+        maxWidth: '52px',
+        minWidth: '52px'
+    },
+    large: {
+        padding: _reacttheme.tokens.spacingHorizontalS,
+        maxWidth: '56px',
+        minWidth: '56px'
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        fontSize: '40px',
+        height: '40px',
+        width: '40px'
+    },
+    // Icon position variations
+    before: {
+        marginRight: _reacttheme.tokens.spacingHorizontalM
+    },
+    after: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalM
+    }
+});
+const useContentContainerStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'left'
+    }
+});
+const useSecondaryContentStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        lineHeight: '100%',
+        fontWeight: _reacttheme.tokens.fontWeightRegular
+    },
+    // Size variations
+    small: {
+        fontSize: _reacttheme.tokens.fontSizeBase200
+    },
+    medium: {
+        fontSize: _reacttheme.tokens.fontSizeBase200
+    },
+    large: {
+        fontSize: _reacttheme.tokens.fontSizeBase300
+    }
+});
+const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const contentContainerStyles = useContentContainerStyles();
+    const secondaryContentStyles = useSecondaryContentStyles();
+    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+    state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, iconOnly && rootIconOnlyStyles[size], state.root.className);
+    state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    padding: tokens.spacingHorizontalXS,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: tokens.spacingHorizontalSNudge,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: tokens.spacingHorizontalS,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable","root","icon","contentContainer","secondaryContent","useRootStyles","makeStyles","base","height","color","tokens","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","mergeClasses","children","undefined","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js

@@ -0,0 +1,129 @@
+"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, {
+    menuButtonClassNames: function() {
+        return menuButtonClassNames;
+    },
+    useMenuButtonStyles_unstable: function() {
+        return useMenuButtonStyles_unstable;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = (0, _react.makeStyles)({
+    base: {
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    // Appearance variations
+    outline: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected
+    },
+    secondary: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2Selected
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useIconExpandedStyles = (0, _react.makeStyles)({
+    // Appearance variations
+    outline: {
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    primary: {},
+    secondary: {
+        color: _reacttheme.tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    },
+    transparent: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    },
+    highContrast: {
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight'
+            }
+        }
+    }
+});
+const useMenuIconStyles = (0, _react.makeStyles)({
+    base: {
+        lineHeight: 0
+    },
+    // Size appearance
+    small: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        width: '12px'
+    },
+    medium: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        width: '12px'
+    },
+    large: {
+        fontSize: '16px',
+        height: '16px',
+        lineHeight: _reacttheme.tokens.lineHeightBase400,
+        width: '16px'
+    },
+    // Not-icon only
+    notIconOnly: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalXS
+    }
+});
+const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootExpandedStyles = useRootExpandedStyles();
+    const iconExpandedStyles = useIconExpandedStyles();
+    const menuIconStyles = useMenuIconStyles();
+    state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)({
+        ...state,
+        iconPosition: 'before'
+    });
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\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\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  highContrast: {\n    // High contrast styles\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n    },\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  'use no memo';\n\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"names":["menuButtonClassNames","useMenuButtonStyles_unstable","root","icon","menuIcon","useRootExpandedStyles","makeStyles","base","iconFilledClassName","display","iconRegularClassName","outline","shorthands","borderColor","tokens","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,174 @@
+"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 _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
+// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
+const MIN_TARGET_SIZE = '24px';
+const useFocusStyles = (0, _react.makeStyles)({
+    primaryActionButton: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+    }),
+    menuButton: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderLeftWidth: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        display: 'inline-flex',
+        justifyContent: 'stretch',
+        position: 'relative',
+        verticalAlign: 'middle',
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+        },
+        [`& .${splitButtonClassNames.menuButton}`]: {
+            borderLeftWidth: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            minWidth: MIN_TARGET_SIZE
+        }
+    },
+    // Appearance variations
+    outline: {},
+    primary: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'HighlightText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            },
+            ':hover:active': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            }
+        }
+    },
+    secondary: {},
+    subtle: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: _reacttheme.tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    transparent: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: _reacttheme.tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    // Shape variations
+    circular: {},
+    rounded: {},
+    square: {},
+    // Disabled styles
+    disabled: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'GrayText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const focusStyles = useFocusStyles();
+    const { appearance, disabled, disabledFocusable } = state;
+    state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
+    if (state.menuButton) {
+        state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+    }
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["import { 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":["splitButtonClassNames","useSplitButtonStyles_unstable","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","makeStyles","createCustomFocusIndicatorStyle","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","tokens","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}