@itwin/itwinui-react 3.17.0-dev.0 → 3.17.0-dev.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.16.3
+
+### Patch Changes
+
+- [#2384](https://github.com/iTwin/iTwinUI/pull/2384): Fixed the syntax for `react` and `react-dom` version ranges declared in `peerDependencies`.
+- [#2386](https://github.com/iTwin/iTwinUI/pull/2386): Fixed a visual issue in `Tile.Name` where a long string without spaces wasn't wrapping properly.
+
 ## 3.16.2
 
 ### Patch Changes

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

@@ -21,13 +21,14 @@ const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
 const ownerDocumentAtom = (0, _jotai.atom)(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -39,11 +40,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge =
+      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
   let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
@@ -51,8 +50,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return _react.createElement(
     _index.ScopeProvider,
@@ -80,6 +80,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: (0, _index.useMergedRefs)(
                 forwardedRef,
                 setRootElement,
@@ -91,6 +92,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             _react.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -119,7 +121,7 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
   });
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
   let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
@@ -139,7 +141,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -189,6 +191,7 @@ const PortalContainer = _react.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
@@ -219,6 +222,7 @@ const PortalContainer = _react.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/DEV-cjs/styles.js

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

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

@@ -23,13 +23,14 @@ import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
 let ownerDocumentAtom = atom(void 0);
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -41,18 +42,17 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge =
+      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
   let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
   let contextValue = React.useMemo(
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return React.createElement(
     ScopeProvider,
@@ -80,6 +80,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
               ...rest,
             },
@@ -87,6 +88,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             React.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -113,7 +115,7 @@ let MainRoot = React.forwardRef((props, forwardedRef) => {
   });
 });
 let Root = React.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
@@ -131,7 +133,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -179,6 +181,7 @@ let PortalContainer = React.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] =
@@ -208,6 +211,7 @@ let PortalContainer = React.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.0-dev.0';
+const t = '3.17.0-dev.1';
 const u = new Proxy(
   {},
   {

package/cjs/core/ThemeProvider/ThemeContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
+import type { FutureOptions, ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType;
     themeOptions?: ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: FutureOptions;
 } | undefined>;

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -6,6 +6,8 @@ export type ThemeOptions = {
      * Will default to user preference if browser supports it.
      */
     highContrast?: boolean;
+};
+export type FutureOptions = {
     /**
      * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
      *
@@ -13,7 +15,7 @@ export type ThemeOptions = {
      *
      * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
      */
-    bridgeToFutureVersions?: boolean;
+    themeBridge?: boolean;
 };
 export type ThemeType = 'light' | 'dark' | 'os';
 type RootProps = {
@@ -26,13 +28,13 @@ type RootProps = {
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
      * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
-     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
-     * and `portalContainer` (if possible).
+     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`,
+     * `portalContainer`, and `future.themeBridge` (if possible).
      *
      * @default 'inherit'
      */
     theme?: ThemeType | 'inherit';
-    themeOptions?: Pick<ThemeOptions, 'highContrast' | 'bridgeToFutureVersions'> & {
+    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
         /**
          * Whether or not the element should apply the recommended `background-color` on itself.
          *
@@ -46,8 +48,12 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
+    /**
+     * Options to help with early adoption of features from future versions.
+     */
+    future?: FutureOptions;
 };
-type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
+type ThemeProviderOwnProps = Pick<RootProps, 'theme' | 'future'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
     /**

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -21,13 +21,14 @@ const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
 const ownerDocumentAtom = (0, _jotai.atom)(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -39,11 +40,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge =
+      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
   let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
@@ -51,8 +50,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return _react.createElement(
     _index.ScopeProvider,
@@ -80,6 +80,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: (0, _index.useMergedRefs)(
                 forwardedRef,
                 setRootElement,
@@ -91,6 +92,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             _react.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -118,7 +120,7 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
   });
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
   let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
@@ -138,7 +140,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -188,6 +190,7 @@ const PortalContainer = _react.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
@@ -218,6 +221,7 @@ const PortalContainer = _react.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/cjs/styles.js

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

package/cjs/utils/hooks/useGlobals.d.ts

@@ -10,6 +10,7 @@ export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType;
     themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: import("../../core/ThemeProvider/ThemeProvider.js").FutureOptions;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
+import type { FutureOptions, ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType;
     themeOptions?: ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: FutureOptions;
 } | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -6,6 +6,8 @@ export type ThemeOptions = {
      * Will default to user preference if browser supports it.
      */
     highContrast?: boolean;
+};
+export type FutureOptions = {
     /**
      * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
      *
@@ -13,7 +15,7 @@ export type ThemeOptions = {
      *
      * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
      */
-    bridgeToFutureVersions?: boolean;
+    themeBridge?: boolean;
 };
 export type ThemeType = 'light' | 'dark' | 'os';
 type RootProps = {
@@ -26,13 +28,13 @@ type RootProps = {
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
      * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
-     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
-     * and `portalContainer` (if possible).
+     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`,
+     * `portalContainer`, and `future.themeBridge` (if possible).
      *
      * @default 'inherit'
      */
     theme?: ThemeType | 'inherit';
-    themeOptions?: Pick<ThemeOptions, 'highContrast' | 'bridgeToFutureVersions'> & {
+    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
         /**
          * Whether or not the element should apply the recommended `background-color` on itself.
          *
@@ -46,8 +48,12 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
+    /**
+     * Options to help with early adoption of features from future versions.
+     */
+    future?: FutureOptions;
 };
-type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
+type ThemeProviderOwnProps = Pick<RootProps, 'theme' | 'future'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
     /**

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -23,13 +23,14 @@ import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
 let ownerDocumentAtom = atom(void 0);
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -41,18 +42,17 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge =
+      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
   let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
   let contextValue = React.useMemo(
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return React.createElement(
     ScopeProvider,
@@ -80,6 +80,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
               ...rest,
             },
@@ -87,6 +88,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             React.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -112,7 +114,7 @@ let MainRoot = React.forwardRef((props, forwardedRef) => {
   });
 });
 let Root = React.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
@@ -130,7 +132,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -178,6 +180,7 @@ let PortalContainer = React.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] =
@@ -207,6 +210,7 @@ let PortalContainer = React.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.0-dev.0';
+const t = '3.17.0-dev.1';
 const u = new Proxy(
   {},
   {

package/esm/utils/hooks/useGlobals.d.ts

@@ -10,6 +10,7 @@ export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType;
     themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: import("../../core/ThemeProvider/ThemeProvider.js").FutureOptions;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.17.0-dev.0",
+  "version": "3.17.0-dev.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -134,8 +134,8 @@
     "vitest": "^1.2.1"
   },
   "peerDependencies": {
-    "react": ">= 17.0.0 < 19.0.0",
-    "react-dom": ">=17.0.0 < 19.0.0"
+    "react": ">=17.0.0 <19.0.0",
+    "react-dom": ">=17.0.0 <19.0.0"
   },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [