@itwin/itwinui-react 3.0.1 → 3.0.3
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 +13 -0
- package/cjs/core/Table/actionHandlers/selectHandler.d.ts +5 -5
- package/cjs/core/Table/actionHandlers/selectHandler.js +11 -5
- package/cjs/core/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/cjs/core/ThemeProvider/ThemeProvider.js +11 -11
- package/cjs/styles.js +2 -2
- package/esm/core/Table/actionHandlers/selectHandler.d.ts +5 -5
- package/esm/core/Table/actionHandlers/selectHandler.js +11 -5
- package/esm/core/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/esm/core/ThemeProvider/ThemeProvider.js +11 -11
- package/esm/styles.js +2 -2
- package/package.json +1 -1
- package/styles.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1660](https://github.com/iTwin/iTwinUI/pull/1660): Made Table's Ctrl+Shift click implementation more consistent with Windows Explorer's implementation.
|
|
8
|
+
- [#1660](https://github.com/iTwin/iTwinUI/pull/1660): Fixed occasional mismatch between the Table's visually selected rows and Table state's selected rows
|
|
9
|
+
|
|
10
|
+
## 3.0.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#1663](https://github.com/iTwin/iTwinUI/pull/1663): Fixed `ThemeProvider` to correctly inherit `highContrast` option when using `theme="inherit"`.
|
|
15
|
+
|
|
3
16
|
## 3.0.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -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]);
|
|
@@ -18,7 +18,8 @@ type RootProps = {
|
|
|
18
18
|
*
|
|
19
19
|
* The 'inherit' option is intended to be used by packages, to enable incremental adoption
|
|
20
20
|
* of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
|
|
21
|
-
* if no parent theme is found. Additionally, it will attempt to inherit
|
|
21
|
+
* if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
|
|
22
|
+
* and `portalContainer` (if possible).
|
|
22
23
|
*
|
|
23
24
|
* @default 'inherit'
|
|
24
25
|
*/
|
|
@@ -44,12 +44,20 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
44
44
|
const {
|
|
45
45
|
theme: themeProp = 'inherit',
|
|
46
46
|
children,
|
|
47
|
-
themeOptions,
|
|
47
|
+
themeOptions = {},
|
|
48
48
|
portalContainer: portalContainerProp,
|
|
49
49
|
...rest
|
|
50
50
|
} = props;
|
|
51
51
|
const [parentTheme, rootRef, parentContext] = useParentTheme();
|
|
52
52
|
const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
|
|
53
|
+
// default apply background only for topmost ThemeProvider
|
|
54
|
+
themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
|
|
55
|
+
// default inherit highContrast option from parent if also inheriting base theme
|
|
56
|
+
themeOptions.highContrast ??
|
|
57
|
+
(themeOptions.highContrast =
|
|
58
|
+
themeProp === 'inherit'
|
|
59
|
+
? parentContext?.themeOptions?.highContrast
|
|
60
|
+
: undefined);
|
|
53
61
|
/**
|
|
54
62
|
* We will portal our portal container into `portalContainer` prop (if specified),
|
|
55
63
|
* or inherit `portalContainer` from context (if also inheriting theme).
|
|
@@ -59,7 +67,6 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
59
67
|
(themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
|
|
60
68
|
const [portalContainer, setPortalContainer] = (0,
|
|
61
69
|
index_js_1.useControlledState)(null, portaledPortalContainer);
|
|
62
|
-
const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
|
|
63
70
|
const contextValue = React.useMemo(
|
|
64
71
|
() => ({ theme, themeOptions, portalContainer }),
|
|
65
72
|
// we do include all dependencies below, but we want to stringify the objects as they could be different on each render
|
|
@@ -73,7 +80,6 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
73
80
|
Root,
|
|
74
81
|
{
|
|
75
82
|
theme: theme,
|
|
76
|
-
shouldApplyBackground: shouldApplyBackground,
|
|
77
83
|
themeOptions: themeOptions,
|
|
78
84
|
ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef),
|
|
79
85
|
...rest,
|
|
@@ -99,14 +105,7 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
99
105
|
exports.default = exports.ThemeProvider;
|
|
100
106
|
// ----------------------------------------------------------------------------
|
|
101
107
|
const Root = React.forwardRef((props, forwardedRef) => {
|
|
102
|
-
const {
|
|
103
|
-
theme,
|
|
104
|
-
children,
|
|
105
|
-
themeOptions,
|
|
106
|
-
shouldApplyBackground,
|
|
107
|
-
className,
|
|
108
|
-
...rest
|
|
109
|
-
} = props;
|
|
108
|
+
const { theme, children, themeOptions, className, ...rest } = props;
|
|
110
109
|
const prefersDark = (0, index_js_1.useMediaQuery)(
|
|
111
110
|
'(prefers-color-scheme: dark)',
|
|
112
111
|
);
|
|
@@ -115,6 +114,7 @@ const Root = React.forwardRef((props, forwardedRef) => {
|
|
|
115
114
|
);
|
|
116
115
|
const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
|
|
117
116
|
const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
|
|
117
|
+
const shouldApplyBackground = themeOptions?.applyBackground;
|
|
118
118
|
return React.createElement(
|
|
119
119
|
index_js_1.Box,
|
|
120
120
|
{
|
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-ux70jlx': '_iui3-ux70jlx',
|
|
217
217
|
'iui-progress-indicator-linear-label':
|
|
218
218
|
'_iui3-progress-indicator-linear-label',
|
|
219
|
-
'iui-
|
|
219
|
+
'iui-ux70jm1': '_iui3-ux70jm1',
|
|
220
220
|
'iui-radio': '_iui3-radio',
|
|
221
221
|
'iui-radio-tile': '_iui3-radio-tile',
|
|
222
222
|
'iui-radio-tile-icon': '_iui3-radio-tile-icon',
|
|
@@ -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]);
|
|
@@ -18,7 +18,8 @@ type RootProps = {
|
|
|
18
18
|
*
|
|
19
19
|
* The 'inherit' option is intended to be used by packages, to enable incremental adoption
|
|
20
20
|
* of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
|
|
21
|
-
* if no parent theme is found. Additionally, it will attempt to inherit
|
|
21
|
+
* if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
|
|
22
|
+
* and `portalContainer` (if possible).
|
|
22
23
|
*
|
|
23
24
|
* @default 'inherit'
|
|
24
25
|
*/
|
|
@@ -46,12 +46,20 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
46
46
|
const {
|
|
47
47
|
theme: themeProp = 'inherit',
|
|
48
48
|
children,
|
|
49
|
-
themeOptions,
|
|
49
|
+
themeOptions = {},
|
|
50
50
|
portalContainer: portalContainerProp,
|
|
51
51
|
...rest
|
|
52
52
|
} = props;
|
|
53
53
|
const [parentTheme, rootRef, parentContext] = useParentTheme();
|
|
54
54
|
const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
|
|
55
|
+
// default apply background only for topmost ThemeProvider
|
|
56
|
+
themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
|
|
57
|
+
// default inherit highContrast option from parent if also inheriting base theme
|
|
58
|
+
themeOptions.highContrast ??
|
|
59
|
+
(themeOptions.highContrast =
|
|
60
|
+
themeProp === 'inherit'
|
|
61
|
+
? parentContext?.themeOptions?.highContrast
|
|
62
|
+
: undefined);
|
|
55
63
|
/**
|
|
56
64
|
* We will portal our portal container into `portalContainer` prop (if specified),
|
|
57
65
|
* or inherit `portalContainer` from context (if also inheriting theme).
|
|
@@ -63,7 +71,6 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
63
71
|
null,
|
|
64
72
|
portaledPortalContainer,
|
|
65
73
|
);
|
|
66
|
-
const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
|
|
67
74
|
const contextValue = React.useMemo(
|
|
68
75
|
() => ({ theme, themeOptions, portalContainer }),
|
|
69
76
|
// we do include all dependencies below, but we want to stringify the objects as they could be different on each render
|
|
@@ -77,7 +84,6 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
77
84
|
Root,
|
|
78
85
|
{
|
|
79
86
|
theme: theme,
|
|
80
|
-
shouldApplyBackground: shouldApplyBackground,
|
|
81
87
|
themeOptions: themeOptions,
|
|
82
88
|
ref: useMergedRefs(forwardedRef, rootRef),
|
|
83
89
|
...rest,
|
|
@@ -103,18 +109,12 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
103
109
|
export default ThemeProvider;
|
|
104
110
|
// ----------------------------------------------------------------------------
|
|
105
111
|
const Root = React.forwardRef((props, forwardedRef) => {
|
|
106
|
-
const {
|
|
107
|
-
theme,
|
|
108
|
-
children,
|
|
109
|
-
themeOptions,
|
|
110
|
-
shouldApplyBackground,
|
|
111
|
-
className,
|
|
112
|
-
...rest
|
|
113
|
-
} = props;
|
|
112
|
+
const { theme, children, themeOptions, className, ...rest } = props;
|
|
114
113
|
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
|
|
115
114
|
const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
|
|
116
115
|
const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
|
|
117
116
|
const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
|
|
117
|
+
const shouldApplyBackground = themeOptions?.applyBackground;
|
|
118
118
|
return React.createElement(
|
|
119
119
|
Box,
|
|
120
120
|
{
|
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-ux70jlx': '_iui3-ux70jlx',
|
|
216
216
|
'iui-progress-indicator-linear-label':
|
|
217
217
|
'_iui3-progress-indicator-linear-label',
|
|
218
|
-
'iui-
|
|
218
|
+
'iui-ux70jm1': '_iui3-ux70jm1',
|
|
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-ux70jlx;-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-ux70jlx{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-ux70jm1}@keyframes _iui3-ux70jm1{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}}
|