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
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Button", {
enumerable: true,
get: function() {
return Button;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderButton = require("./renderButton");
const _useButton = require("./useButton");
const _useButtonStylesstyles = require("./useButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Button = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useButton.useButton_unstable)(props, ref);
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useButtonStyles_unstable')(state);
return (0, _renderButton.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":["Button","React","forwardRef","props","ref","state","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","renderButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;8BACe;2BACH;uCACM;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC7B,0FAA0F;AAC5F;AAEAL,OAAOU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Button: function() {
return _Button.Button;
},
buttonClassNames: function() {
return _useButtonStylesstyles.buttonClassNames;
},
renderButton_unstable: function() {
return _renderButton.renderButton_unstable;
},
useButtonStyles_unstable: function() {
return _useButtonStylesstyles.useButtonStyles_unstable;
},
useButton_unstable: function() {
return _useButton.useButton_unstable;
}
});
const _Button = require("./Button");
const _renderButton = require("./renderButton");
const _useButton = require("./useButton");
const _useButtonStylesstyles = require("./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","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAKNC,gBAAgB;eAAhBA,uCAAgB;;IAFhBC,qBAAqB;eAArBA,mCAAqB;;IAEHC,wBAAwB;eAAxBA,+CAAwB;;IAD1CC,kBAAkB;eAAlBA,6BAAkB;;;wBAJJ;8BAGe;2BACH;uCACwB"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderButton_unstable", {
enumerable: true,
get: function() {
return renderButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && state.root.children,
iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.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":["renderButton_unstable","state","assertSlots","iconOnly","iconPosition","_jsxs","root","icon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IACzB,MAAM,EAAEE,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAEnC,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRF,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;YACrD,CAACJ,YAAYF,MAAMK,IAAI,CAACG,QAAQ;YAChCL,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;;;AAG5D"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useButton_unstable", {
enumerable: true,
get: function() {
return useButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactaria = require("@fluentui/react-aria");
const _reactutilities = require("@fluentui/react-utilities");
const _ButtonContext = require("../../contexts/ButtonContext");
const useButton_unstable = (props, ref)=>{
const { size: contextSize } = (0, _ButtonContext.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 = _reactutilities.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: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.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":["useButton_unstable","props","ref","size","contextSize","useButtonContext","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","slot","optional","elementType","iconOnly","Boolean","children","components","root","always","getIntrinsicElementProps","useARIAButtonProps","defaultProps","type","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACiC;gCACT;+BACd;AAQ1B,MAAMA,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,+BAAAA;IAC9B,MAAM,EACJC,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBT,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAC/B,GAAGH;IACJ,MAAMY,gBAAgBC,oBAAAA,CAAKC,QAAQ,CAACL,MAAM;QAAEM,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCV;QACAE;QACAC;QACAE;QACAC;QACAT;QACAc,UAAUC,QAAQL,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeM,QAAQ,AAARA,KAAY,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMP,oBAAAA,CAAKQ,MAAM,CAA2BC,IAAAA,wCAAAA,EAAyBhB,IAAIiB,IAAAA,6BAAAA,EAAmBvB,MAAMM,EAAE,EAAEN,SAAS;YAC7Ge,aAAa;YACbS,cAAc;gBACZvB,KAAKA;gBACLwB,MAAMnB,OAAO,WAAW,WAAWoB;YACrC;QACF;QACAjB,MAAMG;IACR;AACF"}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CompoundButton", {
enumerable: true,
get: function() {
return CompoundButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderCompoundButton = require("./renderCompoundButton");
const _useCompoundButton = require("./useCompoundButton");
const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CompoundButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCompoundButton.useCompoundButton_unstable)(props, ref);
(0, _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCompoundButtonStyles_unstable')(state);
return (0, _renderCompoundButton.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":["CompoundButton","React","forwardRef","props","ref","state","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","renderCompoundButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;sCACuB;mCACH;+CACM;qCAGL;AAKrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IAEjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACrC,0FAA0F;AAC5F;AAEAL,eAAeU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CompoundButton: function() {
return _CompoundButton.CompoundButton;
},
compoundButtonClassNames: function() {
return _useCompoundButtonStylesstyles.compoundButtonClassNames;
},
renderCompoundButton_unstable: function() {
return _renderCompoundButton.renderCompoundButton_unstable;
},
useCompoundButtonStyles_unstable: function() {
return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
},
useCompoundButton_unstable: function() {
return _useCompoundButton.useCompoundButton_unstable;
}
});
const _CompoundButton = require("./CompoundButton");
const _renderCompoundButton = require("./renderCompoundButton");
const _useCompoundButton = require("./useCompoundButton");
const _useCompoundButtonStylesstyles = require("./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","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,cAAc;eAAdA,8BAAc;;IAIdC,wBAAwB;eAAxBA,uDAAwB;;IAFxBC,6BAA6B;eAA7BA,mDAA6B;;IAEHC,gCAAgC;eAAhCA,+DAAgC;;IAD1DC,0BAA0B;eAA1BA,6CAA0B;;;gCAHJ;sCAEe;mCACH;+CACgC"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCompoundButton_unstable", {
enumerable: true,
get: function() {
return renderCompoundButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCompoundButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.contentContainer, {
children: [
state.root.children,
state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {})
]
}),
iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.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":["renderCompoundButton_unstable","state","assertSlots","iconOnly","iconPosition","_jsxs","root","icon","_jsx","contentContainer","children","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IACjC,MAAM,EAAEE,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAEnC,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRF,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;YACrD,CAACJ,YAAAA,WAAAA,GACAE,IAAAA,gBAAA,EAACJ,MAAMQ,gBAAgB,EAAA;;oBACpBR,MAAMK,IAAI,CAACI,QAAQ;oBACnBT,MAAMU,gBAAgB,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACP,MAAMU,gBAAgB,EAAA,CAAA;;;YAIrDP,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;;;AAG5D"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCompoundButton_unstable", {
enumerable: true,
get: function() {
return useCompoundButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../Button/index");
const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
var _state_icon, _state_secondaryContent;
const state = {
// Button state
...(0, _index.useButton_unstable)(props, ref),
// Slots definition
components: {
root: 'button',
icon: 'span',
contentContainer: 'span',
secondaryContent: 'span'
},
contentContainer: _reactutilities.slot.always(contentContainer, {
elementType: 'span'
}),
secondaryContent: _reactutilities.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":["useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","useButton_unstable","components","root","icon","slot","always","elementType","optional","iconOnly","Boolean","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;gCACF;uBACc;AAQ5B,MAAMA,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGC,IAAAA,yBAAAA,EAAmBH,OAAOC,IAAI;QAEjC,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNC,MAAM;YACNR,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBS,oBAAAA,CAAKC,MAAM,CAACV,kBAAkB;YAAEW,aAAa;QAAO;QACtEV,kBAAkBQ,oBAAAA,CAAKG,QAAQ,CAACX,kBAAkB;YAAEU,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DP,MAAMS,QAAQ,GAAGC,QAAQV,CAAAA,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYW,QAAQ,AAARA,KAAY,CAACb,MAAMa,QAAQ,IAAI,CAAA,CAAA,AAACX,CAAAA,0BAAAA,MAAMH,gBAAgB,AAAhBA,MAAgB,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBW,QAAQ,AAARA;IAE7F,OAAOX;AACT"}
@@ -0,0 +1,329 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
compoundButtonClassNames: function() {
return compoundButtonClassNames;
},
useCompoundButtonStyles_unstable: function() {
return useCompoundButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const compoundButtonClassNames = {
root: 'fui-CompoundButton',
icon: 'fui-CompoundButton__icon',
contentContainer: 'fui-CompoundButton__contentContainer',
secondaryContent: 'fui-CompoundButton__secondaryContent'
};
const useRootStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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);}"
]
});
const useCompoundButtonStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const rootIconOnlyStyles = useRootIconOnlyStyles();
const iconStyles = useIconStyles();
const contentContainerStyles = useContentContainerStyles();
const secondaryContentStyles = useSecondaryContentStyles();
const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, // 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 = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuButton", {
enumerable: true,
get: function() {
return MenuButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderMenuButton = require("./renderMenuButton");
const _useMenuButton = require("./useMenuButton");
const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuButton.useMenuButton_unstable)(props, ref);
(0, _useMenuButtonStylesstyles.useMenuButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuButtonStyles_unstable')(state);
return (0, _renderMenuButton.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":["MenuButton","React","forwardRef","props","ref","state","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","renderMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;kCACmB;+BACH;2CACM;qCAGD;AAMrC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAE7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACjC,0FAA0F;AAC5F;AAEAL,WAAWU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MenuButton: function() {
return _MenuButton.MenuButton;
},
menuButtonClassNames: function() {
return _useMenuButtonStylesstyles.menuButtonClassNames;
},
renderMenuButton_unstable: function() {
return _renderMenuButton.renderMenuButton_unstable;
},
useMenuButtonStyles_unstable: function() {
return _useMenuButtonStylesstyles.useMenuButtonStyles_unstable;
},
useMenuButton_unstable: function() {
return _useMenuButton.useMenuButton_unstable;
}
});
const _MenuButton = require("./MenuButton");
const _renderMenuButton = require("./renderMenuButton");
const _useMenuButton = require("./useMenuButton");
const _useMenuButtonStylesstyles = require("./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","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,UAAU;eAAVA,sBAAU;;IAGVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAFJ;kCACe;+BACH;2CAC4B"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuButton_unstable", {
enumerable: true,
get: function() {
return renderMenuButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { icon, iconOnly } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && state.root.children,
(!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ (0, _jsxruntime.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":["renderMenuButton_unstable","state","assertSlots","icon","iconOnly","_jsxs","root","_jsx","children","menuIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAC7B,MAAM,EAAEE,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IAE3B,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRL,MAAME,IAAI,IAAA,WAAA,GAAII,IAAAA,eAAA,EAACN,MAAME,IAAI,EAAA,CAAA;YACzB,CAACC,YAAYH,MAAMK,IAAI,CAACE,QAAQ;YAC/B,CAAA,CAACJ,YAAY,CAACD,CAAAA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMK,QAAQ,AAARA,CAAQ,KAAKP,MAAMQ,QAAQ,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,QAAQ,EAAA,CAAA;;;AAG1E"}
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuButton_unstable", {
enumerable: true,
get: function() {
return useMenuButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../Button/index");
const useMenuButton_unstable = ({ menuIcon, ...props }, ref)=>{
'use no memo';
const buttonState = (0, _index.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: _reactutilities.slot.optional(menuIcon, {
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.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":["useMenuButton_unstable","menuIcon","props","ref","buttonState","useButton_unstable","root","iconOnly","Boolean","children","components","icon","slot","optional","defaultProps","React","createElement","ChevronDownRegular","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;4BACY;gCACd;uBACc;AAM5B,MAAMA,yBAAyB,CACpC,EAAEC,QAAQ,EAAE,GAAGC,OAAwB,EACvCC;IAEA;IAEA,MAAMC,cAAcC,IAAAA,yBAAAA,EAAmBH,OAAOC;IAC9C,oDAAoD;IACpDC,YAAYE,IAAI,CAAC,gBAAgB,GAAGJ,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCG,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNV,UAAU;QACZ;QAEAA,UAAUW,oBAAAA,CAAKC,QAAQ,CAACZ,UAAU;YAChCa,cAAc;gBACZL,UAAAA,WAAAA,GAAUM,OAAAC,aAAA,CAACC,8BAAAA,EAAAA;YACb;YACAC,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF"}
@@ -0,0 +1,191 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
menuButtonClassNames: function() {
return menuButtonClassNames;
},
useMenuButtonStyles_unstable: function() {
return useMenuButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const menuButtonClassNames = {
root: 'fui-MenuButton',
icon: 'fui-MenuButton__icon',
menuIcon: 'fui-MenuButton__menuIcon'
};
const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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);}"
]
});
const useMenuButtonStyles_unstable = (state)=>{
'use no memo';
const rootExpandedStyles = useRootExpandedStyles();
const iconExpandedStyles = useIconExpandedStyles();
const menuIconStyles = useMenuIconStyles();
state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
}
if (state.menuIcon) {
state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)({
...state,
iconPosition: 'before'
});
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SplitButton", {
enumerable: true,
get: function() {
return SplitButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderSplitButton = require("./renderSplitButton");
const _useSplitButton = require("./useSplitButton");
const _useSplitButtonStylesstyles = require("./useSplitButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SplitButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSplitButton.useSplitButton_unstable)(props, ref);
(0, _useSplitButtonStylesstyles.useSplitButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSplitButtonStyles_unstable')(state);
return (0, _renderSplitButton.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":["SplitButton","React","forwardRef","props","ref","state","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","renderSplitButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCACoB;gCACH;4CACM;qCAGF;AAMrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAE9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AAClC,0FAA0F;AAC5F;AAEAL,YAAYU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SplitButton: function() {
return _SplitButton.SplitButton;
},
renderSplitButton_unstable: function() {
return _renderSplitButton.renderSplitButton_unstable;
},
splitButtonClassNames: function() {
return _useSplitButtonStylesstyles.splitButtonClassNames;
},
useSplitButtonStyles_unstable: function() {
return _useSplitButtonStylesstyles.useSplitButtonStyles_unstable;
},
useSplitButton_unstable: function() {
return _useSplitButton.useSplitButton_unstable;
}
});
const _SplitButton = require("./SplitButton");
const _renderSplitButton = require("./renderSplitButton");
const _useSplitButton = require("./useSplitButton");
const _useSplitButtonStylesstyles = require("./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","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAEXC,0BAA0B;eAA1BA,6CAA0B;;IAE1BC,qBAAqB;eAArBA,iDAAqB;;IAAEC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAC6B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSplitButton_unstable", {
enumerable: true,
get: function() {
return renderSplitButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSplitButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.primaryActionButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.primaryActionButton, {}),
state.menuButton && /*#__PURE__*/ (0, _jsxruntime.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":["renderSplitButton_unstable","state","assertSlots","_jsxs","root","primaryActionButton","_jsx","menuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,mBAAmB,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,mBAAmB,EAAA,CAAA;YACvDJ,MAAMM,UAAU,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,UAAU,EAAA,CAAA;;;AAG5C"}
@@ -0,0 +1,73 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSplitButton_unstable", {
enumerable: true,
get: function() {
return useSplitButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _Button = require("../Button/Button");
const _MenuButton = require("../MenuButton/MenuButton");
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 = (0, _reactutilities.useId)('splitButton-');
const menuButtonShorthand = _reactutilities.slot.optional(menuButton, {
defaultProps: {
appearance,
disabled,
disabledFocusable,
menuIcon,
shape,
size
},
renderByDefault: true,
elementType: _MenuButton.MenuButton
});
const primaryActionButtonShorthand = _reactutilities.slot.optional(primaryActionButton, {
defaultProps: {
appearance,
children,
disabled,
disabledFocusable,
icon,
iconPosition,
id: baseId + '__primaryActionButton',
shape,
size
},
renderByDefault: true,
elementType: _Button.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.MenuButton,
primaryActionButton: _Button.Button
},
root: _reactutilities.slot.always((0, _reactutilities.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":["useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","useId","menuButtonShorthand","slot","optional","defaultProps","renderByDefault","elementType","MenuButton","primaryActionButtonShorthand","id","Button","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCAC+B;wBAC/B;4BACI;AAQpB,MAAMA,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,SAASC,IAAAA,qBAAAA,EAAM;IAErB,MAAMC,sBAAsBC,oBAAAA,CAAKC,QAAQ,CAACT,YAAY;QACpDU,cAAc;YACZhB;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAO,iBAAiB;QACjBC,aAAaC,sBAAAA;IACf;IACA,MAAMC,+BAA+BN,oBAAAA,CAAKC,QAAQ,CAACP,qBAAqB;QACtEQ,cAAc;YACZhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAgB,IAAIV,SAAS;YACbF;YACAC;QACF;QACAO,iBAAiB;QACjBC,aAAaI,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACET,uBACAO,gCACA,CAACP,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGO,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCrB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAa,YAAY;YAAEC,MAAM;YAAOlB,YAAYa,sBAAAA;YAAYX,qBAAqBc,cAAAA;QAAO;QAC/EE,MAAMV,oBAAAA,CAAKW,MAAM,CAACC,IAAAA,wCAAAA,EAAyB,OAAO;YAAE3B;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEoB,aAAa;QAAM;QAC3FZ,YAAYO;QACZL,qBAAqBY;IACvB;AACF"}
@@ -0,0 +1,268 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
splitButtonClassNames: function() {
return splitButtonClassNames;
},
useSplitButtonStyles_unstable: function() {
return useSplitButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const 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__*/ (0, _react.__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__*/ (0, _react.__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)"
}
]
]
});
const useSplitButtonStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const focusStyles = useFocusStyles();
const { appearance, disabled, disabledFocusable } = state;
state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
if (state.menuButton) {
state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
}
if (state.primaryActionButton) {
state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToggleButton", {
enumerable: true,
get: function() {
return ToggleButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToggleButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToggleButton.useToggleButton_unstable)(props, ref);
(0, _useToggleButtonStylesstyles.useToggleButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToggleButtonStyles_unstable')(state);
return (0, _renderToggleButton.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":["ToggleButton","React","forwardRef","props","ref","state","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","renderToggleButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCACqB;iCACH;6CACM;qCAGH;AAKrC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAE/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACnC,0FAA0F;AAC5F;AAEAL,aAAaU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToggleButton: function() {
return _ToggleButton.ToggleButton;
},
renderToggleButton_unstable: function() {
return _renderToggleButton.renderToggleButton_unstable;
},
toggleButtonClassNames: function() {
return _useToggleButtonStylesstyles.toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return _useToggleButtonStylesstyles.useToggleButtonStyles_unstable;
},
useToggleButton_unstable: function() {
return _useToggleButton.useToggleButton_unstable;
}
});
const _ToggleButton = require("./ToggleButton");
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./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","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAEZC,2BAA2B;eAA3BA,+CAA2B;;IAE3BC,sBAAsB;eAAtBA,mDAAsB;;IAAEC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAHJ;oCAEe;iCACH;6CAC8B"}
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderToggleButton_unstable", {
enumerable: true,
get: function() {
return _renderButton.renderButton_unstable;
}
});
const _renderButton = require("../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":["renderToggleButton_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAAkCA;;;eAAzBC,mCAAAA;;;8BAA4D"}
@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToggleButton_unstable", {
enumerable: true,
get: function() {
return useToggleButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToggleState = require("../../utils/useToggleState");
const _useButton = require("../Button/useButton");
const useToggleButton_unstable = (props, ref)=>{
const buttonState = (0, _useButton.useButton_unstable)(props, ref);
return (0, _useToggleState.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":["useToggleButton_unstable","props","ref","buttonState","useButton_unstable","useToggleState"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACQ;2BACI;AAS5B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAE9C,OAAOG,IAAAA,8BAAAA,EAAeJ,OAAOE;AAC/B"}
@@ -0,0 +1,802 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toggleButtonClassNames: function() {
return toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return useToggleButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const toggleButtonClassNames = {
root: 'fui-ToggleButton',
icon: 'fui-ToggleButton__icon'
};
const useRootCheckedStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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)"
}
]
]
});
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 = (0, _react.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 = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};
File diff suppressed because one or more lines are too long