@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.
Files changed (86) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/DEV-cjs/core/Dialog/Dialog.js +35 -42
  3. package/DEV-cjs/core/Dialog/DialogBackdrop.js +6 -1
  4. package/DEV-cjs/core/Dialog/DialogMain.js +42 -34
  5. package/DEV-cjs/core/Dialog/DialogMainContext.js +23 -0
  6. package/DEV-cjs/core/Dialog/DialogTitleBar.js +10 -1
  7. package/DEV-cjs/core/Panels/Panels.js +1 -1
  8. package/DEV-cjs/core/SideNavigation/SideNavigation.js +1 -11
  9. package/DEV-cjs/core/Table/actionHandlers/selectHandler.js +7 -8
  10. package/DEV-cjs/core/Tabs/Tabs.js +9 -1
  11. package/DEV-cjs/core/ThemeProvider/ThemeProvider.js +12 -9
  12. package/DEV-cjs/core/Toast/Toast.js +132 -77
  13. package/DEV-cjs/core/Toast/Toaster.js +11 -3
  14. package/DEV-cjs/styles.js +1 -1
  15. package/DEV-cjs/utils/components/index.js +0 -1
  16. package/DEV-esm/core/Dialog/Dialog.js +32 -42
  17. package/DEV-esm/core/Dialog/DialogBackdrop.js +6 -1
  18. package/DEV-esm/core/Dialog/DialogMain.js +42 -34
  19. package/DEV-esm/core/Dialog/DialogMainContext.js +3 -0
  20. package/DEV-esm/core/Dialog/DialogTitleBar.js +10 -1
  21. package/DEV-esm/core/Panels/Panels.js +2 -1
  22. package/DEV-esm/core/SideNavigation/SideNavigation.js +2 -17
  23. package/DEV-esm/core/Table/actionHandlers/selectHandler.js +7 -8
  24. package/DEV-esm/core/Tabs/Tabs.js +9 -1
  25. package/DEV-esm/core/ThemeProvider/ThemeProvider.js +12 -9
  26. package/DEV-esm/core/Toast/Toast.js +131 -75
  27. package/DEV-esm/core/Toast/Toaster.js +11 -3
  28. package/DEV-esm/styles.js +1 -1
  29. package/DEV-esm/utils/components/index.js +0 -1
  30. package/LICENSE.md +1 -1
  31. package/cjs/core/Dialog/Dialog.d.ts +1 -1
  32. package/cjs/core/Dialog/Dialog.js +35 -42
  33. package/cjs/core/Dialog/DialogBackdrop.d.ts +1 -1
  34. package/cjs/core/Dialog/DialogBackdrop.js +6 -1
  35. package/cjs/core/Dialog/DialogMain.js +42 -34
  36. package/cjs/core/Dialog/DialogMainContext.d.ts +7 -0
  37. package/cjs/core/Dialog/DialogMainContext.js +23 -0
  38. package/cjs/core/Dialog/DialogTitleBar.js +10 -1
  39. package/cjs/core/Panels/Panels.js +1 -1
  40. package/cjs/core/SideNavigation/SideNavigation.d.ts +2 -2
  41. package/cjs/core/SideNavigation/SideNavigation.js +1 -11
  42. package/cjs/core/Table/actionHandlers/selectHandler.js +7 -8
  43. package/cjs/core/Tabs/Tabs.js +9 -1
  44. package/cjs/core/ThemeProvider/ThemeContext.d.ts +2 -1
  45. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +13 -5
  46. package/cjs/core/ThemeProvider/ThemeProvider.js +12 -9
  47. package/cjs/core/Toast/Toast.d.ts +1 -1
  48. package/cjs/core/Toast/Toast.js +132 -77
  49. package/cjs/core/Toast/Toaster.d.ts +1 -1
  50. package/cjs/core/Toast/Toaster.js +11 -3
  51. package/cjs/styles.js +1 -1
  52. package/cjs/utils/components/index.d.ts +0 -1
  53. package/cjs/utils/components/index.js +0 -1
  54. package/cjs/utils/hooks/useGlobals.d.ts +1 -0
  55. package/esm/core/Dialog/Dialog.d.ts +1 -1
  56. package/esm/core/Dialog/Dialog.js +32 -42
  57. package/esm/core/Dialog/DialogBackdrop.d.ts +1 -1
  58. package/esm/core/Dialog/DialogBackdrop.js +6 -1
  59. package/esm/core/Dialog/DialogMain.js +42 -34
  60. package/esm/core/Dialog/DialogMainContext.d.ts +7 -0
  61. package/esm/core/Dialog/DialogMainContext.js +3 -0
  62. package/esm/core/Dialog/DialogTitleBar.js +10 -1
  63. package/esm/core/Panels/Panels.js +2 -1
  64. package/esm/core/SideNavigation/SideNavigation.d.ts +2 -2
  65. package/esm/core/SideNavigation/SideNavigation.js +2 -17
  66. package/esm/core/Table/actionHandlers/selectHandler.js +7 -8
  67. package/esm/core/Tabs/Tabs.js +9 -1
  68. package/esm/core/ThemeProvider/ThemeContext.d.ts +2 -1
  69. package/esm/core/ThemeProvider/ThemeProvider.d.ts +13 -5
  70. package/esm/core/ThemeProvider/ThemeProvider.js +12 -9
  71. package/esm/core/Toast/Toast.d.ts +1 -1
  72. package/esm/core/Toast/Toast.js +131 -75
  73. package/esm/core/Toast/Toaster.d.ts +1 -1
  74. package/esm/core/Toast/Toaster.js +11 -3
  75. package/esm/styles.js +1 -1
  76. package/esm/utils/components/index.d.ts +0 -1
  77. package/esm/utils/components/index.js +0 -1
  78. package/esm/utils/hooks/useGlobals.d.ts +1 -0
  79. package/package.json +5 -7
  80. package/styles.css +10 -10
  81. package/DEV-cjs/utils/components/WithCSSTransition.js +0 -60
  82. package/DEV-esm/utils/components/WithCSSTransition.js +0 -49
  83. package/cjs/utils/components/WithCSSTransition.d.ts +0 -6
  84. package/cjs/utils/components/WithCSSTransition.js +0 -60
  85. package/esm/utils/components/WithCSSTransition.d.ts +0 -6
  86. 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
- };