@atlaskit/button 21.1.4 → 21.1.6
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.md +15 -0
- package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +58 -118
- package/dist/cjs/new-button/variants/default/button.js +36 -41
- package/dist/cjs/new-button/variants/default/link.compiled.css +119 -0
- package/dist/cjs/new-button/variants/default/link.js +111 -59
- package/dist/cjs/new-button/variants/icon/button.js +128 -143
- package/dist/cjs/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/cjs/new-button/variants/icon/link.js +101 -75
- package/dist/cjs/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/cjs/new-button/variants/shared/button-base.js +223 -0
- package/dist/cjs/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/cjs/new-button/variants/shared/content.js +13 -53
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +54 -117
- package/dist/es2019/new-button/variants/default/button.js +47 -56
- package/dist/es2019/new-button/variants/default/link.compiled.css +119 -0
- package/dist/es2019/new-button/variants/default/link.js +113 -63
- package/dist/es2019/new-button/variants/icon/button.js +117 -133
- package/dist/es2019/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/es2019/new-button/variants/icon/link.js +94 -70
- package/dist/es2019/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/es2019/new-button/variants/shared/button-base.js +203 -0
- package/dist/es2019/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/es2019/new-button/variants/shared/content.js +13 -52
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +55 -120
- package/dist/esm/new-button/variants/default/button.js +33 -41
- package/dist/esm/new-button/variants/default/link.compiled.css +119 -0
- package/dist/esm/new-button/variants/default/link.js +111 -59
- package/dist/esm/new-button/variants/icon/button.js +128 -143
- package/dist/esm/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/esm/new-button/variants/icon/link.js +98 -72
- package/dist/esm/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/esm/new-button/variants/shared/button-base.js +213 -0
- package/dist/esm/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/esm/new-button/variants/shared/content.js +13 -53
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types/new-button/variants/default/button.d.ts +5 -1
- package/dist/types/new-button/variants/default/link.d.ts +22 -8
- package/dist/types/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types/new-button/variants/types.d.ts +26 -6
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types-ts4.5/new-button/variants/default/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +22 -8
- package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/types.d.ts +26 -6
- package/package.json +17 -15
- package/dist/cjs/new-button/variants/default/use-default-button.js +0 -98
- package/dist/cjs/new-button/variants/icon/use-icon-button.js +0 -88
- package/dist/cjs/new-button/variants/shared/use-button-base.js +0 -639
- package/dist/es2019/new-button/variants/default/use-default-button.js +0 -88
- package/dist/es2019/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/es2019/new-button/variants/shared/use-button-base.js +0 -619
- package/dist/esm/new-button/variants/default/use-default-button.js +0 -88
- package/dist/esm/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/esm/new-button/variants/shared/use-button-base.js +0 -629
- package/dist/types/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +0 -46
- package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +0 -46
|
@@ -1,629 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import React, { useRef } from 'react';
|
|
5
|
-
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
6
|
-
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
7
|
-
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
|
-
import { Box, xcss } from '@atlaskit/primitives';
|
|
10
|
-
import * as colors from '@atlaskit/theme/colors';
|
|
11
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
12
|
-
import { SplitButtonContext, useSplitButtonContext } from '../../containers/split-button/split-button-context';
|
|
13
|
-
import blockEvents from './block-events';
|
|
14
|
-
import { LOADING_LABEL } from './constants';
|
|
15
|
-
import renderLoadingOverlay from './loading-overlay';
|
|
16
|
-
var buttonStyles = xcss({
|
|
17
|
-
display: 'inline-flex',
|
|
18
|
-
boxSizing: 'border-box',
|
|
19
|
-
width: 'auto',
|
|
20
|
-
maxWidth: '100%',
|
|
21
|
-
position: 'relative',
|
|
22
|
-
alignItems: 'baseline',
|
|
23
|
-
justifyContent: 'center',
|
|
24
|
-
columnGap: 'space.050',
|
|
25
|
-
borderRadius: 'border.radius.100',
|
|
26
|
-
borderWidth: 'border.width.0',
|
|
27
|
-
flexShrink: 0,
|
|
28
|
-
height: '2rem',
|
|
29
|
-
font: 'font.body',
|
|
30
|
-
fontWeight: 'font.weight.medium',
|
|
31
|
-
paddingBlock: 'space.075',
|
|
32
|
-
paddingInlineEnd: 'space.150',
|
|
33
|
-
paddingInlineStart: 'space.150',
|
|
34
|
-
textAlign: 'center',
|
|
35
|
-
transition: 'background 0.1s ease-out',
|
|
36
|
-
verticalAlign: 'middle',
|
|
37
|
-
'::after': {
|
|
38
|
-
borderRadius: 'inherit',
|
|
39
|
-
inset: 'space.0',
|
|
40
|
-
borderStyle: 'solid',
|
|
41
|
-
borderWidth: "var(--ds-border-width, 1px)",
|
|
42
|
-
pointerEvents: 'none',
|
|
43
|
-
position: 'absolute'
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
var defaultInteractiveStyles = xcss({
|
|
47
|
-
':hover': {
|
|
48
|
-
background: "var(--ds-background-neutral-hovered, #091e4214)",
|
|
49
|
-
// @ts-expect-error
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
51
|
-
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
52
|
-
},
|
|
53
|
-
':active': {
|
|
54
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
55
|
-
background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
|
|
56
|
-
// @ts-expect-error
|
|
57
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
58
|
-
color: "var(--ds-text, ".concat(colors.B400, ")")
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
var defaultInteractiveRefreshedStyles = xcss({
|
|
62
|
-
':hover': {
|
|
63
|
-
background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
|
|
64
|
-
color: 'color.text.subtle'
|
|
65
|
-
},
|
|
66
|
-
':active': {
|
|
67
|
-
background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
|
|
68
|
-
color: 'color.text.subtle'
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
var defaultStyles = xcss({
|
|
72
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
73
|
-
background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
|
|
74
|
-
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
75
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
76
|
-
color: "var(--ds-text, ".concat(colors.N500, ")"),
|
|
77
|
-
':visited': {
|
|
78
|
-
// @ts-expect-error
|
|
79
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
80
|
-
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
81
|
-
},
|
|
82
|
-
':hover': {
|
|
83
|
-
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
84
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
85
|
-
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
86
|
-
},
|
|
87
|
-
':active': {
|
|
88
|
-
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
89
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
90
|
-
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
91
|
-
},
|
|
92
|
-
':focus': {
|
|
93
|
-
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
94
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
95
|
-
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
var defaultRefreshedStyles = xcss({
|
|
99
|
-
background: "var(--ds-background-neutral-subtle, #00000000)",
|
|
100
|
-
color: 'color.text.subtle',
|
|
101
|
-
'::after': {
|
|
102
|
-
content: '""',
|
|
103
|
-
borderColor: 'color.border'
|
|
104
|
-
},
|
|
105
|
-
':visited': {
|
|
106
|
-
color: 'color.text.subtle'
|
|
107
|
-
},
|
|
108
|
-
':hover': {
|
|
109
|
-
color: 'color.text.subtle'
|
|
110
|
-
},
|
|
111
|
-
':active': {
|
|
112
|
-
color: 'color.text.subtle'
|
|
113
|
-
},
|
|
114
|
-
':focus': {
|
|
115
|
-
color: 'color.text.subtle'
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
var primaryStyles = xcss({
|
|
119
|
-
background: "var(--ds-background-brand-bold, #0052CC)",
|
|
120
|
-
color: 'color.text.inverse',
|
|
121
|
-
':visited': {
|
|
122
|
-
color: 'color.text.inverse'
|
|
123
|
-
},
|
|
124
|
-
':hover': {
|
|
125
|
-
color: 'color.text.inverse'
|
|
126
|
-
},
|
|
127
|
-
':active': {
|
|
128
|
-
color: 'color.text.inverse'
|
|
129
|
-
},
|
|
130
|
-
':focus': {
|
|
131
|
-
color: 'color.text.inverse'
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
var primaryInteractiveStyles = xcss({
|
|
135
|
-
':hover': {
|
|
136
|
-
// @ts-expect-error
|
|
137
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
138
|
-
background: "var(--ds-background-brand-bold-hovered, #0065FF)"
|
|
139
|
-
},
|
|
140
|
-
':active': {
|
|
141
|
-
// @ts-expect-error
|
|
142
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
143
|
-
background: "var(--ds-background-brand-bold-pressed, #0747A6)"
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
var warningStyles = xcss({
|
|
147
|
-
background: "var(--ds-background-warning-bold, #FFAB00)",
|
|
148
|
-
// @ts-expect-error
|
|
149
|
-
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
150
|
-
':visited': {
|
|
151
|
-
// @ts-expect-error
|
|
152
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
153
|
-
},
|
|
154
|
-
':hover': {
|
|
155
|
-
// @ts-expect-error
|
|
156
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
157
|
-
},
|
|
158
|
-
':active': {
|
|
159
|
-
// @ts-expect-error
|
|
160
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
161
|
-
},
|
|
162
|
-
':focus': {
|
|
163
|
-
// @ts-expect-error
|
|
164
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
var warningInteractiveStyles = xcss({
|
|
168
|
-
':hover': {
|
|
169
|
-
// @ts-expect-error
|
|
170
|
-
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
171
|
-
background: "var(--ds-background-warning-bold-hovered, #FFC400)"
|
|
172
|
-
},
|
|
173
|
-
':active': {
|
|
174
|
-
// @ts-expect-error
|
|
175
|
-
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
176
|
-
background: "var(--ds-background-warning-bold-pressed, #FF991F)"
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
var dangerStyles = xcss({
|
|
180
|
-
background: "var(--ds-background-danger-bold, #DE350B)",
|
|
181
|
-
color: 'color.text.inverse',
|
|
182
|
-
':visited': {
|
|
183
|
-
color: 'color.text.inverse'
|
|
184
|
-
},
|
|
185
|
-
':hover': {
|
|
186
|
-
color: 'color.text.inverse'
|
|
187
|
-
},
|
|
188
|
-
':active': {
|
|
189
|
-
color: 'color.text.inverse'
|
|
190
|
-
},
|
|
191
|
-
':focus': {
|
|
192
|
-
color: 'color.text.inverse'
|
|
193
|
-
}
|
|
194
|
-
});
|
|
195
|
-
var dangerInteractiveStyles = xcss({
|
|
196
|
-
':hover': {
|
|
197
|
-
color: 'color.text.inverse',
|
|
198
|
-
background: "var(--ds-background-danger-bold-hovered, #FF5630)"
|
|
199
|
-
},
|
|
200
|
-
':active': {
|
|
201
|
-
color: 'color.text.inverse',
|
|
202
|
-
background: "var(--ds-background-danger-bold-pressed, #BF2600)"
|
|
203
|
-
}
|
|
204
|
-
});
|
|
205
|
-
var discoveryStyles = xcss({
|
|
206
|
-
background: "var(--ds-background-discovery-bold, #5243AA)",
|
|
207
|
-
color: 'color.text.inverse',
|
|
208
|
-
':visited': {
|
|
209
|
-
color: 'color.text.inverse'
|
|
210
|
-
},
|
|
211
|
-
':hover': {
|
|
212
|
-
color: 'color.text.inverse'
|
|
213
|
-
},
|
|
214
|
-
':active': {
|
|
215
|
-
color: 'color.text.inverse'
|
|
216
|
-
},
|
|
217
|
-
':focus': {
|
|
218
|
-
color: 'color.text.inverse'
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
var discoveryInteractiveStyles = xcss({
|
|
222
|
-
':hover': {
|
|
223
|
-
color: 'color.text.inverse',
|
|
224
|
-
background: "var(--ds-background-discovery-bold-hovered, #8777D9)"
|
|
225
|
-
},
|
|
226
|
-
':active': {
|
|
227
|
-
color: 'color.text.inverse',
|
|
228
|
-
background: "var(--ds-background-discovery-bold-pressed, #5243AA)"
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
|
-
var subtleStyles = xcss({
|
|
232
|
-
background: "var(--ds-background-neutral-subtle, transparent)",
|
|
233
|
-
// @ts-expect-error
|
|
234
|
-
color: "var(--ds-text, #42526E)",
|
|
235
|
-
':visited': {
|
|
236
|
-
// @ts-expect-error
|
|
237
|
-
color: "var(--ds-text, #42526E)"
|
|
238
|
-
},
|
|
239
|
-
':hover': {
|
|
240
|
-
// @ts-expect-error
|
|
241
|
-
color: "var(--ds-text, #42526E)"
|
|
242
|
-
},
|
|
243
|
-
':active': {
|
|
244
|
-
// @ts-expect-error
|
|
245
|
-
color: "var(--ds-text, #42526E)"
|
|
246
|
-
},
|
|
247
|
-
':focus': {
|
|
248
|
-
// @ts-expect-error
|
|
249
|
-
color: "var(--ds-text, #42526E)"
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
var subtleRefreshedStyles = xcss({
|
|
253
|
-
background: "var(--ds-background-neutral-subtle, transparent)",
|
|
254
|
-
color: 'color.text.subtle',
|
|
255
|
-
':visited': {
|
|
256
|
-
color: 'color.text.subtle'
|
|
257
|
-
},
|
|
258
|
-
':hover': {
|
|
259
|
-
color: 'color.text.subtle'
|
|
260
|
-
},
|
|
261
|
-
':active': {
|
|
262
|
-
color: 'color.text.subtle'
|
|
263
|
-
},
|
|
264
|
-
':focus': {
|
|
265
|
-
color: 'color.text.subtle'
|
|
266
|
-
}
|
|
267
|
-
});
|
|
268
|
-
var subtleInteractiveStyles = xcss({
|
|
269
|
-
':hover': {
|
|
270
|
-
background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
|
|
271
|
-
// @ts-expect-error
|
|
272
|
-
color: "var(--ds-text, #42526E)"
|
|
273
|
-
},
|
|
274
|
-
':active': {
|
|
275
|
-
background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
|
|
276
|
-
// @ts-expect-error
|
|
277
|
-
color: "var(--ds-text, #42526E)"
|
|
278
|
-
}
|
|
279
|
-
});
|
|
280
|
-
var subtleInteractiveRefreshedStyles = xcss({
|
|
281
|
-
':hover': {
|
|
282
|
-
background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
|
|
283
|
-
color: 'color.text.subtle'
|
|
284
|
-
},
|
|
285
|
-
':active': {
|
|
286
|
-
background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
|
|
287
|
-
color: 'color.text.subtle'
|
|
288
|
-
}
|
|
289
|
-
});
|
|
290
|
-
|
|
291
|
-
// Reinforce existing styles with higher specificity
|
|
292
|
-
// to defend against global anchor styles from products,
|
|
293
|
-
// preventing issues in Jira and Confluence.
|
|
294
|
-
var linkDefensiveStyles = xcss({
|
|
295
|
-
textDecoration: 'none',
|
|
296
|
-
':hover': {
|
|
297
|
-
textDecoration: 'none'
|
|
298
|
-
},
|
|
299
|
-
':active': {
|
|
300
|
-
textDecoration: 'none'
|
|
301
|
-
},
|
|
302
|
-
':focus': {
|
|
303
|
-
textDecoration: 'none'
|
|
304
|
-
},
|
|
305
|
-
':visited': {
|
|
306
|
-
textDecoration: 'none'
|
|
307
|
-
}
|
|
308
|
-
});
|
|
309
|
-
var disabledStyles = xcss({
|
|
310
|
-
cursor: 'not-allowed',
|
|
311
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
312
|
-
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
313
|
-
color: 'color.text.disabled',
|
|
314
|
-
'::after': {
|
|
315
|
-
content: 'none'
|
|
316
|
-
},
|
|
317
|
-
':visited': {
|
|
318
|
-
color: 'color.text.disabled'
|
|
319
|
-
},
|
|
320
|
-
':hover': {
|
|
321
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
322
|
-
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
323
|
-
color: 'color.text.disabled'
|
|
324
|
-
},
|
|
325
|
-
':active': {
|
|
326
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
327
|
-
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
328
|
-
color: 'color.text.disabled'
|
|
329
|
-
},
|
|
330
|
-
':focus': {
|
|
331
|
-
color: 'color.text.disabled'
|
|
332
|
-
}
|
|
333
|
-
});
|
|
334
|
-
var selectedStyles = xcss({
|
|
335
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
336
|
-
background: "var(--ds-background-selected, ".concat(colors.N700, ")"),
|
|
337
|
-
// @ts-expect-error
|
|
338
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
339
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
340
|
-
':visited': {
|
|
341
|
-
// @ts-expect-error
|
|
342
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
343
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
344
|
-
},
|
|
345
|
-
':hover': {
|
|
346
|
-
// @ts-expect-error
|
|
347
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
348
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
349
|
-
},
|
|
350
|
-
':active': {
|
|
351
|
-
// @ts-expect-error
|
|
352
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
353
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
354
|
-
},
|
|
355
|
-
':focus': {
|
|
356
|
-
// @ts-expect-error
|
|
357
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
358
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
var selectedRefreshedStyles = xcss({
|
|
362
|
-
background: "var(--ds-background-selected, #E9F2FF)",
|
|
363
|
-
color: 'color.text.selected',
|
|
364
|
-
'::after': {
|
|
365
|
-
content: '""',
|
|
366
|
-
borderColor: 'color.border.selected'
|
|
367
|
-
},
|
|
368
|
-
':visited': {
|
|
369
|
-
color: 'color.text.selected'
|
|
370
|
-
},
|
|
371
|
-
':hover': {
|
|
372
|
-
color: 'color.text.selected'
|
|
373
|
-
},
|
|
374
|
-
':active': {
|
|
375
|
-
color: 'color.text.selected'
|
|
376
|
-
},
|
|
377
|
-
':focus': {
|
|
378
|
-
color: 'color.text.selected'
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
var selectedInsideSplitButtonStyles = xcss({
|
|
382
|
-
// This is 2 so it appears above the split button divider when selected.
|
|
383
|
-
// See split-button.tsx.
|
|
384
|
-
// @ts-expect-error — We need a local zindex just for button.
|
|
385
|
-
zIndex: 2
|
|
386
|
-
});
|
|
387
|
-
var selectedInteractiveStyles = xcss({
|
|
388
|
-
':hover': {
|
|
389
|
-
// @ts-expect-error
|
|
390
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
391
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
392
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
393
|
-
background: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")")
|
|
394
|
-
},
|
|
395
|
-
':active': {
|
|
396
|
-
// @ts-expect-error
|
|
397
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
398
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
399
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
400
|
-
background: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
|
|
401
|
-
}
|
|
402
|
-
});
|
|
403
|
-
|
|
404
|
-
// TODO: Remove me once we kill color fallbacks
|
|
405
|
-
var selectedWarningStyles = xcss({
|
|
406
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
407
|
-
background: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
|
|
408
|
-
// @ts-expect-error
|
|
409
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
410
|
-
color: "var(--ds-text-selected, ".concat(colors.N800, ")"),
|
|
411
|
-
':hover': {
|
|
412
|
-
// @ts-expect-error
|
|
413
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
414
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
415
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
416
|
-
background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
|
|
417
|
-
},
|
|
418
|
-
':active': {
|
|
419
|
-
// @ts-expect-error
|
|
420
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
421
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
422
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
423
|
-
background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
|
|
424
|
-
}
|
|
425
|
-
});
|
|
426
|
-
|
|
427
|
-
// TODO: Remove me once we kill color fallbacks
|
|
428
|
-
var selectedDangerStyles = xcss({
|
|
429
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
430
|
-
background: "var(--ds-background-selected, ".concat(colors.R500, ")"),
|
|
431
|
-
// @ts-expect-error
|
|
432
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
433
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
434
|
-
':hover': {
|
|
435
|
-
// @ts-expect-error
|
|
436
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
437
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
438
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
439
|
-
background: "var(--ds-background-selected, ".concat(colors.R500, ")")
|
|
440
|
-
},
|
|
441
|
-
':active': {
|
|
442
|
-
// @ts-expect-error
|
|
443
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
444
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
445
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
446
|
-
background: "var(--ds-background-selected, ".concat(colors.R500, ")")
|
|
447
|
-
}
|
|
448
|
-
});
|
|
449
|
-
|
|
450
|
-
// TODO: Remove me once we kill color fallbacks
|
|
451
|
-
var selectedDiscoveryStyles = xcss({
|
|
452
|
-
background: "var(--ds-background-selected, #403294)",
|
|
453
|
-
// @ts-expect-error
|
|
454
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
455
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
456
|
-
':hover': {
|
|
457
|
-
// @ts-expect-error
|
|
458
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
459
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
460
|
-
background: "var(--ds-background-selected, #403294)"
|
|
461
|
-
},
|
|
462
|
-
':active': {
|
|
463
|
-
// @ts-expect-error
|
|
464
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
465
|
-
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
466
|
-
background: "var(--ds-background-selected, #403294)"
|
|
467
|
-
}
|
|
468
|
-
});
|
|
469
|
-
var spacingCompactStyles = xcss({
|
|
470
|
-
columnGap: 'space.050',
|
|
471
|
-
height: '1.5rem',
|
|
472
|
-
paddingBlock: 'space.025',
|
|
473
|
-
paddingInlineEnd: 'space.150',
|
|
474
|
-
paddingInlineStart: 'space.150',
|
|
475
|
-
verticalAlign: 'middle'
|
|
476
|
-
});
|
|
477
|
-
var circleStyles = xcss({
|
|
478
|
-
borderRadius: 'border.radius.circle'
|
|
479
|
-
});
|
|
480
|
-
var fullWidthStyles = xcss({
|
|
481
|
-
width: '100%'
|
|
482
|
-
});
|
|
483
|
-
var loadingStyles = xcss({
|
|
484
|
-
cursor: 'progress'
|
|
485
|
-
});
|
|
486
|
-
var iconButtonStyles = xcss({
|
|
487
|
-
height: '2rem',
|
|
488
|
-
width: '2rem',
|
|
489
|
-
paddingInlineEnd: 'space.0',
|
|
490
|
-
paddingInlineStart: 'space.0'
|
|
491
|
-
});
|
|
492
|
-
var iconButtonCompactStyles = xcss({
|
|
493
|
-
width: '1.5rem',
|
|
494
|
-
height: '1.5rem'
|
|
495
|
-
});
|
|
496
|
-
var buttonIconBeforeStyles = xcss({
|
|
497
|
-
paddingInlineStart: 'space.100'
|
|
498
|
-
});
|
|
499
|
-
var buttonIconAfterStyles = xcss({
|
|
500
|
-
paddingInlineEnd: 'space.100'
|
|
501
|
-
});
|
|
502
|
-
var splitButtonStyles = xcss({
|
|
503
|
-
':focus-visible': {
|
|
504
|
-
zIndex: 'card'
|
|
505
|
-
}
|
|
506
|
-
});
|
|
507
|
-
var navigationSplitButtonStyles = xcss({
|
|
508
|
-
width: '24px',
|
|
509
|
-
backgroundColor: 'color.background.neutral.subtle',
|
|
510
|
-
paddingInlineEnd: 'space.075',
|
|
511
|
-
paddingInlineStart: 'space.075'
|
|
512
|
-
});
|
|
513
|
-
var loadingOverlayStyles = xcss({
|
|
514
|
-
display: 'flex',
|
|
515
|
-
position: 'absolute',
|
|
516
|
-
alignItems: 'center',
|
|
517
|
-
justifyContent: 'center',
|
|
518
|
-
insetBlockEnd: 'space.0',
|
|
519
|
-
insetBlockStart: 'space.0',
|
|
520
|
-
insetInlineEnd: 'space.0',
|
|
521
|
-
insetInlineStart: 'space.0'
|
|
522
|
-
});
|
|
523
|
-
|
|
524
|
-
/**
|
|
525
|
-
* __Use button base__
|
|
526
|
-
*
|
|
527
|
-
* A React hook that accepts a set of common Button props,
|
|
528
|
-
* and processes them to return consistent base props for usage
|
|
529
|
-
* across various Button components.
|
|
530
|
-
*
|
|
531
|
-
* It also:
|
|
532
|
-
* - Implements auto focus when enabled.
|
|
533
|
-
* - Appends the `onClick` event with UFO analytics tracking.
|
|
534
|
-
*
|
|
535
|
-
* @private
|
|
536
|
-
*/
|
|
537
|
-
var useButtonBase = function useButtonBase(_ref) {
|
|
538
|
-
var _ref$appearance = _ref.appearance,
|
|
539
|
-
propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
540
|
-
_ref$autoFocus = _ref.autoFocus,
|
|
541
|
-
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
542
|
-
buttonType = _ref.buttonType,
|
|
543
|
-
_ref$isDisabled = _ref.isDisabled,
|
|
544
|
-
propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
545
|
-
_ref$isLoading = _ref.isLoading,
|
|
546
|
-
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
547
|
-
_ref$isSelected = _ref.isSelected,
|
|
548
|
-
propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
|
|
549
|
-
_ref$isIconButton = _ref.isIconButton,
|
|
550
|
-
isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
|
|
551
|
-
_ref$isCircle = _ref.isCircle,
|
|
552
|
-
isCircle = _ref$isCircle === void 0 ? false : _ref$isCircle,
|
|
553
|
-
_ref$hasIconBefore = _ref.hasIconBefore,
|
|
554
|
-
hasIconBefore = _ref$hasIconBefore === void 0 ? false : _ref$hasIconBefore,
|
|
555
|
-
_ref$hasIconAfter = _ref.hasIconAfter,
|
|
556
|
-
hasIconAfter = _ref$hasIconAfter === void 0 ? false : _ref$hasIconAfter,
|
|
557
|
-
children = _ref.children,
|
|
558
|
-
onClick = _ref.onClick,
|
|
559
|
-
onMouseDownCapture = _ref.onMouseDownCapture,
|
|
560
|
-
onMouseUpCapture = _ref.onMouseUpCapture,
|
|
561
|
-
onKeyDownCapture = _ref.onKeyDownCapture,
|
|
562
|
-
onKeyUpCapture = _ref.onKeyUpCapture,
|
|
563
|
-
onTouchStartCapture = _ref.onTouchStartCapture,
|
|
564
|
-
onTouchEndCapture = _ref.onTouchEndCapture,
|
|
565
|
-
onPointerDownCapture = _ref.onPointerDownCapture,
|
|
566
|
-
onPointerUpCapture = _ref.onPointerUpCapture,
|
|
567
|
-
onClickCapture = _ref.onClickCapture,
|
|
568
|
-
ref = _ref.ref,
|
|
569
|
-
_ref$shouldFitContain = _ref.shouldFitContainer,
|
|
570
|
-
shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
|
|
571
|
-
_ref$spacing = _ref.spacing,
|
|
572
|
-
propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
573
|
-
testId = _ref.testId,
|
|
574
|
-
ariaLabel = _ref.ariaLabel,
|
|
575
|
-
ariaLabelledBy = _ref.ariaLabelledBy;
|
|
576
|
-
var localRef = useRef(null);
|
|
577
|
-
var splitButtonContext = useSplitButtonContext();
|
|
578
|
-
var loadingLabelId = useId();
|
|
579
|
-
var isSplitButton = Boolean(splitButtonContext);
|
|
580
|
-
var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
|
|
581
|
-
var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
|
|
582
|
-
var appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
|
|
583
|
-
var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
|
|
584
|
-
var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
|
|
585
|
-
var isInteractive = !isDisabled && !isLoading;
|
|
586
|
-
// Also treat loading buttons as disabled
|
|
587
|
-
var isEffectivelyDisabled = isDisabled || isLoading;
|
|
588
|
-
var isSelected = propIsSelected && !isDisabled;
|
|
589
|
-
useAutoFocus(localRef, autoFocus);
|
|
590
|
-
return _objectSpread({
|
|
591
|
-
ref: mergeRefs([localRef, ref]),
|
|
592
|
-
xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
593
|
-
// TODO: remove me once we kill color fallbacks
|
|
594
|
-
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
595
|
-
// TODO: remove me once we kill color fallbacks
|
|
596
|
-
isSelected && appearance === 'warning' && selectedWarningStyles,
|
|
597
|
-
// TODO: remove me once we kill color fallbacks
|
|
598
|
-
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
|
|
599
|
-
isDisabled: isEffectivelyDisabled,
|
|
600
|
-
children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
|
|
601
|
-
value: undefined
|
|
602
|
-
}, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
|
|
603
|
-
as: "span",
|
|
604
|
-
xcss: loadingOverlayStyles
|
|
605
|
-
}, renderLoadingOverlay({
|
|
606
|
-
spacing: spacing,
|
|
607
|
-
appearance: appearance,
|
|
608
|
-
isDisabled: isDisabled,
|
|
609
|
-
isSelected: isSelected,
|
|
610
|
-
testId: testId
|
|
611
|
-
})) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
|
|
612
|
-
id: loadingLabelId
|
|
613
|
-
}, LOADING_LABEL)),
|
|
614
|
-
'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
|
|
615
|
-
'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
|
|
616
|
-
}, blockEvents(isEffectivelyDisabled, {
|
|
617
|
-
onClick: onClick,
|
|
618
|
-
onMouseDownCapture: onMouseDownCapture,
|
|
619
|
-
onMouseUpCapture: onMouseUpCapture,
|
|
620
|
-
onKeyDownCapture: onKeyDownCapture,
|
|
621
|
-
onKeyUpCapture: onKeyUpCapture,
|
|
622
|
-
onTouchStartCapture: onTouchStartCapture,
|
|
623
|
-
onTouchEndCapture: onTouchEndCapture,
|
|
624
|
-
onPointerDownCapture: onPointerDownCapture,
|
|
625
|
-
onPointerUpCapture: onPointerUpCapture,
|
|
626
|
-
onClickCapture: onClickCapture
|
|
627
|
-
}));
|
|
628
|
-
};
|
|
629
|
-
export default useButtonBase;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
|
|
2
|
-
import type { CommonButtonProps } from '../types';
|
|
3
|
-
import type { CommonDefaultButtonProps } from './types';
|
|
4
|
-
type UseDefaultButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonDefaultButtonProps & Pick<CommonButtonProps<TagName>, 'testId'>;
|
|
5
|
-
type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
|
|
6
|
-
/**
|
|
7
|
-
* __Use default button base__
|
|
8
|
-
*
|
|
9
|
-
* A React hook that accepts a set of default Button props,
|
|
10
|
-
* and processes them to return consistent base props for usage
|
|
11
|
-
* across Button and LinkButton variants.
|
|
12
|
-
*
|
|
13
|
-
* @private
|
|
14
|
-
*/
|
|
15
|
-
declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
|
|
16
|
-
export default useDefaultButton;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
|
|
2
|
-
import type { CommonButtonProps } from '../types';
|
|
3
|
-
import type { CommonIconButtonProps } from './types';
|
|
4
|
-
type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & Omit<CommonIconButtonProps, 'isTooltipDisabled' | 'tooltip'> & Pick<CommonButtonProps<TagName>, 'testId'>;
|
|
5
|
-
type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
|
|
6
|
-
/**
|
|
7
|
-
* __Use icon button__
|
|
8
|
-
*
|
|
9
|
-
* A React hook that accepts a set of icon Button props,
|
|
10
|
-
* and processes them to return consistent base props for usage
|
|
11
|
-
* across IconButton and LinkIconButton variants.
|
|
12
|
-
*
|
|
13
|
-
* @private
|
|
14
|
-
*/
|
|
15
|
-
declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
|
|
16
|
-
export default useIconButton;
|