@itwin/itwinui-react 2.4.4 → 2.5.0

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 (13) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/README.md +2 -2
  3. package/cjs/core/Table/Table.js +17 -2
  4. package/cjs/core/Table/filters/types.d.ts +1 -1
  5. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +11 -1
  6. package/cjs/core/ThemeProvider/ThemeProvider.js +9 -6
  7. package/cjs/types/react-table-config.d.ts +6 -3
  8. package/esm/core/Table/Table.js +17 -2
  9. package/esm/core/Table/filters/types.d.ts +1 -1
  10. package/esm/core/ThemeProvider/ThemeProvider.d.ts +11 -1
  11. package/esm/core/ThemeProvider/ThemeProvider.js +9 -6
  12. package/esm/types/react-table-config.d.ts +6 -3
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,45 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 7e3a17f9: Table: Reintroduced the ability to pass a top-level Header property in the columns objects. This improves compatibility with the previous major version. There will be a warning shown only in dev environments to encourage using the new columns format.
8
+ - 2397ee0c: All styles will now be scoped and always take preference over previous major versions (`@itwin/itwinui-react`@`1.x`).
9
+
10
+ This enables incremental adoption of `@itwin/itwinui-react`@`2.x` for some parts of the app, while still using `1.x` for the rest of the app.
11
+
12
+ To use this feature, make sure that all parts that use v1 are updated to `@itwin/itwinui-css@0.63.2`, and then wrap the v2 parts in `ThemeProvider`:
13
+
14
+ ```html
15
+ <body>
16
+ <!-- rest of your app (v1) -->
17
+
18
+ <ThemeProvider>
19
+ <!-- new UI built using v2 -->
20
+ </ThemeProvider>
21
+ </body>
22
+ ```
23
+
24
+ For packages, there is a new theme `'inherit'`. Setting this enables scoping without forcing the default light theme. When the app eventually updates to v2, it can use its own `ThemeProvider` with any theme, and the components inside your package will inherit the app's theme.
25
+
26
+ ```html
27
+ <body>
28
+ <!-- rest of the app (maybe v1) -->
29
+
30
+ <!-- inside your package ⬇️ -->
31
+ <ThemeProvider theme='inherit'>
32
+ <!-- v2 components inside package -->
33
+ </ThemeProvider>
34
+ </bod
35
+ ```
36
+
37
+ ### Patch Changes
38
+
39
+ - Updated dependencies
40
+ - @itwin/itwinui-variables@2.0.0
41
+ - @itwin/itwinui-css@1.6.0
42
+
3
43
  ## 2.4.4
4
44
 
5
45
  ### Patch Changes
package/README.md CHANGED
@@ -23,7 +23,7 @@
23
23
  ## What is iTwinUI-react?
24
24
 
25
25
  iTwinUI-react is a React component library for [iTwinUI](https://github.com/iTwin/iTwinUI).
26
- The goal of this package is to provide React components that make it easier to use the styles from [`@itwin/itwinui-css`](https://github.com/iTwin/iTwinUI/tree/main/packages/itwinui-css). Check out the [demo website](https://itwin.github.io/iTwinUI-react) to see the components in action.
26
+ The goal of this package is to provide React components that make it easier to use the styles from [`@itwin/itwinui-css`](https://github.com/iTwin/iTwinUI/tree/main/packages/itwinui-css). Check out the [demo website](https://itwin.github.io/iTwinUI/react) to see the components in action.
27
27
 
28
28
  ---
29
29
 
@@ -53,7 +53,7 @@ const App = () => (
53
53
 
54
54
  Yes, that's really all you need as you can see in this live interactive demo:
55
55
 
56
- [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/itwinui-react-minimal-example-xq2t3)
56
+ [![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/playgrounds/cra?file=/src/App.jsx)
57
57
 
58
58
  ---
59
59
 
package/cjs/core/Table/Table.js CHANGED
@@ -26,11 +26,18 @@ const singleRowSelectedAction = 'singleRowSelected';
26
26
  const shiftRowSelectedAction = 'shiftRowSelected';
27
27
  exports.tableResizeStartAction = 'tableResizeStart';
28
28
  const tableResizeEndAction = 'tableResizeEnd';
29
+ let didLogWarning = false;
30
+ let isDev = false;
31
+ // wrapping in try-catch because process might be undefined
32
+ try {
33
+ isDev = process.env.NODE_ENV !== 'production';
34
+ }
35
+ catch (_a) { }
29
36
  const flattenColumns = (columns) => {
30
37
  const flatColumns = [];
31
38
  columns.forEach((column) => {
32
39
  flatColumns.push(column);
33
- if (column.columns) {
40
+ if ('columns' in column) {
34
41
  flatColumns.push(...flattenColumns(column.columns));
35
42
  }
36
43
  });
@@ -198,7 +205,15 @@ const Table = (props) => {
198
205
  initialState: { pageSize, ...props.initialState },
199
206
  columnResizeMode,
200
207
  }, react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
201
- const { getTableProps, rows, headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
208
+ const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
209
+ let headerGroups = _headerGroups;
210
+ if (columns.length === 1 && 'columns' in columns[0]) {
211
+ headerGroups = _headerGroups.slice(1);
212
+ if (isDev && !didLogWarning) {
213
+ console.warn(`Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`);
214
+ didLogWarning = true;
215
+ }
216
+ }
202
217
  const ariaDataAttributes = Object.entries(rest).reduce((result, [key, value]) => {
203
218
  if (key.startsWith('data-') || key.startsWith('aria-')) {
204
219
  result[key] = value;
package/cjs/core/Table/filters/types.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface TableFilterValue<T extends Record<string, unknown>> {
17
17
  */
18
18
  filterType: FilterType<T>;
19
19
  }
20
- export declare type TableFilterProps<T extends Record<string, unknown>> = FilterProps<T> & {
20
+ export declare type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
21
21
  /**
22
22
  * Data of column on which filter is opened. It is provided by the table it self.
23
23
  */
package/cjs/core/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -11,9 +11,12 @@ declare type RootProps = {
11
11
  * in SSR environments because it is not possible detect system preference on the server.
12
12
  * This can cause a flash of incorrect theme on first render.
13
13
  *
14
+ * The 'inherit' option is intended to be used by packages, to enable incremental adoption
15
+ * of iTwinUI v2 in app that might be using v1 in other places.
16
+ *
14
17
  * @default 'light'
15
18
  */
16
- theme?: ThemeType;
19
+ theme?: ThemeType | 'inherit';
17
20
  themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
18
21
  /**
19
22
  * Whether or not the element should apply the recommended `background-color` on itself.
@@ -22,10 +25,17 @@ declare type RootProps = {
22
25
  * if it is the topmost `ThemeProvider` in the tree. Nested `ThemeProvider`s will
23
26
  * be detected using React Context and will not apply a background-color.
24
27
  *
28
+ * Additionally, if theme is set to `'inherit'`, then this will default to false.
29
+ *
25
30
  * When set to true or false, it will override the default behavior.
26
31
  */
27
32
  applyBackground?: boolean;
28
33
  };
34
+ /**
35
+ * Whether theme was set to `'inherit'`.
36
+ * This will be used to determine if applyBackground will default to false.
37
+ */
38
+ isInheritingTheme?: boolean;
29
39
  };
30
40
  declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
31
41
  themeOptions?: RootProps['themeOptions'];
package/cjs/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -40,25 +40,27 @@ require("@itwin/itwinui-variables/index.css");
40
40
  * </ThemeProvider>
41
41
  */
42
42
  exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
43
- const { theme, children, themeOptions, ...rest } = props;
43
+ var _a;
44
+ const { theme: themeProp, children, themeOptions, ...rest } = props;
44
45
  const rootRef = react_1.default.useRef(null);
45
46
  const mergedRefs = (0, utils_1.useMergedRefs)(rootRef, ref);
46
47
  const hasChildren = react_1.default.Children.count(children) > 0;
47
48
  const parentContext = react_1.default.useContext(exports.ThemeContext);
49
+ const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
48
50
  const contextValue = react_1.default.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
49
51
  // if no children, then fallback to this wrapper component which calls useTheme
50
52
  if (!hasChildren) {
51
- return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
53
+ return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
52
54
  }
53
55
  // now that we know there are children, we can render the root and provide the context value
54
- return (react_1.default.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
56
+ return (react_1.default.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
55
57
  react_1.default.createElement(exports.ThemeContext.Provider, { value: contextValue }, children)));
56
58
  });
57
59
  exports.default = exports.ThemeProvider;
58
60
  exports.ThemeContext = react_1.default.createContext(undefined);
59
61
  const Root = react_1.default.forwardRef((props, forwardedRef) => {
60
62
  var _a, _b, _c;
61
- const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
63
+ const { theme, children, themeOptions, as: Element = 'div', className, isInheritingTheme, ...rest } = props;
62
64
  const ref = react_1.default.useRef(null);
63
65
  const mergedRefs = (0, utils_1.useMergedRefs)(ref, forwardedRef);
64
66
  const prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
@@ -66,10 +68,11 @@ const Root = react_1.default.forwardRef((props, forwardedRef) => {
66
68
  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
67
69
  const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
68
70
  const isThemeAlreadySet = (0, utils_1.useIsThemeAlreadySet)((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
69
- const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
71
+ const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : (isInheritingTheme ? false : !isThemeAlreadySet.current);
70
72
  return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
71
73
  });
72
- const ThemeLogicWrapper = ({ theme, themeOptions }) => {
74
+ const ThemeLogicWrapper = (props) => {
75
+ const { theme, themeOptions } = props;
73
76
  (0, utils_1.useTheme)(theme, themeOptions);
74
77
  return react_1.default.createElement(react_1.default.Fragment, null);
75
78
  };
package/cjs/types/react-table-config.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { TableFilterProps } from '../core';
2
3
  declare module 'react-table' {
3
4
  type FieldType = 'text' | 'number' | 'date' | string;
4
5
  type CellRendererProps<D extends object = {}> = {
@@ -22,8 +23,11 @@ declare module 'react-table' {
22
23
  interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data' | 'columns'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseGlobalFiltersOptions<D>, UseGlobalFiltersColumnOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
23
24
  /**
24
25
  * List of columns.
26
+ *
27
+ * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility.
28
+ * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes).
25
29
  */
26
- columns: Array<Column<any>>;
30
+ columns: Array<Column<D>>;
27
31
  /**
28
32
  * Table data list.
29
33
  * Must be memoized.
@@ -83,7 +87,7 @@ declare module 'react-table' {
83
87
  /**
84
88
  * Filter component used as a column filter. Should use filters from `tableFilters`.
85
89
  */
86
- Filter?: Renderer<FilterProps<D>>;
90
+ Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
87
91
  /**
88
92
  * String value or custom function to use for filtering.
89
93
  * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
@@ -129,4 +133,3 @@ declare module 'react-table' {
129
133
  initialSubRows: Row<D>[];
130
134
  }
131
135
  }
132
- export {};
package/esm/core/Table/Table.js CHANGED
@@ -20,11 +20,18 @@ const singleRowSelectedAction = 'singleRowSelected';
20
20
  const shiftRowSelectedAction = 'shiftRowSelected';
21
21
  export const tableResizeStartAction = 'tableResizeStart';
22
22
  const tableResizeEndAction = 'tableResizeEnd';
23
+ let didLogWarning = false;
24
+ let isDev = false;
25
+ // wrapping in try-catch because process might be undefined
26
+ try {
27
+ isDev = process.env.NODE_ENV !== 'production';
28
+ }
29
+ catch (_a) { }
23
30
  const flattenColumns = (columns) => {
24
31
  const flatColumns = [];
25
32
  columns.forEach((column) => {
26
33
  flatColumns.push(column);
27
- if (column.columns) {
34
+ if ('columns' in column) {
28
35
  flatColumns.push(...flattenColumns(column.columns));
29
36
  }
30
37
  });
@@ -192,7 +199,15 @@ export const Table = (props) => {
192
199
  initialState: { pageSize, ...props.initialState },
193
200
  columnResizeMode,
194
201
  }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
195
- const { getTableProps, rows, headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
202
+ const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
203
+ let headerGroups = _headerGroups;
204
+ if (columns.length === 1 && 'columns' in columns[0]) {
205
+ headerGroups = _headerGroups.slice(1);
206
+ if (isDev && !didLogWarning) {
207
+ console.warn(`Table's \`columns\` prop should not have a top-level \`Header\` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes`);
208
+ didLogWarning = true;
209
+ }
210
+ }
196
211
  const ariaDataAttributes = Object.entries(rest).reduce((result, [key, value]) => {
197
212
  if (key.startsWith('data-') || key.startsWith('aria-')) {
198
213
  result[key] = value;
package/esm/core/Table/filters/types.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface TableFilterValue<T extends Record<string, unknown>> {
17
17
  */
18
18
  filterType: FilterType<T>;
19
19
  }
20
- export declare type TableFilterProps<T extends Record<string, unknown>> = FilterProps<T> & {
20
+ export declare type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
21
21
  /**
22
22
  * Data of column on which filter is opened. It is provided by the table it self.
23
23
  */
package/esm/core/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -11,9 +11,12 @@ declare type RootProps = {
11
11
  * in SSR environments because it is not possible detect system preference on the server.
12
12
  * This can cause a flash of incorrect theme on first render.
13
13
  *
14
+ * The 'inherit' option is intended to be used by packages, to enable incremental adoption
15
+ * of iTwinUI v2 in app that might be using v1 in other places.
16
+ *
14
17
  * @default 'light'
15
18
  */
16
- theme?: ThemeType;
19
+ theme?: ThemeType | 'inherit';
17
20
  themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
18
21
  /**
19
22
  * Whether or not the element should apply the recommended `background-color` on itself.
@@ -22,10 +25,17 @@ declare type RootProps = {
22
25
  * if it is the topmost `ThemeProvider` in the tree. Nested `ThemeProvider`s will
23
26
  * be detected using React Context and will not apply a background-color.
24
27
  *
28
+ * Additionally, if theme is set to `'inherit'`, then this will default to false.
29
+ *
25
30
  * When set to true or false, it will override the default behavior.
26
31
  */
27
32
  applyBackground?: boolean;
28
33
  };
34
+ /**
35
+ * Whether theme was set to `'inherit'`.
36
+ * This will be used to determine if applyBackground will default to false.
37
+ */
38
+ isInheritingTheme?: boolean;
29
39
  };
30
40
  declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
31
41
  themeOptions?: RootProps['themeOptions'];
package/esm/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -34,25 +34,27 @@ import '@itwin/itwinui-variables/index.css';
34
34
  * </ThemeProvider>
35
35
  */
36
36
  export const ThemeProvider = React.forwardRef((props, ref) => {
37
- const { theme, children, themeOptions, ...rest } = props;
37
+ var _a;
38
+ const { theme: themeProp, children, themeOptions, ...rest } = props;
38
39
  const rootRef = React.useRef(null);
39
40
  const mergedRefs = useMergedRefs(rootRef, ref);
40
41
  const hasChildren = React.Children.count(children) > 0;
41
42
  const parentContext = React.useContext(ThemeContext);
43
+ const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
42
44
  const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
43
45
  // if no children, then fallback to this wrapper component which calls useTheme
44
46
  if (!hasChildren) {
45
- return (React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
47
+ return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
46
48
  }
47
49
  // now that we know there are children, we can render the root and provide the context value
48
- return (React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
50
+ return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
49
51
  React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
50
52
  });
51
53
  export default ThemeProvider;
52
54
  export const ThemeContext = React.createContext(undefined);
53
55
  const Root = React.forwardRef((props, forwardedRef) => {
54
56
  var _a, _b, _c;
55
- const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
57
+ const { theme, children, themeOptions, as: Element = 'div', className, isInheritingTheme, ...rest } = props;
56
58
  const ref = React.useRef(null);
57
59
  const mergedRefs = useMergedRefs(ref, forwardedRef);
58
60
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
@@ -60,10 +62,11 @@ const Root = React.forwardRef((props, forwardedRef) => {
60
62
  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
61
63
  const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
62
64
  const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
63
- const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
65
+ const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : (isInheritingTheme ? false : !isThemeAlreadySet.current);
64
66
  return (React.createElement(Element, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
65
67
  });
66
- const ThemeLogicWrapper = ({ theme, themeOptions }) => {
68
+ const ThemeLogicWrapper = (props) => {
69
+ const { theme, themeOptions } = props;
67
70
  useTheme(theme, themeOptions);
68
71
  return React.createElement(React.Fragment, null);
69
72
  };
package/esm/types/react-table-config.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { TableFilterProps } from '../core';
2
3
  declare module 'react-table' {
3
4
  type FieldType = 'text' | 'number' | 'date' | string;
4
5
  type CellRendererProps<D extends object = {}> = {
@@ -22,8 +23,11 @@ declare module 'react-table' {
22
23
  interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data' | 'columns'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseGlobalFiltersOptions<D>, UseGlobalFiltersColumnOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
23
24
  /**
24
25
  * List of columns.
26
+ *
27
+ * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility.
28
+ * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes).
25
29
  */
26
- columns: Array<Column<any>>;
30
+ columns: Array<Column<D>>;
27
31
  /**
28
32
  * Table data list.
29
33
  * Must be memoized.
@@ -83,7 +87,7 @@ declare module 'react-table' {
83
87
  /**
84
88
  * Filter component used as a column filter. Should use filters from `tableFilters`.
85
89
  */
86
- Filter?: Renderer<FilterProps<D>>;
90
+ Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
87
91
  /**
88
92
  * String value or custom function to use for filtering.
89
93
  * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
@@ -129,4 +133,3 @@ declare module 'react-table' {
129
133
  initialSubRows: Row<D>[];
130
134
  }
131
135
  }
132
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "2.4.4",
3
+ "version": "2.5.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",
@@ -62,9 +62,9 @@
62
62
  "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
63
63
  },
64
64
  "dependencies": {
65
- "@itwin/itwinui-css": "^1.5.0",
65
+ "@itwin/itwinui-css": "^1.6.0",
66
66
  "@itwin/itwinui-illustrations-react": "^2.0.0",
67
- "@itwin/itwinui-variables": "^1.0.0",
67
+ "@itwin/itwinui-variables": "^2.0.0",
68
68
  "@tippyjs/react": "^4.2.6",
69
69
  "@types/react-table": "^7.0.18",
70
70
  "classnames": "^2.2.6",