@fluentui/react-button 9.10.1 → 9.11.0

package/lib/components/MenuButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable, useMenuButtonBase_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AAOA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable, useMenuButtonBase_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AAOA,SAASA,UAAU,QAAQ,kBAAe;AAC1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,qBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B"}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */ export const renderMenuButton_unstable = (state)=>{

package/lib/components/MenuButton/useMenuButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { ChevronDownRegular } from '@fluentui/react-icons';
-import { slot } from '@fluentui/react-utilities';
-import { useButtonContext } from '../../contexts/ButtonContext';
-import { useButtonBase_unstable } from '../Button/index';
+import * as React from "react";
+import { ChevronDownRegular } from "@fluentui/react-icons";
+import { slot } from "@fluentui/react-utilities";
+import { useButtonContext } from "../../contexts/ButtonContext.js";
+import { useButtonBase_unstable } from "../Button/index.js";
 /**
  * Base hook for MenuButton.
  *

package/lib/components/MenuButton/useMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * The `menuIcon` slot ships no icon of its own and only renders when a consumer\n * provides one, so headless consumers can supply their own visuals. The styled\n * `useMenuButton_unstable` adds the default chevron on top of this.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n  props: MenuButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      elementType: 'span',\n    }),\n  };\n};\n\n/**\n * Given user props, returns the final state for a MenuButton by adding the\n * `appearance`/`size`/`shape` styling props on top of the base state.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props;\n  const baseState = useMenuButtonBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    appearance,\n    shape,\n    size,\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButtonContext","useButtonBase_unstable","useMenuButtonBase_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","elementType","useMenuButton_unstable","size","contextSize","appearance","shape","baseProps","baseState","defaultProps","renderByDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;;;;;;;;CASC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,uBAAuBK,aAAaF;IAExD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCS,aAAa;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,yBAAyB,CACpCZ,OACAC;IAEA,MAAM,EAAEY,MAAMC,WAAW,EAAE,GAAGjB;IAC9B,MAAM,EAAEkB,aAAa,WAAW,EAAEb,QAAQ,EAAEc,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,WAAW,GAAGjB;IAChH,MAAMkB,YAAYnB,2BAA2BkB,WAAWhB;IAExD,OAAO;QACL,GAAGiB,SAAS;QACZhB,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCiB,cAAc;gBACZZ,wBAAU,oBAACZ;YACb;YACAyB,iBAAiB;YACjBT,aAAa;QACf;QACAI;QACAC;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * The `menuIcon` slot ships no icon of its own and only renders when a consumer\n * provides one, so headless consumers can supply their own visuals. The styled\n * `useMenuButton_unstable` adds the default chevron on top of this.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n  props: MenuButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      elementType: 'span',\n    }),\n  };\n};\n\n/**\n * Given user props, returns the final state for a MenuButton by adding the\n * `appearance`/`size`/`shape` styling props on top of the base state.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props;\n  const baseState = useMenuButtonBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    appearance,\n    shape,\n    size,\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButtonContext","useButtonBase_unstable","useMenuButtonBase_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","elementType","useMenuButton_unstable","size","contextSize","appearance","shape","baseProps","baseState","defaultProps","renderByDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,sBAAsB,QAAQ,qBAAkB;AAGzD;;;;;;;;;CASC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,uBAAuBK,aAAaF;IAExD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCS,aAAa;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,yBAAyB,CACpCZ,OACAC;IAEA,MAAM,EAAEY,MAAMC,WAAW,EAAE,GAAGjB;IAC9B,MAAM,EAAEkB,aAAa,WAAW,EAAEb,QAAQ,EAAEc,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,WAAW,GAAGjB;IAChH,MAAMkB,YAAYnB,2BAA2BkB,WAAWhB;IAExD,OAAO;QACL,GAAGiB,SAAS;QACZhB,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCiB,cAAc;gBACZZ,wBAAU,oBAACZ;YACb;YACAyB,iBAAiB;YACjBT,aAAa;QACf;QACAI;QACAC;QACAH;IACF;AACF,EAAE"}

package/lib/components/MenuButton/useMenuButtonStyles.styles.js

@@ -1,9 +1,9 @@
 'use client';
 
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { tokens } from '@fluentui/react-theme';
-import { mergeClasses, __styles, shorthands } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import { mergeClasses, __styles, shorthands } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const menuButtonClassNames = {
   root: 'fui-MenuButton',
   icon: 'fui-MenuButton__icon',

package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\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});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\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});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\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    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from \"@fluentui/react-icons\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { mergeClasses, makeStyles, shorthands } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"../Button/useButtonStyles.styles.js\";\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\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});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\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});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\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    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 'use client';
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { tokens } from '@fluentui/react-theme';
-import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import { mergeClasses, makeStyles, shorthands } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const menuButtonClassNames = {
     root: 'fui-MenuButton',
     icon: 'fui-MenuButton__icon',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","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","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","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","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}

package/lib/components/SplitButton/SplitButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderSplitButton_unstable } from './renderSplitButton';
-import { useSplitButton_unstable } from './useSplitButton';
-import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderSplitButton_unstable } from "./renderSplitButton.js";
+import { useSplitButton_unstable } from "./useSplitButton.js";
+import { useSplitButtonStyles_unstable } from "./useSplitButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.

package/lib/components/SplitButton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  (props, ref) => {\n    const state = useSplitButton_unstable(props, ref);\n\n    useSplitButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n    return renderSplitButton_unstable(state);\n    // Casting is required due to lack of distributive union to support unions on @types/react\n  },\n) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAChF,CAACC,OAAOC;IACN,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GACyC;AAE3CJ,YAAYK,WAAW,GAAG"}

package/lib/components/SplitButton/SplitButton.types.js

@@ -1 +1,3 @@
-export { };
+/**
+ * SplitButton state without the `appearance`/`size`/`shape` styling props, for headless usage.
+ */ export { };

