@itwin/itwinui-react 3.14.1 → 3.14.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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/Table/Table.js

@@ -514,7 +514,7 @@ const Table = (props) => {
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     _react.createElement(
       _index.Box,

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.1';
+const e = '3.14.2';
 const u = new Proxy(
   {},
   {

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/Table/Table.js

@@ -524,7 +524,7 @@ export const Table = (props) => {
   return React.createElement(
     TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     React.createElement(
       Box,

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,

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.14.1';
+const t = '3.14.2';
 const u = new Proxy(
   {},
   {

package/cjs/core/Footer/Footer.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 export type TitleTranslations = {
-    termsOfService: string;
-    privacy: string;
-    termsOfUse: string;
-    cookies: string;
-    legalNotices: string;
+    termsOfService?: string;
+    privacy?: string;
+    termsOfUse?: string;
+    cookies?: string;
+    legalNotices?: string;
 };
 type FooterProps = {
     /**

package/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/cjs/core/Table/Table.js

@@ -510,7 +510,7 @@ const Table = (props) => {
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     _react.createElement(
       _index.Box,

package/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/cjs/core/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColumnInstance, Column } from '../../react-table/react-table.js';
+import type { ColumnInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<Column<Record<string, unknown>>[]>;
+export declare const TableColumnsContext: React.Context<ColumnInstance<{}>[]>;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -246,7 +246,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/cjs/styles.js

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

package/esm/core/Footer/Footer.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 export type TitleTranslations = {
-    termsOfService: string;
-    privacy: string;
-    termsOfUse: string;
-    cookies: string;
-    legalNotices: string;
+    termsOfService?: string;
+    privacy?: string;
+    termsOfUse?: string;
+    cookies?: string;
+    legalNotices?: string;
 };
 type FooterProps = {
     /**

package/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/esm/core/Table/Table.js

@@ -520,7 +520,7 @@ export const Table = (props) => {
   return React.createElement(
     TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     React.createElement(
       Box,

package/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/esm/core/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColumnInstance, Column } from '../../react-table/react-table.js';
+import type { ColumnInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<Column<Record<string, unknown>>[]>;
+export declare const TableColumnsContext: React.Context<ColumnInstance<{}>[]>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -233,7 +233,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,

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.14.1';
+const t = '3.14.2';
 const u = new Proxy(
   {},
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.14.1",
+  "version": "3.14.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",