@primer/react 38.42.0-rc.ebd425836 → 38.42.0
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 +10 -0
- package/dist/ActionBar/ActionBar.js +498 -162
- package/dist/ActionBar/index.d.ts +2 -2
- package/dist/ActionList/Group.js +4 -5
- package/dist/ActionList/Item.js +2 -2
- package/dist/Banner/Banner.js +3 -5
- package/dist/Button/ButtonBase.js +3 -2
- package/dist/Button/IconButton.js +3 -4
- package/dist/Button/types.d.ts +2 -2
- package/dist/Card/Card.js +1 -2
- package/dist/Checkbox/Checkbox.js +145 -41
- package/dist/CounterLabel/CounterLabel.js +80 -18
- package/dist/Details/Details.js +2 -4
- package/dist/FeatureFlags/FeatureFlagScope.js +1 -0
- package/dist/FilteredActionList/constants.js +2 -0
- package/dist/FilteredActionList/useAnnouncements.js +148 -81
- package/dist/FormControl/FormControlLabel.js +1 -2
- package/dist/InlineMessage/InlineMessage.js +1 -2
- package/dist/NavList/NavList.js +3 -4
- package/dist/Overlay/Overlay.js +299 -64
- package/dist/PageLayout/usePaneWidth.js +2 -2
- package/dist/Popover/Popover.js +3 -5
- package/dist/ProgressBar/ProgressBar.js +1 -2
- package/dist/SegmentedControl/SegmentedControlButton.js +1 -2
- package/dist/Select/Select.js +2 -2
- package/dist/SelectPanel/SelectPanel.d.ts +1 -1
- package/dist/SelectPanel/SelectPanel.js +1 -1
- package/dist/Spinner/Spinner.js +1 -2
- package/dist/TextInput/TextInput.js +242 -87
- package/dist/Textarea/Textarea.d.ts +2 -2
- package/dist/ToggleSwitch/ToggleSwitch.js +2 -3
- package/dist/Tooltip/Tooltip.js +98 -17
- package/dist/TooltipV2/Tooltip.js +295 -138
- package/dist/TopicTag/TopicTag.js +1 -2
- package/dist/Truncate/Truncate.js +87 -14
- package/dist/UnderlineNav/UnderlineNavItem.js +2 -4
- package/dist/deprecated/ActionList/List.js +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts +1 -1
- package/dist/internal/components/InputLabel.js +1 -2
- package/dist/internal/components/TextInputInnerAction.js +1 -2
- package/dist/internal/components/TextInputWrapper.d.ts +3 -0
- package/dist/internal/hooks/useThemeProvider.js +3 -3
- package/generated/components.json +22 -20
- package/package.json +12 -13
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { c } from "../utils/react-compiler-runtime.js";
|
|
1
2
|
import { AriaStatus } from "../live-region/AriaStatus.js";
|
|
2
3
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
3
4
|
import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
|
|
@@ -11,14 +12,19 @@ import { TextInputWrapper } from "../internal/components/TextInputWrapper.js";
|
|
|
11
12
|
import TextInputAction from "../internal/components/TextInputInnerAction.js";
|
|
12
13
|
import UnstyledTextInput from "../internal/components/UnstyledTextInput.js";
|
|
13
14
|
import { getCharacterCountState } from "../utils/character-counter.js";
|
|
14
|
-
import React, {
|
|
15
|
+
import React, { useId, useRef, useState } from "react";
|
|
15
16
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
16
17
|
import { clsx } from "clsx";
|
|
17
18
|
import { isValidElementType } from "react-is";
|
|
18
19
|
import { AlertFillIcon } from "@primer/octicons-react";
|
|
19
20
|
//#region src/TextInput/TextInput.tsx
|
|
20
|
-
const TextInput = /*#__PURE__*/ React.forwardRef((
|
|
21
|
+
const TextInput = /*#__PURE__*/ React.forwardRef((t0, ref) => {
|
|
21
22
|
var _counter$isOverLimit;
|
|
23
|
+
const $ = c(80);
|
|
24
|
+
const { icon: IconComponent, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction, block, className, contrast, disabled, loading, loaderPosition: t1, loaderText: t2, monospace, validationStatus, size: sizeProp, onFocus, onBlur, variant: variantProp, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, type: t3, required, characterLimit, onChange, value, defaultValue, "data-component": dataComponent, ...inputProps } = t0;
|
|
25
|
+
const loaderPosition = t1 === void 0 ? "auto" : t1;
|
|
26
|
+
const loaderText = t2 === void 0 ? "Loading" : t2;
|
|
27
|
+
const type = t3 === void 0 ? "text" : t3;
|
|
22
28
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
23
29
|
const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
|
|
24
30
|
const inputRef = useRef(null);
|
|
@@ -27,103 +33,244 @@ const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leading
|
|
|
27
33
|
const readRef = mergedRefEnabled ? inputRef : providedOrCreatedRef;
|
|
28
34
|
const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
|
|
29
35
|
const isControlled = value !== void 0;
|
|
30
|
-
|
|
36
|
+
let t4;
|
|
37
|
+
if ($[0] !== defaultValue) {
|
|
38
|
+
t4 = () => defaultValue !== void 0 ? String(defaultValue).length : 0;
|
|
39
|
+
$[0] = defaultValue;
|
|
40
|
+
$[1] = t4;
|
|
41
|
+
} else t4 = $[1];
|
|
42
|
+
const [uncontrolledLength, setUncontrolledLength] = useState(t4);
|
|
31
43
|
const currentLength = isControlled ? String(value).length : uncontrolledLength;
|
|
32
44
|
const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : void 0;
|
|
33
45
|
const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
|
|
34
|
-
|
|
46
|
+
let t5;
|
|
47
|
+
if ($[2] !== className) {
|
|
48
|
+
t5 = clsx(className, "TextInput-wrapper");
|
|
49
|
+
$[2] = className;
|
|
50
|
+
$[3] = t5;
|
|
51
|
+
} else t5 = $[3];
|
|
52
|
+
const wrapperClasses = t5;
|
|
35
53
|
const showLeadingLoadingIndicator = loading && (loaderPosition === "leading" || Boolean(LeadingVisual && loaderPosition !== "trailing"));
|
|
36
54
|
const showTrailingLoadingIndicator = loading && (loaderPosition === "trailing" || Boolean(loaderPosition === "auto" && !LeadingVisual));
|
|
37
55
|
const isSegmentedInputType = type === "date" || type === "time" || type === "datetime-local";
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
(
|
|
42
|
-
|
|
43
|
-
|
|
56
|
+
let t6;
|
|
57
|
+
if ($[4] !== isSegmentedInputType || $[5] !== readRef.current) {
|
|
58
|
+
t6 = (e) => {
|
|
59
|
+
if (e.target !== readRef.current || !isSegmentedInputType) {
|
|
60
|
+
var _readRef$current;
|
|
61
|
+
(_readRef$current = readRef.current) === null || _readRef$current === void 0 || _readRef$current.focus();
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
$[4] = isSegmentedInputType;
|
|
65
|
+
$[5] = readRef.current;
|
|
66
|
+
$[6] = t6;
|
|
67
|
+
} else t6 = $[6];
|
|
68
|
+
const focusInput = t6;
|
|
44
69
|
const leadingVisualId = useId();
|
|
45
70
|
const trailingVisualId = useId();
|
|
46
71
|
const loadingId = useId();
|
|
47
72
|
const inputDescribedBy = clsx(inputProps["aria-describedby"], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loading && loadingId) || void 0;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
73
|
+
let t7;
|
|
74
|
+
if ($[7] !== onFocus) {
|
|
75
|
+
t7 = (e_0) => {
|
|
76
|
+
setIsInputFocused(true);
|
|
77
|
+
onFocus && onFocus(e_0);
|
|
78
|
+
};
|
|
79
|
+
$[7] = onFocus;
|
|
80
|
+
$[8] = t7;
|
|
81
|
+
} else t7 = $[8];
|
|
82
|
+
const handleInputFocus = t7;
|
|
83
|
+
let t8;
|
|
84
|
+
if ($[9] !== onBlur) {
|
|
85
|
+
t8 = (e_1) => {
|
|
86
|
+
setIsInputFocused(false);
|
|
87
|
+
onBlur && onBlur(e_1);
|
|
88
|
+
};
|
|
89
|
+
$[9] = onBlur;
|
|
90
|
+
$[10] = t8;
|
|
91
|
+
} else t8 = $[10];
|
|
92
|
+
const handleInputBlur = t8;
|
|
93
|
+
let t9;
|
|
94
|
+
if ($[11] !== characterLimit || $[12] !== isControlled || $[13] !== onChange) {
|
|
95
|
+
t9 = (e_2) => {
|
|
96
|
+
if (characterLimit && !isControlled) setUncontrolledLength(e_2.target.value.length);
|
|
97
|
+
onChange === null || onChange === void 0 || onChange(e_2);
|
|
98
|
+
};
|
|
99
|
+
$[11] = characterLimit;
|
|
100
|
+
$[12] = isControlled;
|
|
101
|
+
$[13] = onChange;
|
|
102
|
+
$[14] = t9;
|
|
103
|
+
} else t9 = $[14];
|
|
104
|
+
const handleInputChange = t9;
|
|
64
105
|
const characterCountId = useId();
|
|
65
106
|
const characterCountStaticMessageId = useId();
|
|
66
107
|
const isValid = isOverLimit ? "error" : validationStatus;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
108
|
+
const t10 = Boolean(LeadingVisual || showLeadingLoadingIndicator);
|
|
109
|
+
const t11 = Boolean(TrailingVisual || showTrailingLoadingIndicator);
|
|
110
|
+
const t12 = Boolean(trailingAction);
|
|
111
|
+
const t13 = Boolean(loading);
|
|
112
|
+
let t14;
|
|
113
|
+
if ($[15] !== IconComponent) {
|
|
114
|
+
t14 = IconComponent && /* @__PURE__ */ jsx(IconComponent, {
|
|
115
|
+
className: "TextInput-icon",
|
|
116
|
+
"data-component": "TextInput.Icon"
|
|
117
|
+
});
|
|
118
|
+
$[15] = IconComponent;
|
|
119
|
+
$[16] = t14;
|
|
120
|
+
} else t14 = $[16];
|
|
121
|
+
const t15 = typeof loading === "boolean";
|
|
122
|
+
let t16;
|
|
123
|
+
if ($[17] !== LeadingVisual) {
|
|
124
|
+
t16 = typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual) ? /* @__PURE__ */ jsx(LeadingVisual, {}) : LeadingVisual;
|
|
125
|
+
$[17] = LeadingVisual;
|
|
126
|
+
$[18] = t16;
|
|
127
|
+
} else t16 = $[18];
|
|
128
|
+
let t17;
|
|
129
|
+
if ($[19] !== leadingVisualId || $[20] !== showLeadingLoadingIndicator || $[21] !== t15 || $[22] !== t16) {
|
|
130
|
+
t17 = /* @__PURE__ */ jsx(TextInputInnerVisualSlot, {
|
|
131
|
+
visualPosition: "leading",
|
|
132
|
+
showLoadingIndicator: showLeadingLoadingIndicator,
|
|
133
|
+
hasLoadingIndicator: t15,
|
|
134
|
+
id: leadingVisualId,
|
|
135
|
+
children: t16
|
|
136
|
+
});
|
|
137
|
+
$[19] = leadingVisualId;
|
|
138
|
+
$[20] = showLeadingLoadingIndicator;
|
|
139
|
+
$[21] = t15;
|
|
140
|
+
$[22] = t16;
|
|
141
|
+
$[23] = t17;
|
|
142
|
+
} else t17 = $[23];
|
|
143
|
+
const t18 = isValid === "error" ? "true" : void 0;
|
|
144
|
+
let t19;
|
|
145
|
+
if ($[24] !== characterCountStaticMessageId || $[25] !== characterLimit || $[26] !== inputDescribedBy) {
|
|
146
|
+
t19 = characterLimit ? [characterCountStaticMessageId, inputDescribedBy].filter(Boolean).join(" ") || void 0 : inputDescribedBy;
|
|
147
|
+
$[24] = characterCountStaticMessageId;
|
|
148
|
+
$[25] = characterLimit;
|
|
149
|
+
$[26] = inputDescribedBy;
|
|
150
|
+
$[27] = t19;
|
|
151
|
+
} else t19 = $[27];
|
|
152
|
+
const t20 = dataComponent !== null && dataComponent !== void 0 ? dataComponent : "input";
|
|
153
|
+
let t21;
|
|
154
|
+
if ($[28] !== appliedRef || $[29] !== defaultValue || $[30] !== disabled || $[31] !== handleInputBlur || $[32] !== handleInputChange || $[33] !== handleInputFocus || $[34] !== inputProps || $[35] !== required || $[36] !== t18 || $[37] !== t19 || $[38] !== t20 || $[39] !== type || $[40] !== value) {
|
|
155
|
+
t21 = /* @__PURE__ */ jsx(UnstyledTextInput, {
|
|
156
|
+
ref: appliedRef,
|
|
157
|
+
disabled,
|
|
158
|
+
onFocus: handleInputFocus,
|
|
159
|
+
onBlur: handleInputBlur,
|
|
160
|
+
onChange: handleInputChange,
|
|
161
|
+
type,
|
|
162
|
+
"aria-required": required,
|
|
163
|
+
"aria-invalid": t18,
|
|
164
|
+
value,
|
|
165
|
+
defaultValue,
|
|
166
|
+
...inputProps,
|
|
167
|
+
"aria-describedby": t19,
|
|
168
|
+
"data-component": t20
|
|
169
|
+
});
|
|
170
|
+
$[28] = appliedRef;
|
|
171
|
+
$[29] = defaultValue;
|
|
172
|
+
$[30] = disabled;
|
|
173
|
+
$[31] = handleInputBlur;
|
|
174
|
+
$[32] = handleInputChange;
|
|
175
|
+
$[33] = handleInputFocus;
|
|
176
|
+
$[34] = inputProps;
|
|
177
|
+
$[35] = required;
|
|
178
|
+
$[36] = t18;
|
|
179
|
+
$[37] = t19;
|
|
180
|
+
$[38] = t20;
|
|
181
|
+
$[39] = type;
|
|
182
|
+
$[40] = value;
|
|
183
|
+
$[41] = t21;
|
|
184
|
+
} else t21 = $[41];
|
|
185
|
+
let t22;
|
|
186
|
+
if ($[42] !== loaderText || $[43] !== loading || $[44] !== loadingId) {
|
|
187
|
+
t22 = loading && /* @__PURE__ */ jsx(VisuallyHidden, {
|
|
188
|
+
id: loadingId,
|
|
189
|
+
children: loaderText
|
|
190
|
+
});
|
|
191
|
+
$[42] = loaderText;
|
|
192
|
+
$[43] = loading;
|
|
193
|
+
$[44] = loadingId;
|
|
194
|
+
$[45] = t22;
|
|
195
|
+
} else t22 = $[45];
|
|
196
|
+
const t23 = typeof loading === "boolean";
|
|
197
|
+
let t24;
|
|
198
|
+
if ($[46] !== TrailingVisual) {
|
|
199
|
+
t24 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /* @__PURE__ */ jsx(TrailingVisual, {}) : TrailingVisual;
|
|
200
|
+
$[46] = TrailingVisual;
|
|
201
|
+
$[47] = t24;
|
|
202
|
+
} else t24 = $[47];
|
|
203
|
+
let t25;
|
|
204
|
+
if ($[48] !== showTrailingLoadingIndicator || $[49] !== t23 || $[50] !== t24 || $[51] !== trailingVisualId) {
|
|
205
|
+
t25 = /* @__PURE__ */ jsx(TextInputInnerVisualSlot, {
|
|
206
|
+
visualPosition: "trailing",
|
|
207
|
+
showLoadingIndicator: showTrailingLoadingIndicator,
|
|
208
|
+
hasLoadingIndicator: t23,
|
|
209
|
+
id: trailingVisualId,
|
|
210
|
+
"data-testid": "text-input-trailing-visual",
|
|
211
|
+
children: t24
|
|
212
|
+
});
|
|
213
|
+
$[48] = showTrailingLoadingIndicator;
|
|
214
|
+
$[49] = t23;
|
|
215
|
+
$[50] = t24;
|
|
216
|
+
$[51] = trailingVisualId;
|
|
217
|
+
$[52] = t25;
|
|
218
|
+
} else t25 = $[52];
|
|
219
|
+
let t26;
|
|
220
|
+
if ($[53] !== block || $[54] !== contrast || $[55] !== disabled || $[56] !== focusInput || $[57] !== isInputFocused || $[58] !== isValid || $[59] !== maxWidthProp || $[60] !== minWidthProp || $[61] !== monospace || $[62] !== sizeProp || $[63] !== t10 || $[64] !== t11 || $[65] !== t12 || $[66] !== t13 || $[67] !== t14 || $[68] !== t17 || $[69] !== t21 || $[70] !== t22 || $[71] !== t25 || $[72] !== trailingAction || $[73] !== variantProp || $[74] !== widthProp || $[75] !== wrapperClasses) {
|
|
221
|
+
t26 = /* @__PURE__ */ jsxs(TextInputWrapper, {
|
|
222
|
+
block,
|
|
223
|
+
className: wrapperClasses,
|
|
224
|
+
validationStatus: isValid,
|
|
225
|
+
contrast,
|
|
226
|
+
disabled,
|
|
227
|
+
monospace,
|
|
228
|
+
size: sizeProp,
|
|
229
|
+
width: widthProp,
|
|
230
|
+
minWidth: minWidthProp,
|
|
231
|
+
maxWidth: maxWidthProp,
|
|
232
|
+
variant: variantProp,
|
|
233
|
+
hasLeadingVisual: t10,
|
|
234
|
+
hasTrailingVisual: t11,
|
|
235
|
+
hasTrailingAction: t12,
|
|
236
|
+
isInputFocused,
|
|
237
|
+
onClick: focusInput,
|
|
238
|
+
"aria-busy": t13,
|
|
239
|
+
children: [
|
|
240
|
+
t14,
|
|
241
|
+
t17,
|
|
242
|
+
t21,
|
|
243
|
+
t22,
|
|
244
|
+
t25,
|
|
245
|
+
trailingAction
|
|
246
|
+
]
|
|
247
|
+
});
|
|
248
|
+
$[53] = block;
|
|
249
|
+
$[54] = contrast;
|
|
250
|
+
$[55] = disabled;
|
|
251
|
+
$[56] = focusInput;
|
|
252
|
+
$[57] = isInputFocused;
|
|
253
|
+
$[58] = isValid;
|
|
254
|
+
$[59] = maxWidthProp;
|
|
255
|
+
$[60] = minWidthProp;
|
|
256
|
+
$[61] = monospace;
|
|
257
|
+
$[62] = sizeProp;
|
|
258
|
+
$[63] = t10;
|
|
259
|
+
$[64] = t11;
|
|
260
|
+
$[65] = t12;
|
|
261
|
+
$[66] = t13;
|
|
262
|
+
$[67] = t14;
|
|
263
|
+
$[68] = t17;
|
|
264
|
+
$[69] = t21;
|
|
265
|
+
$[70] = t22;
|
|
266
|
+
$[71] = t25;
|
|
267
|
+
$[72] = trailingAction;
|
|
268
|
+
$[73] = variantProp;
|
|
269
|
+
$[74] = widthProp;
|
|
270
|
+
$[75] = wrapperClasses;
|
|
271
|
+
$[76] = t26;
|
|
272
|
+
} else t26 = $[76];
|
|
273
|
+
const t27 = characterLimit && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
127
274
|
/* @__PURE__ */ jsx(AriaStatus, {
|
|
128
275
|
announceOnShow: false,
|
|
129
276
|
delayMs: 500,
|
|
@@ -147,7 +294,15 @@ const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leading
|
|
|
147
294
|
"data-component": "TextInput.CharacterCounter",
|
|
148
295
|
children: [isOverLimit && /* @__PURE__ */ jsx(AlertFillIcon, { size: 16 }), counter === null || counter === void 0 ? void 0 : counter.message]
|
|
149
296
|
})
|
|
150
|
-
] })
|
|
297
|
+
] });
|
|
298
|
+
let t28;
|
|
299
|
+
if ($[77] !== t26 || $[78] !== t27) {
|
|
300
|
+
t28 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t26, t27] });
|
|
301
|
+
$[77] = t26;
|
|
302
|
+
$[78] = t27;
|
|
303
|
+
$[79] = t28;
|
|
304
|
+
} else t28 = $[79];
|
|
305
|
+
return t28;
|
|
151
306
|
});
|
|
152
307
|
TextInput.displayName = "TextInput";
|
|
153
308
|
var TextInput_default = Object.assign(TextInput, {
|
|
@@ -25,7 +25,7 @@ type TextareaProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
autoSize?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* @deprecated Omit this prop to use the default background.
|
|
29
29
|
*/
|
|
30
30
|
contrast?: boolean;
|
|
31
31
|
/**
|
|
@@ -76,7 +76,7 @@ declare const Textarea: React.ForwardRefExoticComponent<{
|
|
|
76
76
|
*/
|
|
77
77
|
autoSize?: boolean;
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
79
|
+
* @deprecated Omit this prop to use the default background.
|
|
80
80
|
*/
|
|
81
81
|
contrast?: boolean;
|
|
82
82
|
/**
|
|
@@ -71,7 +71,6 @@ const LineIcon = (t0) => {
|
|
|
71
71
|
return t4;
|
|
72
72
|
};
|
|
73
73
|
const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
|
|
74
|
-
var _buttonLabelOn, _buttonLabelOff;
|
|
75
74
|
const $ = c(90);
|
|
76
75
|
let ariaDescribedby;
|
|
77
76
|
let ariaLabelledby;
|
|
@@ -222,7 +221,7 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
|
|
|
222
221
|
} else t11 = $[39];
|
|
223
222
|
const t12 = !acceptsInteraction;
|
|
224
223
|
const t13 = !isOn;
|
|
225
|
-
const t14 =
|
|
224
|
+
const t14 = buttonLabelOn !== null && buttonLabelOn !== void 0 ? buttonLabelOn : "On";
|
|
226
225
|
let t15;
|
|
227
226
|
if ($[40] !== t13 || $[41] !== t14) {
|
|
228
227
|
t15 = /* @__PURE__ */ jsx("span", {
|
|
@@ -234,7 +233,7 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
|
|
|
234
233
|
$[41] = t14;
|
|
235
234
|
$[42] = t15;
|
|
236
235
|
} else t15 = $[42];
|
|
237
|
-
const t16 =
|
|
236
|
+
const t16 = buttonLabelOff !== null && buttonLabelOff !== void 0 ? buttonLabelOff : "Off";
|
|
238
237
|
let t17;
|
|
239
238
|
if ($[43] !== isOn || $[44] !== t16) {
|
|
240
239
|
t17 = /* @__PURE__ */ jsx("span", {
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -1,28 +1,90 @@
|
|
|
1
|
+
import { c } from "../utils/react-compiler-runtime.js";
|
|
1
2
|
import { useId as useId$1 } from "../hooks/useId.js";
|
|
2
3
|
import { TooltipContext } from "./TooltipContext.js";
|
|
3
4
|
import Tooltip_module_css_default from "./Tooltip.module.css.js";
|
|
4
|
-
import React
|
|
5
|
+
import React from "react";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import { clsx } from "clsx";
|
|
7
8
|
//#region src/Tooltip/Tooltip.tsx
|
|
8
9
|
/**
|
|
9
10
|
* @deprecated
|
|
10
11
|
*/
|
|
11
|
-
const Tooltip = /*#__PURE__*/ React.forwardRef(function Tooltip(
|
|
12
|
+
const Tooltip = /*#__PURE__*/ React.forwardRef(function Tooltip(t0, ref) {
|
|
13
|
+
const $ = c(33);
|
|
14
|
+
let align;
|
|
15
|
+
let children;
|
|
16
|
+
let className;
|
|
17
|
+
let id;
|
|
18
|
+
let noDelay;
|
|
19
|
+
let rest;
|
|
20
|
+
let t1;
|
|
21
|
+
let t2;
|
|
22
|
+
let text;
|
|
23
|
+
let wrap;
|
|
24
|
+
if ($[0] !== t0) {
|
|
25
|
+
({as: t1, direction: t2, children, className, text, noDelay, align, wrap, id, ...rest} = t0);
|
|
26
|
+
$[0] = t0;
|
|
27
|
+
$[1] = align;
|
|
28
|
+
$[2] = children;
|
|
29
|
+
$[3] = className;
|
|
30
|
+
$[4] = id;
|
|
31
|
+
$[5] = noDelay;
|
|
32
|
+
$[6] = rest;
|
|
33
|
+
$[7] = t1;
|
|
34
|
+
$[8] = t2;
|
|
35
|
+
$[9] = text;
|
|
36
|
+
$[10] = wrap;
|
|
37
|
+
} else {
|
|
38
|
+
align = $[1];
|
|
39
|
+
children = $[2];
|
|
40
|
+
className = $[3];
|
|
41
|
+
id = $[4];
|
|
42
|
+
noDelay = $[5];
|
|
43
|
+
rest = $[6];
|
|
44
|
+
t1 = $[7];
|
|
45
|
+
t2 = $[8];
|
|
46
|
+
text = $[9];
|
|
47
|
+
wrap = $[10];
|
|
48
|
+
}
|
|
49
|
+
const Component = t1 === void 0 ? "span" : t1;
|
|
50
|
+
const direction = t2 === void 0 ? "n" : t2;
|
|
12
51
|
const tooltipId = useId$1(id);
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
52
|
+
const t3 = Tooltip_module_css_default[`Tooltip--${direction}`];
|
|
53
|
+
const t4 = Tooltip_module_css_default[`Tooltip--align${align === "left" ? "Left" : "Right"}`];
|
|
54
|
+
const t5 = `tooltipped-${direction}`;
|
|
55
|
+
const t6 = `tooltipped-align-${align === "left" ? "left" : "right"}-2`;
|
|
56
|
+
let t7;
|
|
57
|
+
if ($[11] !== align || $[12] !== className || $[13] !== noDelay || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6 || $[18] !== wrap) {
|
|
58
|
+
t7 = clsx(className, Tooltip_module_css_default.Tooltip, t3, {
|
|
59
|
+
[t4]: align,
|
|
60
|
+
[Tooltip_module_css_default["Tooltip--noDelay"]]: noDelay,
|
|
61
|
+
[Tooltip_module_css_default["Tooltip--multiline"]]: wrap,
|
|
62
|
+
[t5]: true,
|
|
63
|
+
[t6]: align,
|
|
64
|
+
"tooltipped-no-delay": noDelay,
|
|
65
|
+
"tooltipped-multiline": wrap
|
|
66
|
+
});
|
|
67
|
+
$[11] = align;
|
|
68
|
+
$[12] = className;
|
|
69
|
+
$[13] = noDelay;
|
|
70
|
+
$[14] = t3;
|
|
71
|
+
$[15] = t4;
|
|
72
|
+
$[16] = t5;
|
|
73
|
+
$[17] = t6;
|
|
74
|
+
$[18] = wrap;
|
|
75
|
+
$[19] = t7;
|
|
76
|
+
} else t7 = $[19];
|
|
77
|
+
const tooltipClasses = t7;
|
|
78
|
+
let t8;
|
|
79
|
+
if ($[20] !== tooltipId) {
|
|
80
|
+
t8 = { tooltipId };
|
|
81
|
+
$[20] = tooltipId;
|
|
82
|
+
$[21] = t8;
|
|
83
|
+
} else t8 = $[21];
|
|
84
|
+
const value = t8;
|
|
85
|
+
let t9;
|
|
86
|
+
if ($[22] !== Component || $[23] !== children || $[24] !== ref || $[25] !== rest || $[26] !== text || $[27] !== tooltipClasses || $[28] !== tooltipId) {
|
|
87
|
+
t9 = /* @__PURE__ */ jsx(Component, {
|
|
26
88
|
role: "tooltip",
|
|
27
89
|
"aria-label": text,
|
|
28
90
|
id: tooltipId,
|
|
@@ -30,8 +92,27 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(function Tooltip({ as: Component
|
|
|
30
92
|
className: tooltipClasses,
|
|
31
93
|
ref,
|
|
32
94
|
children
|
|
33
|
-
})
|
|
34
|
-
|
|
95
|
+
});
|
|
96
|
+
$[22] = Component;
|
|
97
|
+
$[23] = children;
|
|
98
|
+
$[24] = ref;
|
|
99
|
+
$[25] = rest;
|
|
100
|
+
$[26] = text;
|
|
101
|
+
$[27] = tooltipClasses;
|
|
102
|
+
$[28] = tooltipId;
|
|
103
|
+
$[29] = t9;
|
|
104
|
+
} else t9 = $[29];
|
|
105
|
+
let t10;
|
|
106
|
+
if ($[30] !== t9 || $[31] !== value) {
|
|
107
|
+
t10 = /* @__PURE__ */ jsx(TooltipContext.Provider, {
|
|
108
|
+
value,
|
|
109
|
+
children: t9
|
|
110
|
+
});
|
|
111
|
+
$[30] = t9;
|
|
112
|
+
$[31] = value;
|
|
113
|
+
$[32] = t10;
|
|
114
|
+
} else t10 = $[32];
|
|
115
|
+
return t10;
|
|
35
116
|
});
|
|
36
117
|
Tooltip.alignments = ["left", "right"];
|
|
37
118
|
Tooltip.directions = [
|