package/lib/components/SplitButton/SplitButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import type { Button } from '../Button/Button';\nimport type { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root' | 'as'> &\n  Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":"AA0BA,WAE4D"}
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import type { Button } from '../Button/Button';\nimport type { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonBaseProps, MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root' | 'as'> &\n  Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n\nexport type SplitButtonBaseSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<MenuButtonBaseProps>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<ButtonBaseProps>;\n};\n\n/**\n * SplitButton props without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type SplitButtonBaseProps = ComponentProps<SplitButtonBaseSlots> &\n  Pick<ButtonBaseProps, 'disabled' | 'disabledFocusable' | 'icon' | 'iconPosition'> &\n  Pick<MenuButtonBaseProps, 'menuIcon'>;\n\n/**\n * SplitButton state without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type SplitButtonBaseState = ComponentState<SplitButtonBaseSlots> &\n  Required<Pick<SplitButtonBaseProps, 'disabled' | 'disabledFocusable' | 'iconPosition'>>;\n"],"names":[],"mappings":"AAqDA;;CAEC,GACD,WAC0F"}

package/lib/components/SplitButton/index.js

@@ -1,4 +1,4 @@
-export { SplitButton } from './SplitButton';
-export { renderSplitButton_unstable } from './renderSplitButton';
-export { useSplitButton_unstable } from './useSplitButton';
-export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
+export { SplitButton } from "./SplitButton.js";
+export { renderSplitButton_unstable } from "./renderSplitButton.js";
+export { useSplitButton_unstable, useSplitButtonBase_unstable } from "./useSplitButton.js";
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from "./useSplitButtonStyles.styles.js";

package/lib/components/SplitButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type {\n  SplitButtonBaseProps,\n  SplitButtonBaseSlots,\n  SplitButtonBaseState,\n  SplitButtonProps,\n  SplitButtonSlots,\n  SplitButtonState,\n} from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable, useSplitButtonBase_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonBase_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAS5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */ export const renderSplitButton_unstable = (state)=>{

package/lib/components/SplitButton/renderSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState): JSXElement => {\n  assertSlots<SplitButtonSlots>(state);\n\n  return (\n    <state.root>\n      {state.primaryActionButton && <state.primaryActionButton />}\n      {state.menuButton && <state.menuButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSplitButton_unstable","state","root","primaryActionButton","menuButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,mBAAmB,kBAAI,KAACF,MAAME,mBAAmB;YACvDF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
+{"version":3,"sources":["../src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ComponentState, JSXElement } from '@fluentui/react-utilities';\n\nimport type { SplitButtonBaseSlots } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (\n  state: Pick<ComponentState<SplitButtonBaseSlots>, 'root' | 'menuButton' | 'primaryActionButton'>,\n): JSXElement => {\n  assertSlots<SplitButtonBaseSlots>(state);\n\n  return (\n    <state.root>\n      {state.primaryActionButton && <state.primaryActionButton />}\n      {state.menuButton && <state.menuButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSplitButton_unstable","state","root","primaryActionButton","menuButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC;IAEAF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,mBAAmB,kBAAI,KAACF,MAAME,mBAAmB;YACvDF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}

package/lib/components/SplitButton/useSplitButton.js

@@ -1,18 +1,19 @@
-import { useId, slot } from '@fluentui/react-utilities';
-import { Button } from '../Button/Button';
-import { MenuButton } from '../MenuButton/MenuButton';
+'use client';
+import { useId, slot } from "@fluentui/react-utilities";
+import { Button } from "../Button/Button.js";
+import { MenuButton } from "../MenuButton/MenuButton.js";
 /**
  * Given user props, defines default props for the SplitButton and returns processed state.
  * @param props - User provided props to the SplitButton component.
  * @param ref - User provided ref to be passed to the SplitButton component.
  */ export const useSplitButton_unstable = (props, ref)=>{
-    const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium', ...rest } = props;
-    const baseId = useId('splitButton-');
-    const menuButtonShorthand = slot.optional(menuButton, {
+    const { appearance = 'secondary', icon, menuIcon, shape = 'rounded', size = 'medium', ...rest } = props;
+    const baseState = useSplitButtonBase_unstable(rest, ref);
+    const menuButtonShorthand = slot.optional(props.menuButton, {
         defaultProps: {
+            ...baseState.menuButton,
             appearance,
-            disabled,
-            disabledFocusable,
+            disabledFocusable: baseState.disabledFocusable,
             menuIcon,
             shape,
             size
@@ -20,41 +21,80 @@ import { MenuButton } from '../MenuButton/MenuButton';
         renderByDefault: true,
         elementType: MenuButton
     });
-    const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
+    const primaryActionButtonShorthand = slot.optional(props.primaryActionButton, {
         defaultProps: {
+            ...baseState.primaryActionButton,
             appearance,
-            children,
-            disabled,
-            disabledFocusable,
+            disabledFocusable: baseState.disabledFocusable,
             icon,
-            iconPosition,
-            id: baseId + '__primaryActionButton',
+            iconPosition: baseState.iconPosition,
             shape,
             size
         },
         renderByDefault: true,
         elementType: Button
     });
+    return {
+        ...baseState,
+        // Props passed at the top-level
+        appearance,
+        shape,
+        size,
+        // Slots definition
+        components: {
+            root: 'div',
+            menuButton: MenuButton,
+            primaryActionButton: Button
+        },
+        menuButton: menuButtonShorthand,
+        primaryActionButton: primaryActionButtonShorthand
+    };
+};
+/**
+ * Base hook for SplitButton component, which manages design-agnostic state related to slots
+ * structure and ARIA attributes, without design-specific props such as `appearance`, `shape`, or
+ * `size`.
+ *
+ * Concrete wrappers recreate child slots from these base prop defaults before rendering.
+ *
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
+ */ export const useSplitButtonBase_unstable = (props, ref)=>{
+    const { children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, ...rest } = props;
+    const baseId = useId('splitButton-');
+    const menuButtonShorthand = slot.optional(menuButton, {
+        defaultProps: {
+            disabled
+        },
+        renderByDefault: true,
+        elementType: 'button'
+    });
+    const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
+        defaultProps: {
+            children,
+            disabled,
+            id: baseId + '__primaryActionButton'
+        },
+        renderByDefault: true,
+        elementType: 'button'
+    });
     // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
     // user.
     if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
         menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
     }
     return {
-        // Props passed at the top-level
-        appearance,
         disabled,
         disabledFocusable,
         iconPosition,
-        shape,
-        size,
+        // Slots definition
         components: {
             root: 'div',
-            menuButton: MenuButton,
-            primaryActionButton: Button
+            menuButton: 'button',
+            primaryActionButton: 'button'
         },
         root: slot.always({
-            ref: ref,
+            ref,
             ...rest
         }, {
             elementType: 'div'

package/lib/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AACA,SAASA,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,SAASnB,MAAM;IAErB,MAAMoB,sBAAsBnB,KAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB;IACf;IACA,MAAMsB,+BAA+BxB,KAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/E0B,MAAM3B,KAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type {\n  SplitButtonBaseProps,\n  SplitButtonBaseState,\n  SplitButtonProps,\n  SplitButtonState,\n} from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (props: SplitButtonProps, ref: React.Ref<HTMLDivElement>): SplitButtonState => {\n  const { appearance = 'secondary', icon, menuIcon, shape = 'rounded', size = 'medium', ...rest } = props;\n  const baseState = useSplitButtonBase_unstable(rest, ref);\n\n  const menuButtonShorthand = slot.optional(props.menuButton, {\n    defaultProps: {\n      ...baseState.menuButton,\n      appearance,\n      disabledFocusable: baseState.disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(props.primaryActionButton, {\n    defaultProps: {\n      ...baseState.primaryActionButton,\n      appearance,\n      disabledFocusable: baseState.disabledFocusable,\n      icon,\n      iconPosition: baseState.iconPosition,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  return {\n    ...baseState,\n    // Props passed at the top-level\n    appearance,\n    shape,\n    size,\n    // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n\n/**\n * Base hook for SplitButton component, which manages design-agnostic state related to slots\n * structure and ARIA attributes, without design-specific props such as `appearance`, `shape`, or\n * `size`.\n *\n * Concrete wrappers recreate child slots from these base prop defaults before rendering.\n *\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButtonBase_unstable = (\n  props: SplitButtonBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): SplitButtonBaseState => {\n  const {\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      disabled,\n    },\n    renderByDefault: true,\n    elementType: 'button',\n  });\n\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      children,\n      disabled,\n      id: baseId + '__primaryActionButton',\n    },\n    renderByDefault: true,\n    elementType: 'button',\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    // Slots definition\n    components: { root: 'div', menuButton: 'button', primaryActionButton: 'button' },\n    root: slot.always({ ref, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","icon","menuIcon","shape","size","rest","baseState","useSplitButtonBase_unstable","menuButtonShorthand","optional","menuButton","defaultProps","disabledFocusable","renderByDefault","elementType","primaryActionButtonShorthand","primaryActionButton","iconPosition","components","root","children","disabled","baseId","id","always"],"mappings":"AAAA;AAGA,SAASA,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,UAAU,QAAQ,8BAA2B;AAQtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,aAAa,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGP;IAClG,MAAMQ,YAAYC,4BAA4BF,MAAMN;IAEpD,MAAMS,sBAAsBd,KAAKe,QAAQ,CAACX,MAAMY,UAAU,EAAE;QAC1DC,cAAc;YACZ,GAAGL,UAAUI,UAAU;YACvBV;YACAY,mBAAmBN,UAAUM,iBAAiB;YAC9CV;YACAC;YACAC;QACF;QACAS,iBAAiB;QACjBC,aAAalB;IACf;IACA,MAAMmB,+BAA+BrB,KAAKe,QAAQ,CAACX,MAAMkB,mBAAmB,EAAE;QAC5EL,cAAc;YACZ,GAAGL,UAAUU,mBAAmB;YAChChB;YACAY,mBAAmBN,UAAUM,iBAAiB;YAC9CX;YACAgB,cAAcX,UAAUW,YAAY;YACpCd;YACAC;QACF;QACAS,iBAAiB;QACjBC,aAAanB;IACf;IAEA,OAAO;QACL,GAAGW,SAAS;QACZ,gCAAgC;QAChCN;QACAG;QACAC;QACA,mBAAmB;QACnBc,YAAY;YAAEC,MAAM;YAAOT,YAAYd;YAAYoB,qBAAqBrB;QAAO;QAC/Ee,YAAYF;QACZQ,qBAAqBD;IACvB;AACF,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,MAAMR,8BAA8B,CACzCT,OACAC;IAEA,MAAM,EACJqB,QAAQ,EACRC,WAAW,KAAK,EAChBT,oBAAoB,KAAK,EACzBX,IAAI,EACJgB,eAAe,QAAQ,EACvBP,UAAU,EACVR,QAAQ,EACRc,mBAAmB,EACnB,GAAGX,MACJ,GAAGP;IACJ,MAAMwB,SAAS7B,MAAM;IAErB,MAAMe,sBAAsBd,KAAKe,QAAQ,CAACC,YAAY;QACpDC,cAAc;YACZU;QACF;QACAR,iBAAiB;QACjBC,aAAa;IACf;IAEA,MAAMC,+BAA+BrB,KAAKe,QAAQ,CAACO,qBAAqB;QACtEL,cAAc;YACZS;YACAC;YACAE,IAAID,SAAS;QACf;QACAT,iBAAiB;QACjBC,aAAa;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEN,uBACAO,gCACA,CAACP,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGO,6BAA6BQ,EAAE;IAC1E;IAEA,OAAO;QACLF;QACAT;QACAK;QACA,mBAAmB;QACnBC,YAAY;YAAEC,MAAM;YAAOT,YAAY;YAAUM,qBAAqB;QAAS;QAC/EG,MAAMzB,KAAK8B,MAAM,CAAC;YAAEzB;YAAK,GAAGM,IAAI;QAAC,GAAG;YAAES,aAAa;QAAM;QACzDJ,YAAYF;QACZQ,qBAAqBD;IACvB;AACF,EAAE"}

package/lib/components/SplitButton/useSplitButtonStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-import { __styles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const splitButtonClassNames = {
   root: 'fui-SplitButton',
   menuButton: 'fui-SplitButton__menuButton',

package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"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"],"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    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzD;EACAA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClB;IACAyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3B;IACAwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"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"],"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    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzD;EACAA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClB;IACAyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3B;IACAwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const splitButtonClassNames = {
     root: 'fui-SplitButton',
     menuButton: 'fui-SplitButton__menuButton',

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderToggleButton_unstable } from './renderToggleButton';
-import { useToggleButton_unstable } from './useToggleButton';
-import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderToggleButton_unstable } from "./renderToggleButton.js";
+import { useToggleButton_unstable } from "./useToggleButton.js";
+import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,oCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

package/lib/components/ToggleButton/index.js

@@ -1,4 +1,4 @@
-export { ToggleButton } from './ToggleButton';
-export { renderToggleButton_unstable } from './renderToggleButton';
-export { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';
-export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
+export { ToggleButton } from "./ToggleButton.js";
+export { renderToggleButton_unstable } from "./renderToggleButton.js";
+export { useToggleButton_unstable, useToggleButtonBase_unstable } from "./useToggleButton.js";
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";

package/lib/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,oBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,uBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,oCAAiC"}

package/lib/components/ToggleButton/renderToggleButton.js

@@ -1 +1 @@
-export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton.js";

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,4BAAyB"}

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,6 +1,6 @@
 'use client';
-import { useToggleState } from '../../utils/useToggleState';
-import { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';
+import { useToggleState } from "../../utils/useToggleState.js";
+import { useButton_unstable, useButtonBase_unstable } from "../Button/useButton.js";
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
  * processed state.

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,sBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,yBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}

package/lib/components/ToggleButton/useToggleButtonStyles.styles.js

@@ -1,10 +1,10 @@
 'use client';
 
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { shorthands, mergeClasses, __styles } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, __styles } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const toggleButtonClassNames = {
   root: 'fui-ToggleButton',
   icon: 'fui-ToggleButton__icon'