@fluentui/react-button 9.0.0-rc.1 → 9.0.0-rc.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +70 -1
- package/CHANGELOG.md +20 -2
- package/lib/Button.js.map +1 -1
- package/lib/CompoundButton.js.map +1 -1
- package/lib/MenuButton.js.map +1 -1
- package/lib/SplitButton.js.map +1 -1
- package/lib/ToggleButton.js.map +1 -1
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +16 -4
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +6 -6
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Button.js.map +1 -1
- package/lib-commonjs/CompoundButton.js.map +1 -1
- package/lib-commonjs/MenuButton.js.map +1 -1
- package/lib-commonjs/SplitButton.js.map +1 -1
- package/lib-commonjs/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.js.map +1 -1
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +15 -3
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +6 -6
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["CompoundButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CompoundButton/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["MenuButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/MenuButton/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SplitButton/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["ToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToggleButton/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n const state = useButton_unstable(props, ref);\n\n useButtonStyles_unstable(state);\n\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n const { slots, slotProps } = getSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\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 {\n appearance,\n as,\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as || 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ButtonState } from './Button.types';\n\nexport const buttonClassName = 'fui-Button';\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassName,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 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"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,gCAAA;AAAgC;AAAhC,CAAA","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAR7C,CADF;AAYD,CAhBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;AACvB,SAAO,EACL;AACA,OAAG,OAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAFE;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CAXb;AAYL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAZb,GAAP;AAcD,CAlBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useButton_unstable } from '../Button/index';\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 return {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassName = 'fui-CompoundButton';\n\nconst CompoundButtonClassNames = {\n secondaryContent: `${compoundButtonClassName}-secondaryContent`,\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.gap('12px'),\n\n height: 'auto',\n\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':active': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':active': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n subtle: {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':active': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':active': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n ...shorthands.padding('8px', '8px', '10px', '8px'),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n ...shorthands.padding('14px', '12px', '16px', '12px'),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.padding('18px', '16px', '20px', '16px'),\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':active': {\n [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n ...shorthands.padding('6px'),\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n ...shorthands.padding('8px'),\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, size } = state;\n\n state.root.className = mergeClasses(\n compoundButtonClassName,\n\n // Root styles\n rootStyles.base,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n }\n\n state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n CompoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AAEA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP,CAL8F,CAM9F;AACD,CAP+D,CAAnD;AASb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * MenuButtons are buttons that handle opening and closing a menu when they are triggered.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AAAqB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,IAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && slotProps.root.children}\n {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CACpC;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;AACnB,QAAM,WAAW,GAAG,OAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAApB;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAjB,EAA2B;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;AADE,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAA3B;AAdL,GAAP;AAqBD,CA1BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n const buttonState = useButton_unstable(props, ref);\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: resolveShorthand(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n required: true,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;;AAEb,MAAM,iBAAiB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAb,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAvB;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,cAAc,CAAC,KAAK,CAAC,IAAP,CAA3B,EAAyC,KAAK,CAAC,QAAN,CAAe,SAAxD,CAA3B;AACD;;AAED,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,KAAP;AACD,CAZM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { ButtonState } from '../Button/Button.types';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassName = 'fui-MenuButton';\n\nconst useMenuIconStyles = makeStyles({\n // Size appearance\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(menuButtonClassName, state.root.className);\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n }\n\n useButtonStyles_unstable(state as ButtonState);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;AAEA,EAAA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;AAEA,SAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP,CALgG,CAMhG;AACD,CAPiE,CAArD;AASb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,IAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -27,18 +27,22 @@ const useSplitButton_unstable = (props, ref) => {
|
|
27
27
|
icon,
|
28
28
|
iconPosition = 'before',
|
29
29
|
menuButton,
|
30
|
+
menuIcon,
|
30
31
|
primaryActionButton,
|
31
32
|
shape = 'rounded',
|
32
33
|
size = 'medium'
|
33
34
|
} = props;
|
35
|
+
const baseId = react_utilities_1.useId('splitButton-');
|
34
36
|
const menuButtonShorthand = react_utilities_1.resolveShorthand(menuButton, {
|
35
37
|
defaultProps: {
|
36
38
|
appearance,
|
37
39
|
disabled,
|
38
40
|
disabledFocusable,
|
41
|
+
menuIcon,
|
39
42
|
shape,
|
40
43
|
size
|
41
|
-
}
|
44
|
+
},
|
45
|
+
required: true
|
42
46
|
});
|
43
47
|
const primaryActionButtonShorthand = react_utilities_1.resolveShorthand(primaryActionButton, {
|
44
48
|
defaultProps: {
|
@@ -49,10 +53,18 @@ const useSplitButton_unstable = (props, ref) => {
|
|
49
53
|
disabledFocusable,
|
50
54
|
icon,
|
51
55
|
iconPosition,
|
56
|
+
id: baseId + '__primaryActionButton',
|
52
57
|
shape,
|
53
58
|
size
|
54
|
-
}
|
55
|
-
|
59
|
+
},
|
60
|
+
required: true
|
61
|
+
}); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
|
62
|
+
// by the user.
|
63
|
+
|
64
|
+
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
|
65
|
+
menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
|
66
|
+
}
|
67
|
+
|
56
68
|
return {
|
57
69
|
// Props passed at the top-level
|
58
70
|
appearance,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;AAEA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAA7B,CAA5B;AAYA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtC,CAArC,CA9BoB,CA8CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAjFM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance,\n block = false,\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AAEb,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,OAAA,CAAA,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,OAAA,CAAA,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,qBAAqB,CAAC,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,qBAAqB,CAAC,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassName = 'fui-SplitButton';\n\nconst SplitButtonClassNames = {\n primaryActionButton: `${splitButtonClassName}-primaryActionButton`,\n menuButton: `${splitButtonClassName}-menuButton`,\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base rootStyles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block rootStyles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n /* No rootStyles */\n },\n primary: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':active': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled rootStyles\n disabled: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':active': {\n [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, block, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassName,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n SplitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n SplitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;AAEA,EAAA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;AAEA,SAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP,CALkG,CAMlG;AACD,CAPmE,CAAvD;AASb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/ToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,8BAAA;AAA8B;AAA9B,CAAA","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"sourceRoot":"../src/"}
|
@@ -44,18 +44,18 @@ const useToggleButton_unstable = ({
|
|
44
44
|
checked: checkedValue,
|
45
45
|
// Slots definition
|
46
46
|
root: { ...buttonState.root,
|
47
|
-
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']:
|
47
|
+
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
|
48
48
|
onClick: React.useCallback(ev => {
|
49
|
-
if (
|
50
|
-
onClick(ev);
|
49
|
+
if (!disabled && !disabledFocusable) {
|
50
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
|
51
51
|
|
52
52
|
if (ev.defaultPrevented) {
|
53
53
|
return;
|
54
54
|
}
|
55
|
-
}
|
56
55
|
|
57
|
-
|
58
|
-
|
56
|
+
setCheckedValue(!checkedValue);
|
57
|
+
}
|
58
|
+
}, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
|
59
59
|
}
|
60
60
|
};
|
61
61
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAApB;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,iBAAA,CAAA,oBAAA,CAAqB;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAArB,CAAxC;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;AACnC,UAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,EAAH,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;;AAED,UAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD;AACF,OAXM,EAYP,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,EAA6D,OAA7D,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 { checked, defaultChecked, ...props }: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const { disabled, disabledFocusable } = props;\n const buttonState = useButton_unstable(props, ref);\n const { role, onClick } = buttonState.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n checked: checkedValue,\n\n // Slots definition\n root: {\n ...buttonState.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n onClick?.(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick],\n ),\n },\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAAwB,kBAAxB;;AAEb,MAAM,gBAAgB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAiEO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBADqB,EAGrB;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJJ,EAKrB,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALjB,EAOrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IAR7B,EASrB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT1C,EAWrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAeA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassName = 'fui-ToggleButton';\n\nconst useCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const checkedStyles = useCheckedStyles();\n const disabledStyles = useDisabledStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassName,\n\n // Checked styles\n checked && checkedStyles.base,\n appearance && checked && checkedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && disabledStyles.base,\n appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-button",
|
3
|
-
"version": "9.0.0-rc.
|
3
|
+
"version": "9.0.0-rc.3",
|
4
4
|
"description": "Fluent UI React Button component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -29,7 +29,7 @@
|
|
29
29
|
"@fluentui/a11y-testing": "^0.1.0",
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
31
31
|
"@fluentui/react-conformance": "*",
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.3",
|
33
33
|
"@fluentui/scripts": "^1.0.0",
|
34
34
|
"@types/enzyme": "3.10.3",
|
35
35
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
@@ -43,11 +43,11 @@
|
|
43
43
|
"react-test-renderer": "^16.3.0"
|
44
44
|
},
|
45
45
|
"dependencies": {
|
46
|
-
"@fluentui/keyboard-keys": "9.0.0-rc.
|
47
|
-
"@fluentui/react-aria": "9.0.0-rc.
|
46
|
+
"@fluentui/keyboard-keys": "9.0.0-rc.3",
|
47
|
+
"@fluentui/react-aria": "9.0.0-rc.3",
|
48
48
|
"@fluentui/react-icons": "^2.0.159-beta.10",
|
49
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
50
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
49
|
+
"@fluentui/react-tabster": "9.0.0-rc.3",
|
50
|
+
"@fluentui/react-utilities": "9.0.0-rc.3",
|
51
51
|
"@griffel/react": "1.0.0",
|
52
52
|
"tslib": "^2.1.0"
|
53
53
|
},
|