npm - @fluentui/react-button - Versions diffs - 9.1.8 → 9.1.10 - Mend

@fluentui/react-button 9.1.8 → 9.1.10

Files changed (152) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: Slot<'span'>;\n\n /\n Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'iconPosition' \| 'shape' \| 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components'>;\n"]}
1	+ {"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: Slot<'span'>;\n\n /\n Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'iconPosition' \| 'shape' \| 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components'>;\n"]}

package/lib/components/CompoundButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}

package/lib/components/CompoundButton/renderCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;EAC1E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA6B,KAAnC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAD7C,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAR7C,CADF;AAYD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;EAC1E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA6B,KAAnC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAD7C,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAR7C,CADF;AAYD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CompoundButton/useCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;EAAE,gBAAF;EAAoB,gBAApB;EAAsC,GAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;;;EACvB,MAAM,KAAK,GAAwB,EACjC;IACA,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFY;IAIjC;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE,MAFI;MAGV,gBAAgB,EAAE,MAHR;MAIV,gBAAgB,EAAE;IAJR,CALqB;IAWjC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;MAAE,QAAQ,EAAE;IAAZ,CAAnB,CAXD;IAYjC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;EAZD,CAAnC,CADuB,CAgBvB;;EACA,KAAK,CAAC,QAAN,GAAiB,OAAO,CAAC,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,KAAA,CAAV,GAAU,EAAA,CAAE,QAAZ,KAAwB,CAAC,KAAK,CAAC,QAA/B,IAA2C,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,QAAzB,CAA5C,CAAxB;EAEA,OAAO,KAAP;AACD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;EAAE,gBAAF;EAAoB,gBAApB;EAAsC,GAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;;;EACvB,MAAM,KAAK,GAAwB,EACjC;IACA,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFY;IAIjC;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE,MAFI;MAGV,gBAAgB,EAAE,MAHR;MAIV,gBAAgB,EAAE;IAJR,CALqB;IAWjC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;MAAE,QAAQ,EAAE;IAAZ,CAAnB,CAXD;IAYjC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;EAZD,CAAnC,CADuB,CAgBvB;;EACA,KAAK,CAAC,QAAN,GAAiB,OAAO,CAAC,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,KAAA,CAAV,GAAU,EAAA,CAAE,QAAZ,KAAwB,CAAC,KAAK,CAAC,QAA/B,IAA2C,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,QAAzB,CAA5C,CAAxB;EAEA,OAAO,KAAP;AACD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CompoundButton/useCompoundButtonStyles.js.map CHANGED Viewed

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

