@itwin/itwinui-react 3.0.2 → 3.0.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 +14 -0
- package/cjs/core/Select/Select.js +1 -7
- package/cjs/core/Table/actionHandlers/selectHandler.d.ts +5 -5
- package/cjs/core/Table/actionHandlers/selectHandler.js +11 -5
- package/cjs/core/Tabs/Tabs.d.ts +3 -5
- package/cjs/core/Tabs/Tabs.js +3 -5
- package/cjs/core/Toast/Toaster.js +16 -17
- package/cjs/core/utils/hooks/useId.js +2 -1
- package/cjs/styles.js +2 -2
- package/esm/core/Select/Select.js +1 -7
- package/esm/core/Table/actionHandlers/selectHandler.d.ts +5 -5
- package/esm/core/Table/actionHandlers/selectHandler.js +11 -5
- package/esm/core/Tabs/Tabs.d.ts +3 -5
- package/esm/core/Tabs/Tabs.js +3 -5
- package/esm/core/Toast/Toaster.js +16 -17
- package/esm/core/utils/hooks/useId.js +2 -1
- package/esm/styles.js +2 -2
- package/package.json +1 -1
- package/styles.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1682](https://github.com/iTwin/iTwinUI/pull/1682): Memoize `useToaster`'s return value so that it can be more reliably used in dependency arrays.
|
|
8
|
+
- [#1681](https://github.com/iTwin/iTwinUI/pull/1681): Fixed an issue where `Select`'s menu was being positioned incorrectly after its first render.
|
|
9
|
+
|
|
10
|
+
## 3.0.3
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#1660](https://github.com/iTwin/iTwinUI/pull/1660): Made Table's Ctrl+Shift click implementation more consistent with Windows Explorer's implementation.
|
|
15
|
+
- [#1660](https://github.com/iTwin/iTwinUI/pull/1660): Fixed occasional mismatch between the Table's visually selected rows and Table state's selected rows
|
|
16
|
+
|
|
3
17
|
## 3.0.2
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -279,13 +279,7 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
|
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
}),
|
|
282
|
-
ref:
|
|
283
|
-
// early return if ref is already set, to prevent repeated re-renders
|
|
284
|
-
if (popover.refs.floating.current || !node) {
|
|
285
|
-
return;
|
|
286
|
-
}
|
|
287
|
-
popover.refs.setFloating(node);
|
|
288
|
-
},
|
|
282
|
+
ref: popover.refs.setFloating,
|
|
289
283
|
},
|
|
290
284
|
menuItems,
|
|
291
285
|
),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ActionType, TableInstance, TableState } from '../../../react-table/react-table.js';
|
|
1
|
+
import type { ActionType, TableInstance, TableState, IdType } from '../../../react-table/react-table.js';
|
|
2
2
|
/**
|
|
3
3
|
* Handles selection when toggling a row (Ctrl click or checkbox click)
|
|
4
4
|
*/
|
|
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
|
|
|
9
9
|
export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
|
|
10
10
|
lastSelectedRowId: any;
|
|
11
11
|
selectedRowIds: Record<string, boolean>;
|
|
12
|
-
hiddenColumns?:
|
|
12
|
+
hiddenColumns?: IdType<T>[] | undefined;
|
|
13
13
|
columnResizing: {
|
|
14
14
|
startX?: number | undefined;
|
|
15
15
|
columnWidth?: number | undefined;
|
|
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
|
|
|
25
25
|
isScrolledToRight?: boolean | undefined;
|
|
26
26
|
isScrolledToLeft?: boolean | undefined;
|
|
27
27
|
};
|
|
28
|
-
columnOrder:
|
|
29
|
-
expanded: Record<
|
|
28
|
+
columnOrder: IdType<T>[];
|
|
29
|
+
expanded: Record<IdType<T>, boolean>;
|
|
30
30
|
filters: import("../../../react-table/react-table.js").Filters<T>;
|
|
31
31
|
globalFilter: any;
|
|
32
|
-
groupBy:
|
|
32
|
+
groupBy: IdType<T>[];
|
|
33
33
|
pageSize: number;
|
|
34
34
|
pageIndex: number;
|
|
35
35
|
rowState: Record<string, {
|
|
@@ -6,6 +6,7 @@ exports.onShiftSelectHandler =
|
|
|
6
6
|
void 0;
|
|
7
7
|
/**
|
|
8
8
|
* Handles subrow selection and validation.
|
|
9
|
+
* - Calls onSelect() with selected data
|
|
9
10
|
* - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
|
|
10
11
|
* - Validation: Ensures that any disabled/unselectable row/subrow is not selected
|
|
11
12
|
*/
|
|
@@ -112,17 +113,22 @@ const onShiftSelectHandler = (
|
|
|
112
113
|
startIndex = endIndex;
|
|
113
114
|
endIndex = temp;
|
|
114
115
|
}
|
|
116
|
+
const isLastSelectedRowIdSelected =
|
|
117
|
+
state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
|
|
118
|
+
!!state.selectedRowIds[state.lastSelectedRowId];
|
|
115
119
|
// If ctrl + shift click, do not lose previous selection
|
|
116
120
|
// If shift click, start new selection
|
|
117
|
-
const selectedRowIds = !!action.ctrlPressed
|
|
118
|
-
|
|
121
|
+
const selectedRowIds = !!action.ctrlPressed
|
|
122
|
+
? { ...state.selectedRowIds }
|
|
123
|
+
: {};
|
|
124
|
+
// 1. All rows between start and end are assigned the state of the last selected row
|
|
119
125
|
instance.flatRows
|
|
120
126
|
.slice(startIndex, endIndex + 1)
|
|
121
|
-
.forEach((r) => (selectedRowIds[r.id] =
|
|
122
|
-
// 2.
|
|
127
|
+
.forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
|
|
128
|
+
// 2. All children of the last row (endIndex) also are assigned the state of the last selected row
|
|
123
129
|
// Since lastRow's children come after endIndex + 1 (not selected in step 1)
|
|
124
130
|
const handleRow = (row) => {
|
|
125
|
-
selectedRowIds[row.id] =
|
|
131
|
+
selectedRowIds[row.id] = isLastSelectedRowIdSelected;
|
|
126
132
|
row.subRows.forEach((r) => handleRow(r));
|
|
127
133
|
};
|
|
128
134
|
handleRow(instance.flatRows[endIndex]);
|
package/cjs/core/Tabs/Tabs.d.ts
CHANGED
|
@@ -199,11 +199,9 @@ export { LegacyTab as Tab };
|
|
|
199
199
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
200
200
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
201
201
|
* </Tabs.TabList>
|
|
202
|
-
* <Tabs.
|
|
203
|
-
* <
|
|
204
|
-
*
|
|
205
|
-
* </Tabs.Actions>
|
|
206
|
-
* </Tabs.ActionsWrapper>
|
|
202
|
+
* <Tabs.Actions>
|
|
203
|
+
* <Button>Sample Button</Button>
|
|
204
|
+
* </Tabs.Actions>
|
|
207
205
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
208
206
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
209
207
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
package/cjs/core/Tabs/Tabs.js
CHANGED
|
@@ -417,11 +417,9 @@ exports.Tab = LegacyTab;
|
|
|
417
417
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
418
418
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
419
419
|
* </Tabs.TabList>
|
|
420
|
-
* <Tabs.
|
|
421
|
-
* <
|
|
422
|
-
*
|
|
423
|
-
* </Tabs.Actions>
|
|
424
|
-
* </Tabs.ActionsWrapper>
|
|
420
|
+
* <Tabs.Actions>
|
|
421
|
+
* <Button>Sample Button</Button>
|
|
422
|
+
* </Tabs.Actions>
|
|
425
423
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
426
424
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
427
425
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
|
@@ -17,29 +17,28 @@ const Toast_js_1 = require('./Toast.js');
|
|
|
17
17
|
// ----------------------------------------------------------------------------
|
|
18
18
|
const useToaster = () => {
|
|
19
19
|
const dispatch = (0, index_js_1.useSafeContext)(ToasterDispatchContext);
|
|
20
|
-
|
|
21
|
-
(category) => (content, options) => {
|
|
20
|
+
return React.useMemo(() => {
|
|
21
|
+
const showToast = (category) => (content, options) => {
|
|
22
22
|
const id = nextId();
|
|
23
23
|
dispatch({
|
|
24
24
|
type: 'add',
|
|
25
25
|
toast: { ...options, id, content, category },
|
|
26
26
|
});
|
|
27
27
|
return { close: () => dispatch({ type: 'remove', id }) };
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
};
|
|
28
|
+
};
|
|
29
|
+
return {
|
|
30
|
+
positive: showToast('positive'),
|
|
31
|
+
informational: showToast('informational'),
|
|
32
|
+
negative: showToast('negative'),
|
|
33
|
+
warning: showToast('warning'),
|
|
34
|
+
closeAll: () => {
|
|
35
|
+
dispatch({ type: 'close-all' });
|
|
36
|
+
},
|
|
37
|
+
setSettings: (settings) => {
|
|
38
|
+
dispatch({ type: 'settings', settings });
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
}, [dispatch]);
|
|
43
42
|
};
|
|
44
43
|
exports.useToaster = useToaster;
|
|
45
44
|
// ----------------------------------------------------------------------------
|
|
@@ -21,4 +21,5 @@ exports.useId = useId;
|
|
|
21
21
|
// Read more: https://github.com/webpack/webpack/issues/14814
|
|
22
22
|
const _React = React;
|
|
23
23
|
const useUniqueValue =
|
|
24
|
-
_React.useId ??
|
|
24
|
+
_React.useId ??
|
|
25
|
+
(() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));
|
package/cjs/styles.js
CHANGED
|
@@ -213,10 +213,10 @@ const styles = {
|
|
|
213
213
|
'iui-overlay-exiting': '_iui3-overlay-exiting',
|
|
214
214
|
closeAnimation,
|
|
215
215
|
'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
|
|
216
|
-
'iui-
|
|
216
|
+
'iui-uvcq473': '_iui3-uvcq473',
|
|
217
217
|
'iui-progress-indicator-linear-label':
|
|
218
218
|
'_iui3-progress-indicator-linear-label',
|
|
219
|
-
'iui-
|
|
219
|
+
'iui-uvcq47n': '_iui3-uvcq47n',
|
|
220
220
|
'iui-radio': '_iui3-radio',
|
|
221
221
|
'iui-radio-tile': '_iui3-radio-tile',
|
|
222
222
|
'iui-radio-tile-icon': '_iui3-radio-tile-icon',
|
|
@@ -275,13 +275,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
|
|
|
275
275
|
}
|
|
276
276
|
},
|
|
277
277
|
}),
|
|
278
|
-
ref:
|
|
279
|
-
// early return if ref is already set, to prevent repeated re-renders
|
|
280
|
-
if (popover.refs.floating.current || !node) {
|
|
281
|
-
return;
|
|
282
|
-
}
|
|
283
|
-
popover.refs.setFloating(node);
|
|
284
|
-
},
|
|
278
|
+
ref: popover.refs.setFloating,
|
|
285
279
|
},
|
|
286
280
|
menuItems,
|
|
287
281
|
),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ActionType, TableInstance, TableState } from '../../../react-table/react-table.js';
|
|
1
|
+
import type { ActionType, TableInstance, TableState, IdType } from '../../../react-table/react-table.js';
|
|
2
2
|
/**
|
|
3
3
|
* Handles selection when toggling a row (Ctrl click or checkbox click)
|
|
4
4
|
*/
|
|
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
|
|
|
9
9
|
export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
|
|
10
10
|
lastSelectedRowId: any;
|
|
11
11
|
selectedRowIds: Record<string, boolean>;
|
|
12
|
-
hiddenColumns?:
|
|
12
|
+
hiddenColumns?: IdType<T>[] | undefined;
|
|
13
13
|
columnResizing: {
|
|
14
14
|
startX?: number | undefined;
|
|
15
15
|
columnWidth?: number | undefined;
|
|
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
|
|
|
25
25
|
isScrolledToRight?: boolean | undefined;
|
|
26
26
|
isScrolledToLeft?: boolean | undefined;
|
|
27
27
|
};
|
|
28
|
-
columnOrder:
|
|
29
|
-
expanded: Record<
|
|
28
|
+
columnOrder: IdType<T>[];
|
|
29
|
+
expanded: Record<IdType<T>, boolean>;
|
|
30
30
|
filters: import("../../../react-table/react-table.js").Filters<T>;
|
|
31
31
|
globalFilter: any;
|
|
32
|
-
groupBy:
|
|
32
|
+
groupBy: IdType<T>[];
|
|
33
33
|
pageSize: number;
|
|
34
34
|
pageIndex: number;
|
|
35
35
|
rowState: Record<string, {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Handles subrow selection and validation.
|
|
3
|
+
* - Calls onSelect() with selected data
|
|
3
4
|
* - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
|
|
4
5
|
* - Validation: Ensures that any disabled/unselectable row/subrow is not selected
|
|
5
6
|
*/
|
|
@@ -104,17 +105,22 @@ export const onShiftSelectHandler = (
|
|
|
104
105
|
startIndex = endIndex;
|
|
105
106
|
endIndex = temp;
|
|
106
107
|
}
|
|
108
|
+
const isLastSelectedRowIdSelected =
|
|
109
|
+
state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
|
|
110
|
+
!!state.selectedRowIds[state.lastSelectedRowId];
|
|
107
111
|
// If ctrl + shift click, do not lose previous selection
|
|
108
112
|
// If shift click, start new selection
|
|
109
|
-
const selectedRowIds = !!action.ctrlPressed
|
|
110
|
-
|
|
113
|
+
const selectedRowIds = !!action.ctrlPressed
|
|
114
|
+
? { ...state.selectedRowIds }
|
|
115
|
+
: {};
|
|
116
|
+
// 1. All rows between start and end are assigned the state of the last selected row
|
|
111
117
|
instance.flatRows
|
|
112
118
|
.slice(startIndex, endIndex + 1)
|
|
113
|
-
.forEach((r) => (selectedRowIds[r.id] =
|
|
114
|
-
// 2.
|
|
119
|
+
.forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
|
|
120
|
+
// 2. All children of the last row (endIndex) also are assigned the state of the last selected row
|
|
115
121
|
// Since lastRow's children come after endIndex + 1 (not selected in step 1)
|
|
116
122
|
const handleRow = (row) => {
|
|
117
|
-
selectedRowIds[row.id] =
|
|
123
|
+
selectedRowIds[row.id] = isLastSelectedRowIdSelected;
|
|
118
124
|
row.subRows.forEach((r) => handleRow(r));
|
|
119
125
|
};
|
|
120
126
|
handleRow(instance.flatRows[endIndex]);
|
package/esm/core/Tabs/Tabs.d.ts
CHANGED
|
@@ -199,11 +199,9 @@ export { LegacyTab as Tab };
|
|
|
199
199
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
200
200
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
201
201
|
* </Tabs.TabList>
|
|
202
|
-
* <Tabs.
|
|
203
|
-
* <
|
|
204
|
-
*
|
|
205
|
-
* </Tabs.Actions>
|
|
206
|
-
* </Tabs.ActionsWrapper>
|
|
202
|
+
* <Tabs.Actions>
|
|
203
|
+
* <Button>Sample Button</Button>
|
|
204
|
+
* </Tabs.Actions>
|
|
207
205
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
208
206
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
209
207
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
package/esm/core/Tabs/Tabs.js
CHANGED
|
@@ -405,11 +405,9 @@ export { LegacyTab as Tab };
|
|
|
405
405
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
406
406
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
407
407
|
* </Tabs.TabList>
|
|
408
|
-
* <Tabs.
|
|
409
|
-
* <
|
|
410
|
-
*
|
|
411
|
-
* </Tabs.Actions>
|
|
412
|
-
* </Tabs.ActionsWrapper>
|
|
408
|
+
* <Tabs.Actions>
|
|
409
|
+
* <Button>Sample Button</Button>
|
|
410
|
+
* </Tabs.Actions>
|
|
413
411
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
414
412
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
415
413
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
|
@@ -9,29 +9,28 @@ import { Toast } from './Toast.js';
|
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
10
|
export const useToaster = () => {
|
|
11
11
|
const dispatch = useSafeContext(ToasterDispatchContext);
|
|
12
|
-
|
|
13
|
-
(category) => (content, options) => {
|
|
12
|
+
return React.useMemo(() => {
|
|
13
|
+
const showToast = (category) => (content, options) => {
|
|
14
14
|
const id = nextId();
|
|
15
15
|
dispatch({
|
|
16
16
|
type: 'add',
|
|
17
17
|
toast: { ...options, id, content, category },
|
|
18
18
|
});
|
|
19
19
|
return { close: () => dispatch({ type: 'remove', id }) };
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
20
|
+
};
|
|
21
|
+
return {
|
|
22
|
+
positive: showToast('positive'),
|
|
23
|
+
informational: showToast('informational'),
|
|
24
|
+
negative: showToast('negative'),
|
|
25
|
+
warning: showToast('warning'),
|
|
26
|
+
closeAll: () => {
|
|
27
|
+
dispatch({ type: 'close-all' });
|
|
28
|
+
},
|
|
29
|
+
setSettings: (settings) => {
|
|
30
|
+
dispatch({ type: 'settings', settings });
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
}, [dispatch]);
|
|
35
34
|
};
|
|
36
35
|
// ----------------------------------------------------------------------------
|
|
37
36
|
export const Toaster = () => {
|
|
@@ -15,4 +15,5 @@ export const useId = () => {
|
|
|
15
15
|
// This is needed to avoid bundlers trying to import non-existing export.
|
|
16
16
|
// Read more: https://github.com/webpack/webpack/issues/14814
|
|
17
17
|
const _React = React;
|
|
18
|
-
const useUniqueValue =
|
|
18
|
+
const useUniqueValue =
|
|
19
|
+
_React.useId ?? (() => React.useMemo(() => getRandomValue(10), []));
|
package/esm/styles.js
CHANGED
|
@@ -212,10 +212,10 @@ const styles = {
|
|
|
212
212
|
'iui-overlay-exiting': '_iui3-overlay-exiting',
|
|
213
213
|
closeAnimation,
|
|
214
214
|
'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
|
|
215
|
-
'iui-
|
|
215
|
+
'iui-uvcq473': '_iui3-uvcq473',
|
|
216
216
|
'iui-progress-indicator-linear-label':
|
|
217
217
|
'_iui3-progress-indicator-linear-label',
|
|
218
|
-
'iui-
|
|
218
|
+
'iui-uvcq47n': '_iui3-uvcq47n',
|
|
219
219
|
'iui-radio': '_iui3-radio',
|
|
220
220
|
'iui-radio-tile': '_iui3-radio-tile',
|
|
221
221
|
'iui-radio-tile-icon': '_iui3-radio-tile-icon',
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -694,14 +694,14 @@
|
|
|
694
694
|
}
|
|
695
695
|
|
|
696
696
|
@layer itwinui.v3{
|
|
697
|
-
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-
|
|
697
|
+
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-uvcq473;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes _iui3-uvcq473{to{transform:rotate(360deg)}}._iui3-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}._iui3-progress-indicator-linear-label>:only-child{margin-inline:auto}._iui3-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}._iui3-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}
|
|
698
698
|
}
|
|
699
699
|
|
|
700
700
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}
|
|
701
701
|
}
|
|
702
702
|
|
|
703
703
|
@layer itwinui.v3{
|
|
704
|
-
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-
|
|
704
|
+
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-uvcq47n}@keyframes _iui3-uvcq47n{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;inline-size:-moz-fit-content;inline-size:fit-content;margin:0;padding:0;display:flex;position:relative}._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}._iui3-radio-wrapper._iui3-positive{color:var(--iui-color-text-positive)}._iui3-radio-wrapper._iui3-warning{color:var(--iui-color-text-warning)}._iui3-radio-wrapper._iui3-negative{color:var(--iui-color-text-negative)}._iui3-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;inline-size:var(--iui-size-m);block-size:var(--iui-size-m);appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}._iui3-radio:before{content:"";inset:calc((var(--iui-checkbox-target-size,24px) - 16px)/-2);position:absolute}._iui3-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;inset:0}._iui3-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}._iui3-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}._iui3-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}._iui3-radio._iui3-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}._iui3-radio._iui3-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}._iui3-radio._iui3-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}._iui3-radio._iui3-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}._iui3-radio._iui3-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}._iui3-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}._iui3-radio:not(:checked),._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}._iui3-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}._iui3-radio-tile:where(:hover) ._iui3-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}._iui3-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}._iui3-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}._iui3-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}._iui3-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
|
|
705
705
|
}
|
|
706
706
|
|
|
707
707
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}
|