Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './components/Button/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+1
View File
@@ -0,0 +1 @@
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './components/CompoundButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+1
View File
@@ -0,0 +1 @@
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './components/MenuButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+1
View File
@@ -0,0 +1 @@
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './components/SplitButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+1
View File
@@ -0,0 +1 @@
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './components/ToggleButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+15
View File
@@ -0,0 +1,15 @@
import * as React from 'react';
import { renderButton_unstable } from './renderButton';
import { useButton_unstable } from './useButton';
import { useButtonStyles_unstable } from './useButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Buttons give people a way to trigger an action.
*/ export const Button = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useButton_unstable(props, ref);
useButtonStyles_unstable(state);
useCustomStyleHook_unstable('useButtonStyles_unstable')(state);
return renderButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
Button.displayName = 'Button';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('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"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOR,sBAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.types.ts"],"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\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\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?: ButtonSize;\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"],"names":[],"rangeMappings":"","mappings":"AAuEA,WAQI"}
+4
View File
@@ -0,0 +1,4 @@
export { Button } from './Button';
export { renderButton_unstable } from './renderButton';
export { useButton_unstable } from './useButton';
export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","buttonClassNames","useButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
@@ -0,0 +1,15 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Renders a Button component by passing the state defined props to the appropriate slots.
*/ export const renderButton_unstable = (state)=>{
assertSlots(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ _jsxs(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
!iconOnly && state.root.children,
iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}
+37
View File
@@ -0,0 +1,37 @@
import * as React from 'react';
import { useARIAButtonProps } from '@fluentui/react-aria';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useButtonContext } from '../../contexts/ButtonContext';
/**
* Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
* @param props - User provided props to the Button component.
* @param ref - User provided ref to be passed to the Button component.
*/ export const useButton_unstable = (props, ref)=>{
const { size: contextSize } = useButtonContext();
const { appearance = 'secondary', as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
const iconShorthand = slot.optional(icon, {
elementType: 'span'
});
return {
// Props passed at the top-level
appearance,
disabled,
disabledFocusable,
iconPosition,
shape,
size,
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
components: {
root: 'button',
icon: 'span'
},
root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
elementType: 'button',
defaultProps: {
ref: ref,
type: as === 'button' ? 'button' : undefined
}
}),
icon: iconShorthand
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = slot.optional(icon, { elementType: 'span' });\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition\n components: { root: 'button', icon: 'span' },\n root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: as === 'button' ? 'button' : undefined,\n },\n }),\n icon: iconShorthand,\n };\n};\n"],"names":["React","useARIAButtonProps","getIntrinsicElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","defaultProps","type","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBR,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAC/B,GAAGH;IACJ,MAAMW,gBAAgBd,KAAKe,QAAQ,CAACJ,MAAM;QAAEK,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCT;QACAE;QACAC;QACAE;QACAC;QACAR;QACAY,UAAUC,QAAQJ,CAAAA,0BAAAA,oCAAAA,cAAeK,QAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CAA2BvB,yBAAyBS,IAAIV,mBAAmBK,MAAMK,EAAE,EAAEL,SAAS;YAC7Ga,aAAa;YACbO,cAAc;gBACZnB,KAAKA;gBACLoB,MAAMhB,OAAO,WAAW,WAAWiB;YACrC;QACF;QACAd,MAAMG;IACR;AACF,EAAE"}
@@ -0,0 +1,551 @@
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
import { shorthands, __styles, __resetStyles, mergeClasses } from '@griffel/react';
export const buttonClassNames = {
root: 'fui-Button',
icon: 'fui-Button__icon'
};
const iconSpacingVar = '--fui-Button__icon--spacing';
const buttonSpacingSmall = '3px';
const buttonSpacingSmallWithIcon = '1px';
const buttonSpacingMedium = '5px';
const buttonSpacingLarge = '8px';
const buttonSpacingLargeWithIcon = '7px';
/* Firefox has box shadow sizing issue at some zoom levels
* this will ensure the inset boxShadow is always uniform
* without affecting other browser platforms
*/
const boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1alrhcs", null, {
r: [".r1alrhcs{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".r1alrhcs:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".r1alrhcs:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".r1alrhcs[data-fui-focus-visible]{border-color:var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);border-width:1px;outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;z-index:1;}"],
s: ["@media screen and (prefers-reduced-motion: reduce){.r1alrhcs{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1alrhcs:focus{border-color:ButtonText;}.r1alrhcs:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.r1alrhcs:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", "@supports (-moz-appearance:button){.r1alrhcs[data-fui-focus-visible]{box-shadow:0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset;}}"]
});
const useIconBaseClassName = /*#__PURE__*/__resetStyles("rywnvv2", null, [".rywnvv2{align-items:center;display:inline-flex;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"]);
const useRootStyles = /*#__PURE__*/__styles({
outline: {
De3pzq: "f1c21dwh",
Jwef8y: "fjxutwb",
iro3zm: "fwiml72"
},
primary: {
De3pzq: "ffp7eso",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "f1phragk",
Jwef8y: "f15wkkf3",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "f1rq72xc",
iro3zm: "fnp9lpt",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1d6v5y2",
Bsw6fvg: "f1rirnrt",
Bjwas2f: "f1uu00uk",
Bn1d65q: ["fkvaka8", "f9a0qzu"],
Bxeuatn: "f1ux7til",
n51gp8: ["f9a0qzu", "fkvaka8"],
Bbusuzp: "f1lkg8j3",
ycbfsm: "fkc42ay",
Bqrx1nm: "fq7113v",
pgvf35: "ff1wgvm",
Bh7lczh: ["fiob0tu", "f1x4h75k"],
dpv3f4: "f1j6scgf",
Bpnjhaq: ["f1x4h75k", "fiob0tu"],
ze5xyy: "f4xjyn1",
g2kj27: "fbgcvur",
Bf756sw: "f1ks1yx8",
Bow2dr7: ["f1o6qegi", "fmxjhhp"],
Bvhedfk: "fcnxywj",
Gye4lf: ["fmxjhhp", "f1o6qegi"],
pc6evw: "f9ddjv3"
},
secondary: {},
subtle: {
De3pzq: "fhovq9v",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "fkfq4zb",
Jwef8y: "f1t94bn6",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "fnwyq0v",
Bk3fhr4: "ft1hn21",
Bmfj8id: "fuxngvv",
Bbdnnc7: "fy5bs14",
iro3zm: "fsv2rcd",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1omzyqd",
em6i61: "f1dfjoow",
vm6p8p: "f1j98vj9",
x3br3k: "fj8yq94",
ze5xyy: "f4xjyn1",
Bx3q9su: "f1et0tmh",
pc6evw: "f9ddjv3",
xd2cci: "f1wi8ngl"
},
transparent: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "fkfq4zb",
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "f139oj5f",
Bk3fhr4: "ft1hn21",
Bmfj8id: "fuxngvv",
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1fg1p5m",
em6i61: "f1dfjoow",
vm6p8p: "f1j98vj9",
Bqrx1nm: "f1tme0vf",
ze5xyy: "f4xjyn1",
g2kj27: "f18onu3q",
pc6evw: "f9ddjv3"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9"
},
rounded: {},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
},
small: {
Bf4jedk: "fh7ncta",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fneth5b",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
smallWithIcon: {
Byoj8tv: "f1brlhvm",
z8tnut: "f1sl3k7w"
},
medium: {},
large: {
Bf4jedk: "f14es27b",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f4db1ww",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
largeWithIcon: {
Byoj8tv: "fy7v416",
z8tnut: "f1a1bwwz"
}
}, {
d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
p: -1
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
p: -1
}], ".fh7ncta{min-width:64px;}", [".fneth5b{padding:3px var(--spacingHorizontalS);}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", [".f4db1ww{padding:8px var(--spacingHorizontalL);}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1uu00uk{border-top-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f9a0qzu{border-left-color:HighlightText;}.fkvaka8{border-right-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ux7til{border-bottom-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1et0tmh:hover .fui-Button__icon{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1wi8ngl:hover:active .fui-Button__icon{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1tme0vf:hover{background-color:var(--colorTransparentBackground);}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f18onu3q:hover:active{background-color:var(--colorTransparentBackground);}}", {
m: "(forced-colors: active)"
}]]
});
const useRootDisabledStyles = /*#__PURE__*/__styles({
base: {
De3pzq: "f1bg9a2p",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr",
Bfinmwp: "f15x8b5r",
Jwef8y: "f1falr9n",
Bgoe8wy: "f12mpcsy",
Bwzppfd: ["f1gwvigk", "f18rmfxp"],
oetu4i: "f1jnshp0",
gg5e9n: ["f18rmfxp", "f1gwvigk"],
Bi91k9c: "fvgxktp",
eoavqd: "fphbwmw",
Bk3fhr4: "f19vpps7",
Bmfj8id: "fv5swzo",
Bbdnnc7: "f1al02dq",
iro3zm: "f1t6o4dc",
b661bw: "f10ztigi",
Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
B9zn80p: "f12zbtn2",
Bpld233: ["f1gzf82w", "f1ft5sdu"],
B2d53fq: "fcvwxyo",
c3iz72: "f8w4c43",
em6i61: "f1ol4fw6",
vm6p8p: "f1q1lw4e",
x3br3k: "f1dwjv2g"
},
highContrast: {
Bsw6fvg: "f4lkoma",
Bjwas2f: "fg455y9",
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
Bxeuatn: "f1cwzwz",
n51gp8: ["f14g86mu", "f1rvyvqg"],
Bbusuzp: "f1dcs8yz",
Bm2fdqk: "fuigjrg",
G867l3: "fjwq6ea",
gdbnj: ["f1lr3nhc", "f1mbxvi6"],
mxns5l: "fn5gmvv",
o3nasb: ["f1mbxvi6", "f1lr3nhc"],
Bqrx1nm: "f1vmkb5g",
pgvf35: "f53ppgq",
Bh7lczh: ["f1663y11", "f80fkiy"],
dpv3f4: "f18v5270",
Bpnjhaq: ["f80fkiy", "f1663y11"],
ze5xyy: "f1kc2mi9",
Bx3q9su: "f4dhi0o",
g2kj27: "f1y0svfh",
Bf756sw: "fihuait",
Bow2dr7: ["fnxhupq", "fyd6l6x"],
Bvhedfk: "fx507ft",
Gye4lf: ["fyd6l6x", "fnxhupq"],
pc6evw: "fb3rf2x",
xd2cci: "fequ9m0"
},
outline: {
De3pzq: "f1c21dwh",
Jwef8y: "f9ql6rf",
iro3zm: "f3h1zc4"
},
primary: {
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
},
secondary: {},
subtle: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Jwef8y: "f9ql6rf",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
iro3zm: "f3h1zc4",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
},
transparent: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Jwef8y: "f9ql6rf",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
iro3zm: "f3h1zc4",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
}
}, {
d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f15x8b5r .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1al02dq:hover .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f1dwjv2g:hover:active .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}"],
m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fuigjrg .fui-Button__icon{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1vmkb5g:hover{background-color:ButtonFace;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f18v5270:hover{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f4dhi0o:hover .fui-Button__icon{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1y0svfh:hover:active{background-color:ButtonFace;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fx507ft:hover:active{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fequ9m0:hover:active .fui-Button__icon{color:GrayText;}}", {
m: "(forced-colors: active)"
}]]
});
const useRootFocusStyles = /*#__PURE__*/__styles({
circular: {
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
rounded: {},
square: {
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
},
primary: {
B8q5s1w: "f17t0x8g",
Bci5o5g: ["f194v5ow", "fk7jm04"],
n8qw10: "f1qgg65p",
Bdrgwmp: ["fk7jm04", "f194v5ow"],
j6ew2k: ["fhgccpy", "fjo7pq6"],
he4mth: "f32wu9k",
Byr4aka: "fu5nqqq",
lks7q5: ["f13prjl2", "f1nl83rv"],
Bnan3qt: "f1czftr5",
k1dn9: ["f1nl83rv", "f13prjl2"],
Boium3a: ["f12k37oa", "fdnykm2"],
tm8e47: "fr96u23"
},
small: {
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fazmxh"
},
medium: {},
large: {
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1b6alqh"
}
}, {
d: [[".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
p: -1
}], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
p: -1
}], ".f17t0x8g[data-fui-focus-visible]{border-top-color:var(--colorStrokeFocus2);}", ".f194v5ow[data-fui-focus-visible]{border-right-color:var(--colorStrokeFocus2);}", ".fk7jm04[data-fui-focus-visible]{border-left-color:var(--colorStrokeFocus2);}", ".f1qgg65p[data-fui-focus-visible]{border-bottom-color:var(--colorStrokeFocus2);}", ".fhgccpy[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}", ".fjo7pq6[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}", ".f32wu9k[data-fui-focus-visible]:hover{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;}", ".fu5nqqq[data-fui-focus-visible]:hover{border-top-color:var(--colorStrokeFocus2);}", ".f13prjl2[data-fui-focus-visible]:hover{border-right-color:var(--colorStrokeFocus2);}", ".f1nl83rv[data-fui-focus-visible]:hover{border-left-color:var(--colorStrokeFocus2);}", ".f1czftr5[data-fui-focus-visible]:hover{border-bottom-color:var(--colorStrokeFocus2);}", [".fazmxh[data-fui-focus-visible]{border-radius:var(--borderRadiusSmall);}", {
p: -1
}], [".f1b6alqh[data-fui-focus-visible]{border-radius:var(--borderRadiusLarge);}", {
p: -1
}]],
t: ["@supports (-moz-appearance:button){.f12k37oa[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}.fdnykm2[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}}", "@supports (-moz-appearance:button){.fr96u23[data-fui-focus-visible]:hover{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset;}}"]
});
const useRootIconOnlyStyles = /*#__PURE__*/__styles({
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fu97m5z",
Bf4jedk: "f17fgpbq",
B2u0y6b: "f1jt17bm"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f18ktai2",
Bf4jedk: "fwbmr0d",
B2u0y6b: "f44c6la"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1hbd1aw",
Bf4jedk: "f12clzc2",
B2u0y6b: "fjy1crr"
}
}, {
d: [[".fu97m5z{padding:1px;}", {
p: -1
}], ".f17fgpbq{min-width:24px;}", ".f1jt17bm{max-width:24px;}", [".f18ktai2{padding:5px;}", {
p: -1
}], ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", [".f1hbd1aw{padding:7px;}", {
p: -1
}], ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
});
const useIconStyles = /*#__PURE__*/__styles({
small: {
Be2twd7: "fe5j1ua",
Bqenvij: "fjamq6b",
a9b677: "f64fuq3",
Bqrlyyl: "fbaiahx"
},
medium: {},
large: {
Be2twd7: "f1rt2boy",
Bqenvij: "frvgh55",
a9b677: "fq4mcun",
Bqrlyyl: "f1exjqw5"
},
before: {
t21cq0: ["f1nizpg2", "f1a695kz"]
},
after: {
Frg6f3: ["f1a695kz", "f1nizpg2"]
}
}, {
d: [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
});
export const useButtonStyles_unstable = state => {
'use no memo';
const rootBaseClassName = useRootBaseClassName();
const iconBaseClassName = useIconBaseClassName();
const rootStyles = useRootStyles();
const rootDisabledStyles = useRootDisabledStyles();
const rootFocusStyles = useRootFocusStyles();
const rootIconOnlyStyles = useRootIconOnlyStyles();
const iconStyles = useIconStyles();
const {
appearance,
disabled,
disabledFocusable,
icon,
iconOnly,
iconPosition,
shape,
size
} = state;
state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
// Disabled styles
(disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
// Focus styles
appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape],
// Icon-only styles
iconOnly && rootIconOnlyStyles[size],
// User provided class name
state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
import * as React from 'react';
import { renderCompoundButton_unstable } from './renderCompoundButton';
import { useCompoundButton_unstable } from './useCompoundButton';
import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* CompoundButtons are buttons that can have secondary content that adds extra information to the user.
*/ export const CompoundButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCompoundButton_unstable(props, ref);
useCompoundButtonStyles_unstable(state);
useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);
return renderCompoundButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
CompoundButton.displayName = 'CompoundButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"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"],"names":[],"rangeMappings":"","mappings":"AAkBA,WACsD"}
@@ -0,0 +1,4 @@
export { CompoundButton } from './CompoundButton';
export { renderCompoundButton_unstable } from './renderCompoundButton';
export { useCompoundButton_unstable } from './useCompoundButton';
export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
@@ -0,0 +1,20 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Renders a CompoundButton component by passing the state defined props to the appropriate slots.
*/ export const renderCompoundButton_unstable = (state)=>{
assertSlots(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ _jsxs(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
!iconOnly && /*#__PURE__*/ _jsxs(state.contentContainer, {
children: [
state.root.children,
state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
]
}),
iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && (\n <state.contentContainer>\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.contentContainer>\n )}\n\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,0BACA,MAACD,MAAMK,gBAAgB;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}
@@ -0,0 +1,30 @@
import * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { useButton_unstable } from '../Button/index';
/**
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
* @param props - User provided props to the CompoundButton component.
* @param ref - User provided ref to be passed to the CompoundButton component.
*/ export const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
var _state_icon, _state_secondaryContent;
const state = {
// Button state
...useButton_unstable(props, ref),
// Slots definition
components: {
root: 'button',
icon: 'span',
contentContainer: 'span',
secondaryContent: 'span'
},
contentContainer: slot.always(contentContainer, {
elementType: 'span'
}),
secondaryContent: slot.optional(secondaryContent, {
elementType: 'span'
})
};
// Recalculate iconOnly to take into account secondaryContent.
state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\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"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGN,mBAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,KAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,KAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,EAAAA,cAAAA,MAAMG,IAAI,cAAVH,kCAAAA,YAAYS,QAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,GAACT,0BAAAA,MAAMH,gBAAgB,cAAtBG,8CAAAA,wBAAwBS,QAAQ;IAErG,OAAOT;AACT,EAAE"}
@@ -0,0 +1,217 @@
import { tokens } from '@fluentui/react-theme';
import { mergeClasses, __styles } from '@griffel/react';
import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
export const compoundButtonClassNames = {
root: 'fui-CompoundButton',
icon: 'fui-CompoundButton__icon',
contentContainer: 'fui-CompoundButton__contentContainer',
secondaryContent: 'fui-CompoundButton__secondaryContent'
};
const useRootStyles = /*#__PURE__*/__styles({
base: {
Bqenvij: "f11ysow2",
J657lq: "f1um431h",
Jlnjib: "fte7hqw",
Bc29nj9: "f1yh8ef3"
},
highContrast: {
pu7qz5: "fi3u9nm",
B10010i: "f1tdgb9w"
},
outline: {},
primary: {
J657lq: "foe7gw6",
Jlnjib: "fvxlz81",
Bc29nj9: "f1c2mdy",
B8ia98v: "f1r39r2s"
},
secondary: {},
subtle: {
J657lq: "f1um431h",
Jlnjib: "fte7hqw",
Bc29nj9: "f1yh8ef3",
pu7qz5: "f1xoeh18",
B10010i: "f1ca1nd7"
},
transparent: {
J657lq: "f1um431h",
Jlnjib: "f1wn9xqz",
Bc29nj9: "f1a8q4d0"
},
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1ge6w2w",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fnnf4v2",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f14s4sho",
Be2twd7: "fod5ikn",
Bg96gwp: "faaz57k"
},
disabled: {
J657lq: "f1rlv8bf",
Jlnjib: "fd1dbtm",
Bc29nj9: "f1vqmdmi"
},
disabledHighContrast: {
B8ia98v: "f1csacz4",
pu7qz5: "f1s5tkfe",
B10010i: "fs0rda3"
}
}, {
d: [".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", [".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}", {
p: -1
}], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fnnf4v2{padding:14px var(--spacingHorizontalM) var(--spacingHorizontalL) var(--spacingHorizontalM);}", {
p: -1
}], [".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}", {
p: -1
}], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
m: [["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1xoeh18:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ca1nd7:hover:active .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
m: "(forced-colors: active)"
}]]
});
const useRootIconOnlyStyles = /*#__PURE__*/__styles({
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1t35pdg",
B2u0y6b: "ft5vyj6",
Bf4jedk: "f17suaiq"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1r1wyb6",
B2u0y6b: "fdczgix",
Bf4jedk: "fjdcg9m"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1bnz8pu",
B2u0y6b: "fww51uw",
Bf4jedk: "f1qhsl2h"
}
}, {
d: [[".f1t35pdg{padding:var(--spacingHorizontalXS);}", {
p: -1
}], ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", [".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}", {
p: -1
}], ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
p: -1
}], ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
});
const useIconStyles = /*#__PURE__*/__styles({
base: {
Be2twd7: "fndrnj9",
Bqenvij: "fbhnoac",
a9b677: "feqmc2u"
},
before: {
t21cq0: ["fkujibs", "f199hnxi"]
},
after: {
Frg6f3: ["f199hnxi", "fkujibs"]
}
}, {
d: [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}"]
});
const useContentContainerStyles = /*#__PURE__*/__styles({
base: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
fsow6f: ["f1o700av", "fes3tcz"]
}
}, {
d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"]
});
const useSecondaryContentStyles = /*#__PURE__*/__styles({
base: {
Bg96gwp: "flkuc6h",
Bhrd7zp: "figsok6"
},
small: {
Be2twd7: "fy9rknc"
},
medium: {
Be2twd7: "fy9rknc"
},
large: {
Be2twd7: "fkhj508"
}
}, {
d: [".flkuc6h{line-height:100%;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
});
export const useCompoundButtonStyles_unstable = state => {
'use no memo';
const rootStyles = useRootStyles();
const rootIconOnlyStyles = useRootIconOnlyStyles();
const iconStyles = useIconStyles();
const contentContainerStyles = useContentContainerStyles();
const secondaryContentStyles = useSecondaryContentStyles();
const {
appearance,
disabled,
disabledFocusable,
iconOnly,
iconPosition,
size
} = state;
state.root.className = mergeClasses(compoundButtonClassNames.root,
// Root styles
rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size],
// Disabled styles
(disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast,
// Icon-only styles
iconOnly && rootIconOnlyStyles[size],
// User provided class name
state.root.className);
state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
if (state.icon) {
state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
}
useButtonStyles_unstable(state);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,16 @@
import * as React from 'react';
import { renderMenuButton_unstable } from './renderMenuButton';
import { useMenuButton_unstable } from './useMenuButton';
import { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
* menus.
*/ export const MenuButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useMenuButton_unstable(props, ref);
useMenuButtonStyles_unstable(state);
useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);
return renderMenuButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
MenuButton.displayName = 'MenuButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('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"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"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"],"names":[],"rangeMappings":"","mappings":"AAaA,WACuE"}
@@ -0,0 +1,4 @@
export { MenuButton } from './MenuButton';
export { renderMenuButton_unstable } from './renderMenuButton';
export { useMenuButton_unstable } from './useMenuButton';
export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AACA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
@@ -0,0 +1,15 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
*/ export const renderMenuButton_unstable = (state)=>{
assertSlots(state);
const { icon, iconOnly } = state;
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
!iconOnly && state.root.children,
(!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ _jsx(state.menuIcon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <state.root>\n {state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMC,IAAI,kBAAI,KAACD,MAAMC,IAAI;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;YAC/B,CAAA,CAACF,YAAY,EAACD,iBAAAA,2BAAAA,KAAMG,QAAQ,CAAD,KAAMJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;;;AAG1E,EAAE"}
@@ -0,0 +1,31 @@
import * as React from 'react';
import { ChevronDownRegular } from '@fluentui/react-icons';
import { slot } from '@fluentui/react-utilities';
import { useButton_unstable } from '../Button/index';
/**
* Given user props, returns the final state for a MenuButton.
*/ export const useMenuButton_unstable = ({ menuIcon, ...props }, ref)=>{
'use no memo';
const buttonState = useButton_unstable(props, ref);
// force aria-expanded to be a boolean, not a string
buttonState.root['aria-expanded'] = props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false;
return {
// Button state
...buttonState,
// State calculated from a set of props
iconOnly: Boolean(!props.children),
// Slots definition
components: {
root: 'button',
icon: 'span',
menuIcon: 'span'
},
menuIcon: slot.optional(menuIcon, {
defaultProps: {
children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
},
renderByDefault: true,
elementType: 'span'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } 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 'use no memo';\n\n const buttonState = useButton_unstable(props, ref);\n // force aria-expanded to be a boolean, not a string\n buttonState.root['aria-expanded'] = props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : 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: slot.optional(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","optional","defaultProps","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpC,EAAEC,QAAQ,EAAE,GAAGC,OAAwB,EACvCC;IAEA;IAEA,MAAMC,cAAcL,mBAAmBG,OAAOC;IAC9C,oDAAoD;IACpDC,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCE,UAAUC,QAAQ,CAACL,MAAMM,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNT,UAAU;QACZ;QAEAA,UAAUH,KAAKa,QAAQ,CAACV,UAAU;YAChCW,cAAc;gBACZJ,wBAAU,oBAACX;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}
@@ -0,0 +1,117 @@
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
import { tokens } from '@fluentui/react-theme';
import { mergeClasses, __styles, shorthands } from '@griffel/react';
import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
export const menuButtonClassNames = {
root: 'fui-MenuButton',
icon: 'fui-MenuButton__icon',
menuIcon: 'fui-MenuButton__menuIcon'
};
const useRootExpandedStyles = /*#__PURE__*/__styles({
base: {
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g"
},
outline: {
g2u3we: "f1ly1fcm",
h3c5rm: ["fi8bssc", "fj6btzu"],
B9xav0g: "f1s9tnsa",
zhjwy3: ["fj6btzu", "fi8bssc"],
B4j52fo: "fgx37oo",
Bekrc4i: ["f130t4y6", "f1efpmoh"],
Bn0qgzm: "fv51ejd",
ibv6hh: ["f1efpmoh", "f130t4y6"],
sj55zd: "f14nttnl"
},
primary: {
De3pzq: "f8w4g0q"
},
secondary: {
De3pzq: "f1nfm20t",
g2u3we: "f1ly1fcm",
h3c5rm: ["fi8bssc", "fj6btzu"],
B9xav0g: "f1s9tnsa",
zhjwy3: ["fj6btzu", "fi8bssc"],
sj55zd: "f14nttnl"
},
subtle: {
De3pzq: "fq5gl1p",
sj55zd: "f1eryozh"
},
transparent: {
De3pzq: "f1q9pm1r",
sj55zd: "f1qj7y59"
}
}, {
d: [".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
});
const useIconExpandedStyles = /*#__PURE__*/__styles({
outline: {
sj55zd: "f14nttnl"
},
primary: {},
secondary: {
sj55zd: "f14nttnl"
},
subtle: {
sj55zd: "f1qj7y59"
},
transparent: {
sj55zd: "f1qj7y59"
},
highContrast: {
ze5xyy: "f4xjyn1"
}
}, {
d: [".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
m: "(forced-colors: active)"
}]]
});
const useMenuIconStyles = /*#__PURE__*/__styles({
base: {
Bg96gwp: "fez10in"
},
small: {
Be2twd7: "f1ugzwwg",
Bqenvij: "fvblgha",
Bg96gwp: "fwrc4pm",
a9b677: "frx94fk"
},
medium: {
Be2twd7: "f1ugzwwg",
Bqenvij: "fvblgha",
Bg96gwp: "fwrc4pm",
a9b677: "frx94fk"
},
large: {
Be2twd7: "f4ybsrx",
Bqenvij: "fd461yt",
Bg96gwp: "faaz57k",
a9b677: "fjw5fx7"
},
notIconOnly: {
Frg6f3: ["fbyavb5", "fm0x6gh"]
}
}, {
d: [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".frx94fk{width:12px;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fjw5fx7{width:16px;}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"]
});
export const useMenuButtonStyles_unstable = state => {
'use no memo';
const rootExpandedStyles = useRootExpandedStyles();
const iconExpandedStyles = useIconExpandedStyles();
const menuIconStyles = useMenuIconStyles();
state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
}
if (state.menuIcon) {
state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
}
useButtonStyles_unstable({
...state,
iconPosition: 'before'
});
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,16 @@
import * as React from 'react';
import { renderSplitButton_unstable } from './renderSplitButton';
import { useSplitButton_unstable } from './useSplitButton';
import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
* action, while interacting with the second one opens a menu with secondary actions.
*/ export const SplitButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSplitButton_unstable(props, ref);
useSplitButtonStyles_unstable(state);
useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);
return renderSplitButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
SplitButton.displayName = 'SplitButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"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' | 'as'> &\n Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"rangeMappings":"","mappings":"AA0BA,WAE4D"}
@@ -0,0 +1,4 @@
export { SplitButton } from './SplitButton';
export { renderSplitButton_unstable } from './renderSplitButton';
export { useSplitButton_unstable } from './useSplitButton';
export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
*/ export const renderSplitButton_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.primaryActionButton && /*#__PURE__*/ _jsx(state.primaryActionButton, {}),
state.menuButton && /*#__PURE__*/ _jsx(state.menuButton, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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 assertSlots<SplitButtonSlots>(state);\n\n return (\n <state.root>\n {state.primaryActionButton && <state.primaryActionButton />}\n {state.menuButton && <state.menuButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSplitButton_unstable","state","root","primaryActionButton","menuButton"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,mBAAmB,kBAAI,KAACF,MAAME,mBAAmB;YACvDF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
@@ -0,0 +1,66 @@
import * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
import { Button } from '../Button/Button';
import { MenuButton } from '../MenuButton/MenuButton';
/**
* Given user props, defines default props for the SplitButton and returns processed state.
* @param props - User provided props to the SplitButton component.
* @param ref - User provided ref to be passed to the SplitButton component.
*/ export const useSplitButton_unstable = (props, ref)=>{
const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium' } = props;
const baseId = useId('splitButton-');
const menuButtonShorthand = slot.optional(menuButton, {
defaultProps: {
appearance,
disabled,
disabledFocusable,
menuIcon,
shape,
size
},
renderByDefault: true,
elementType: MenuButton
});
const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
defaultProps: {
appearance,
children,
disabled,
disabledFocusable,
icon,
iconPosition,
id: baseId + '__primaryActionButton',
shape,
size
},
renderByDefault: true,
elementType: Button
});
// Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
// user.
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
}
return {
// Props passed at the top-level
appearance,
disabled,
disabledFocusable,
iconPosition,
shape,
size,
components: {
root: 'div',
menuButton: MenuButton,
primaryActionButton: Button
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
...props
}), {
elementType: 'div'
}),
menuButton: menuButtonShorthand,
primaryActionButton: primaryActionButtonShorthand
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAClF,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAChB,GAAGZ;IACJ,MAAMa,SAASlB,MAAM;IAErB,MAAMmB,sBAAsBlB,KAAKmB,QAAQ,CAACP,YAAY;QACpDQ,cAAc;YACZd;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAapB;IACf;IACA,MAAMqB,+BAA+BvB,KAAKmB,QAAQ,CAACL,qBAAqB;QACtEM,cAAc;YACZd;YACAC;YACAC;YACAC;YACAC;YACAC;YACAa,IAAIP,SAAS;YACbF;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAarB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEiB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChClB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAS,YAAY;YAAEC,MAAM;YAAOd,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/EyB,MAAM1B,KAAK2B,MAAM,CAAC7B,yBAAyB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEkB,aAAa;QAAM;QAC3FV,YAAYM;QACZJ,qBAAqBS;IACvB;AACF,EAAE"}
@@ -0,0 +1,106 @@
import { __styles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const splitButtonClassNames = {
root: 'fui-SplitButton',
menuButton: 'fui-SplitButton__menuButton',
primaryActionButton: 'fui-SplitButton__primaryActionButton'
};
// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
const MIN_TARGET_SIZE = '24px';
const useFocusStyles = /*#__PURE__*/__styles({
primaryActionButton: {
B6xbmo0: ["f1x37qnr", "f1um7c6d"],
kdpuga: ["fn4c73s", "f6pwzcr"]
},
menuButton: {
lbo84a: ["frrbwxo", "f1rgcpbv"],
dm238s: ["f1um7c6d", "f1x37qnr"],
Bw81rd7: ["f6pwzcr", "fn4c73s"]
}
}, {
d: [".f1x37qnr[data-fui-focus-visible]{border-top-right-radius:0;}", ".f1um7c6d[data-fui-focus-visible]{border-top-left-radius:0;}", ".fn4c73s[data-fui-focus-visible]{border-bottom-right-radius:0;}", ".f6pwzcr[data-fui-focus-visible]{border-bottom-left-radius:0;}", ".frrbwxo[data-fui-focus-visible]{border-left-width:0;}", ".f1rgcpbv[data-fui-focus-visible]{border-right-width:0;}"]
});
const useRootStyles = /*#__PURE__*/__styles({
base: {
mc9l5x: "ftuwxu6",
Brf1p80: "fsxf2b5",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
kn2xc0: ["f14uur2j", "fc1btbj"],
Bs76p8a: ["fye5tvs", "fc597qq"],
cuxpm9: ["f1e8brtx", "fr36rk3"],
Biffepf: ["fxp12j1", "f1m6nt2y"],
Defnvf: ["fr7y8no", "f1dn0c6m"],
z0pv9t: "f1b65x5h"
},
outline: {},
primary: {
B1l9wao: ["f4rm5b0", "f1tuwo13"],
lcnrd8: ["fdwdeeo", "f1ezdslh"],
Brbpp8k: ["fckzjn8", "f8ohr2i"],
Bcsxniv: ["ff0tx2l", "fnrj3rw"],
tl7e51: ["f3jppgx", "f1m2s8ie"],
mba178: ["f96h41g", "fdxf0pi"]
},
secondary: {},
subtle: {
B1l9wao: ["f16kf41h", "fxiafvi"],
lcnrd8: ["ffl6mx9", "f1t5sw6t"],
Brbpp8k: ["f1t42bc8", "fsw5hli"]
},
transparent: {
B1l9wao: ["f16kf41h", "fxiafvi"],
lcnrd8: ["ffl6mx9", "f1t5sw6t"],
Brbpp8k: ["f1t42bc8", "fsw5hli"]
},
circular: {},
rounded: {},
square: {},
disabled: {
B1l9wao: ["f10xrnr8", "f15nylwb"],
lcnrd8: ["f11fwhjz", "f18vtcsx"],
Brbpp8k: ["f31btwb", "fzgm9gq"]
},
disabledHighContrast: {
Bcsxniv: ["fj2q5vi", "f13tct40"],
tl7e51: ["fb2mzc7", "f179dhpp"],
mba178: ["f1ma39qa", "f1nzpdru"]
}
}, {
d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1b65x5h .fui-SplitButton__menuButton{min-width:24px;}", ".f4rm5b0 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1tuwo13 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".f16kf41h .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackground);}", ".fxiafvi .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackground);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
h: [".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fckzjn8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f8ohr2i:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".ffl6mx9:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundHover);}", ".f1t5sw6t:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundHover);}", ".f1t42bc8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundPressed);}", ".fsw5hli:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundPressed);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
m: [["@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f96h41g:hover:active .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fdxf0pi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}]]
});
export const useSplitButtonStyles_unstable = state => {
'use no memo';
const rootStyles = useRootStyles();
const focusStyles = useFocusStyles();
const {
appearance,
disabled,
disabledFocusable
} = state;
state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
if (state.menuButton) {
state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
}
if (state.primaryActionButton) {
state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
import * as React from 'react';
import { renderToggleButton_unstable } from './renderToggleButton';
import { useToggleButton_unstable } from './useToggleButton';
import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* ToggleButtons are buttons that toggle between two defined states when triggered.
*/ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useToggleButton_unstable(props, ref);
useToggleButtonStyles_unstable(state);
useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);
return renderToggleButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToggleButton.displayName = 'ToggleButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"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"],"names":[],"rangeMappings":"","mappings":"AAqBA,WAA2F"}
@@ -0,0 +1,4 @@
export { ToggleButton } from './ToggleButton';
export { renderToggleButton_unstable } from './renderToggleButton';
export { useToggleButton_unstable } from './useToggleButton';
export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
@@ -0,0 +1 @@
export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"rangeMappings":"","mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}
@@ -0,0 +1,12 @@
import * as React from 'react';
import { useToggleState } from '../../utils/useToggleState';
import { useButton_unstable } from '../Button/useButton';
/**
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
* processed state.
* @param props - User provided props to the ToggleButton component.
* @param ref - User provided ref to be passed to the ToggleButton component.
*/ export const useToggleButton_unstable = (props, ref)=>{
const buttonState = useButton_unstable(props, ref);
return useToggleState(props, buttonState);
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"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"],"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,QAAQ,sBAAsB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAE9C,OAAOJ,eAAeG,OAAOE;AAC/B,EAAE"}
@@ -0,0 +1,361 @@
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
import { shorthands, mergeClasses, __styles } from '@griffel/react';
import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
export const toggleButtonClassNames = {
root: 'fui-ToggleButton',
icon: 'fui-ToggleButton__icon'
};
const useRootCheckedStyles = /*#__PURE__*/__styles({
base: {
De3pzq: "f1nfm20t",
g2u3we: "fj3muxo",
h3c5rm: ["f1akhkt", "f1lxtadh"],
B9xav0g: "f1aperda",
zhjwy3: ["f1lxtadh", "f1akhkt"],
sj55zd: "f14nttnl",
B4j52fo: "f192inf7",
Bekrc4i: ["f5tn483", "f1ojsxk5"],
Bn0qgzm: "f1vxd6vx",
ibv6hh: ["f1ojsxk5", "f5tn483"],
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g",
Jwef8y: "f1knas48",
Bgoe8wy: "fvcxoqz",
Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
oetu4i: "f1xlaoq0",
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
Bi91k9c: "feu1g3u",
iro3zm: "f141de4g",
b661bw: "f11v6sdu",
Bk6r4ia: ["f9yn8i4", "f1ajwf28"],
B9zn80p: "f1uwu36w",
Bpld233: ["f1ajwf28", "f9yn8i4"],
B2d53fq: "f9olfzr"
},
highContrast: {
Bsw6fvg: "f1rirnrt",
Bjwas2f: "f132fbg1",
Bn1d65q: ["f1ene5x0", "fzbc999"],
Bxeuatn: "f6jgcol",
n51gp8: ["fzbc999", "f1ene5x0"],
Bbusuzp: "f1lkg8j3",
ycbfsm: "fkc42ay",
Bqrx1nm: "fq7113v",
pgvf35: "ff1wgvm",
Bh7lczh: ["fiob0tu", "f1x4h75k"],
dpv3f4: "f1j6scgf",
Bpnjhaq: ["f1x4h75k", "fiob0tu"],
ze5xyy: "f4xjyn1",
g2kj27: "fbgcvur",
Bf756sw: "f1ks1yx8",
Bow2dr7: ["f1o6qegi", "fmxjhhp"],
Bvhedfk: "fcnxywj",
Gye4lf: ["fmxjhhp", "f1o6qegi"],
pc6evw: "f9ddjv3",
F3bflw: 0,
mxns5l: 0,
B0tp99d: 0,
l9kbep: 0,
Bg4echp: 0,
o3nasb: 0,
B55dcl7: 0,
By5cl00: 0,
Bnk1xnq: 0,
gdbnj: 0,
Bw5jppy: 0,
B8jyv7h: 0,
ka51wi: 0,
G867l3: 0,
abbn9y: 0,
Btyszwp: 0,
Bi9mhhg: "f1mh9o5k",
B7d2ofm: "fkom8lu"
},
outline: {
De3pzq: "f1q9pm1r",
g2u3we: "fj3muxo",
h3c5rm: ["f1akhkt", "f1lxtadh"],
B9xav0g: "f1aperda",
zhjwy3: ["f1lxtadh", "f1akhkt"],
B4j52fo: "fgx37oo",
Bekrc4i: ["f130t4y6", "f1efpmoh"],
Bn0qgzm: "fv51ejd",
ibv6hh: ["f1efpmoh", "f130t4y6"],
Jwef8y: "fjxutwb",
iro3zm: "fwiml72",
B8q5s1w: "fcaw57c",
Bci5o5g: ["fpwd27e", "f1999bjr"],
n8qw10: "f1hi52o4",
Bdrgwmp: ["f1999bjr", "fpwd27e"]
},
primary: {
De3pzq: "f8w4g0q",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "f1phragk",
Jwef8y: "f15wkkf3",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "f1rq72xc",
iro3zm: "fnp9lpt",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1d6v5y2"
},
secondary: {},
subtle: {
De3pzq: "fq5gl1p",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "f1eryozh",
Jwef8y: "f1t94bn6",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "fnwyq0v",
iro3zm: "fsv2rcd",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1omzyqd"
},
transparent: {
De3pzq: "f1q9pm1r",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
sj55zd: "f1qj7y59",
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
Bi91k9c: "f139oj5f",
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"],
B2d53fq: "f1fg1p5m"
}
}, {
d: [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1mh9o5k:focus{border:1px solid HighlightText;}}", {
p: -2,
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fkom8lu:focus{outline-color:Highlight;}}", {
m: "(forced-colors: active)"
}]]
});
const useRootDisabledStyles = /*#__PURE__*/__styles({
base: {
De3pzq: "f1bg9a2p",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
sj55zd: "f1s2aq7o",
Jwef8y: "f1falr9n",
Bgoe8wy: "f12mpcsy",
Bwzppfd: ["f1gwvigk", "f18rmfxp"],
oetu4i: "f1jnshp0",
gg5e9n: ["f18rmfxp", "f1gwvigk"],
Bi91k9c: "fvgxktp",
iro3zm: "f1t6o4dc",
b661bw: "f10ztigi",
Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
B9zn80p: "f12zbtn2",
Bpld233: ["f1gzf82w", "f1ft5sdu"],
B2d53fq: "fcvwxyo"
},
outline: {},
primary: {
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
},
secondary: {},
subtle: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
},
transparent: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: ["f11589ue", "f1pdflbu"],
B9xav0g: "f1q5o8ev",
zhjwy3: ["f1pdflbu", "f11589ue"],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: ["fr80ssc", "fecsdlb"],
oetu4i: "f1ukrpxl",
gg5e9n: ["fecsdlb", "fr80ssc"],
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
B9zn80p: "f16h9ulv",
Bpld233: ["fx2bmrt", "fs4ktlq"]
}
}, {
d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}"]
});
const useIconCheckedStyles = /*#__PURE__*/__styles({
subtleOrTransparent: {
sj55zd: "f1qj7y59"
},
highContrast: {
ycbfsm: "fg4l7m0"
}
}, {
d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
m: [["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}]]
});
const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
base: {
Bsw6fvg: "f4lkoma",
Bjwas2f: "f1bauw5b",
Bn1d65q: ["fbpknfk", "fedl69w"],
Bxeuatn: "f15s25nd",
n51gp8: ["fedl69w", "fbpknfk"],
Bbusuzp: "f1e4kh5",
ycbfsm: "fg4l7m0"
},
disabled: {
Bjwas2f: "fg455y9",
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
Bxeuatn: "f1cwzwz",
n51gp8: ["f14g86mu", "f1rvyvqg"],
Bbusuzp: "f1dcs8yz",
G867l3: "fjwq6ea",
gdbnj: ["f1lr3nhc", "f1mbxvi6"],
mxns5l: "fn5gmvv",
o3nasb: ["f1mbxvi6", "f1lr3nhc"]
}
}, {
m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}]]
});
export const useToggleButtonStyles_unstable = state => {
'use no memo';
const rootCheckedStyles = useRootCheckedStyles();
const rootDisabledStyles = useRootDisabledStyles();
const iconCheckedStyles = useIconCheckedStyles();
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
const {
appearance,
checked,
disabled,
disabledFocusable
} = state;
state.root.className = mergeClasses(toggleButtonClassNames.root,
// Primary high contrast styles
appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
// Checked styles
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
// Disabled styles
(disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
// User provided class name
state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
}
useButtonStyles_unstable(state);
return state;
};
File diff suppressed because one or more lines are too long
+14
View File
@@ -0,0 +1,14 @@
import * as React from 'react';
const buttonContext = React.createContext(undefined);
const buttonContextDefaultValue = {};
/**
* @internal
* Internal context provider used to update default values between internal components
*/ export const ButtonContextProvider = buttonContext.Provider;
/**
* @internal
* Internal context hook used to update default values between internal components
*/ export const useButtonContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;CAGC,GACD,OAAO,MAAMC,mBAAmB;QAAMP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAAwB,EAAE"}
+1
View File
@@ -0,0 +1 @@
export { ButtonContextProvider, useButtonContext } from './ButtonContext';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"rangeMappings":"","mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}
+7
View File
@@ -0,0 +1,7 @@
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
export { useToggleState } from './utils/index';
export { ButtonContextProvider, useButtonContext } from './contexts/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"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\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"rangeMappings":";;;;;;","mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}
+1
View File
@@ -0,0 +1 @@
export { useToggleState } from './useToggleState';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"rangeMappings":"","mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB"}
+34
View File
@@ -0,0 +1,34 @@
import * as React from 'react';
import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
export function useToggleState(props, state) {
const { checked, defaultChecked, disabled, disabledFocusable } = props;
const { onClick, role } = state.root;
const [checkedValue, setCheckedValue] = useControllableState({
state: checked,
defaultState: defaultChecked,
initialState: false
});
const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
const onToggleClick = React.useCallback((ev)=>{
if (!disabled && !disabledFocusable) {
if (ev.defaultPrevented) {
return;
}
setCheckedValue(!checkedValue);
}
}, [
checkedValue,
disabled,
disabledFocusable,
setCheckedValue
]);
return {
...state,
checked: checkedValue,
root: {
...state.root,
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
}
};
}
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useToggleState.ts"],"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"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGL;IACjE,MAAM,EAAEM,OAAO,EAAEC,IAAI,EAAE,GAAGN,MAAMO,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGb,qBAAqB;QAC3DI,OAAOC;QACPS,cAAcR;QACdS,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBnB,MAAMoB,WAAW,CACrCC,CAAAA;QACE,IAAI,CAACZ,YAAY,CAACC,mBAAmB;YACnC,IAAIW,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcL;QAAUC;QAAmBK;KAAgB;IAG9D,OAAO;QACL,GAAGT,KAAK;QAERC,SAASO;QAETD,MAAM;YACJ,GAAGP,MAAMO,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAASR,iBACPF,eAAeU,SAA2EQ;QAE9F;IACF;AACF"}