package/lib/components/MenuButton/MenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;AAGG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EAEA,OAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;AAGG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EAEA,OAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /*\n Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'shape' \| 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components' \| 'iconPosition'>;\n"]}
1	+ {"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /*\n Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'shape' \| 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components' \| 'iconPosition'>;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}

package/lib/components/MenuButton/renderMenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EACA,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAqB,KAA3B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAHvD,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/*\n Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && slotProps.root.children}\n {(!iconOnly \|\| !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EACA,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAqB,KAA3B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAHvD,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/*\n Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && slotProps.root.children}\n {(!iconOnly \|\| !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;EAAE,QAAF;EAAY,GAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;;;EACnB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,WAAW,CAAC,IAAZ,CAAiB,eAAjB,IAAoC,CAAA,EAAA,GAAA,KAAK,CAAC,eAAD,CAAL,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,KAA9D;EAEA,OAAO,EACL;IACA,GAAG,WAFE;IAIL;IACA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE,MAFI;MAGV,QAAQ,EAAE;IAHA,CARP;IAcL,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;MACnC,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;MADE,CADqB;MAInC,QAAQ,EAAE;IAJyB,CAAX;EAdrB,CAAP;AAqBD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/*\n Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): MenuButtonState => {\n const buttonState = useButton_unstable(props, ref);\n buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: resolveShorthand(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n required: true,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;EAAE,QAAF;EAAY,GAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;;;EACnB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,WAAW,CAAC,IAAZ,CAAiB,eAAjB,IAAoC,CAAA,EAAA,GAAA,KAAK,CAAC,eAAD,CAAL,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,KAA9D;EAEA,OAAO,EACL;IACA,GAAG,WAFE;IAIL;IACA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE,MAFI;MAGV,QAAQ,EAAE;IAHA,CARP;IAcL,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;MACnC,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;MADE,CADqB;MAInC,QAAQ,EAAE;IAJyB,CAAX;EAdrB,CAAP;AAqBD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/*\n Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): MenuButtonState => {\n const buttonState = useButton_unstable(props, ref);\n buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: resolveShorthand(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n required: true,\n }),\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuButton/useMenuButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,IAAI,EAAE,sBAF6D;EAGnE,QAAQ,EAAE;AAHyD,CAA9D;;AAMP,MAAM,qBAAqB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAkCA,MAAM,qBAAqB,gBAAG;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAmBA,MAAM,iBAAiB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;;AA+BA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,IAFjB,EAGjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAHhB,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAFhB,EAGjC,KAAK,CAAC,IAAN,CAAW,SAHsB,CAAnC;EAKD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,oBAAoB,CAAC,QADgB,EAErC,cAAc,CAAC,IAFsB,EAGrC,cAAc,CAAC,KAAK,CAAC,IAAP,CAHuB,EAIrC,CAAC,KAAK,CAAC,QAAP,IAAmB,cAAc,CAAC,WAJG,EAKrC,KAAK,CAAC,QAAN,CAAe,SALsB,CAAvC;EAOD;;EAED,wBAAwB,CAAC,EAAE,GAAG,KAAL;IAAY,YAAY,EAAE;EAA1B,CAAD,CAAxB;EAEA,OAAO,KAAP;AACD,CAjCM","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\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});\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 state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,IAAI,EAAE,sBAF6D;EAGnE,QAAQ,EAAE;AAHyD,CAA9D;;AAMP,MAAM,qBAAqB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAkCA,MAAM,qBAAqB,gBAAG;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAmBA,MAAM,iBAAiB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;;AA+BA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,IAFjB,EAGjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAHhB,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAFhB,EAGjC,KAAK,CAAC,IAAN,CAAW,SAHsB,CAAnC;EAKD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,oBAAoB,CAAC,QADgB,EAErC,cAAc,CAAC,IAFsB,EAGrC,cAAc,CAAC,KAAK,CAAC,IAAP,CAHuB,EAIrC,CAAC,KAAK,CAAC,QAAP,IAAmB,cAAc,CAAC,WAJG,EAKrC,KAAK,CAAC,QAAN,CAAe,SALsB,CAAvC;EAOD;;EAED,wBAAwB,CAAC,EAAE,GAAG,KAAL;IAAY,YAAY,EAAE;EAA1B,CAAD,CAAxB;EAEA,OAAO,KAAP;AACD,CAjCM","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\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});\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 state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EAEA,OAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\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 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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EAEA,OAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\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 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"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '../Button/Button';\nimport { 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'> &\n Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' \| 'iconOnly' \| 'root'> &\n Omit<MenuButtonState, 'components' \| 'iconOnly' \| 'root'>;\n"]}
1	+ {"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '../Button/Button';\nimport { 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'> &\n Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' \| 'iconOnly' \| 'root'> &\n Omit<MenuButtonState, 'components' \| 'iconOnly' \| 'root'>;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\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) => {\n const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\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) => {\n const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;EACpB,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,QAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,UAPI;IAQJ,QARI;IASJ,mBATI;IAUJ,KAAK,GAAG,SAVJ;IAWJ,IAAI,GAAG;EAXH,IAYF,KAZJ;EAcA,MAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;EAEA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;IACvD,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,iBAHY;MAIZ,QAJY;MAKZ,KALY;MAMZ;IANY,CADyC;IASvD,QAAQ,EAAE;EAT6C,CAAb,CAA5C;EAYA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;IACzE,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,QAHY;MAIZ,iBAJY;MAKZ,IALY;MAMZ,YANY;MAOZ,EAAE,EAAE,MAAM,GAAG,uBAPD;MAQZ,KARY;MASZ;IATY,CAD2D;IAYzE,QAAQ,EAAE;EAZ+D,CAAtB,CAArD,CA7BoB,CA4CpB;EACA;;EACA,IACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;IACA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;EACD;;EAED,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,UAAU,EAAE,UAFF;MAGV,mBAAmB,EAAE;IAHX,CAVP;IAgBL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MAAE,GAAF;MAAO,GAAG;IAAV,CAAR,CAhBtB;IAiBL,UAAU,EAAE,mBAjBP;IAkBL,mBAAmB,EAAE;EAlBhB,CAAP;AAoBD,CA9EM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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 } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(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 required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the 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,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;EACpB,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,QAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,UAPI;IAQJ,QARI;IASJ,mBATI;IAUJ,KAAK,GAAG,SAVJ;IAWJ,IAAI,GAAG;EAXH,IAYF,KAZJ;EAcA,MAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;EAEA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;IACvD,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,iBAHY;MAIZ,QAJY;MAKZ,KALY;MAMZ;IANY,CADyC;IASvD,QAAQ,EAAE;EAT6C,CAAb,CAA5C;EAYA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;IACzE,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,QAHY;MAIZ,iBAJY;MAKZ,IALY;MAMZ,YANY;MAOZ,EAAE,EAAE,MAAM,GAAG,uBAPD;MAQZ,KARY;MASZ;IATY,CAD2D;IAYzE,QAAQ,EAAE;EAZ+D,CAAtB,CAArD,CA7BoB,CA4CpB;EACA;;EACA,IACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;IACA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;EACD;;EAED,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,UAAU,EAAE,UAFF;MAGV,mBAAmB,EAAE;IAHX,CAVP;IAgBL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MAAE,GAAF;MAAO,GAAG;IAAV,CAAR,CAhBtB;IAiBL,UAAU,EAAE,mBAjBP;IAkBL,mBAAmB,EAAE;EAlBhB,CAAP;AAoBD,CA9EM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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 } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(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 required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the 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,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,UAAU,EAAE,6BAFyD;EAGrE,mBAAmB,EAAE;AAHgD,CAAhE;;AAMP,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AA8HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB;EAAxB,IAA8C,KAApD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;EAKD;;EAED,IAAI,KAAK,CAAC,mBAAV,EAA+B;IAC7B,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;EAKD;;EAED,OAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,UAAU,EAAE,6BAFyD;EAGrE,mBAAmB,EAAE;AAHgD,CAAhE;;AAMP,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AA8HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB;EAAxB,IAA8C,KAApD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;EAKD;;EAED,IAAI,KAAK,CAAC,mBAAV,EAA+B;IAC7B,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;EAKD;;EAED,OAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 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"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /*\n Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n \n @default false\n /\n defaultChecked?: boolean;\n\n /\n Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n \n @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"]}
1	+ {"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /*\n Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n \n @default false\n /\n defaultChecked?: boolean;\n\n /\n Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n \n @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}
1	+ {"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { 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 buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { 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 buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n highContrastFocusStyles: createCustomFocusIndicatorStyle({\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n }),\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n / No styles /\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' \|\| appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n highContrastFocusStyles: createCustomFocusIndicatorStyle({\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n }),\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n / No styles /\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' \|\| appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}

package/lib/utils/useToggleState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,oBAAzB,EAA+C,gBAA/C,QAAuE,2BAAvE;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,gBAAgB,CACvB,cAAc,CAAC,OAAD,EAA4E,aAA5E,CADS;IAHrB;EALD,CAAP;AAaD","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' \| 'defaultChecked' \| 'disabled' \| 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' \| 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' \|\| role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-button/src/utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,oBAAzB,EAA+C,gBAA/C,QAAuE,2BAAvE;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,gBAAgB,CACvB,cAAc,CAAC,OAAD,EAA4E,aAA5E,CADS;IAHrB;EALD,CAAP;AAaD","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' \| 'defaultChecked' \| 'disabled' \| 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' \| 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' \|\| role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}

package/lib-amd/Button.js ADDED Viewed

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Button/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Button.js.map

package/lib-amd/Button.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/Button.tsx"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Button/index';\n"]}

package/lib-amd/CompoundButton.js ADDED Viewed

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/CompoundButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=CompoundButton.js.map

package/lib-amd/CompoundButton.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/CompoundButton.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/CompoundButton/index';\n"]}

package/lib-amd/MenuButton.js ADDED Viewed

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/MenuButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=MenuButton.js.map

package/lib-amd/MenuButton.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/MenuButton.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/MenuButton/index';\n"]}

package/lib-amd/SplitButton.js ADDED Viewed

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/SplitButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=SplitButton.js.map

package/lib-amd/SplitButton.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/SplitButton.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SplitButton/index';\n"]}

package/lib-amd/ToggleButton.js ADDED Viewed

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ToggleButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ToggleButton.js.map

package/lib-amd/ToggleButton.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/ToggleButton.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/ToggleButton/index';\n"]}

package/lib-amd/components/Button/Button.js ADDED Viewed

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderButton", "./useButton", "./useButtonStyles"], function (require, exports, React, renderButton_1, useButton_1, useButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Button = void 0;
+    /**
+     * Buttons give people a way to trigger an action.
+     */
+    exports.Button = React.forwardRef(function (props, ref) {
+        var state = useButton_1.useButton_unstable(props, ref);
+        useButtonStyles_1.useButtonStyles_unstable(state);
+        return renderButton_1.renderButton_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.Button.displayName = 'Button';
+});
+//# sourceMappingURL=Button.js.map

