@fluentui/react-button 0.0.0-nightly0e0cf06c3420211029.1 → 0.0.0-nightly3082edf34720220208.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +290 -24
- package/CHANGELOG.md +64 -14
- package/dist/react-button.d.ts +39 -31
- package/lib/components/Button/Button.js +7 -7
- 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 +1 -1
- package/lib/components/Button/index.js +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.d.ts +1 -1
- package/lib/components/Button/renderButton.js +13 -9
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +1 -1
- package/lib/components/Button/useButton.js +22 -25
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +2 -9
- package/lib/components/Button/useButtonStyles.js +118 -90
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +7 -7
- 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 +15 -9
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +9 -9
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +52 -48
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +7 -7
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.d.ts +3 -4
- 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 +13 -9
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButton.js +11 -11
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +8 -6
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +7 -7
- 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 +9 -7
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButton.js +41 -45
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +38 -34
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +7 -7
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -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 +32 -30
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +47 -43
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/Button.js +1 -1
- package/lib-commonjs/CompoundButton.js +1 -1
- package/lib-commonjs/MenuButton.js +1 -1
- package/lib-commonjs/SplitButton.js +1 -1
- package/lib-commonjs/ToggleButton.js +1 -1
- package/lib-commonjs/components/Button/Button.js +8 -8
- 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 +1 -1
- package/lib-commonjs/components/Button/index.js +10 -4
- 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 +17 -14
- 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 +26 -29
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +2 -9
- package/lib-commonjs/components/Button/useButtonStyles.js +121 -92
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +8 -8
- 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 +10 -4
- 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 +19 -14
- 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 +12 -13
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +58 -53
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +8 -8
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -4
- package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/index.js +10 -4
- 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 +17 -14
- 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 +15 -16
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +12 -9
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +8 -8
- 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 +10 -4
- 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 +13 -12
- 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 +46 -51
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +44 -39
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +8 -8
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +10 -4
- 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 +36 -35
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +51 -45
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/package.json +12 -15
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -13
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -24
- package/lib-commonjs/common/isConformant.js.map +0 -1
package/dist/react-button.d.ts
CHANGED
@@ -1,17 +1,17 @@
|
|
1
|
-
import {
|
1
|
+
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
2
2
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
3
3
|
import type { ComponentState } from '@fluentui/react-utilities';
|
4
4
|
import { ForwardRefComponent } from '@fluentui/react-utilities';
|
5
|
-
import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
6
|
-
import type { MenuTriggerChildProps } from '@fluentui/react-menu';
|
7
|
-
import type { ObjectShorthandProps } from '@fluentui/react-utilities';
|
8
5
|
import * as React_2 from 'react';
|
6
|
+
import type { Slot } from '@fluentui/react-utilities';
|
9
7
|
|
10
8
|
/**
|
11
9
|
* Buttons give people a way to trigger an action.
|
12
10
|
*/
|
13
11
|
export declare const Button: ForwardRefComponent<ButtonProps>;
|
14
12
|
|
13
|
+
export declare const buttonClassName = "fui-Button";
|
14
|
+
|
15
15
|
export declare type ButtonCommons = {
|
16
16
|
/**
|
17
17
|
* A button can have its content and borders styled for greater emphasis or to be subtle.
|
@@ -42,7 +42,7 @@ export declare type ButtonCommons = {
|
|
42
42
|
* A button can format its icon to appear before or after its content.
|
43
43
|
* @default 'before'
|
44
44
|
*/
|
45
|
-
iconPosition
|
45
|
+
iconPosition?: 'before' | 'after';
|
46
46
|
/**
|
47
47
|
* A button can be rounded, circular, or square.
|
48
48
|
* @default 'rounded'
|
@@ -61,11 +61,11 @@ export declare type ButtonSlots = {
|
|
61
61
|
/**
|
62
62
|
* Root of the component that renders as either a `<button>` tag or an `<a>` tag.
|
63
63
|
*/
|
64
|
-
root:
|
64
|
+
root: Slot<ARIAButtonSlotProps>;
|
65
65
|
/**
|
66
66
|
* Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
|
67
67
|
*/
|
68
|
-
icon?:
|
68
|
+
icon?: Slot<'span'>;
|
69
69
|
};
|
70
70
|
|
71
71
|
export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
|
@@ -81,17 +81,19 @@ export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons &
|
|
81
81
|
*/
|
82
82
|
export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
|
83
83
|
|
84
|
-
export declare
|
84
|
+
export declare const compoundButtonClassName = "fui-CompoundButton";
|
85
|
+
|
86
|
+
export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
|
85
87
|
|
86
88
|
export declare type CompoundButtonSlots = ButtonSlots & {
|
87
89
|
/**
|
88
90
|
* Second line of text that describes the action this button takes.
|
89
91
|
*/
|
90
|
-
secondaryContent?:
|
92
|
+
secondaryContent?: Slot<'span'>;
|
91
93
|
/**
|
92
94
|
* Container that wraps the children and the secondaryContent slot.
|
93
95
|
*/
|
94
|
-
contentContainer:
|
96
|
+
contentContainer: NonNullable<Slot<'span'>>;
|
95
97
|
};
|
96
98
|
|
97
99
|
export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
|
@@ -101,13 +103,15 @@ export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> &
|
|
101
103
|
*/
|
102
104
|
export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
|
103
105
|
|
104
|
-
export declare
|
106
|
+
export declare const menuButtonClassName = "fui-MenuButton";
|
107
|
+
|
108
|
+
export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
|
105
109
|
|
106
110
|
export declare type MenuButtonSlots = ButtonSlots & {
|
107
111
|
/**
|
108
112
|
* Menu icon that indicates that this button has a menu that can be expanded.
|
109
113
|
*/
|
110
|
-
menuIcon?:
|
114
|
+
menuIcon?: Slot<'span'>;
|
111
115
|
};
|
112
116
|
|
113
117
|
export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
|
@@ -115,24 +119,24 @@ export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<But
|
|
115
119
|
/**
|
116
120
|
* Renders a Button component by passing the state defined props to the appropriate slots.
|
117
121
|
*/
|
118
|
-
declare const
|
119
|
-
export {
|
120
|
-
export {
|
122
|
+
declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
|
123
|
+
export { renderButton_unstable }
|
124
|
+
export { renderButton_unstable as renderToggleButton_unstable }
|
121
125
|
|
122
126
|
/**
|
123
127
|
* Renders a CompoundButton component by passing the state defined props to the appropriate slots.
|
124
128
|
*/
|
125
|
-
export declare const
|
129
|
+
export declare const renderCompoundButton_unstable: (state: CompoundButtonState) => JSX.Element;
|
126
130
|
|
127
131
|
/**
|
128
132
|
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
|
129
133
|
*/
|
130
|
-
export declare const
|
134
|
+
export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
|
131
135
|
|
132
136
|
/**
|
133
137
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
134
138
|
*/
|
135
|
-
export declare const
|
139
|
+
export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
|
136
140
|
|
137
141
|
/**
|
138
142
|
* SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
|
@@ -140,21 +144,23 @@ export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element
|
|
140
144
|
*/
|
141
145
|
export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
|
142
146
|
|
147
|
+
export declare const splitButtonClassName = "fui-SplitButton";
|
148
|
+
|
143
149
|
export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
|
144
150
|
|
145
151
|
export declare type SplitButtonSlots = {
|
146
152
|
/**
|
147
153
|
* Root of the component that wraps the primary action button and menu button.
|
148
154
|
*/
|
149
|
-
root:
|
155
|
+
root: Slot<'div'>;
|
150
156
|
/**
|
151
157
|
* Button that opens menu with secondary actions in SplitButton.
|
152
158
|
*/
|
153
|
-
menuButton?:
|
159
|
+
menuButton?: Slot<typeof MenuButton>;
|
154
160
|
/**
|
155
161
|
* Button to perform primary action in SplitButton.
|
156
162
|
*/
|
157
|
-
primaryActionButton?:
|
163
|
+
primaryActionButton?: Slot<typeof Button>;
|
158
164
|
};
|
159
165
|
|
160
166
|
export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
|
@@ -164,6 +170,8 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
|
|
164
170
|
*/
|
165
171
|
export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
|
166
172
|
|
173
|
+
export declare const toggleButtonClassName = "fui-ToggleButton";
|
174
|
+
|
167
175
|
export declare type ToggleButtonCommons = {
|
168
176
|
/**
|
169
177
|
* Defines the controlled checked state of the `ToggleButton`.
|
@@ -190,34 +198,34 @@ export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
|
|
190
198
|
* @param props - User provided props to the Button component.
|
191
199
|
* @param ref - User provided ref to be passed to the Button component.
|
192
200
|
*/
|
193
|
-
export declare const
|
201
|
+
export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
|
194
202
|
|
195
|
-
export declare const
|
203
|
+
export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
|
196
204
|
|
197
205
|
/**
|
198
206
|
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
|
199
207
|
* @param props - User provided props to the CompoundButton component.
|
200
208
|
* @param ref - User provided ref to be passed to the CompoundButton component.
|
201
209
|
*/
|
202
|
-
export declare const
|
210
|
+
export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
|
203
211
|
|
204
|
-
export declare const
|
212
|
+
export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
|
205
213
|
|
206
214
|
/**
|
207
215
|
* Given user props, returns the final state for a MenuButton.
|
208
216
|
*/
|
209
|
-
export declare const
|
217
|
+
export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
|
210
218
|
|
211
|
-
export declare const
|
219
|
+
export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
|
212
220
|
|
213
221
|
/**
|
214
222
|
* Given user props, defines default props for the SplitButton and returns processed state.
|
215
223
|
* @param props - User provided props to the SplitButton component.
|
216
224
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
217
225
|
*/
|
218
|
-
export declare const
|
226
|
+
export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
|
219
227
|
|
220
|
-
export declare const
|
228
|
+
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
|
221
229
|
|
222
230
|
/**
|
223
231
|
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
|
@@ -225,8 +233,8 @@ export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitBut
|
|
225
233
|
* @param props - User provided props to the ToggleButton component.
|
226
234
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
227
235
|
*/
|
228
|
-
export declare const
|
236
|
+
export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
|
229
237
|
|
230
|
-
export declare const
|
238
|
+
export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
|
231
239
|
|
232
240
|
export { }
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderButton_unstable } from './renderButton';
|
3
|
+
import { useButton_unstable } from './useButton';
|
4
|
+
import { useButtonStyles_unstable } from './useButtonStyles';
|
5
5
|
/**
|
6
6
|
* Buttons give people a way to trigger an action.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
return
|
9
|
+
export const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useButton_unstable(props, ref);
|
11
|
+
useButtonStyles_unstable(state);
|
12
|
+
return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
13
|
});
|
14
14
|
Button.displayName = 'Button';
|
15
15
|
//# sourceMappingURL=Button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,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'
|
@@ -2,5 +2,5 @@ export * from './Button';
|
|
2
2
|
export * from './Button.types';
|
3
3
|
export * from './renderButton';
|
4
4
|
export * from './useButton';
|
5
|
-
export {
|
5
|
+
export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}
|
@@ -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;
|
@@ -1,17 +1,21 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
4
3
|
/**
|
5
4
|
* Renders a Button component by passing the state defined props to the appropriate slots.
|
6
5
|
*/
|
7
6
|
|
8
|
-
export
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
7
|
+
export const renderButton_unstable = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state);
|
12
|
+
const {
|
13
|
+
iconOnly,
|
14
|
+
iconPosition
|
15
|
+
} = state;
|
16
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
17
|
+
}, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
|
18
|
+
}), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
|
19
|
+
}));
|
16
20
|
};
|
17
21
|
//# sourceMappingURL=renderButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,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,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM","sourceRoot":""}
|
@@ -5,4 +5,4 @@ import type { ButtonProps, ButtonState } from './Button.types';
|
|
5
5
|
* @param props - User provided props to the Button component.
|
6
6
|
* @param ref - User provided ref to be passed to the Button component.
|
7
7
|
*/
|
8
|
-
export declare const
|
8
|
+
export declare const useButton_unstable: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
|
@@ -6,32 +6,28 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
6
6
|
* @param ref - User provided ref to be passed to the Button component.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
shape = _e === void 0 ? 'rounded' : _e,
|
23
|
-
_f = props.size,
|
24
|
-
size = _f === void 0 ? 'medium' : _f;
|
25
|
-
var iconShorthand = resolveShorthand(icon);
|
9
|
+
export const useButton_unstable = (props, ref) => {
|
10
|
+
const {
|
11
|
+
appearance,
|
12
|
+
as,
|
13
|
+
block = false,
|
14
|
+
disabled = false,
|
15
|
+
disabledFocusable = false,
|
16
|
+
icon,
|
17
|
+
iconPosition = 'before',
|
18
|
+
shape = 'rounded',
|
19
|
+
size = 'medium'
|
20
|
+
} = props;
|
21
|
+
const iconShorthand = resolveShorthand(icon);
|
26
22
|
return {
|
27
23
|
// Props passed at the top-level
|
28
|
-
appearance
|
29
|
-
block
|
30
|
-
disabled
|
31
|
-
disabledFocusable
|
32
|
-
iconPosition
|
33
|
-
shape
|
34
|
-
size
|
24
|
+
appearance,
|
25
|
+
block,
|
26
|
+
disabled,
|
27
|
+
disabledFocusable,
|
28
|
+
iconPosition,
|
29
|
+
shape,
|
30
|
+
size,
|
35
31
|
// State calculated from a set of props
|
36
32
|
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
|
37
33
|
// Slots definition
|
@@ -44,7 +40,8 @@ export var useButton = function (props, ref) {
|
|
44
40
|
defaultProps: {
|
45
41
|
// useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
|
46
42
|
ref: ref,
|
47
|
-
type: 'button'
|
43
|
+
type: 'button' // This is added because the default for type is 'submit'
|
44
|
+
|
48
45
|
}
|
49
46
|
})),
|
50
47
|
icon: iconShorthand
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,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,gBAAgB,CAAC,IAAD,CAAtC;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,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM","sourceRoot":""}
|
@@ -1,10 +1,3 @@
|
|
1
1
|
import type { ButtonState } from './Button.types';
|
2
|
-
export declare const
|
3
|
-
|
4
|
-
smaller: string;
|
5
|
-
small: string;
|
6
|
-
medium: string;
|
7
|
-
large: string;
|
8
|
-
larger: string;
|
9
|
-
};
|
10
|
-
export declare const useButtonStyles: (state: ButtonState) => ButtonState;
|
2
|
+
export declare const buttonClassName = "fui-Button";
|
3
|
+
export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
|