@itwin/itwinui-react 3.14.0 → 3.14.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 3.14.2
+
+### Patch Changes
+
+- [#2217](https://github.com/iTwin/iTwinUI/pull/2217): Fixed the `Footer`'s `translatedTitles` prop's type to allow passing partial translations.
+- [#2218](https://github.com/iTwin/iTwinUI/pull/2218): Fixed a `Table` bug where custom `Cell` content was not taking up the entire available width in some cases.
+- [#2216](https://github.com/iTwin/iTwinUI/pull/2216): Fixed the fallback CSS logic in `ThemeProvider` to load the correct stylesheet version.
+
+## 3.14.1
+
+### Patch Changes
+
+- [#2209](https://github.com/iTwin/iTwinUI/pull/2209): Fixed an issue where nested `Popover`s were automatically closing due to faulty "outside click" detection.
+- [#2213](https://github.com/iTwin/iTwinUI/pull/2213): Dev-only warnings have been improved so that they are correctly shown for every individual instance of a component. Additionally, these warnings are now logged using `console.error`, which results in a better stack trace.
+
 ## 3.14.0
 
 ### Minor Changes
@@ -16,20 +31,22 @@
   - `Popover` now also sets a default max-height of `400px` to prevent it from becoming too large. This can be customized using the `middleware.size.maxHeight` prop.
 - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `tableFilters.TextFilter` now prevents the user from applying the filter when the text input is empty.
 - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `BaseFilter` now renders as a `<form>` and `FilterButtonBar` now renders a `<button type="submit">`. Together, this enables the use of browser's built-in validation before applying filters.
+
   - The `setFilter` prop in `FilterButtonBar` has been deprecated, as `onSubmit` should be used instead.
     <details>
       <summary>Diff</summary>
-  
-      ```diff
-        <BaseFilter
-      +   onSubmit={() => setFilter(text)}
-        >
-          …
-          <FilterButtonBar
-      -     setFilter={() => setFilter(text)}
-          />
-        </BaseFilter>
-      ```
+
+    ```diff
+      <BaseFilter
+    +   onSubmit={() => setFilter(text)}
+      >
+        …
+        <FilterButtonBar
+    -     setFilter={() => setFilter(text)}
+        />
+      </BaseFilter>
+    ```
+
     </details>
 
 ### Patch Changes
@@ -44,7 +61,6 @@
 - [#2178](https://github.com/iTwin/iTwinUI/pull/2178): Reduced layout thrashing on `Table` component by memoizing an expensive `ref` function.
 - [#2194](https://github.com/iTwin/iTwinUI/pull/2194): The development build output is now also formatted using `prettier` for easier debugging.
 
-
 ## 3.13.4
 
 ### Patch Changes

package/DEV-cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -15,7 +15,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
-const logWarning = (0, _index.createWarningLogger)();
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
     children: items,
@@ -109,6 +108,7 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
 BreadcrumbsComponent.displayName = 'Breadcrumbs';
 const ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = (0, _index.useWarningLogger)();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/DEV-cjs/core/Buttons/IconButton.js

@@ -17,7 +17,6 @@ const _Tooltip = require('../Tooltip/Tooltip.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const _Popover = require('../Popover/Popover.js');
-const logWarning = (0, _index.createWarningLogger)();
 const IconButton = _react.forwardRef((props, ref) => {
   let {
     isActive,
@@ -35,6 +34,7 @@ const IconButton = _react.forwardRef((props, ref) => {
     _ButtonGroup.ButtonGroupContext,
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+  let logWarning = (0, _index.useWarningLogger)();
   if (!label && !props['aria-label'] && !props['aria-labelledby'])
     logWarning('IconButton is missing the `label` prop.');
   let button = _react.createElement(

package/DEV-cjs/core/Footer/Footer.js

@@ -26,7 +26,7 @@ const _FooterItem = require('./FooterItem.js');
 const _FooterSeparator = require('./FooterSeparator.js');
 const _FooterList = require('./FooterList.js');
 const _Anchor = require('../Typography/Anchor.js');
-const footerTranslations = {
+const defaultTranslatedTitles = {
   cookies: 'Cookies',
   legalNotices: 'Legal notices',
   privacy: 'Privacy',
@@ -40,27 +40,27 @@ const defaultFooterElements = [
   },
   {
     key: 'termsOfService',
-    title: footerTranslations.termsOfService,
+    title: defaultTranslatedTitles.termsOfService,
     url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
   },
   {
     key: 'privacy',
-    title: footerTranslations.privacy,
+    title: defaultTranslatedTitles.privacy,
     url: 'https://www.bentley.com/en/privacy-policy',
   },
   {
     key: 'termsOfUse',
-    title: footerTranslations.termsOfUse,
+    title: defaultTranslatedTitles.termsOfUse,
     url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
   },
   {
     key: 'cookies',
-    title: footerTranslations.cookies,
+    title: defaultTranslatedTitles.cookies,
     url: 'https://www.bentley.com/en/cookie-policy',
   },
   {
     key: 'legalNotices',
-    title: footerTranslations.legalNotices,
+    title: defaultTranslatedTitles.legalNotices,
     url: 'https://connect.bentley.com/Legal',
   },
 ];
@@ -69,7 +69,7 @@ const Footer = Object.assign(
     let { children, customElements, translatedTitles, className, ...rest } =
       props;
     let titles = {
-      ...footerTranslations,
+      ...defaultTranslatedTitles,
       ...translatedTitles,
     };
     let translatedElements = defaultFooterElements.map((element) => {

package/DEV-cjs/core/Menu/MenuItem.js

@@ -15,7 +15,6 @@ const _index = require('../../utils/index.js');
 const _Menu = require('./Menu.js');
 const _ListItem = require('../List/ListItem.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const logWarning = (0, _index.createWarningLogger)();
 const MenuItem = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -34,6 +33,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
   if (null != onClickProp && subMenuItems.length > 0)
     logWarning(
       'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',

package/DEV-cjs/core/Popover/Popover.js

@@ -27,7 +27,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const _Portal = require('../../utils/components/Portal.js');
-const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 const PopoverOpenContext = _react.createContext(void 0);
 const usePopover = (options) => {
   let {
@@ -222,11 +221,9 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
-    setPopoverElement,
   );
   let triggerId = `${(0, _index.useId)()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
@@ -256,34 +253,27 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           _react.createElement(
-            _ThemeProvider.ThemeProvider,
+            _react1.FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            _react.createElement(DisplayContents, null),
             _react.createElement(
-              _react1.FloatingFocusManager,
+              _index.Box,
               {
-                context: popover.context,
-                modal: false,
+                className: (0, _classnames.default)(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              _react.createElement(
-                _index.Box,
-                {
-                  className: (0, _classnames.default)(
-                    {
-                      'iui-popover-surface': applyBackground,
-                    },
-                    className,
-                  ),
-                  'aria-labelledby': hasAriaLabel
-                    ? void 0
-                    : popover.refs.domReference.current?.id,
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
-                },
-                content,
-              ),
+              content,
             ),
           ),
         )

package/DEV-cjs/core/Table/Table.js

@@ -35,7 +35,6 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-const logWarning = (0, _index.createWarningLogger)();
 const flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -282,6 +281,7 @@ const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
+  let logWarning = (0, _index.useWarningLogger)();
   if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
     logWarning(
@@ -514,7 +514,7 @@ const Table = (props) => {
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     _react.createElement(
       _index.Box,
@@ -575,7 +575,7 @@ const Table = (props) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return _react.createElement(_ColumnHeader.ColumnHeader, {
                   ...dragAndDropProps,
-                  key: dragAndDropProps.key,
+                  key: dragAndDropProps.key || column.id || index,
                   columnRefs: columnRefs,
                   column: column,
                   index: index,

package/DEV-cjs/core/Table/cells/DefaultCell.js

@@ -11,17 +11,17 @@ Object.defineProperty(exports, 'DefaultCell', {
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
+const _reacttable = require('react-table');
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
 const DefaultCell = (props) => {
-  let columnsProp = _react.useContext(_utils.TableColumnsContext);
+  let instanceColumns = _react.useContext(_utils.TableColumnsContext);
   let isCustomCell = _react.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== _reacttable.defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

package/DEV-cjs/core/ThemeProvider/ThemeProvider.js

@@ -247,7 +247,7 @@ const FallbackStyles = ({ root }) => {
       } catch (error) {
         console.log('Error loading styles.css locally', error);
         let css = await (0, _index.importCss)(
-          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+          `https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@${_meta.meta.version}/styles.css`,
         );
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.14.0';
+const e = '3.14.2';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/functions/dev.js

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  createWarningLogger: function () {
-    return createWarningLogger;
-  },
-  isUnitTest: function () {
+Object.defineProperty(exports, 'isUnitTest', {
+  enumerable: true,
+  get: function () {
     return isUnitTest;
   },
 });
@@ -24,14 +15,3 @@ const isMocha =
     `${globalThis.beforeEach}`.replace(/\s/g, '');
 const isVitest = void 0 !== globalThis.__vitest_index__;
 const isUnitTest = isJest || isVitest || isMocha;
-const createWarningLogger = isUnitTest
-  ? () => () => {}
-  : () => {
-      let logged = false;
-      return (message) => {
-        if (!logged) {
-          console.warn(message);
-          logged = true;
-        }
-      };
-    };

package/DEV-cjs/utils/hooks/index.js

@@ -19,3 +19,4 @@ _export_star._(require('./useId.js'), exports);
 _export_star._(require('./useControlledState.js'), exports);
 _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
+_export_star._(require('./useWarningLogger.js'), exports);

package/DEV-cjs/utils/hooks/useWarningLogger.js

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'useWarningLogger', {
+  enumerable: true,
+  get: function () {
+    return useWarningLogger;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _dev = require('../functions/dev.js');
+const _React = _react;
+const ReactInternals =
+  _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+const useWarningLogger = _dev.isUnitTest
+  ? () => () => {}
+  : function () {
+      let loggedRef = _react.useRef(false);
+      let timeoutRef = _react.useRef(null);
+      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+      let componentName = stack?.trim().split('\n')[1]?.trim();
+      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+      let logWarning = _react.useCallback(
+        (message) => {
+          timeoutRef.current = window.setTimeout(() => {
+            if (!loggedRef.current) {
+              console.error(prefix, message);
+              loggedRef.current = true;
+            }
+          });
+        },
+        [prefix],
+      );
+      _react.useEffect(
+        () => () => {
+          if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+        },
+        [],
+      );
+      return logWarning;
+    };

package/DEV-esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,11 +5,10 @@ import {
   useOverflow,
   SvgChevronRight,
   Box,
-  createWarningLogger,
+  useWarningLogger,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
-let logWarning = createWarningLogger();
 let BreadcrumbsComponent = React.forwardRef((props, ref) => {
   let {
     children: items,
@@ -103,6 +102,7 @@ let BreadcrumbsComponent = React.forwardRef((props, ref) => {
 BreadcrumbsComponent.displayName = 'Breadcrumbs';
 let ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = useWarningLogger();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/DEV-esm/core/Buttons/IconButton.js

@@ -1,11 +1,10 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase, createWarningLogger } from '../../utils/index.js';
+import { Box, ButtonBase, useWarningLogger } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
 import { PopoverOpenContext } from '../Popover/Popover.js';
-let logWarning = createWarningLogger();
 export const IconButton = React.forwardRef((props, ref) => {
   let {
     isActive,
@@ -21,6 +20,7 @@ export const IconButton = React.forwardRef((props, ref) => {
   } = props;
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
+  let logWarning = useWarningLogger();
   if (!label && !props['aria-label'] && !props['aria-labelledby'])
     logWarning('IconButton is missing the `label` prop.');
   let button = React.createElement(

package/DEV-esm/core/Footer/Footer.js

@@ -5,7 +5,7 @@ import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 import { Anchor } from '../Typography/Anchor.js';
-let footerTranslations = {
+let defaultTranslatedTitles = {
   cookies: 'Cookies',
   legalNotices: 'Legal notices',
   privacy: 'Privacy',
@@ -19,27 +19,27 @@ export const defaultFooterElements = [
   },
   {
     key: 'termsOfService',
-    title: footerTranslations.termsOfService,
+    title: defaultTranslatedTitles.termsOfService,
     url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
   },
   {
     key: 'privacy',
-    title: footerTranslations.privacy,
+    title: defaultTranslatedTitles.privacy,
     url: 'https://www.bentley.com/en/privacy-policy',
   },
   {
     key: 'termsOfUse',
-    title: footerTranslations.termsOfUse,
+    title: defaultTranslatedTitles.termsOfUse,
     url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
   },
   {
     key: 'cookies',
-    title: footerTranslations.cookies,
+    title: defaultTranslatedTitles.cookies,
     url: 'https://www.bentley.com/en/cookie-policy',
   },
   {
     key: 'legalNotices',
-    title: footerTranslations.legalNotices,
+    title: defaultTranslatedTitles.legalNotices,
     url: 'https://connect.bentley.com/Legal',
   },
 ];
@@ -48,7 +48,7 @@ export const Footer = Object.assign(
     let { children, customElements, translatedTitles, className, ...rest } =
       props;
     let titles = {
-      ...footerTranslations,
+      ...defaultTranslatedTitles,
       ...translatedTitles,
     };
     let translatedElements = defaultFooterElements.map((element) => {

package/DEV-esm/core/Menu/MenuItem.js

@@ -3,12 +3,11 @@ import {
   SvgCaretRightSmall,
   useMergedRefs,
   useId,
-  createWarningLogger,
+  useWarningLogger,
 } from '../../utils/index.js';
 import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import cx from 'classnames';
-let logWarning = createWarningLogger();
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -27,6 +26,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = useWarningLogger();
   if (null != onClickProp && subMenuItems.length > 0)
     logWarning(
       'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',

package/DEV-esm/core/Popover/Popover.js

@@ -32,7 +32,6 @@ import {
   useMergedRefs,
 } from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
-import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 export const PopoverOpenContext = React.createContext(void 0);
 export const usePopover = (options) => {
   let {
@@ -224,12 +223,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = React.useState();
-  let popoverRef = useMergedRefs(
-    popover.refs.setFloating,
-    forwardedRef,
-    setPopoverElement,
-  );
+  let popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef);
   let triggerId = `${useId()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
@@ -258,34 +252,27 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           React.createElement(
-            ThemeProvider,
+            FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            React.createElement(DisplayContents, null),
             React.createElement(
-              FloatingFocusManager,
+              Box,
               {
-                context: popover.context,
-                modal: false,
+                className: cx(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              React.createElement(
-                Box,
-                {
-                  className: cx(
-                    {
-                      'iui-popover-surface': applyBackground,
-                    },
-                    className,
-                  ),
-                  'aria-labelledby': hasAriaLabel
-                    ? void 0
-                    : popover.refs.domReference.current?.id,
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
-                },
-                content,
-              ),
+              content,
             ),
           ),
         )

package/DEV-esm/core/Table/Table.js

@@ -18,7 +18,7 @@ import {
   useResizeObserver,
   useLayoutEffect,
   Box,
-  createWarningLogger,
+  useWarningLogger,
   ShadowRoot,
   useMergedRefs,
   useLatestRef,
@@ -52,7 +52,6 @@ let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let logWarning = createWarningLogger();
 let flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -292,6 +291,7 @@ export const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
+  let logWarning = useWarningLogger();
   if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
     logWarning(
@@ -524,7 +524,7 @@ export const Table = (props) => {
   return React.createElement(
     TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     React.createElement(
       Box,
@@ -582,7 +582,7 @@ export const Table = (props) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return React.createElement(ColumnHeader, {
                   ...dragAndDropProps,
-                  key: dragAndDropProps.key,
+                  key: dragAndDropProps.key || column.id || index,
                   columnRefs: columnRefs,
                   column: column,
                   index: index,

package/DEV-esm/core/Table/cells/DefaultCell.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { defaultColumn } from 'react-table';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableColumnsContext } from '../utils.js';
 export const DefaultCell = (props) => {
-  let columnsProp = React.useContext(TableColumnsContext);
+  let instanceColumns = React.useContext(TableColumnsContext);
   let isCustomCell = React.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

package/DEV-esm/core/ThemeProvider/ThemeProvider.js

@@ -234,7 +234,7 @@ let FallbackStyles = ({ root }) => {
       } catch (error) {
         console.log('Error loading styles.css locally', error);
         let css = await importCss(
-          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+          `https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@${meta.version}/styles.css`,
         );
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,