@itwin/itwinui-react 3.17.0-dev.0 → 3.17.0-dev.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 +28 -0
- package/DEV-cjs/core/Dialog/Dialog.js +35 -42
- package/DEV-cjs/core/Dialog/DialogBackdrop.js +6 -1
- package/DEV-cjs/core/Dialog/DialogMain.js +42 -34
- package/DEV-cjs/core/Dialog/DialogMainContext.js +23 -0
- package/DEV-cjs/core/Dialog/DialogTitleBar.js +10 -1
- package/DEV-cjs/core/Panels/Panels.js +1 -1
- package/DEV-cjs/core/SideNavigation/SideNavigation.js +1 -11
- package/DEV-cjs/core/Table/actionHandlers/selectHandler.js +7 -8
- package/DEV-cjs/core/Tabs/Tabs.js +9 -1
- package/DEV-cjs/core/ThemeProvider/ThemeProvider.js +12 -9
- package/DEV-cjs/core/Toast/Toast.js +132 -77
- package/DEV-cjs/core/Toast/Toaster.js +11 -3
- package/DEV-cjs/styles.js +1 -1
- package/DEV-cjs/utils/components/index.js +0 -1
- package/DEV-esm/core/Dialog/Dialog.js +32 -42
- package/DEV-esm/core/Dialog/DialogBackdrop.js +6 -1
- package/DEV-esm/core/Dialog/DialogMain.js +42 -34
- package/DEV-esm/core/Dialog/DialogMainContext.js +3 -0
- package/DEV-esm/core/Dialog/DialogTitleBar.js +10 -1
- package/DEV-esm/core/Panels/Panels.js +2 -1
- package/DEV-esm/core/SideNavigation/SideNavigation.js +2 -17
- package/DEV-esm/core/Table/actionHandlers/selectHandler.js +7 -8
- package/DEV-esm/core/Tabs/Tabs.js +9 -1
- package/DEV-esm/core/ThemeProvider/ThemeProvider.js +12 -9
- package/DEV-esm/core/Toast/Toast.js +131 -75
- package/DEV-esm/core/Toast/Toaster.js +11 -3
- package/DEV-esm/styles.js +1 -1
- package/DEV-esm/utils/components/index.js +0 -1
- package/LICENSE.md +1 -1
- package/cjs/core/Dialog/Dialog.d.ts +1 -1
- package/cjs/core/Dialog/Dialog.js +35 -42
- package/cjs/core/Dialog/DialogBackdrop.d.ts +1 -1
- package/cjs/core/Dialog/DialogBackdrop.js +6 -1
- package/cjs/core/Dialog/DialogMain.js +42 -34
- package/cjs/core/Dialog/DialogMainContext.d.ts +7 -0
- package/cjs/core/Dialog/DialogMainContext.js +23 -0
- package/cjs/core/Dialog/DialogTitleBar.js +10 -1
- package/cjs/core/Panels/Panels.js +1 -1
- package/cjs/core/SideNavigation/SideNavigation.d.ts +2 -2
- package/cjs/core/SideNavigation/SideNavigation.js +1 -11
- package/cjs/core/Table/actionHandlers/selectHandler.js +7 -8
- package/cjs/core/Tabs/Tabs.js +9 -1
- package/cjs/core/ThemeProvider/ThemeContext.d.ts +2 -1
- package/cjs/core/ThemeProvider/ThemeProvider.d.ts +13 -5
- package/cjs/core/ThemeProvider/ThemeProvider.js +12 -9
- package/cjs/core/Toast/Toast.d.ts +1 -1
- package/cjs/core/Toast/Toast.js +132 -77
- package/cjs/core/Toast/Toaster.d.ts +1 -1
- package/cjs/core/Toast/Toaster.js +11 -3
- package/cjs/styles.js +1 -1
- package/cjs/utils/components/index.d.ts +0 -1
- package/cjs/utils/components/index.js +0 -1
- package/cjs/utils/hooks/useGlobals.d.ts +1 -0
- package/esm/core/Dialog/Dialog.d.ts +1 -1
- package/esm/core/Dialog/Dialog.js +32 -42
- package/esm/core/Dialog/DialogBackdrop.d.ts +1 -1
- package/esm/core/Dialog/DialogBackdrop.js +6 -1
- package/esm/core/Dialog/DialogMain.js +42 -34
- package/esm/core/Dialog/DialogMainContext.d.ts +7 -0
- package/esm/core/Dialog/DialogMainContext.js +3 -0
- package/esm/core/Dialog/DialogTitleBar.js +10 -1
- package/esm/core/Panels/Panels.js +2 -1
- package/esm/core/SideNavigation/SideNavigation.d.ts +2 -2
- package/esm/core/SideNavigation/SideNavigation.js +2 -17
- package/esm/core/Table/actionHandlers/selectHandler.js +7 -8
- package/esm/core/Tabs/Tabs.js +9 -1
- package/esm/core/ThemeProvider/ThemeContext.d.ts +2 -1
- package/esm/core/ThemeProvider/ThemeProvider.d.ts +13 -5
- package/esm/core/ThemeProvider/ThemeProvider.js +12 -9
- package/esm/core/Toast/Toast.d.ts +1 -1
- package/esm/core/Toast/Toast.js +131 -75
- package/esm/core/Toast/Toaster.d.ts +1 -1
- package/esm/core/Toast/Toaster.js +11 -3
- package/esm/styles.js +1 -1
- package/esm/utils/components/index.d.ts +0 -1
- package/esm/utils/components/index.js +0 -1
- package/esm/utils/hooks/useGlobals.d.ts +1 -0
- package/package.json +5 -7
- package/styles.css +10 -10
- package/DEV-cjs/utils/components/WithCSSTransition.js +0 -60
- package/DEV-esm/utils/components/WithCSSTransition.js +0 -49
- package/cjs/utils/components/WithCSSTransition.d.ts +0 -6
- package/cjs/utils/components/WithCSSTransition.js +0 -60
- package/esm/utils/components/WithCSSTransition.d.ts +0 -6
- package/esm/utils/components/WithCSSTransition.js +0 -49
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', {
|
|
3
|
-
value: true,
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, 'WithCSSTransition', {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function () {
|
|
8
|
-
return WithCSSTransition;
|
|
9
|
-
},
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
|
|
12
|
-
const _react = _interop_require_wildcard._(require('react'));
|
|
13
|
-
const _reacttransitiongroup = require('react-transition-group');
|
|
14
|
-
const _styles = require('../../styles.js');
|
|
15
|
-
const WithCSSTransition = (props) => {
|
|
16
|
-
let { in: visible, dimension = 'height', children, ...rest } = props;
|
|
17
|
-
let expandedSize = _react.useRef(0);
|
|
18
|
-
let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
|
|
19
|
-
return _react.createElement(
|
|
20
|
-
_reacttransitiongroup.CSSTransition,
|
|
21
|
-
{
|
|
22
|
-
in: visible,
|
|
23
|
-
timeout: 200,
|
|
24
|
-
unmountOnExit: true,
|
|
25
|
-
onEnter: (node) => {
|
|
26
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
27
|
-
node.style[dimension] = '0px';
|
|
28
|
-
},
|
|
29
|
-
onEntering: (node) => {
|
|
30
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
31
|
-
},
|
|
32
|
-
onEntered: (node) => {
|
|
33
|
-
node.style[`min${dimensionCamelCase}`] = '';
|
|
34
|
-
node.style[dimension] = '';
|
|
35
|
-
},
|
|
36
|
-
onExit: (node) => {
|
|
37
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
38
|
-
},
|
|
39
|
-
onExiting: (node) => {
|
|
40
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
41
|
-
node.style[dimension] = '0px';
|
|
42
|
-
},
|
|
43
|
-
classNames: {
|
|
44
|
-
enter: _styles.styles['iui-enter'],
|
|
45
|
-
enterActive: _styles.styles['iui-enter-active'],
|
|
46
|
-
exit: _styles.styles['iui-exit'],
|
|
47
|
-
exitActive: _styles.styles['iui-exit-active'],
|
|
48
|
-
},
|
|
49
|
-
...rest,
|
|
50
|
-
},
|
|
51
|
-
_react.isValidElement(children)
|
|
52
|
-
? _react.cloneElement(children, {
|
|
53
|
-
ref: (el) => {
|
|
54
|
-
if (el)
|
|
55
|
-
expandedSize.current = el.getBoundingClientRect()[dimension];
|
|
56
|
-
},
|
|
57
|
-
})
|
|
58
|
-
: _react.createElement(_react.Fragment, null),
|
|
59
|
-
);
|
|
60
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CSSTransition } from 'react-transition-group';
|
|
3
|
-
import { styles } from '../../styles.js';
|
|
4
|
-
export const WithCSSTransition = (props) => {
|
|
5
|
-
let { in: visible, dimension = 'height', children, ...rest } = props;
|
|
6
|
-
let expandedSize = React.useRef(0);
|
|
7
|
-
let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
|
|
8
|
-
return React.createElement(
|
|
9
|
-
CSSTransition,
|
|
10
|
-
{
|
|
11
|
-
in: visible,
|
|
12
|
-
timeout: 200,
|
|
13
|
-
unmountOnExit: true,
|
|
14
|
-
onEnter: (node) => {
|
|
15
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
16
|
-
node.style[dimension] = '0px';
|
|
17
|
-
},
|
|
18
|
-
onEntering: (node) => {
|
|
19
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
20
|
-
},
|
|
21
|
-
onEntered: (node) => {
|
|
22
|
-
node.style[`min${dimensionCamelCase}`] = '';
|
|
23
|
-
node.style[dimension] = '';
|
|
24
|
-
},
|
|
25
|
-
onExit: (node) => {
|
|
26
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
27
|
-
},
|
|
28
|
-
onExiting: (node) => {
|
|
29
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
30
|
-
node.style[dimension] = '0px';
|
|
31
|
-
},
|
|
32
|
-
classNames: {
|
|
33
|
-
enter: styles['iui-enter'],
|
|
34
|
-
enterActive: styles['iui-enter-active'],
|
|
35
|
-
exit: styles['iui-exit'],
|
|
36
|
-
exitActive: styles['iui-exit-active'],
|
|
37
|
-
},
|
|
38
|
-
...rest,
|
|
39
|
-
},
|
|
40
|
-
React.isValidElement(children)
|
|
41
|
-
? React.cloneElement(children, {
|
|
42
|
-
ref: (el) => {
|
|
43
|
-
if (el)
|
|
44
|
-
expandedSize.current = el.getBoundingClientRect()[dimension];
|
|
45
|
-
},
|
|
46
|
-
})
|
|
47
|
-
: React.createElement(React.Fragment, null),
|
|
48
|
-
);
|
|
49
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CSSTransition } from 'react-transition-group';
|
|
3
|
-
export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWithoutRef<typeof CSSTransition>> & {
|
|
4
|
-
children: JSX.Element;
|
|
5
|
-
dimension?: "height" | "width";
|
|
6
|
-
}) => React.JSX.Element;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', {
|
|
3
|
-
value: true,
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, 'WithCSSTransition', {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function () {
|
|
8
|
-
return WithCSSTransition;
|
|
9
|
-
},
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
|
|
12
|
-
const _react = _interop_require_wildcard._(require('react'));
|
|
13
|
-
const _reacttransitiongroup = require('react-transition-group');
|
|
14
|
-
const _styles = require('../../styles.js');
|
|
15
|
-
const WithCSSTransition = (props) => {
|
|
16
|
-
let { in: visible, dimension = 'height', children, ...rest } = props;
|
|
17
|
-
let expandedSize = _react.useRef(0);
|
|
18
|
-
let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
|
|
19
|
-
return _react.createElement(
|
|
20
|
-
_reacttransitiongroup.CSSTransition,
|
|
21
|
-
{
|
|
22
|
-
in: visible,
|
|
23
|
-
timeout: 200,
|
|
24
|
-
unmountOnExit: true,
|
|
25
|
-
onEnter: (node) => {
|
|
26
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
27
|
-
node.style[dimension] = '0px';
|
|
28
|
-
},
|
|
29
|
-
onEntering: (node) => {
|
|
30
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
31
|
-
},
|
|
32
|
-
onEntered: (node) => {
|
|
33
|
-
node.style[`min${dimensionCamelCase}`] = '';
|
|
34
|
-
node.style[dimension] = '';
|
|
35
|
-
},
|
|
36
|
-
onExit: (node) => {
|
|
37
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
38
|
-
},
|
|
39
|
-
onExiting: (node) => {
|
|
40
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
41
|
-
node.style[dimension] = '0px';
|
|
42
|
-
},
|
|
43
|
-
classNames: {
|
|
44
|
-
enter: _styles.styles['iui-enter'],
|
|
45
|
-
enterActive: _styles.styles['iui-enter-active'],
|
|
46
|
-
exit: _styles.styles['iui-exit'],
|
|
47
|
-
exitActive: _styles.styles['iui-exit-active'],
|
|
48
|
-
},
|
|
49
|
-
...rest,
|
|
50
|
-
},
|
|
51
|
-
_react.isValidElement(children)
|
|
52
|
-
? _react.cloneElement(children, {
|
|
53
|
-
ref: (el) => {
|
|
54
|
-
if (el)
|
|
55
|
-
expandedSize.current = el.getBoundingClientRect()[dimension];
|
|
56
|
-
},
|
|
57
|
-
})
|
|
58
|
-
: _react.createElement(_react.Fragment, null),
|
|
59
|
-
);
|
|
60
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CSSTransition } from 'react-transition-group';
|
|
3
|
-
export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWithoutRef<typeof CSSTransition>> & {
|
|
4
|
-
children: JSX.Element;
|
|
5
|
-
dimension?: "height" | "width";
|
|
6
|
-
}) => React.JSX.Element;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CSSTransition } from 'react-transition-group';
|
|
3
|
-
import { styles } from '../../styles.js';
|
|
4
|
-
export const WithCSSTransition = (props) => {
|
|
5
|
-
let { in: visible, dimension = 'height', children, ...rest } = props;
|
|
6
|
-
let expandedSize = React.useRef(0);
|
|
7
|
-
let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
|
|
8
|
-
return React.createElement(
|
|
9
|
-
CSSTransition,
|
|
10
|
-
{
|
|
11
|
-
in: visible,
|
|
12
|
-
timeout: 200,
|
|
13
|
-
unmountOnExit: true,
|
|
14
|
-
onEnter: (node) => {
|
|
15
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
16
|
-
node.style[dimension] = '0px';
|
|
17
|
-
},
|
|
18
|
-
onEntering: (node) => {
|
|
19
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
20
|
-
},
|
|
21
|
-
onEntered: (node) => {
|
|
22
|
-
node.style[`min${dimensionCamelCase}`] = '';
|
|
23
|
-
node.style[dimension] = '';
|
|
24
|
-
},
|
|
25
|
-
onExit: (node) => {
|
|
26
|
-
node.style[dimension] = `${expandedSize.current}px`;
|
|
27
|
-
},
|
|
28
|
-
onExiting: (node) => {
|
|
29
|
-
node.style[`min${dimensionCamelCase}`] = 'initial';
|
|
30
|
-
node.style[dimension] = '0px';
|
|
31
|
-
},
|
|
32
|
-
classNames: {
|
|
33
|
-
enter: styles['iui-enter'],
|
|
34
|
-
enterActive: styles['iui-enter-active'],
|
|
35
|
-
exit: styles['iui-exit'],
|
|
36
|
-
exitActive: styles['iui-exit-active'],
|
|
37
|
-
},
|
|
38
|
-
...rest,
|
|
39
|
-
},
|
|
40
|
-
React.isValidElement(children)
|
|
41
|
-
? React.cloneElement(children, {
|
|
42
|
-
ref: (el) => {
|
|
43
|
-
if (el)
|
|
44
|
-
expandedSize.current = el.getBoundingClientRect()[dimension];
|
|
45
|
-
},
|
|
46
|
-
})
|
|
47
|
-
: React.createElement(React.Fragment, null),
|
|
48
|
-
);
|
|
49
|
-
};
|