package/lib-amd/components/Button/Button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;QACpC,0FAA0F;IAC5F,CAAC,CAAqC,CAAC;IAEvC,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n const state = useButton_unstable(props, ref);\n\n useButtonStyles_unstable(state);\n\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"]}

package/lib-amd/components/Button/Button.types.js ADDED Viewed

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Button.types.js.map

package/lib-amd/components/Button/Button.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n *\n * @default 'secondary'\n */\n appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n *\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n *\n * @default 'rounded'\n */\n shape?: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n /**\n * A button can contain only an icon.\n *\n * @default false\n */\n iconOnly: boolean;\n };\n"]}

package/lib-amd/components/Button/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./Button", "./renderButton", "./useButton", "./useButtonStyles"], function (require, exports, tslib_1, Button_1, renderButton_1, useButton_1, useButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
+    tslib_1.__exportStar(Button_1, exports);
+    tslib_1.__exportStar(renderButton_1, exports);
+    tslib_1.__exportStar(useButton_1, exports);
+    Object.defineProperty(exports, "buttonClassNames", { enumerable: true, get: function () { return useButtonStyles_1.buttonClassNames; } });
+    Object.defineProperty(exports, "useButtonStyles_unstable", { enumerable: true, get: function () { return useButtonStyles_1.useButtonStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Button/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/index.ts"],"names":[],"mappings":";;;;IAAA,wCAAyB;IAGzB,8CAA+B;IAC/B,2CAA4B;IACnB,mHAAA,gBAAgB,OAAA;IAAE,2HAAA,wBAAwB,OAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"]}

package/lib-amd/components/Button/renderButton.js ADDED Viewed

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderButton_unstable = void 0;
+    /**
+     * Renders a Button component by passing the state defined props to the appropriate slots.
+     */
+    var renderButton_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        var iconOnly = state.iconOnly, iconPosition = state.iconPosition;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            !iconOnly && state.root.children,
+            iconPosition === 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+    };
+    exports.renderButton_unstable = renderButton_unstable;
+});
+//# sourceMappingURL=renderButton.js.map

package/lib-amd/components/Button/renderButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"renderButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAClD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEzC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC5E,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ;YAChC,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,qBAAqB,yBAWhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n const { slots, slotProps } = getSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"]}