@itwin/itwinui-react 3.3.0 → 3.3.2
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/Dialog/DialogContent.d.ts +1 -2
- package/cjs/core/Dialog/DialogContent.js +1 -42
- package/cjs/core/Dialog/DialogMain.js +2 -24
- package/cjs/core/Table/Table.js +4 -0
- package/cjs/core/Table/TableCell.js +7 -22
- package/cjs/core/Table/hooks/useResizeColumns.js +6 -1
- package/cjs/core/Table/utils.d.ts +6 -0
- package/cjs/core/Table/utils.js +18 -1
- package/esm/core/Dialog/DialogContent.d.ts +1 -2
- package/esm/core/Dialog/DialogContent.js +2 -17
- package/esm/core/Dialog/DialogMain.js +3 -25
- package/esm/core/Table/Table.js +5 -1
- package/esm/core/Table/TableCell.js +8 -23
- package/esm/core/Table/hooks/useResizeColumns.js +6 -1
- package/esm/core/Table/utils.d.ts +6 -0
- package/esm/core/Table/utils.js +16 -0
- package/package.json +2 -2
- package/styles.css +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1799](https://github.com/iTwin/iTwinUI/pull/1799): Fixed `Table` bug where columns were not resizable when their widths were specified as strings (E.g. `"20%"`, `"50ch"`).
|
|
8
|
+
|
|
9
|
+
## 3.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#1796](https://github.com/iTwin/iTwinUI/pull/1796): Fixed a visual issue in `Table` where column headers were not aligned with rows when using expandable `subRows`.
|
|
14
|
+
- [#1795](https://github.com/iTwin/iTwinUI/pull/1795): Fixed blurring and resizing issues in Dialog/Modal by removing `overflow: hidden` and inline `transform` styles.
|
|
15
|
+
|
|
3
16
|
## 3.3.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
2
1
|
/**
|
|
3
2
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
4
3
|
* @example
|
|
@@ -6,5 +5,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
|
6
5
|
* My dialog content
|
|
7
6
|
* </Dialog.Content>
|
|
8
7
|
*/
|
|
9
|
-
export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
|
|
8
|
+
export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
|
|
10
9
|
export default DialogContent;
|
|
@@ -1,38 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
3
|
exports.DialogContent = void 0;
|
|
30
4
|
/*---------------------------------------------------------------------------------------------
|
|
31
5
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
6
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
7
|
*--------------------------------------------------------------------------------------------*/
|
|
34
|
-
const React = __importStar(require("react"));
|
|
35
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
36
8
|
const index_js_1 = require("../utils/index.js");
|
|
37
9
|
/**
|
|
38
10
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
@@ -41,18 +13,5 @@ const index_js_1 = require("../utils/index.js");
|
|
|
41
13
|
* My dialog content
|
|
42
14
|
* </Dialog.Content>
|
|
43
15
|
*/
|
|
44
|
-
exports.DialogContent =
|
|
45
|
-
const { children, className, ...rest } = props;
|
|
46
|
-
const contentRef = React.useRef(null);
|
|
47
|
-
React.useEffect(() => {
|
|
48
|
-
// firefox hack for adding data-iui-flex in absence of :has
|
|
49
|
-
if (!(0, index_js_1.supportsHas)()) {
|
|
50
|
-
const dialog = contentRef.current?.closest('[role=dialog]');
|
|
51
|
-
if (dialog instanceof HTMLElement) {
|
|
52
|
-
dialog.dataset.iuiFlex = 'true';
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}, []);
|
|
56
|
-
return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-content', className), ref: (0, index_js_1.useMergedRefs)(contentRef, ref), ...rest }, children));
|
|
57
|
-
});
|
|
16
|
+
exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
|
|
58
17
|
exports.default = exports.DialogContent;
|
|
@@ -63,7 +63,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
63
63
|
const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
|
|
64
64
|
const [style, setStyle] = React.useState();
|
|
65
65
|
const dialogRef = React.useRef(null);
|
|
66
|
-
const [dialogElement, setDialogElement] = React.useState();
|
|
67
66
|
const hasBeenResized = React.useRef(false);
|
|
68
67
|
const previousFocusedElement = React.useRef();
|
|
69
68
|
const originalBodyOverflow = React.useRef('');
|
|
@@ -131,17 +130,13 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
131
130
|
...newStyle,
|
|
132
131
|
}));
|
|
133
132
|
}, []);
|
|
134
|
-
const roundedTransform = useRoundedTransform({
|
|
135
|
-
element: dialogElement,
|
|
136
|
-
transform,
|
|
137
|
-
});
|
|
138
133
|
const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
|
|
139
134
|
'iui-dialog-default': styleType === 'default',
|
|
140
135
|
'iui-dialog-full-page': styleType === 'fullPage',
|
|
141
136
|
'iui-dialog-visible': isOpen,
|
|
142
137
|
'iui-dialog-draggable': isDraggable,
|
|
143
|
-
}, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref
|
|
144
|
-
transform
|
|
138
|
+
}, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
|
|
139
|
+
transform,
|
|
145
140
|
...style,
|
|
146
141
|
...propStyle,
|
|
147
142
|
}, ...rest },
|
|
@@ -173,20 +168,3 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
173
168
|
!trapFocus && content)));
|
|
174
169
|
});
|
|
175
170
|
exports.default = exports.DialogMain;
|
|
176
|
-
// ----------------------------------------------------------------------------
|
|
177
|
-
/**
|
|
178
|
-
* Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
|
|
179
|
-
*/
|
|
180
|
-
const useRoundedTransform = ({ element, transform, }) => {
|
|
181
|
-
const [roundedStyles, setRoundedStyles] = React.useState(transform);
|
|
182
|
-
(0, index_js_1.useIsomorphicLayoutEffect)(() => {
|
|
183
|
-
if (!element || typeof DOMMatrix === 'undefined') {
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
const [x, y] = transform
|
|
187
|
-
? (0, index_js_1.getTranslateValues)(transform)
|
|
188
|
-
: (0, index_js_1.getTranslateValuesFromElement)(element);
|
|
189
|
-
setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
|
|
190
|
-
}, [element, transform]);
|
|
191
|
-
return roundedStyles;
|
|
192
|
-
};
|
package/cjs/core/Table/Table.js
CHANGED
|
@@ -429,6 +429,9 @@ const Table = (props) => {
|
|
|
429
429
|
React.createElement(index_js_1.Box, { as: 'div', ...headerProps, className: (0, classnames_1.default)('iui-table-header', headerProps?.className) },
|
|
430
430
|
React.createElement(index_js_1.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
|
|
431
431
|
const { onClick, ...restSortProps } = column.getSortByToggleProps();
|
|
432
|
+
const columnHasExpanders = hasAnySubRows &&
|
|
433
|
+
index ===
|
|
434
|
+
headerGroup.headers.findIndex((c) => c.id !== index_js_5.SELECTION_CELL_ID);
|
|
432
435
|
const columnProps = column.getHeaderProps({
|
|
433
436
|
...restSortProps,
|
|
434
437
|
className: (0, classnames_1.default)('iui-table-cell', {
|
|
@@ -438,6 +441,7 @@ const Table = (props) => {
|
|
|
438
441
|
}, column.columnClassName),
|
|
439
442
|
style: {
|
|
440
443
|
...(0, utils_js_1.getCellStyle)(column, !!state.isTableResizing),
|
|
444
|
+
...(columnHasExpanders && (0, utils_js_1.getSubRowStyle)({ density })),
|
|
441
445
|
...(0, utils_js_1.getStickyStyle)(column, visibleColumns),
|
|
442
446
|
flexWrap: 'unset',
|
|
443
447
|
},
|
|
@@ -42,34 +42,19 @@ const TableCell = (props) => {
|
|
|
42
42
|
const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
|
|
43
43
|
const hasSubRowExpander = cellIndex ===
|
|
44
44
|
cell.row.cells.findIndex((c) => c.column.id !== index_js_1.SELECTION_CELL_ID);
|
|
45
|
-
const getSubRowStyle = () => {
|
|
46
|
-
if (!tableHasSubRows || !hasSubRowExpander) {
|
|
47
|
-
return undefined;
|
|
48
|
-
}
|
|
49
|
-
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
50
|
-
const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
|
|
51
|
-
let cellPadding = 16;
|
|
52
|
-
let expanderMargin = 8;
|
|
53
|
-
if (density === 'condensed') {
|
|
54
|
-
cellPadding = 12;
|
|
55
|
-
expanderMargin = 4;
|
|
56
|
-
}
|
|
57
|
-
else if (density === 'extra-condensed') {
|
|
58
|
-
cellPadding = 8;
|
|
59
|
-
expanderMargin = 4;
|
|
60
|
-
}
|
|
61
|
-
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
62
|
-
return {
|
|
63
|
-
paddingInlineStart: cellPadding + dynamicMargin * multiplier,
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
45
|
const cellElementProps = cell.getCellProps({
|
|
67
46
|
className: (0, classnames_1.default)('iui-table-cell', cell.column.cellClassName, {
|
|
68
47
|
'iui-table-cell-sticky': !!cell.column.sticky,
|
|
69
48
|
}),
|
|
70
49
|
style: {
|
|
71
50
|
...(0, utils_js_1.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
|
|
72
|
-
...
|
|
51
|
+
...(tableHasSubRows &&
|
|
52
|
+
hasSubRowExpander &&
|
|
53
|
+
(0, utils_js_1.getSubRowStyle)({
|
|
54
|
+
density,
|
|
55
|
+
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
56
|
+
depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
|
|
57
|
+
})),
|
|
73
58
|
...(0, utils_js_1.getStickyStyle)(cell.column, tableInstance.visibleColumns),
|
|
74
59
|
},
|
|
75
60
|
});
|
|
@@ -301,7 +301,12 @@ const getHeaderWidth = (header) => {
|
|
|
301
301
|
if (!header) {
|
|
302
302
|
return 0;
|
|
303
303
|
}
|
|
304
|
-
|
|
304
|
+
// `header.width` can be a string if the user specifies it in the column definition,
|
|
305
|
+
// but then becomes a number (pixels) when the user resizes the column, or when the table is resized, etc.
|
|
306
|
+
// So if `header.width` is ever a string that cannot be converted to a number, we shouldn't use `header.width`.
|
|
307
|
+
return typeof header.width === 'string' && Number.isNaN(Number(header.width))
|
|
308
|
+
? Number(header.resizeWidth || 0)
|
|
309
|
+
: Number(header.width || header.resizeWidth || 0);
|
|
305
310
|
};
|
|
306
311
|
const calculateTableWidth = (columnWidths, headers) => {
|
|
307
312
|
let newTableWidth = 0;
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { ColumnInstance } from '../../react-table/react-table.js';
|
|
2
2
|
export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
|
|
3
3
|
export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
|
|
4
|
+
export declare const getSubRowStyle: ({ density, depth }: {
|
|
5
|
+
density?: string | undefined;
|
|
6
|
+
depth?: number | undefined;
|
|
7
|
+
}) => {
|
|
8
|
+
paddingInlineStart: number;
|
|
9
|
+
};
|
package/cjs/core/Table/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getStickyStyle = exports.getCellStyle = void 0;
|
|
3
|
+
exports.getSubRowStyle = exports.getStickyStyle = exports.getCellStyle = void 0;
|
|
4
4
|
const getCellStyle = (column, isTableResizing) => {
|
|
5
5
|
const style = {};
|
|
6
6
|
style.flex = `1 1 145px`;
|
|
@@ -48,3 +48,20 @@ const getStickyStyle = (column, columnList) => {
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
exports.getStickyStyle = getStickyStyle;
|
|
51
|
+
const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
|
|
52
|
+
let cellPadding = 16;
|
|
53
|
+
let expanderMargin = 8;
|
|
54
|
+
if (density === 'condensed') {
|
|
55
|
+
cellPadding = 12;
|
|
56
|
+
expanderMargin = 4;
|
|
57
|
+
}
|
|
58
|
+
else if (density === 'extra-condensed') {
|
|
59
|
+
cellPadding = 8;
|
|
60
|
+
expanderMargin = 4;
|
|
61
|
+
}
|
|
62
|
+
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
63
|
+
return {
|
|
64
|
+
paddingInlineStart: cellPadding + depth * multiplier,
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
exports.getSubRowStyle = getSubRowStyle;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
2
1
|
/**
|
|
3
2
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
4
3
|
* @example
|
|
@@ -6,5 +5,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
|
6
5
|
* My dialog content
|
|
7
6
|
* </Dialog.Content>
|
|
8
7
|
*/
|
|
9
|
-
export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
|
|
8
|
+
export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
|
|
10
9
|
export default DialogContent;
|
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
import
|
|
6
|
-
import cx from 'classnames';
|
|
7
|
-
import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
|
|
5
|
+
import { polymorphic } from '../utils/index.js';
|
|
8
6
|
/**
|
|
9
7
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
10
8
|
* @example
|
|
@@ -12,18 +10,5 @@ import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
|
|
|
12
10
|
* My dialog content
|
|
13
11
|
* </Dialog.Content>
|
|
14
12
|
*/
|
|
15
|
-
export const DialogContent =
|
|
16
|
-
const { children, className, ...rest } = props;
|
|
17
|
-
const contentRef = React.useRef(null);
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
// firefox hack for adding data-iui-flex in absence of :has
|
|
20
|
-
if (!supportsHas()) {
|
|
21
|
-
const dialog = contentRef.current?.closest('[role=dialog]');
|
|
22
|
-
if (dialog instanceof HTMLElement) {
|
|
23
|
-
dialog.dataset.iuiFlex = 'true';
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}, []);
|
|
27
|
-
return (React.createElement(Box, { className: cx('iui-dialog-content', className), ref: useMergedRefs(contentRef, ref), ...rest }, children));
|
|
28
|
-
});
|
|
13
|
+
export const DialogContent = polymorphic.div('iui-dialog-content');
|
|
29
14
|
export default DialogContent;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
|
-
import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box,
|
|
7
|
+
import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
|
|
8
8
|
import { useDialogContext } from './DialogContext.js';
|
|
9
9
|
import { CSSTransition } from 'react-transition-group';
|
|
10
10
|
import { DialogDragContext } from './DialogDragContext.js';
|
|
@@ -34,7 +34,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
34
34
|
const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
|
|
35
35
|
const [style, setStyle] = React.useState();
|
|
36
36
|
const dialogRef = React.useRef(null);
|
|
37
|
-
const [dialogElement, setDialogElement] = React.useState();
|
|
38
37
|
const hasBeenResized = React.useRef(false);
|
|
39
38
|
const previousFocusedElement = React.useRef();
|
|
40
39
|
const originalBodyOverflow = React.useRef('');
|
|
@@ -102,17 +101,13 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
102
101
|
...newStyle,
|
|
103
102
|
}));
|
|
104
103
|
}, []);
|
|
105
|
-
const roundedTransform = useRoundedTransform({
|
|
106
|
-
element: dialogElement,
|
|
107
|
-
transform,
|
|
108
|
-
});
|
|
109
104
|
const content = (React.createElement(Box, { className: cx('iui-dialog', {
|
|
110
105
|
'iui-dialog-default': styleType === 'default',
|
|
111
106
|
'iui-dialog-full-page': styleType === 'fullPage',
|
|
112
107
|
'iui-dialog-visible': isOpen,
|
|
113
108
|
'iui-dialog-draggable': isDraggable,
|
|
114
|
-
}, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref
|
|
115
|
-
transform
|
|
109
|
+
}, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
|
|
110
|
+
transform,
|
|
116
111
|
...style,
|
|
117
112
|
...propStyle,
|
|
118
113
|
}, ...rest },
|
|
@@ -144,20 +139,3 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
144
139
|
!trapFocus && content)));
|
|
145
140
|
});
|
|
146
141
|
export default DialogMain;
|
|
147
|
-
// ----------------------------------------------------------------------------
|
|
148
|
-
/**
|
|
149
|
-
* Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
|
|
150
|
-
*/
|
|
151
|
-
const useRoundedTransform = ({ element, transform, }) => {
|
|
152
|
-
const [roundedStyles, setRoundedStyles] = React.useState(transform);
|
|
153
|
-
useIsomorphicLayoutEffect(() => {
|
|
154
|
-
if (!element || typeof DOMMatrix === 'undefined') {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
const [x, y] = transform
|
|
158
|
-
? getTranslateValues(transform)
|
|
159
|
-
: getTranslateValuesFromElement(element);
|
|
160
|
-
setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
|
|
161
|
-
}, [element, transform]);
|
|
162
|
-
return roundedStyles;
|
|
163
|
-
};
|
package/esm/core/Table/Table.js
CHANGED
|
@@ -8,7 +8,7 @@ import cx from 'classnames';
|
|
|
8
8
|
import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
|
|
9
9
|
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
|
|
10
10
|
import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
|
|
11
|
-
import { getCellStyle, getStickyStyle } from './utils.js';
|
|
11
|
+
import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
|
|
12
12
|
import { TableRowMemoized } from './TableRowMemoized.js';
|
|
13
13
|
import { FilterToggle } from './filters/index.js';
|
|
14
14
|
import { customFilterFunctions } from './filters/customFilterFunctions.js';
|
|
@@ -400,6 +400,9 @@ export const Table = (props) => {
|
|
|
400
400
|
React.createElement(Box, { as: 'div', ...headerProps, className: cx('iui-table-header', headerProps?.className) },
|
|
401
401
|
React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
|
|
402
402
|
const { onClick, ...restSortProps } = column.getSortByToggleProps();
|
|
403
|
+
const columnHasExpanders = hasAnySubRows &&
|
|
404
|
+
index ===
|
|
405
|
+
headerGroup.headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
|
|
403
406
|
const columnProps = column.getHeaderProps({
|
|
404
407
|
...restSortProps,
|
|
405
408
|
className: cx('iui-table-cell', {
|
|
@@ -409,6 +412,7 @@ export const Table = (props) => {
|
|
|
409
412
|
}, column.columnClassName),
|
|
410
413
|
style: {
|
|
411
414
|
...getCellStyle(column, !!state.isTableResizing),
|
|
415
|
+
...(columnHasExpanders && getSubRowStyle({ density })),
|
|
412
416
|
...getStickyStyle(column, visibleColumns),
|
|
413
417
|
flexWrap: 'unset',
|
|
414
418
|
},
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
|
-
import { getCellStyle, getStickyStyle } from './utils.js';
|
|
7
|
+
import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
|
|
8
8
|
import { SubRowExpander } from './SubRowExpander.js';
|
|
9
9
|
import { SELECTION_CELL_ID } from './columns/index.js';
|
|
10
10
|
import { DefaultCell } from './cells/index.js';
|
|
@@ -13,34 +13,19 @@ export const TableCell = (props) => {
|
|
|
13
13
|
const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
|
|
14
14
|
const hasSubRowExpander = cellIndex ===
|
|
15
15
|
cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
|
|
16
|
-
const getSubRowStyle = () => {
|
|
17
|
-
if (!tableHasSubRows || !hasSubRowExpander) {
|
|
18
|
-
return undefined;
|
|
19
|
-
}
|
|
20
|
-
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
21
|
-
const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
|
|
22
|
-
let cellPadding = 16;
|
|
23
|
-
let expanderMargin = 8;
|
|
24
|
-
if (density === 'condensed') {
|
|
25
|
-
cellPadding = 12;
|
|
26
|
-
expanderMargin = 4;
|
|
27
|
-
}
|
|
28
|
-
else if (density === 'extra-condensed') {
|
|
29
|
-
cellPadding = 8;
|
|
30
|
-
expanderMargin = 4;
|
|
31
|
-
}
|
|
32
|
-
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
33
|
-
return {
|
|
34
|
-
paddingInlineStart: cellPadding + dynamicMargin * multiplier,
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
16
|
const cellElementProps = cell.getCellProps({
|
|
38
17
|
className: cx('iui-table-cell', cell.column.cellClassName, {
|
|
39
18
|
'iui-table-cell-sticky': !!cell.column.sticky,
|
|
40
19
|
}),
|
|
41
20
|
style: {
|
|
42
21
|
...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
|
|
43
|
-
...
|
|
22
|
+
...(tableHasSubRows &&
|
|
23
|
+
hasSubRowExpander &&
|
|
24
|
+
getSubRowStyle({
|
|
25
|
+
density,
|
|
26
|
+
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
27
|
+
depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
|
|
28
|
+
})),
|
|
44
29
|
...getStickyStyle(cell.column, tableInstance.visibleColumns),
|
|
45
30
|
},
|
|
46
31
|
});
|
|
@@ -297,7 +297,12 @@ const getHeaderWidth = (header) => {
|
|
|
297
297
|
if (!header) {
|
|
298
298
|
return 0;
|
|
299
299
|
}
|
|
300
|
-
|
|
300
|
+
// `header.width` can be a string if the user specifies it in the column definition,
|
|
301
|
+
// but then becomes a number (pixels) when the user resizes the column, or when the table is resized, etc.
|
|
302
|
+
// So if `header.width` is ever a string that cannot be converted to a number, we shouldn't use `header.width`.
|
|
303
|
+
return typeof header.width === 'string' && Number.isNaN(Number(header.width))
|
|
304
|
+
? Number(header.resizeWidth || 0)
|
|
305
|
+
: Number(header.width || header.resizeWidth || 0);
|
|
301
306
|
};
|
|
302
307
|
const calculateTableWidth = (columnWidths, headers) => {
|
|
303
308
|
let newTableWidth = 0;
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { ColumnInstance } from '../../react-table/react-table.js';
|
|
2
2
|
export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
|
|
3
3
|
export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
|
|
4
|
+
export declare const getSubRowStyle: ({ density, depth }: {
|
|
5
|
+
density?: string | undefined;
|
|
6
|
+
depth?: number | undefined;
|
|
7
|
+
}) => {
|
|
8
|
+
paddingInlineStart: number;
|
|
9
|
+
};
|
package/esm/core/Table/utils.js
CHANGED
|
@@ -43,3 +43,19 @@ export const getStickyStyle = (column, columnList) => {
|
|
|
43
43
|
'--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
|
|
44
44
|
};
|
|
45
45
|
};
|
|
46
|
+
export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
|
|
47
|
+
let cellPadding = 16;
|
|
48
|
+
let expanderMargin = 8;
|
|
49
|
+
if (density === 'condensed') {
|
|
50
|
+
cellPadding = 12;
|
|
51
|
+
expanderMargin = 4;
|
|
52
|
+
}
|
|
53
|
+
else if (density === 'extra-condensed') {
|
|
54
|
+
cellPadding = 8;
|
|
55
|
+
expanderMargin = 4;
|
|
56
|
+
}
|
|
57
|
+
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
58
|
+
return {
|
|
59
|
+
paddingInlineStart: cellPadding + depth * multiplier,
|
|
60
|
+
};
|
|
61
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-react",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.2",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"tslib": "^2.6.0"
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
|
-
"@itwin/itwinui-css": "^2.2.
|
|
88
|
+
"@itwin/itwinui-css": "^2.2.1",
|
|
89
89
|
"@itwin/itwinui-variables": "3.0.0",
|
|
90
90
|
"@swc/cli": "^0.1.62",
|
|
91
91
|
"@swc/core": "^1.3.68",
|
package/styles.css
CHANGED
|
@@ -437,21 +437,21 @@
|
|
|
437
437
|
}
|
|
438
438
|
|
|
439
439
|
@layer itwinui.v3{
|
|
440
|
-
._iui3-calendar-day-outside-month-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-outside-month-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-outside-month-today:hover{background-color:var(--iui-color-background-hover)}._iui3-calendar-day-range-start,._iui3-calendar-day-range-start-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:pointer;border-start-end-radius:0;border-end-end-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-start:focus-visible,._iui3-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-start-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-start-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-start-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-start-today:hover:before{background-color:initial}._iui3-calendar-day-range-start-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range-end,._iui3-calendar-day-range-end-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);border-start-start-radius:0;border-end-start-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-end:focus-visible,._iui3-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-end-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-end-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-end-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-end-today:hover:before{background-color:initial}._iui3-calendar-day-range-end-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range,._iui3-calendar-day-range-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;background-color:var(--iui-color-background-accent-muted);border-radius:0;block-size:36px;inline-size:40px}._iui3-calendar-day-range:focus-visible,._iui3-calendar-day-range-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-calendar-day-range:focus,._iui3-calendar-day-range-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range:hover,._iui3-calendar-day-range-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-today:hover{background-color:var(--iui-color-background-hover);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today:before{border-color:var(--iui-color-border-accent)}._iui3-dialog-wrapper{pointer-events:none;z-index:999;isolation:isolate;block-size:100%;inline-size:100%;position:fixed;inset-block-start:0;inset-inline-start:0;overflow:hidden;transform:translate(0)}._iui3-dialog-wrapper[data-iui-relative=true]{position:absolute}._iui3-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding-block:var(--iui-size-s);padding-inline:var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);flex-direction:column;display:flex;position:fixed
|
|
440
|
+
._iui3-calendar-day-outside-month-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-outside-month-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-outside-month-today:hover{background-color:var(--iui-color-background-hover)}._iui3-calendar-day-range-start,._iui3-calendar-day-range-start-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:pointer;border-start-end-radius:0;border-end-end-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-start:focus-visible,._iui3-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-start-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-start-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-start-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-start-today:hover:before{background-color:initial}._iui3-calendar-day-range-start-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range-end,._iui3-calendar-day-range-end-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);border-start-start-radius:0;border-end-start-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-end:focus-visible,._iui3-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-end-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-end-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-end-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-end-today:hover:before{background-color:initial}._iui3-calendar-day-range-end-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range,._iui3-calendar-day-range-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;background-color:var(--iui-color-background-accent-muted);border-radius:0;block-size:36px;inline-size:40px}._iui3-calendar-day-range:focus-visible,._iui3-calendar-day-range-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-calendar-day-range:focus,._iui3-calendar-day-range-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range:hover,._iui3-calendar-day-range-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-today:hover{background-color:var(--iui-color-background-hover);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today:before{border-color:var(--iui-color-border-accent)}._iui3-dialog-wrapper{pointer-events:none;z-index:999;isolation:isolate;block-size:100%;inline-size:100%;position:fixed;inset-block-start:0;inset-inline-start:0;overflow:hidden;transform:translate(0)}._iui3-dialog-wrapper[data-iui-relative=true]{position:absolute}._iui3-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding-block:var(--iui-size-s);padding-inline:var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);flex-direction:column;display:flex;position:fixed}
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-dialog{border:1px solid}}
|
|
444
444
|
}
|
|
445
445
|
|
|
446
446
|
@layer itwinui.v3{
|
|
447
|
-
._iui3-dialog:
|
|
447
|
+
._iui3-dialog:not(._iui3-dialog-visible){visibility:hidden;opacity:0}._iui3-dialog._iui3-dialog-visible{transition-delay:var(--iui-duration-0)}._iui3-dialog-default{min-block-size:7.75rem;max-block-size:100vh;min-inline-size:min(100%,380px);max-inline-size:max(50%,380px);max-block-size:100dvh}._iui3-dialog-default:not([data-iui-placement]){inset-block-start:33%;inset-inline-start:50%;transform:translate(-50%,-33%)}._iui3-dialog-default[data-iui-placement=top-left]{margin-block-start:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-start:0;inset-inline-start:0}._iui3-dialog-default[data-iui-placement=top-right]{margin-block-start:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-start:0;inset-inline-end:0}._iui3-dialog-default[data-iui-placement=bottom-left]{margin-block-end:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-end:0;inset-inline-start:0}._iui3-dialog-default[data-iui-placement=bottom-right]{margin-block-end:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-end:0;inset-inline-end:0}._iui3-dialog-full-page{block-size:100vh;block-size:100dvb;inline-size:100vw;will-change:transform;border-radius:0;inline-size:100vi;inset-block-start:0;inset-inline-start:0}._iui3-dialog-full-page:not(._iui3-dialog-visible){transform:translateY(100%)}
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
@layer itwinui.v3{@media (prefers-reduced-motion:no-preference){._iui3-dialog-full-page{transition:visibility var(--iui-duration-0)linear var(--iui-duration-2),opacity var(--iui-duration-0)linear var(--iui-duration-2),transform var(--iui-duration-1)ease-in}._iui3-dialog-full-page._iui3-dialog-visible{transition:transform var(--iui-duration-2)ease-out}}
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
@layer itwinui.v3{
|
|
454
|
-
._iui3-dialog-draggable{border:1px solid var(--iui-color-border)}._iui3-dialog-animation-enter{opacity:0;transform:translateY(100%)}._iui3-dialog-animation-enter-active{opacity:1;transform:translateY(0)}._iui3-dialog-title{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-inline-end:auto;display:flex;overflow:hidden}._iui3-dialog-title-bar{font-size:var(--iui-font-size-3);align-items:center;margin-block-end:var(--iui-size-s);display:flex}._iui3-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding-block:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-m);margin-inline:calc(0px - var(--iui-size-m));margin-block:calc(0px - var(--iui-size-s))var(--iui-size-s);cursor:grab;background-color:var(--iui-color-background-backdrop);border-block-end:1px solid var(--iui-color-border)}._iui3-dialog-title-bar-filled:active{cursor:grabbing}._iui3-dialog-content{margin-inline:calc(0px - var(--iui-size-m));padding-inline:var(--iui-size-m);flex-grow:2;overflow-y:auto}._iui3-dialog-button-bar{justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);margin-block-start:var(--iui-size-s);display:flex}._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-expander-icon-transform:none;--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);isolation:isolate;border-radius:var(--iui-border-radius-1);flex-direction:column;inline-size:100%;display:flex}._iui3-expandable-block[data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:0;--_iui-expandable-block-expander-icon-transform:rotate(90deg)}._iui3-expandable-block[data-iui-size=small]{--_iui-expandable-block-expander-icon-size:var(--iui-size-s);--_iui-expandable-block-header-gap:var(--iui-size-xs);--_iui-expandable-block-header-padding:calc(var(--iui-size-s)*.5)var(--iui-size-xs)}._iui3-expandable-block[data-iui-variant=borderless]{--_iui-expandable-block-border:none;--_iui-expandable-block-background-color:transparent;--_iui-expandable-block-content-padding:none;--_iui-expandable-block-header-background-color-disabled:transparent;--_iui-expandable-block-header-focus-offset:-1px;--_iui-expandable-block-header-focus-thickness:1px}._iui3-expandable-block[data-iui-variant=borderless][data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:inherit}._iui3-expandable-header{vertical-align:baseline;gap:var(--_iui-expandable-block-header-gap);padding:0;padding:var(--_iui-expandable-block-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);font:inherit;z-index:1;text-align:start;background-color:var(--_iui-expandable-block-background-color);border:none;border:var(--_iui-expandable-block-border);border-radius:inherit;transition:background-color var(--iui-duration-1)ease-out;border-end-end-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);border-end-start-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);align-items:center;margin:0;display:flex}._iui3-expandable-header:focus-visible{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}@supports not selector(*:focus-visible){._iui3-expandable-header:focus{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}}
|
|
454
|
+
._iui3-dialog-draggable{border:1px solid var(--iui-color-border)}._iui3-dialog-animation-enter{opacity:0;transform:translateY(100%)}._iui3-dialog-animation-enter-active{opacity:1;transform:translateY(0)}._iui3-dialog-title{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-inline-end:auto;display:flex;overflow:hidden}._iui3-dialog-title-bar{font-size:var(--iui-font-size-3);align-items:center;margin-block-end:var(--iui-size-s);display:flex}._iui3-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding-block:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-m);margin-inline:calc(0px - var(--iui-size-m));margin-block:calc(0px - var(--iui-size-s))var(--iui-size-s);cursor:grab;background-color:var(--iui-color-background-backdrop);border-block-end:1px solid var(--iui-color-border);border-start-start-radius:var(--iui-border-radius-1);border-start-end-radius:var(--iui-border-radius-1)}._iui3-dialog-title-bar-filled:active{cursor:grabbing}._iui3-dialog-content{margin-inline:calc(0px - var(--iui-size-m));padding-inline:var(--iui-size-m);flex-grow:2;overflow-y:auto}._iui3-dialog-button-bar{justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);margin-block-start:var(--iui-size-s);display:flex}._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-expander-icon-transform:none;--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);isolation:isolate;border-radius:var(--iui-border-radius-1);flex-direction:column;inline-size:100%;display:flex}._iui3-expandable-block[data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:0;--_iui-expandable-block-expander-icon-transform:rotate(90deg)}._iui3-expandable-block[data-iui-size=small]{--_iui-expandable-block-expander-icon-size:var(--iui-size-s);--_iui-expandable-block-header-gap:var(--iui-size-xs);--_iui-expandable-block-header-padding:calc(var(--iui-size-s)*.5)var(--iui-size-xs)}._iui3-expandable-block[data-iui-variant=borderless]{--_iui-expandable-block-border:none;--_iui-expandable-block-background-color:transparent;--_iui-expandable-block-content-padding:none;--_iui-expandable-block-header-background-color-disabled:transparent;--_iui-expandable-block-header-focus-offset:-1px;--_iui-expandable-block-header-focus-thickness:1px}._iui3-expandable-block[data-iui-variant=borderless][data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:inherit}._iui3-expandable-header{vertical-align:baseline;gap:var(--_iui-expandable-block-header-gap);padding:0;padding:var(--_iui-expandable-block-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);font:inherit;z-index:1;text-align:start;background-color:var(--_iui-expandable-block-background-color);border:none;border:var(--_iui-expandable-block-border);border-radius:inherit;transition:background-color var(--iui-duration-1)ease-out;border-end-end-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);border-end-start-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);align-items:center;margin:0;display:flex}._iui3-expandable-header:focus-visible{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}@supports not selector(*:focus-visible){._iui3-expandable-header:focus{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}}
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-expandable-header{--_iui-expandable-block-expander-icon-fill:CanvasText}}
|
|
@@ -699,14 +699,14 @@
|
|
|
699
699
|
}
|
|
700
700
|
|
|
701
701
|
@layer itwinui.v3{
|
|
702
|
-
._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-icon-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-icon-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-
|
|
702
|
+
._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-icon-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-icon-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-uu03qka;-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-uu03qka{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}
|
|
703
703
|
}
|
|
704
704
|
|
|
705
705
|
@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}}
|
|
706
706
|
}
|
|
707
707
|
|
|
708
708
|
@layer itwinui.v3{
|
|
709
|
-
._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-
|
|
709
|
+
._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-uu03qkn}@keyframes _iui3-uu03qkn{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}
|
|
710
710
|
}
|
|
711
711
|
|
|
712
712
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}
|