@primer/react 38.0.0-rc.3 → 38.0.0-rc.4
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 +66 -0
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +6 -2
- package/dist/ActionList/Description.d.ts.map +1 -1
- package/dist/ActionList/Description.js +0 -1
- package/dist/ActionList/Visuals.js +2 -2
- package/dist/Autocomplete/AutocompleteMenu.js +2 -2
- package/dist/BaseStyles.d.ts +1 -2
- package/dist/BaseStyles.d.ts.map +1 -1
- package/dist/BaseStyles.js +1 -3
- package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.js +34 -48
- package/dist/Button/ButtonBase.js +6 -6
- package/dist/Button/LinkButton.d.ts +3 -3
- package/dist/Button/LinkButton.d.ts.map +1 -1
- package/dist/Button/LinkButton.js +0 -3
- package/dist/Button/index.d.ts +1 -0
- package/dist/Button/index.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts +2 -3
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +41 -36
- package/dist/Checkbox/Checkbox.d.ts +1 -2
- package/dist/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox/Checkbox.js +48 -79
- package/dist/CheckboxGroup/CheckboxGroup.d.ts +2 -3
- package/dist/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/CounterLabel/CounterLabel.d.ts +2 -3
- package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
- package/dist/CounterLabel/CounterLabel.js +1 -3
- package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css +2 -0
- package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css.map +1 -0
- package/dist/FilteredActionList/FilteredActionList.d.ts +2 -3
- package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +10 -9
- package/dist/FilteredActionList/FilteredActionList.module.css.js +2 -2
- package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css +2 -0
- package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css.map +1 -0
- package/dist/FilteredActionList/FilteredActionListLoaders.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionListLoaders.js +12 -29
- package/dist/FilteredActionList/FilteredActionListLoaders.module.css.js +2 -2
- package/dist/Flash/Flash.d.ts +1 -2
- package/dist/Flash/Flash.d.ts.map +1 -1
- package/dist/Flash/Flash.js +38 -45
- package/dist/Header/Header.d.ts +3 -4
- package/dist/Header/Header.d.ts.map +1 -1
- package/dist/Header/Header.js +10 -13
- package/dist/InlineMessage/InlineMessage.d.ts +1 -2
- package/dist/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/dist/InlineMessage/InlineMessage.js +49 -65
- package/dist/PageHeader/PageHeader.d.ts +5 -5
- package/dist/PageHeader/PageHeader.d.ts.map +1 -1
- package/dist/PageHeader/PageHeader.js +330 -507
- package/dist/Pagehead/Pagehead.d.ts +2 -3
- package/dist/Pagehead/Pagehead.d.ts.map +1 -1
- package/dist/Pagehead/Pagehead.js +2 -2
- package/dist/ProgressBar/{ProgressBar-181186d4.css → ProgressBar-d27aca1d.css} +2 -2
- package/dist/ProgressBar/ProgressBar-d27aca1d.css.map +1 -0
- package/dist/ProgressBar/ProgressBar.d.ts +4 -9
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +9 -14
- package/dist/ProgressBar/ProgressBar.module.css.js +1 -1
- package/dist/ProgressBar/index.d.ts +2 -2
- package/dist/Radio/Radio.d.ts +1 -2
- package/dist/Radio/Radio.d.ts.map +1 -1
- package/dist/Radio/Radio.js +1 -3
- package/dist/RadioGroup/RadioGroup.d.ts +3 -4
- package/dist/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup/index.d.ts +1 -0
- package/dist/RadioGroup/index.d.ts.map +1 -1
- package/dist/RelativeTime/RelativeTime.d.ts +1 -3
- package/dist/RelativeTime/RelativeTime.d.ts.map +1 -1
- package/dist/Spinner/Spinner.d.ts +4 -5
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +49 -81
- package/dist/Timeline/Timeline.d.ts +11 -18
- package/dist/Timeline/Timeline.d.ts.map +1 -1
- package/dist/Timeline/Timeline.js +5 -6
- package/dist/ToggleSwitch/ToggleSwitch.d.ts +4 -0
- package/dist/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
- package/dist/ToggleSwitch/ToggleSwitch.js +195 -182
- package/dist/TreeView/TreeView-bdf34914.css +2 -0
- package/dist/TreeView/TreeView-bdf34914.css.map +1 -0
- package/dist/TreeView/TreeView.d.ts +15 -0
- package/dist/TreeView/TreeView.d.ts.map +1 -1
- package/dist/TreeView/TreeView.js +241 -10
- package/dist/TreeView/TreeView.module.css.js +2 -2
- package/dist/Truncate/Truncate.d.ts +1 -2
- package/dist/Truncate/Truncate.d.ts.map +1 -1
- package/dist/Truncate/Truncate.js +2 -6
- package/dist/UnderlineNav/UnderlineNav-78db938f.css +2 -0
- package/dist/UnderlineNav/UnderlineNav-78db938f.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNav.d.ts +0 -3
- package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNav.js +8 -25
- package/dist/UnderlineNav/UnderlineNav.module.css.js +5 -0
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css +2 -0
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNavItem.d.ts +1 -2
- package/dist/UnderlineNav/UnderlineNavItem.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavItem.js +49 -69
- package/dist/UnderlineNav/UnderlineNavItem.module.css.js +5 -0
- package/dist/UnderlineNav/styles.d.ts +1 -1
- package/dist/UnderlineNav/styles.js +1 -1
- package/dist/deprecated/FilteredSearch/FilteredSearch-d30f5bbc.css +2 -0
- package/dist/deprecated/FilteredSearch/FilteredSearch-d30f5bbc.css.map +1 -0
- package/dist/deprecated/FilteredSearch/FilteredSearch.d.ts +3 -4
- package/dist/deprecated/FilteredSearch/FilteredSearch.d.ts.map +1 -1
- package/dist/deprecated/FilteredSearch/FilteredSearch.js +48 -7
- package/dist/deprecated/FilteredSearch/FilteredSearch.module.css.js +5 -0
- package/dist/deprecated/index.d.ts +0 -2
- package/dist/deprecated/index.d.ts.map +1 -1
- package/dist/deprecated/index.js +0 -1
- package/dist/experimental/SelectPanel2/SelectPanel.js +2 -2
- package/dist/experimental/index.d.ts +2 -3
- package/dist/experimental/index.d.ts.map +1 -1
- package/dist/experimental/index.js +1 -2
- package/dist/index.d.ts +3 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/internal/components/TextInputInnerVisualSlot.js +2 -2
- package/dist/utils/create-component.d.ts +1 -3
- package/dist/utils/create-component.d.ts.map +1 -1
- package/dist/utils/create-component.js +3 -8
- package/generated/components.json +35 -242
- package/package.json +1 -1
- package/dist/DropdownStyles.d.ts +0 -4
- package/dist/DropdownStyles.d.ts.map +0 -1
- package/dist/FilteredActionList/FilteredActionList-96b126d7.css +0 -2
- package/dist/FilteredActionList/FilteredActionList-96b126d7.css.map +0 -1
- package/dist/FilteredActionList/FilteredActionListLoaders-6f14c45b.css +0 -2
- package/dist/FilteredActionList/FilteredActionListLoaders-6f14c45b.css.map +0 -1
- package/dist/PointerBox/PointerBox.d.ts +0 -28
- package/dist/PointerBox/PointerBox.d.ts.map +0 -1
- package/dist/PointerBox/PointerBox.js +0 -65
- package/dist/PointerBox/index.d.ts +0 -3
- package/dist/PointerBox/index.d.ts.map +0 -1
- package/dist/ProgressBar/ProgressBar-181186d4.css.map +0 -1
- package/dist/TreeView/TreeView-cd08cabc.css +0 -2
- package/dist/TreeView/TreeView-cd08cabc.css.map +0 -1
- package/dist/internal/components/Caret-e686f04c.css +0 -2
- package/dist/internal/components/Caret-e686f04c.css.map +0 -1
- package/dist/internal/components/Caret.js +0 -87
- package/dist/internal/components/Caret.module.css.js +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAC5C,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,oDAAoD;IACpD,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAA;IACnC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iEAAiE;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAC5C,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,oDAAoD;IACpD,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAA;IACnC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iEAAiE;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC1C,wOAAwO;IACxO,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0OAA0O;IAC1O,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AA8BD,QAAA,MAAM,YAAY,6FAgIhB,CAAA;AAMF,eAAe,YAAY,CAAA"}
|
|
@@ -8,7 +8,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
8
8
|
import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
|
|
9
9
|
import { useId } from '../hooks/useId.js';
|
|
10
10
|
import { AriaStatus } from '../live-region/AriaStatus.js';
|
|
11
|
-
import
|
|
11
|
+
import Spinner from '../Spinner/Spinner.js';
|
|
12
12
|
|
|
13
13
|
const CircleIcon = t0 => {
|
|
14
14
|
const $ = c(4);
|
|
@@ -83,9 +83,12 @@ const LineIcon = t0 => {
|
|
|
83
83
|
return t4;
|
|
84
84
|
};
|
|
85
85
|
const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props, ref) {
|
|
86
|
-
|
|
86
|
+
var _buttonLabelOn, _buttonLabelOff;
|
|
87
|
+
const $ = c(95);
|
|
87
88
|
let ariaDescribedby;
|
|
88
89
|
let ariaLabelledby;
|
|
90
|
+
let buttonLabelOff;
|
|
91
|
+
let buttonLabelOn;
|
|
89
92
|
let checked;
|
|
90
93
|
let className;
|
|
91
94
|
let defaultChecked;
|
|
@@ -115,40 +118,46 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
115
118
|
loadingLabelDelay: t3,
|
|
116
119
|
loadingLabel: t4,
|
|
117
120
|
className,
|
|
121
|
+
buttonLabelOn,
|
|
122
|
+
buttonLabelOff,
|
|
118
123
|
...rest
|
|
119
124
|
} = props);
|
|
120
125
|
$[0] = props;
|
|
121
126
|
$[1] = ariaDescribedby;
|
|
122
127
|
$[2] = ariaLabelledby;
|
|
123
|
-
$[3] =
|
|
124
|
-
$[4] =
|
|
125
|
-
$[5] =
|
|
126
|
-
$[6] =
|
|
127
|
-
$[7] =
|
|
128
|
-
$[8] =
|
|
129
|
-
$[9] =
|
|
130
|
-
$[10] =
|
|
131
|
-
$[11] =
|
|
132
|
-
$[12] =
|
|
133
|
-
$[13] =
|
|
134
|
-
$[14] =
|
|
135
|
-
$[15] =
|
|
128
|
+
$[3] = buttonLabelOff;
|
|
129
|
+
$[4] = buttonLabelOn;
|
|
130
|
+
$[5] = checked;
|
|
131
|
+
$[6] = className;
|
|
132
|
+
$[7] = defaultChecked;
|
|
133
|
+
$[8] = disabled;
|
|
134
|
+
$[9] = loading;
|
|
135
|
+
$[10] = onChange;
|
|
136
|
+
$[11] = onClick;
|
|
137
|
+
$[12] = rest;
|
|
138
|
+
$[13] = t0;
|
|
139
|
+
$[14] = t1;
|
|
140
|
+
$[15] = t2;
|
|
141
|
+
$[16] = t3;
|
|
142
|
+
$[17] = t4;
|
|
136
143
|
} else {
|
|
137
144
|
ariaDescribedby = $[1];
|
|
138
145
|
ariaLabelledby = $[2];
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
146
|
+
buttonLabelOff = $[3];
|
|
147
|
+
buttonLabelOn = $[4];
|
|
148
|
+
checked = $[5];
|
|
149
|
+
className = $[6];
|
|
150
|
+
defaultChecked = $[7];
|
|
151
|
+
disabled = $[8];
|
|
152
|
+
loading = $[9];
|
|
153
|
+
onChange = $[10];
|
|
154
|
+
onClick = $[11];
|
|
155
|
+
rest = $[12];
|
|
156
|
+
t0 = $[13];
|
|
157
|
+
t1 = $[14];
|
|
158
|
+
t2 = $[15];
|
|
159
|
+
t3 = $[16];
|
|
160
|
+
t4 = $[17];
|
|
152
161
|
}
|
|
153
162
|
const buttonType = t0 === undefined ? "button" : t0;
|
|
154
163
|
const size = t1 === undefined ? "medium" : t1;
|
|
@@ -164,7 +173,7 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
164
173
|
safeSetTimeout
|
|
165
174
|
} = useSafeTimeout();
|
|
166
175
|
let t5;
|
|
167
|
-
if ($[
|
|
176
|
+
if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
|
|
168
177
|
t5 = e => {
|
|
169
178
|
if (disabled || loading) {
|
|
170
179
|
return;
|
|
@@ -174,40 +183,40 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
174
183
|
}
|
|
175
184
|
onClick && onClick(e);
|
|
176
185
|
};
|
|
177
|
-
$[
|
|
178
|
-
$[
|
|
179
|
-
$[
|
|
180
|
-
$[
|
|
181
|
-
$[
|
|
182
|
-
$[
|
|
183
|
-
$[
|
|
186
|
+
$[18] = disabled;
|
|
187
|
+
$[19] = isControlled;
|
|
188
|
+
$[20] = isOn;
|
|
189
|
+
$[21] = loading;
|
|
190
|
+
$[22] = onClick;
|
|
191
|
+
$[23] = setIsOn;
|
|
192
|
+
$[24] = t5;
|
|
184
193
|
} else {
|
|
185
|
-
t5 = $[
|
|
194
|
+
t5 = $[24];
|
|
186
195
|
}
|
|
187
196
|
const handleToggleClick = t5;
|
|
188
197
|
let t6;
|
|
189
198
|
let t7;
|
|
190
|
-
if ($[
|
|
199
|
+
if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
|
|
191
200
|
t6 = () => {
|
|
192
201
|
if (onChange && isControlled && !disabled) {
|
|
193
202
|
onChange(Boolean(checked));
|
|
194
203
|
}
|
|
195
204
|
};
|
|
196
205
|
t7 = [onChange, checked, isControlled, disabled];
|
|
197
|
-
$[
|
|
198
|
-
$[
|
|
199
|
-
$[
|
|
200
|
-
$[
|
|
201
|
-
$[
|
|
202
|
-
$[
|
|
206
|
+
$[25] = checked;
|
|
207
|
+
$[26] = disabled;
|
|
208
|
+
$[27] = isControlled;
|
|
209
|
+
$[28] = onChange;
|
|
210
|
+
$[29] = t6;
|
|
211
|
+
$[30] = t7;
|
|
203
212
|
} else {
|
|
204
|
-
t6 = $[
|
|
205
|
-
t7 = $[
|
|
213
|
+
t6 = $[29];
|
|
214
|
+
t7 = $[30];
|
|
206
215
|
}
|
|
207
216
|
useEffect(t6, t7);
|
|
208
217
|
let t8;
|
|
209
218
|
let t9;
|
|
210
|
-
if ($[
|
|
219
|
+
if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
|
|
211
220
|
t8 = () => {
|
|
212
221
|
if (!loading && isLoadingLabelVisible) {
|
|
213
222
|
setIsLoadingLabelVisible(false);
|
|
@@ -220,15 +229,15 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
220
229
|
}
|
|
221
230
|
};
|
|
222
231
|
t9 = [loading, isLoadingLabelVisible, loadingLabelDelay, safeSetTimeout];
|
|
223
|
-
$[
|
|
224
|
-
$[
|
|
225
|
-
$[
|
|
226
|
-
$[
|
|
227
|
-
$[
|
|
228
|
-
$[
|
|
232
|
+
$[31] = isLoadingLabelVisible;
|
|
233
|
+
$[32] = loading;
|
|
234
|
+
$[33] = loadingLabelDelay;
|
|
235
|
+
$[34] = safeSetTimeout;
|
|
236
|
+
$[35] = t8;
|
|
237
|
+
$[36] = t9;
|
|
229
238
|
} else {
|
|
230
|
-
t8 = $[
|
|
231
|
-
t9 = $[
|
|
239
|
+
t8 = $[35];
|
|
240
|
+
t9 = $[36];
|
|
232
241
|
}
|
|
233
242
|
useEffect(t8, t9);
|
|
234
243
|
let switchButtonDescribedBy = loadingLabelId;
|
|
@@ -236,16 +245,16 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
236
245
|
switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
|
|
237
246
|
}
|
|
238
247
|
let t10;
|
|
239
|
-
if ($[
|
|
248
|
+
if ($[37] !== className) {
|
|
240
249
|
t10 = clsx(classes.ToggleSwitch, className);
|
|
241
|
-
$[
|
|
242
|
-
$[
|
|
250
|
+
$[37] = className;
|
|
251
|
+
$[38] = t10;
|
|
243
252
|
} else {
|
|
244
|
-
t10 = $[
|
|
253
|
+
t10 = $[38];
|
|
245
254
|
}
|
|
246
255
|
const t11 = isLoadingLabelVisible && loadingLabel;
|
|
247
256
|
let t12;
|
|
248
|
-
if ($[
|
|
257
|
+
if ($[39] !== loadingLabelId || $[40] !== t11) {
|
|
249
258
|
t12 = /*#__PURE__*/jsx(VisuallyHidden, {
|
|
250
259
|
children: /*#__PURE__*/jsx(AriaStatus, {
|
|
251
260
|
announceOnShow: true,
|
|
@@ -253,207 +262,211 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
|
|
|
253
262
|
children: t11
|
|
254
263
|
})
|
|
255
264
|
});
|
|
256
|
-
$[
|
|
257
|
-
$[
|
|
258
|
-
$[
|
|
265
|
+
$[39] = loadingLabelId;
|
|
266
|
+
$[40] = t11;
|
|
267
|
+
$[41] = t12;
|
|
259
268
|
} else {
|
|
260
|
-
t12 = $[
|
|
269
|
+
t12 = $[41];
|
|
261
270
|
}
|
|
262
271
|
let t13;
|
|
263
|
-
if ($[
|
|
272
|
+
if ($[42] !== loading || $[43] !== statusLabelPosition) {
|
|
264
273
|
t13 = loading ? /*#__PURE__*/jsx("div", {
|
|
265
274
|
className: classes.LoadingSpinner,
|
|
266
275
|
"data-status-label-position": statusLabelPosition,
|
|
267
|
-
children: /*#__PURE__*/jsx(
|
|
276
|
+
children: /*#__PURE__*/jsx(Spinner, {
|
|
268
277
|
size: "small",
|
|
269
278
|
srText: null
|
|
270
279
|
})
|
|
271
280
|
}) : null;
|
|
272
|
-
$[
|
|
273
|
-
$[
|
|
274
|
-
$[
|
|
281
|
+
$[42] = loading;
|
|
282
|
+
$[43] = statusLabelPosition;
|
|
283
|
+
$[44] = t13;
|
|
275
284
|
} else {
|
|
276
|
-
t13 = $[
|
|
285
|
+
t13 = $[44];
|
|
277
286
|
}
|
|
278
287
|
const t14 = !acceptsInteraction;
|
|
279
288
|
const t15 = !isOn;
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
289
|
+
const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
|
|
290
|
+
let t17;
|
|
291
|
+
if ($[45] !== t15 || $[46] !== t16) {
|
|
292
|
+
t17 = /*#__PURE__*/jsx("span", {
|
|
283
293
|
className: classes.StatusTextItem,
|
|
284
294
|
"data-hidden": t15,
|
|
285
|
-
children:
|
|
295
|
+
children: t16
|
|
286
296
|
});
|
|
287
|
-
$[
|
|
288
|
-
$[
|
|
297
|
+
$[45] = t15;
|
|
298
|
+
$[46] = t16;
|
|
299
|
+
$[47] = t17;
|
|
289
300
|
} else {
|
|
290
|
-
|
|
301
|
+
t17 = $[47];
|
|
291
302
|
}
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
303
|
+
const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
|
|
304
|
+
let t19;
|
|
305
|
+
if ($[48] !== isOn || $[49] !== t18) {
|
|
306
|
+
t19 = /*#__PURE__*/jsx("span", {
|
|
295
307
|
className: classes.StatusTextItem,
|
|
296
308
|
"data-hidden": isOn,
|
|
297
|
-
children:
|
|
309
|
+
children: t18
|
|
298
310
|
});
|
|
299
|
-
$[
|
|
300
|
-
$[
|
|
311
|
+
$[48] = isOn;
|
|
312
|
+
$[49] = t18;
|
|
313
|
+
$[50] = t19;
|
|
301
314
|
} else {
|
|
302
|
-
|
|
315
|
+
t19 = $[50];
|
|
303
316
|
}
|
|
304
|
-
let
|
|
305
|
-
if ($[
|
|
306
|
-
|
|
317
|
+
let t20;
|
|
318
|
+
if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
|
|
319
|
+
t20 = /*#__PURE__*/jsxs("span", {
|
|
307
320
|
className: classes.StatusText,
|
|
308
321
|
"data-size": size,
|
|
309
322
|
"data-disabled": t14,
|
|
310
323
|
"aria-hidden": "true",
|
|
311
324
|
onClick: handleToggleClick,
|
|
312
|
-
children: [
|
|
325
|
+
children: [t17, t19]
|
|
313
326
|
});
|
|
314
|
-
$[
|
|
315
|
-
$[
|
|
316
|
-
$[
|
|
317
|
-
$[
|
|
318
|
-
$[
|
|
319
|
-
$[
|
|
327
|
+
$[51] = handleToggleClick;
|
|
328
|
+
$[52] = size;
|
|
329
|
+
$[53] = t14;
|
|
330
|
+
$[54] = t17;
|
|
331
|
+
$[55] = t19;
|
|
332
|
+
$[56] = t20;
|
|
320
333
|
} else {
|
|
321
|
-
|
|
334
|
+
t20 = $[56];
|
|
322
335
|
}
|
|
323
|
-
const t19 = !acceptsInteraction;
|
|
324
|
-
const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
|
|
325
336
|
const t21 = !acceptsInteraction;
|
|
326
|
-
const t22 =
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
337
|
+
const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
|
|
338
|
+
const t23 = !acceptsInteraction;
|
|
339
|
+
const t24 = !acceptsInteraction;
|
|
340
|
+
let t25;
|
|
341
|
+
if ($[57] !== size) {
|
|
342
|
+
t25 = /*#__PURE__*/jsx(LineIcon, {
|
|
330
343
|
size: size
|
|
331
344
|
});
|
|
332
|
-
$[
|
|
333
|
-
$[
|
|
345
|
+
$[57] = size;
|
|
346
|
+
$[58] = t25;
|
|
334
347
|
} else {
|
|
335
|
-
|
|
348
|
+
t25 = $[58];
|
|
336
349
|
}
|
|
337
|
-
let
|
|
338
|
-
if ($[
|
|
339
|
-
|
|
350
|
+
let t26;
|
|
351
|
+
if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
|
|
352
|
+
t26 = /*#__PURE__*/jsx("div", {
|
|
340
353
|
className: `${classes.IconContainer} ${classes.LineIconContainer}`,
|
|
341
354
|
"data-checked": isOn,
|
|
342
|
-
"data-disabled":
|
|
343
|
-
children:
|
|
355
|
+
"data-disabled": t24,
|
|
356
|
+
children: t25
|
|
344
357
|
});
|
|
345
|
-
$[
|
|
346
|
-
$[
|
|
347
|
-
$[
|
|
348
|
-
$[
|
|
358
|
+
$[59] = isOn;
|
|
359
|
+
$[60] = t24;
|
|
360
|
+
$[61] = t25;
|
|
361
|
+
$[62] = t26;
|
|
349
362
|
} else {
|
|
350
|
-
|
|
363
|
+
t26 = $[62];
|
|
351
364
|
}
|
|
352
|
-
const
|
|
353
|
-
let
|
|
354
|
-
if ($[
|
|
355
|
-
|
|
365
|
+
const t27 = !acceptsInteraction;
|
|
366
|
+
let t28;
|
|
367
|
+
if ($[63] !== size) {
|
|
368
|
+
t28 = /*#__PURE__*/jsx(CircleIcon, {
|
|
356
369
|
size: size
|
|
357
370
|
});
|
|
358
|
-
$[
|
|
359
|
-
$[
|
|
371
|
+
$[63] = size;
|
|
372
|
+
$[64] = t28;
|
|
360
373
|
} else {
|
|
361
|
-
|
|
374
|
+
t28 = $[64];
|
|
362
375
|
}
|
|
363
|
-
let
|
|
364
|
-
if ($[
|
|
365
|
-
|
|
376
|
+
let t29;
|
|
377
|
+
if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
|
|
378
|
+
t29 = /*#__PURE__*/jsx("div", {
|
|
366
379
|
className: `${classes.IconContainer} ${classes.CircleIconContainer}`,
|
|
367
380
|
"data-checked": isOn,
|
|
368
|
-
"data-disabled":
|
|
369
|
-
children:
|
|
381
|
+
"data-disabled": t27,
|
|
382
|
+
children: t28
|
|
370
383
|
});
|
|
371
|
-
$[
|
|
372
|
-
$[
|
|
373
|
-
$[
|
|
374
|
-
$[
|
|
384
|
+
$[65] = isOn;
|
|
385
|
+
$[66] = t27;
|
|
386
|
+
$[67] = t28;
|
|
387
|
+
$[68] = t29;
|
|
375
388
|
} else {
|
|
376
|
-
|
|
389
|
+
t29 = $[68];
|
|
377
390
|
}
|
|
378
|
-
let
|
|
379
|
-
if ($[
|
|
380
|
-
|
|
391
|
+
let t30;
|
|
392
|
+
if ($[69] !== t26 || $[70] !== t29) {
|
|
393
|
+
t30 = /*#__PURE__*/jsxs("div", {
|
|
381
394
|
className: classes.SwitchButtonContent,
|
|
382
395
|
"aria-hidden": "true",
|
|
383
|
-
children: [
|
|
396
|
+
children: [t26, t29]
|
|
384
397
|
});
|
|
385
|
-
$[
|
|
386
|
-
$[
|
|
387
|
-
$[
|
|
398
|
+
$[69] = t26;
|
|
399
|
+
$[70] = t29;
|
|
400
|
+
$[71] = t30;
|
|
388
401
|
} else {
|
|
389
|
-
|
|
402
|
+
t30 = $[71];
|
|
390
403
|
}
|
|
391
|
-
const
|
|
392
|
-
let
|
|
393
|
-
if ($[
|
|
394
|
-
|
|
404
|
+
const t31 = !acceptsInteraction;
|
|
405
|
+
let t32;
|
|
406
|
+
if ($[72] !== isOn || $[73] !== t31) {
|
|
407
|
+
t32 = /*#__PURE__*/jsx("div", {
|
|
395
408
|
className: classes.ToggleKnob,
|
|
396
409
|
"data-checked": isOn,
|
|
397
|
-
"data-disabled":
|
|
410
|
+
"data-disabled": t31,
|
|
398
411
|
"aria-hidden": "true"
|
|
399
412
|
});
|
|
400
|
-
$[
|
|
401
|
-
$[
|
|
402
|
-
$[
|
|
413
|
+
$[72] = isOn;
|
|
414
|
+
$[73] = t31;
|
|
415
|
+
$[74] = t32;
|
|
403
416
|
} else {
|
|
404
|
-
|
|
417
|
+
t32 = $[74];
|
|
405
418
|
}
|
|
406
|
-
let
|
|
407
|
-
if ($[
|
|
408
|
-
|
|
419
|
+
let t33;
|
|
420
|
+
if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
|
|
421
|
+
t33 = /*#__PURE__*/jsxs("button", {
|
|
409
422
|
ref: ref,
|
|
410
423
|
type: buttonType,
|
|
411
424
|
className: classes.SwitchButton,
|
|
412
425
|
"data-size": size,
|
|
413
426
|
"data-checked": isOn,
|
|
414
|
-
"data-disabled":
|
|
427
|
+
"data-disabled": t21,
|
|
415
428
|
onClick: handleToggleClick,
|
|
416
429
|
"aria-labelledby": ariaLabelledby,
|
|
417
|
-
"aria-describedby":
|
|
430
|
+
"aria-describedby": t22,
|
|
418
431
|
"aria-pressed": isOn,
|
|
419
|
-
"aria-disabled":
|
|
420
|
-
children: [
|
|
432
|
+
"aria-disabled": t23,
|
|
433
|
+
children: [t30, t32]
|
|
421
434
|
});
|
|
422
|
-
$[
|
|
423
|
-
$[
|
|
424
|
-
$[
|
|
425
|
-
$[
|
|
426
|
-
$[
|
|
427
|
-
$[
|
|
428
|
-
$[
|
|
429
|
-
$[
|
|
430
|
-
$[
|
|
431
|
-
$[
|
|
432
|
-
$[
|
|
433
|
-
$[
|
|
435
|
+
$[75] = ariaLabelledby;
|
|
436
|
+
$[76] = buttonType;
|
|
437
|
+
$[77] = handleToggleClick;
|
|
438
|
+
$[78] = isOn;
|
|
439
|
+
$[79] = ref;
|
|
440
|
+
$[80] = size;
|
|
441
|
+
$[81] = t21;
|
|
442
|
+
$[82] = t22;
|
|
443
|
+
$[83] = t23;
|
|
444
|
+
$[84] = t30;
|
|
445
|
+
$[85] = t32;
|
|
446
|
+
$[86] = t33;
|
|
434
447
|
} else {
|
|
435
|
-
|
|
448
|
+
t33 = $[86];
|
|
436
449
|
}
|
|
437
|
-
let
|
|
438
|
-
if ($[
|
|
439
|
-
|
|
450
|
+
let t34;
|
|
451
|
+
if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
|
|
452
|
+
t34 = /*#__PURE__*/jsxs("div", {
|
|
440
453
|
className: t10,
|
|
441
454
|
"data-status-label-position": statusLabelPosition,
|
|
442
455
|
...rest,
|
|
443
|
-
children: [t12, t13,
|
|
456
|
+
children: [t12, t13, t20, t33]
|
|
444
457
|
});
|
|
445
|
-
$[
|
|
446
|
-
$[
|
|
447
|
-
$[
|
|
448
|
-
$[
|
|
449
|
-
$[
|
|
450
|
-
$[
|
|
451
|
-
$[
|
|
452
|
-
$[
|
|
458
|
+
$[87] = rest;
|
|
459
|
+
$[88] = statusLabelPosition;
|
|
460
|
+
$[89] = t10;
|
|
461
|
+
$[90] = t12;
|
|
462
|
+
$[91] = t13;
|
|
463
|
+
$[92] = t20;
|
|
464
|
+
$[93] = t33;
|
|
465
|
+
$[94] = t34;
|
|
453
466
|
} else {
|
|
454
|
-
|
|
467
|
+
t34 = $[94];
|
|
455
468
|
}
|
|
456
|
-
return
|
|
469
|
+
return t34;
|
|
457
470
|
});
|
|
458
471
|
if (process.env.NODE_ENV !== "production") {
|
|
459
472
|
ToggleSwitch.displayName = 'ToggleSwitch';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-TreeView-TreeViewRootUlStyles-eZtxW{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0{outline:none}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,var(--color-accent-fg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{background-color:transparent;cursor:default}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer--2Rkn{grid-template-columns:0 0 0 1fr}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:var(--fgColor-accent,var(--color-accent-fg));border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggle-gWUdE{align-items:flex-start;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleHover-nEgP-:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleEnd-t-AEB{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContent-f0r0b{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContentText-smZM-{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-smZM-{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-smZM-{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemVisual-dRlGq{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemTrailingAction-EZETP{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:trailingAction}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemTrailingActionButton-u87Ku{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted));border-right:var(--borderWidth-thin,.0625rem) solid;height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:transparent}.prc-TreeView-TreeViewRootUlStyles-eZtxW:focus-within .prc-TreeView-TreeViewItemLevelLine-KPSSL,.prc-TreeView-TreeViewRootUlStyles-eZtxW:hover .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted))}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewDirectoryIcon-PHbeP{color:var(--treeViewItem-leadingVisual-iconColor-rest,var(--color-tree-view-item-directory-fill));display:grid}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewVisuallyHidden-4-mPv{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-wnBY9{width:var(--tree-item-loading-width,67%)}
|
|
2
|
+
/*# sourceMappingURL=TreeView-bdf34914.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TreeView/TreeView.module.css"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA+OF,CA9NE,0EACE,YAgBF,CAdE,kMAEE,kGAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oDAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,wEAAyE,CADzE,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DAwBF,CAtBE,8FACE,wGAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAWJ,CAVE,CAEA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,8GAwBF,CApBE,kJAaE,6DAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,gDAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,wGACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,gDAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,gDAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,gDAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAQE,+DAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+DACF,CACF,CAEA,mFAEE,iGAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-bdf34914.css","sourcesContent":[".TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n .TreeViewItem {\n outline: none;\n\n &:focus-visible > div,\n &:global(.focus-visible) > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n outline-offset: -2;\n }\n }\n\n &[data-has-leading-action] {\n --has-leading-action: 1;\n }\n }\n\n .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n cursor: pointer;\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n &:has(.TreeViewItemSkeleton):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n }\n\n .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n .TreeViewItemContent {\n display: flex;\n height: 100%;\n padding: 0 var(--base-size-8);\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n }\n\n .TreeViewItemContentText {\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n word-break: break-word;\n }\n\n .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: leadingAction;\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n .TreeViewItemTrailingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: trailingAction;\n }\n\n .TreeViewItemTrailingActionButton {\n flex-shrink: 1;\n }\n\n .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n .TreeViewDirectoryIcon {\n display: grid;\n color: var(--treeViewItem-leadingVisual-iconColor-rest);\n }\n\n .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Icon } from '@primer/octicons-react';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
export type TreeViewProps = {
|
|
3
4
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
@@ -8,6 +9,11 @@ export type TreeViewProps = {
|
|
|
8
9
|
className?: string;
|
|
9
10
|
style?: React.CSSProperties;
|
|
10
11
|
};
|
|
12
|
+
export type TreeViewSecondaryActions = {
|
|
13
|
+
label: string;
|
|
14
|
+
onClick: () => void;
|
|
15
|
+
icon: Icon;
|
|
16
|
+
};
|
|
11
17
|
export type TreeViewItemProps = {
|
|
12
18
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
13
19
|
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
|
|
@@ -20,6 +26,7 @@ export type TreeViewItemProps = {
|
|
|
20
26
|
onExpandedChange?: (expanded: boolean) => void;
|
|
21
27
|
onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
22
28
|
className?: string;
|
|
29
|
+
secondaryActions?: TreeViewSecondaryActions[];
|
|
23
30
|
};
|
|
24
31
|
export type SubTreeState = 'initial' | 'loading' | 'done' | 'error';
|
|
25
32
|
export type TreeViewSubTreeProps = {
|
|
@@ -37,6 +44,14 @@ export type TreeViewVisualProps = {
|
|
|
37
44
|
}) => React.ReactNode);
|
|
38
45
|
label?: string;
|
|
39
46
|
};
|
|
47
|
+
export type TreeViewTrailingAction = {
|
|
48
|
+
items: TreeViewSecondaryActions[];
|
|
49
|
+
shortcutText: string;
|
|
50
|
+
};
|
|
51
|
+
export type TreeViewActionDialogProps = {
|
|
52
|
+
items: TreeViewSecondaryActions[];
|
|
53
|
+
onClose?: () => void;
|
|
54
|
+
};
|
|
40
55
|
export type TreeViewErrorDialogProps = {
|
|
41
56
|
children: React.ReactNode;
|
|
42
57
|
title?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAA+B,MAAM,OAAO,CAAA;AA4DnD,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;CACX,CAAA;AAqFD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC9C,CAAA;AAwQD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAyMD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAG/E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqED,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAiDD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAkED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AA4CD,eAAO,MAAM,QAAQ;;;;;;;;CAQnB,CAAA"}
|