@fluentui/react-button 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlyd80c90385320220216.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +194 -23
- package/CHANGELOG.md +45 -13
- package/dist/react-button.d.ts +31 -36
- package/lib/components/Button/Button.js +6 -6
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +5 -5
- package/lib/components/Button/index.d.ts +2 -2
- package/lib/components/Button/index.js +1 -2
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.d.ts +1 -1
- package/lib/components/Button/renderButton.js +4 -4
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +1 -1
- package/lib/components/Button/useButton.js +1 -1
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +1 -9
- package/lib/components/Button/useButtonStyles.js +9 -18
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +6 -6
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.d.ts +4 -4
- package/lib/components/CompoundButton/index.d.ts +1 -1
- package/lib/components/CompoundButton/index.js +1 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.js +5 -5
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +3 -3
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +12 -12
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +6 -6
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.d.ts +3 -8
- package/lib/components/MenuButton/index.d.ts +1 -1
- package/lib/components/MenuButton/index.js +1 -1
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/renderMenuButton.js +4 -4
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButton.js +5 -5
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +4 -4
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +6 -6
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.d.ts +6 -4
- package/lib/components/SplitButton/index.d.ts +1 -1
- package/lib/components/SplitButton/index.js +1 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/renderSplitButton.js +4 -4
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButton.js +17 -5
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +3 -2
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +6 -6
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.d.ts +2 -1
- package/lib/components/ToggleButton/index.d.ts +1 -1
- package/lib/components/ToggleButton/index.js +1 -1
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +13 -9
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +5 -4
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/components/Button/Button.js +3 -3
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +5 -5
- package/lib-commonjs/components/Button/index.d.ts +2 -2
- package/lib-commonjs/components/Button/index.js +3 -5
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.d.ts +1 -1
- package/lib-commonjs/components/Button/renderButton.js +6 -6
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.d.ts +1 -1
- package/lib-commonjs/components/Button/useButton.js +3 -3
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +1 -9
- package/lib-commonjs/components/Button/useButtonStyles.js +18 -26
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +3 -3
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +4 -4
- package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/index.js +3 -3
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +7 -7
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +4 -4
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +23 -22
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +3 -3
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -8
- package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/index.js +3 -3
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +6 -6
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js +5 -5
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +8 -8
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +3 -3
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +6 -4
- package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/index.js +3 -3
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +6 -6
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +18 -6
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +11 -9
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +3 -3
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +2 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +3 -3
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js +3 -3
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +14 -10
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +10 -8
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/package.json +9 -11
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { MenuButtonState } from './MenuButton.types';
|
2
2
|
export declare const menuButtonClassName = "fui-MenuButton";
|
3
|
-
export declare const
|
3
|
+
export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { mergeClasses, __styles } from '@
|
2
|
-
import {
|
1
|
+
import { mergeClasses, __styles } from '@griffel/react';
|
2
|
+
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
3
3
|
export const menuButtonClassName = 'fui-MenuButton';
|
4
4
|
|
5
5
|
const useMenuIconStyles = /*#__PURE__*/__styles({
|
@@ -22,7 +22,7 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
|
|
22
22
|
"d": [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
|
23
23
|
});
|
24
24
|
|
25
|
-
export const
|
25
|
+
export const useMenuButtonStyles_unstable = state => {
|
26
26
|
const menuIconStyles = useMenuIconStyles();
|
27
27
|
state.root.className = mergeClasses(menuButtonClassName, state.root.className);
|
28
28
|
|
@@ -30,7 +30,7 @@ export const useMenuButtonStyles = state => {
|
|
30
30
|
state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
|
31
31
|
}
|
32
32
|
|
33
|
-
|
33
|
+
useButtonStyles_unstable(state);
|
34
34
|
return state;
|
35
35
|
};
|
36
36
|
//# sourceMappingURL=useMenuButtonStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,KAAK,CAAC,IAAN,CAAW,SAAjC,CAAnC;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAZM","sourceRoot":""}
|
@@ -1,16 +1,16 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderSplitButton_unstable } from './renderSplitButton';
|
3
|
+
import { useSplitButton_unstable } from './useSplitButton';
|
4
|
+
import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
5
5
|
/**
|
6
6
|
* SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
|
7
7
|
* action, while interacting with the second one opens a menu with secondary actions.
|
8
8
|
*/
|
9
9
|
|
10
10
|
export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
11
|
-
const state =
|
12
|
-
|
13
|
-
return
|
11
|
+
const state = useSplitButton_unstable(props, ref);
|
12
|
+
useSplitButtonStyles_unstable(state);
|
13
|
+
return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
14
14
|
});
|
15
15
|
SplitButton.displayName = 'SplitButton';
|
16
16
|
//# sourceMappingURL=SplitButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
|
@@ -1,19 +1,21 @@
|
|
1
|
-
import
|
1
|
+
import { Button } from '../Button/Button';
|
2
|
+
import { MenuButton } from '../MenuButton/MenuButton';
|
3
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
4
|
import type { ButtonProps, ButtonState } from '../Button/Button.types';
|
3
5
|
import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
|
4
6
|
export declare type SplitButtonSlots = {
|
5
7
|
/**
|
6
8
|
* Root of the component that wraps the primary action button and menu button.
|
7
9
|
*/
|
8
|
-
root:
|
10
|
+
root: Slot<'div'>;
|
9
11
|
/**
|
10
12
|
* Button that opens menu with secondary actions in SplitButton.
|
11
13
|
*/
|
12
|
-
menuButton?:
|
14
|
+
menuButton?: Slot<typeof MenuButton>;
|
13
15
|
/**
|
14
16
|
* Button to perform primary action in SplitButton.
|
15
17
|
*/
|
16
|
-
primaryActionButton?:
|
18
|
+
primaryActionButton?: Slot<typeof Button>;
|
17
19
|
};
|
18
20
|
export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
|
19
21
|
export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
|
@@ -2,4 +2,4 @@ export * from './SplitButton';
|
|
2
2
|
export * from './SplitButton.types';
|
3
3
|
export * from './renderSplitButton';
|
4
4
|
export * from './useSplitButton';
|
5
|
-
export { splitButtonClassName,
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
@@ -2,5 +2,5 @@ export * from './SplitButton';
|
|
2
2
|
export * from './SplitButton.types';
|
3
3
|
export * from './renderSplitButton';
|
4
4
|
export * from './useSplitButton';
|
5
|
-
export { splitButtonClassName,
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -2,4 +2,4 @@ import type { SplitButtonState } from './SplitButton.types';
|
|
2
2
|
/**
|
3
3
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
4
4
|
*/
|
5
|
-
export declare const
|
5
|
+
export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
|
@@ -4,14 +4,14 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
4
4
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
5
5
|
*/
|
6
6
|
|
7
|
-
export const
|
7
|
+
export const renderSplitButton_unstable = state => {
|
8
8
|
const {
|
9
9
|
slots,
|
10
10
|
slotProps
|
11
|
-
} = getSlots(state
|
11
|
+
} = getSlots(state);
|
12
12
|
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
-
}, /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
|
14
|
-
}), /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
|
13
|
+
}, slots.primaryActionButton && /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
|
14
|
+
}), slots.menuButton && /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
|
15
15
|
}));
|
16
16
|
};
|
17
17
|
//# sourceMappingURL=renderSplitButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourceRoot":""}
|
@@ -5,4 +5,4 @@ import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
|
|
5
5
|
* @param props - User provided props to the SplitButton component.
|
6
6
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
7
7
|
*/
|
8
|
-
export declare const
|
8
|
+
export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
1
|
+
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
2
2
|
import { Button } from '../Button/Button';
|
3
3
|
import { MenuButton } from '../MenuButton/MenuButton';
|
4
4
|
/**
|
@@ -7,7 +7,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
|
|
7
7
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
8
8
|
*/
|
9
9
|
|
10
|
-
export const
|
10
|
+
export const useSplitButton_unstable = (props, ref) => {
|
11
11
|
const {
|
12
12
|
appearance,
|
13
13
|
block = false,
|
@@ -17,18 +17,22 @@ export const useSplitButton = (props, ref) => {
|
|
17
17
|
icon,
|
18
18
|
iconPosition = 'before',
|
19
19
|
menuButton,
|
20
|
+
menuIcon,
|
20
21
|
primaryActionButton,
|
21
22
|
shape = 'rounded',
|
22
23
|
size = 'medium'
|
23
24
|
} = props;
|
25
|
+
const baseId = useId('splitButton-');
|
24
26
|
const menuButtonShorthand = resolveShorthand(menuButton, {
|
25
27
|
defaultProps: {
|
26
28
|
appearance,
|
27
29
|
disabled,
|
28
30
|
disabledFocusable,
|
31
|
+
menuIcon,
|
29
32
|
shape,
|
30
33
|
size
|
31
|
-
}
|
34
|
+
},
|
35
|
+
required: true
|
32
36
|
});
|
33
37
|
const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
|
34
38
|
defaultProps: {
|
@@ -39,10 +43,18 @@ export const useSplitButton = (props, ref) => {
|
|
39
43
|
disabledFocusable,
|
40
44
|
icon,
|
41
45
|
iconPosition,
|
46
|
+
id: baseId + '__primaryActionButton',
|
42
47
|
shape,
|
43
48
|
size
|
44
|
-
}
|
45
|
-
|
49
|
+
},
|
50
|
+
required: true
|
51
|
+
}); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
|
52
|
+
// by the user.
|
53
|
+
|
54
|
+
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
|
55
|
+
menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
|
56
|
+
}
|
57
|
+
|
46
58
|
return {
|
47
59
|
// Props passed at the top-level
|
48
60
|
appearance,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;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,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;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,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;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,GAAtB,CAArD,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,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAjFM","sourceRoot":""}
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { SplitButtonState } from './SplitButton.types';
|
2
2
|
export declare const splitButtonClassName = "fui-SplitButton";
|
3
|
-
export declare const
|
3
|
+
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
2
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
3
4
|
export const splitButtonClassName = 'fui-SplitButton';
|
4
5
|
const SplitButtonClassNames = {
|
5
6
|
primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
|
@@ -68,7 +69,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
68
69
|
"a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
|
69
70
|
});
|
70
71
|
|
71
|
-
export const
|
72
|
+
export const useSplitButtonStyles_unstable = state => {
|
72
73
|
const rootStyles = useRootStyles();
|
73
74
|
const focusStyles = useFocusStyles();
|
74
75
|
const {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;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;;AAgHA,OAAO,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,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourceRoot":""}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderToggleButton_unstable } from './renderToggleButton';
|
3
|
+
import { useToggleButton_unstable } from './useToggleButton';
|
4
|
+
import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
5
5
|
/**
|
6
6
|
* ToggleButtons are buttons that toggle between two defined states when triggered.
|
7
7
|
*/
|
8
8
|
|
9
9
|
export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state =
|
11
|
-
|
12
|
-
return
|
10
|
+
const state = useToggleButton_unstable(props, ref);
|
11
|
+
useToggleButtonStyles_unstable(state);
|
12
|
+
return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
13
|
});
|
14
14
|
ToggleButton.displayName = 'ToggleButton';
|
15
15
|
//# sourceMappingURL=ToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { ButtonProps, ButtonState } from '../Button/Button.types';
|
2
|
-
|
2
|
+
declare type ToggleButtonCommons = {
|
3
3
|
/**
|
4
4
|
* Defines the controlled checked state of the `ToggleButton`.
|
5
5
|
* If passed, `ToggleButton` ignores the `defaultChecked` property.
|
@@ -17,3 +17,4 @@ export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommon
|
|
17
17
|
defaultChecked?: boolean;
|
18
18
|
};
|
19
19
|
export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
|
20
|
+
export {};
|
@@ -2,4 +2,4 @@ export * from './ToggleButton';
|
|
2
2
|
export * from './ToggleButton.types';
|
3
3
|
export * from './renderToggleButton';
|
4
4
|
export * from './useToggleButton';
|
5
|
-
export { toggleButtonClassName,
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
@@ -2,5 +2,5 @@ export * from './ToggleButton';
|
|
2
2
|
export * from './ToggleButton.types';
|
3
3
|
export * from './renderToggleButton';
|
4
4
|
export * from './useToggleButton';
|
5
|
-
export { toggleButtonClassName,
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
export {
|
1
|
+
export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export {
|
1
|
+
export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
|
2
2
|
//# sourceMappingURL=renderToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
|
|
6
6
|
* @param props - User provided props to the ToggleButton component.
|
7
7
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
8
8
|
*/
|
9
|
-
export declare const
|
9
|
+
export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useControllableState } from '@fluentui/react-utilities';
|
2
2
|
import * as React from 'react';
|
3
|
-
import {
|
3
|
+
import { useButton_unstable } from '../Button/useButton';
|
4
4
|
/**
|
5
5
|
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
|
6
6
|
* processed state.
|
@@ -8,12 +8,16 @@ import { useButton } from '../Button/useButton';
|
|
8
8
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
9
9
|
*/
|
10
10
|
|
11
|
-
export const
|
11
|
+
export const useToggleButton_unstable = ({
|
12
12
|
checked,
|
13
13
|
defaultChecked,
|
14
14
|
...props
|
15
15
|
}, ref) => {
|
16
|
-
const
|
16
|
+
const {
|
17
|
+
disabled,
|
18
|
+
disabledFocusable
|
19
|
+
} = props;
|
20
|
+
const buttonState = useButton_unstable(props, ref);
|
17
21
|
const {
|
18
22
|
role,
|
19
23
|
onClick
|
@@ -30,18 +34,18 @@ export const useToggleButton = ({
|
|
30
34
|
checked: checkedValue,
|
31
35
|
// Slots definition
|
32
36
|
root: { ...buttonState.root,
|
33
|
-
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']:
|
37
|
+
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
|
34
38
|
onClick: React.useCallback(ev => {
|
35
|
-
if (
|
36
|
-
onClick(ev);
|
39
|
+
if (!disabled && !disabledFocusable) {
|
40
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
|
37
41
|
|
38
42
|
if (ev.defaultPrevented) {
|
39
43
|
return;
|
40
44
|
}
|
41
|
-
}
|
42
45
|
|
43
|
-
|
44
|
-
|
46
|
+
setCheckedValue(!checkedValue);
|
47
|
+
}
|
48
|
+
}, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
|
45
49
|
}
|
46
50
|
};
|
47
51
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,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,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;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","sourceRoot":""}
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { ToggleButtonState } from './ToggleButton.types';
|
2
2
|
export declare const toggleButtonClassName = "fui-ToggleButton";
|
3
|
-
export declare const
|
3
|
+
export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import { shorthands, mergeClasses, __styles } from '@
|
2
|
-
import {
|
1
|
+
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
3
4
|
export const toggleButtonClassName = 'fui-ToggleButton';
|
4
5
|
|
5
6
|
const useCheckedStyles = /*#__PURE__*/__styles({
|
@@ -174,7 +175,7 @@ const useDisabledStyles = /*#__PURE__*/__styles({
|
|
174
175
|
"a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
|
175
176
|
});
|
176
177
|
|
177
|
-
export const
|
178
|
+
export const useToggleButtonStyles_unstable = state => {
|
178
179
|
const checkedStyles = useCheckedStyles();
|
179
180
|
const disabledStyles = useDisabledStyles();
|
180
181
|
const {
|
@@ -187,7 +188,7 @@ export const useToggleButtonStyles = state => {
|
|
187
188
|
checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
|
188
189
|
(disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
|
189
190
|
state.root.className);
|
190
|
-
|
191
|
+
useButtonStyles_unstable(state);
|
191
192
|
return state;
|
192
193
|
};
|
193
194
|
//# sourceMappingURL=useToggleButtonStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,gBAAG;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;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;;AAiEA,OAAO,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,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAxBM","sourceRoot":""}
|
@@ -18,9 +18,9 @@ const useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
|
|
18
18
|
|
19
19
|
|
20
20
|
exports.Button = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
-
const state = useButton_1.
|
22
|
-
useButtonStyles_1.
|
23
|
-
return renderButton_1.
|
21
|
+
const state = useButton_1.useButton_unstable(props, ref);
|
22
|
+
useButtonStyles_1.useButtonStyles_unstable(state);
|
23
|
+
return renderButton_1.renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
24
24
|
});
|
25
25
|
exports.Button.displayName = 'Button';
|
26
26
|
//# sourceMappingURL=Button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/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,
|
1
|
+
{"version":3,"sources":["../../../src/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","sourceRoot":""}
|
@@ -1,14 +1,14 @@
|
|
1
|
-
import {
|
2
|
-
import type { ComponentProps, ComponentState,
|
1
|
+
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
3
3
|
export declare type ButtonSlots = {
|
4
4
|
/**
|
5
5
|
* Root of the component that renders as either a `<button>` tag or an `<a>` tag.
|
6
6
|
*/
|
7
|
-
root:
|
7
|
+
root: Slot<ARIAButtonSlotProps>;
|
8
8
|
/**
|
9
9
|
* Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
|
10
10
|
*/
|
11
|
-
icon?:
|
11
|
+
icon?: Slot<'span'>;
|
12
12
|
};
|
13
13
|
export declare type ButtonCommons = {
|
14
14
|
/**
|
@@ -40,7 +40,7 @@ export declare type ButtonCommons = {
|
|
40
40
|
* A button can format its icon to appear before or after its content.
|
41
41
|
* @default 'before'
|
42
42
|
*/
|
43
|
-
iconPosition
|
43
|
+
iconPosition?: 'before' | 'after';
|
44
44
|
/**
|
45
45
|
* A button can be rounded, circular, or square.
|
46
46
|
* @default 'rounded'
|
@@ -1,5 +1,5 @@
|
|
1
1
|
export * from './Button';
|
2
|
-
export
|
2
|
+
export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
|
3
3
|
export * from './renderButton';
|
4
4
|
export * from './useButton';
|
5
|
-
export { buttonClassName,
|
5
|
+
export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
|
@@ -3,14 +3,12 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
|
7
7
|
|
8
8
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
9
9
|
|
10
10
|
tslib_1.__exportStar(require("./Button"), exports);
|
11
11
|
|
12
|
-
tslib_1.__exportStar(require("./Button.types"), exports);
|
13
|
-
|
14
12
|
tslib_1.__exportStar(require("./renderButton"), exports);
|
15
13
|
|
16
14
|
tslib_1.__exportStar(require("./useButton"), exports);
|
@@ -23,10 +21,10 @@ Object.defineProperty(exports, "buttonClassName", {
|
|
23
21
|
return useButtonStyles_1.buttonClassName;
|
24
22
|
}
|
25
23
|
});
|
26
|
-
Object.defineProperty(exports, "
|
24
|
+
Object.defineProperty(exports, "useButtonStyles_unstable", {
|
27
25
|
enumerable: true,
|
28
26
|
get: function () {
|
29
|
-
return useButtonStyles_1.
|
27
|
+
return useButtonStyles_1.useButtonStyles_unstable;
|
30
28
|
}
|
31
29
|
});
|
32
30
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;
|
1
|
+
{"version":3,"sources":["../../../src/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","sourceRoot":""}
|
@@ -2,4 +2,4 @@ import type { ButtonState } from './Button.types';
|
|
2
2
|
/**
|
3
3
|
* Renders a Button component by passing the state defined props to the appropriate slots.
|
4
4
|
*/
|
5
|
-
export declare const
|
5
|
+
export declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.renderButton_unstable = void 0;
|
7
7
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
9
9
|
|
@@ -13,20 +13,20 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
13
13
|
*/
|
14
14
|
|
15
15
|
|
16
|
-
const
|
16
|
+
const renderButton_unstable = state => {
|
17
17
|
const {
|
18
18
|
slots,
|
19
19
|
slotProps
|
20
|
-
} = react_utilities_1.getSlots(state
|
20
|
+
} = react_utilities_1.getSlots(state);
|
21
21
|
const {
|
22
22
|
iconOnly,
|
23
23
|
iconPosition
|
24
24
|
} = state;
|
25
25
|
return React.createElement(slots.root, { ...slotProps.root
|
26
|
-
}, iconPosition !== 'after' && React.createElement(slots.icon, { ...slotProps.icon
|
27
|
-
}), !iconOnly && state.root.children, iconPosition === 'after' && React.createElement(slots.icon, { ...slotProps.icon
|
26
|
+
}, iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
27
|
+
}), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
28
28
|
}));
|
29
29
|
};
|
30
30
|
|
31
|
-
exports.
|
31
|
+
exports.renderButton_unstable = renderButton_unstable;
|
32
32
|
//# sourceMappingURL=renderButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/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,
|
1
|
+
{"version":3,"sources":["../../../src/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","sourceRoot":""}
|