@itwin/itwinui-react 3.3.2 → 3.3.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 +7 -0
- package/cjs/core/Avatar/Avatar.d.ts +0 -1
- package/cjs/core/Buttons/DropdownButton.d.ts +0 -1
- package/cjs/core/Header/HeaderLogo.d.ts +0 -1
- package/cjs/core/List/ListItem.d.ts +0 -1
- package/cjs/core/Menu/MenuDivider.d.ts +0 -1
- package/cjs/core/ThemeProvider/ThemeProvider.js +2 -2
- package/cjs/core/utils/functions/dev.d.ts +2 -2
- package/cjs/core/utils/functions/dev.js +11 -5
- package/cjs/core/utils/functions/dom.d.ts +0 -1
- package/cjs/core/utils/hooks/useResizeObserver.js +12 -1
- package/esm/core/Avatar/Avatar.d.ts +0 -1
- package/esm/core/Buttons/DropdownButton.d.ts +0 -1
- package/esm/core/Header/HeaderLogo.d.ts +0 -1
- package/esm/core/List/ListItem.d.ts +0 -1
- package/esm/core/Menu/MenuDivider.d.ts +0 -1
- package/esm/core/ThemeProvider/ThemeProvider.js +3 -3
- package/esm/core/utils/functions/dev.d.ts +2 -2
- package/esm/core/utils/functions/dev.js +9 -3
- package/esm/core/utils/functions/dom.d.ts +0 -1
- package/esm/core/utils/hooks/useResizeObserver.js +12 -1
- package/package.json +8 -12
- package/styles.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1800](https://github.com/iTwin/iTwinUI/pull/1800): Updated internal usage of `ResizeObserver` to prevent throwing a benign "ResizeObserver loop limit exceeded" error in React 17 apps. Some affected components: `ButtonGroup`, `Tabs`, `Table`, `Tree`, `Breadcrumbs`, etc.
|
|
8
|
+
- [#1807](https://github.com/iTwin/iTwinUI/pull/1807): iTwinUI will now also check for `vitest` and `mocha` (in addition to `jest`) before running any code that would cause problems in these test runners.
|
|
9
|
+
|
|
3
10
|
## 3.3.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -160,8 +160,8 @@ const FallbackStyles = ({ root }) => {
|
|
|
160
160
|
if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
|
|
161
161
|
return;
|
|
162
162
|
}
|
|
163
|
-
// bail if
|
|
164
|
-
if (index_js_1.
|
|
163
|
+
// bail if isUnitTest because unit tests don't care about CSS 🤷
|
|
164
|
+
if (index_js_1.isUnitTest) {
|
|
165
165
|
return;
|
|
166
166
|
}
|
|
167
167
|
(async () => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const isUnitTest: boolean;
|
|
2
2
|
declare let isDev: boolean;
|
|
3
3
|
/**
|
|
4
4
|
* Logs message one time only in dev environments.
|
|
@@ -8,4 +8,4 @@ declare let isDev: boolean;
|
|
|
8
8
|
* logWarningInDev("please don't use this")
|
|
9
9
|
*/
|
|
10
10
|
declare const createWarningLogger: () => (message: string) => void;
|
|
11
|
-
export {
|
|
11
|
+
export { isUnitTest, isDev, createWarningLogger };
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.createWarningLogger = exports.isDev = exports.isJest = void 0;
|
|
4
2
|
/*---------------------------------------------------------------------------------------------
|
|
5
3
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
6
4
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
7
5
|
*--------------------------------------------------------------------------------------------*/
|
|
8
|
-
|
|
9
|
-
exports
|
|
6
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
7
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
|
+
exports.createWarningLogger = exports.isDev = exports.isUnitTest = void 0;
|
|
9
|
+
const isJest = typeof globalThis.jest !== 'undefined';
|
|
10
|
+
const isMocha = typeof globalThis.beforeEach !== 'undefined' &&
|
|
11
|
+
`${globalThis.beforeEach}`.replace(/\s/g, '') ===
|
|
12
|
+
'function(name,fn){suites[0].beforeEach(name,fn);}';
|
|
13
|
+
const isVitest = typeof globalThis.__vitest_index__ !== 'undefined';
|
|
14
|
+
const isUnitTest = isJest || isVitest || isMocha;
|
|
15
|
+
exports.isUnitTest = isUnitTest;
|
|
10
16
|
let isDev = false;
|
|
11
17
|
exports.isDev = isDev;
|
|
12
18
|
// wrapping in try-catch because process might be undefined
|
|
13
19
|
try {
|
|
14
|
-
exports.isDev = isDev = process.env.NODE_ENV !== 'production' && !
|
|
20
|
+
exports.isDev = isDev = process.env.NODE_ENV !== 'production' && !isUnitTest;
|
|
15
21
|
}
|
|
16
22
|
catch { }
|
|
17
23
|
/**
|
|
@@ -50,7 +50,18 @@ const useResizeObserver = (onResize) => {
|
|
|
50
50
|
}
|
|
51
51
|
resizeObserver.current?.disconnect?.();
|
|
52
52
|
if (element) {
|
|
53
|
-
resizeObserver.current = new ResizeObserver((
|
|
53
|
+
resizeObserver.current = new ResizeObserver((entries) => {
|
|
54
|
+
// We wrap onResize with requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
|
|
55
|
+
// See: https://github.com/iTwin/iTwinUI/issues/1317
|
|
56
|
+
// See: https://stackoverflow.com/a/58701523/11547064
|
|
57
|
+
window.requestAnimationFrame(() => {
|
|
58
|
+
if (!Array.isArray(entries) || !entries.length) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const [{ contentRect }] = entries;
|
|
62
|
+
return onResize(contentRect);
|
|
63
|
+
});
|
|
64
|
+
});
|
|
54
65
|
resizeObserver.current?.observe?.(element);
|
|
55
66
|
}
|
|
56
67
|
}, [onResize]);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import * as ReactDOM from 'react-dom';
|
|
7
7
|
import cx from 'classnames';
|
|
8
|
-
import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, importCss,
|
|
8
|
+
import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
|
|
9
9
|
import { ThemeContext } from './ThemeContext.js';
|
|
10
10
|
import { ToastProvider, Toaster } from '../Toast/Toaster.js';
|
|
11
11
|
/**
|
|
@@ -131,8 +131,8 @@ const FallbackStyles = ({ root }) => {
|
|
|
131
131
|
if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
|
|
132
132
|
return;
|
|
133
133
|
}
|
|
134
|
-
// bail if
|
|
135
|
-
if (
|
|
134
|
+
// bail if isUnitTest because unit tests don't care about CSS 🤷
|
|
135
|
+
if (isUnitTest) {
|
|
136
136
|
return;
|
|
137
137
|
}
|
|
138
138
|
(async () => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const isUnitTest: boolean;
|
|
2
2
|
declare let isDev: boolean;
|
|
3
3
|
/**
|
|
4
4
|
* Logs message one time only in dev environments.
|
|
@@ -8,4 +8,4 @@ declare let isDev: boolean;
|
|
|
8
8
|
* logWarningInDev("please don't use this")
|
|
9
9
|
*/
|
|
10
10
|
declare const createWarningLogger: () => (message: string) => void;
|
|
11
|
-
export {
|
|
11
|
+
export { isUnitTest, isDev, createWarningLogger };
|
|
@@ -2,11 +2,17 @@
|
|
|
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
|
-
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
|
+
const isJest = typeof globalThis.jest !== 'undefined';
|
|
7
|
+
const isMocha = typeof globalThis.beforeEach !== 'undefined' &&
|
|
8
|
+
`${globalThis.beforeEach}`.replace(/\s/g, '') ===
|
|
9
|
+
'function(name,fn){suites[0].beforeEach(name,fn);}';
|
|
10
|
+
const isVitest = typeof globalThis.__vitest_index__ !== 'undefined';
|
|
11
|
+
const isUnitTest = isJest || isVitest || isMocha;
|
|
6
12
|
let isDev = false;
|
|
7
13
|
// wrapping in try-catch because process might be undefined
|
|
8
14
|
try {
|
|
9
|
-
isDev = process.env.NODE_ENV !== 'production' && !
|
|
15
|
+
isDev = process.env.NODE_ENV !== 'production' && !isUnitTest;
|
|
10
16
|
}
|
|
11
17
|
catch { }
|
|
12
18
|
/**
|
|
@@ -27,4 +33,4 @@ const createWarningLogger = !isDev
|
|
|
27
33
|
}
|
|
28
34
|
};
|
|
29
35
|
};
|
|
30
|
-
export {
|
|
36
|
+
export { isUnitTest, isDev, createWarningLogger };
|
|
@@ -24,7 +24,18 @@ export const useResizeObserver = (onResize) => {
|
|
|
24
24
|
}
|
|
25
25
|
resizeObserver.current?.disconnect?.();
|
|
26
26
|
if (element) {
|
|
27
|
-
resizeObserver.current = new ResizeObserver((
|
|
27
|
+
resizeObserver.current = new ResizeObserver((entries) => {
|
|
28
|
+
// We wrap onResize with requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
|
|
29
|
+
// See: https://github.com/iTwin/iTwinUI/issues/1317
|
|
30
|
+
// See: https://stackoverflow.com/a/58701523/11547064
|
|
31
|
+
window.requestAnimationFrame(() => {
|
|
32
|
+
if (!Array.isArray(entries) || !entries.length) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const [{ contentRect }] = entries;
|
|
36
|
+
return onResize(contentRect);
|
|
37
|
+
});
|
|
38
|
+
});
|
|
28
39
|
resizeObserver.current?.observe?.(element);
|
|
29
40
|
}
|
|
30
41
|
}, [onResize]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-react",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.3",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"clean:coverage": "rimraf coverage",
|
|
65
65
|
"clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
|
|
66
66
|
"test": "yarn test:types && yarn test:unit",
|
|
67
|
-
"test:unit": "
|
|
67
|
+
"test:unit": "vitest run",
|
|
68
68
|
"test:unit:watch": "yarn test:unit --watch",
|
|
69
69
|
"test:types": "tsc -p tsconfig.test.json --noEmit",
|
|
70
70
|
"format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
|
|
@@ -77,9 +77,10 @@
|
|
|
77
77
|
"dev:styles": "yarn build:styles --watch"
|
|
78
78
|
},
|
|
79
79
|
"dependencies": {
|
|
80
|
-
"@itwin/itwinui-illustrations-react": "^2.1.0",
|
|
81
80
|
"@floating-ui/react": "^0.26.3",
|
|
81
|
+
"@itwin/itwinui-illustrations-react": "^2.1.0",
|
|
82
82
|
"classnames": "^2.3.2",
|
|
83
|
+
"jsdom": "^24.0.0",
|
|
83
84
|
"react-table": "^7.8.0",
|
|
84
85
|
"react-transition-group": "^4.4.5",
|
|
85
86
|
"tslib": "^2.6.0"
|
|
@@ -89,30 +90,25 @@
|
|
|
89
90
|
"@itwin/itwinui-variables": "3.0.0",
|
|
90
91
|
"@swc/cli": "^0.1.62",
|
|
91
92
|
"@swc/core": "^1.3.68",
|
|
92
|
-
"@testing-library/jest-dom": "^
|
|
93
|
+
"@testing-library/jest-dom": "^6.3.0",
|
|
93
94
|
"@testing-library/react": "^13.2.0",
|
|
94
95
|
"@testing-library/user-event": "^14.5.1",
|
|
95
|
-
"@types/jest": "^29.0.0",
|
|
96
96
|
"@types/node": "^18.0.0",
|
|
97
97
|
"@types/react": "^18.2.0",
|
|
98
98
|
"@types/react-dom": "^18.2.0",
|
|
99
99
|
"@types/react-transition-group": "^4.4.10",
|
|
100
100
|
"@typescript-eslint/eslint-plugin": "^5.60.0",
|
|
101
101
|
"@typescript-eslint/parser": "^5.60.0",
|
|
102
|
+
"@vitest/coverage-v8": "^1.2.1",
|
|
102
103
|
"concurrently": "^5.3.0",
|
|
103
104
|
"eslint": "^8.43.0",
|
|
104
105
|
"eslint-config-prettier": "^8.8.0",
|
|
105
106
|
"eslint-plugin-require-extensions": "^0.1.3",
|
|
106
|
-
"jest": "^29.0.0",
|
|
107
|
-
"jest-cli": "^29.0.0",
|
|
108
|
-
"jest-environment-jsdom": "^29.0.0",
|
|
109
|
-
"jest-junit": "^13.2.0",
|
|
110
107
|
"react": "^18.0.0",
|
|
111
108
|
"react-dom": "^18.0.0",
|
|
112
|
-
"ts-jest": "^29.0.0",
|
|
113
|
-
"ts-node": "^10.0.0",
|
|
114
109
|
"typescript": "~5.1.6",
|
|
115
|
-
"vite": "^5.0.12"
|
|
110
|
+
"vite": "^5.0.12",
|
|
111
|
+
"vitest": "^1.2.1"
|
|
116
112
|
},
|
|
117
113
|
"peerDependencies": {
|
|
118
114
|
"react": ">= 17.0.0 < 19.0.0",
|
package/styles.css
CHANGED
|
@@ -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-ui6sb2o;-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-ui6sb2o{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-ui6sb3m}@keyframes _iui3-ui6sb3m{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}}
|