@itwin/itwinui-react 1.48.0 → 2.0.0-dev.0

package/esm/core/utils/hooks/useTheme.d.ts

@@ -1,9 +1,13 @@
 import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-variables/index.css';
 export declare type ThemeOptions = {
     /**
      * Document to which the theme will be applied.
      * Can be specified to handle popup windows.
      * @default document
+     *
+     * @deprecated This prop will continue to work in `useTheme` but
+     * we recommend rendering `ThemeProvider` in the correct document instead.
      */
     ownerDocument?: Document;
     /**
@@ -13,10 +17,23 @@ export declare type ThemeOptions = {
     highContrast?: boolean;
 };
 export declare type ThemeType = 'light' | 'dark' | 'os';
+export declare type UseThemeProps = {
+    /**
+     * Theme to be applied. If not set, light theme will be used.
+     */
+    theme?: ThemeType;
+    /**
+     * Options that can be specified to override default theming behavior.
+     */
+    themeOptions?: ThemeOptions;
+};
 /**
- * Hook that applies styling and theme to all components.
- * Defaults to light theme if none provided or set elsewhere.
+ * Hook that conditionally applies styling and theme to all components.
+ * Defaults to light theme if none provided.
+ *
+ * If ThemeProvider is used as an ancestor, this hook will not do anything.
+ *
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
-export declare const useTheme: (theme?: ThemeType, themeOptions?: ThemeOptions) => void;
+export declare const useTheme: (theme?: UseThemeProps['theme'], themeOptions?: UseThemeProps['themeOptions']) => void;

package/esm/core/utils/hooks/useTheme.js

@@ -3,77 +3,76 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import { getDocument, getWindow } from '../functions';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 import '@itwin/itwinui-css/css/global.css';
-import { getDocument, getWindow } from '../functions/dom';
-import { useMediaQuery } from './useMediaQuery';
+import '@itwin/itwinui-variables/index.css';
 /**
- * Hook that applies styling and theme to all components.
- * Defaults to light theme if none provided or set elsewhere.
+ * Hook that conditionally applies styling and theme to all components.
+ * Defaults to light theme if none provided.
+ *
+ * If ThemeProvider is used as an ancestor, this hook will not do anything.
+ *
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
 export var useTheme = function (theme, themeOptions) {
     var _a;
+    var themeContext = React.useContext(ThemeContext);
     var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
-    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    var highContrast = React.useMemo(function () { var _a; return !!((_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast); }, [prefersHighContrast, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast]);
-    React.useLayoutEffect(function () {
-        if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
-        }
-    }, [ownerDocument]);
-    React.useLayoutEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!ownerDocument) {
+    useIsomorphicLayoutEffect(function () {
+        // exit early if theme was already set by provider
+        if (themeContext || !ownerDocument) {
             return;
         }
-        var prefersDarkMediaQuery = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)');
-        var addOSTheme = function (_a) {
-            var isDark = _a.matches;
-            if (isDark) {
-                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
-            }
-            else {
-                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-            }
-        };
+        ownerDocument.body.classList.toggle('iui-root', true);
         switch (theme) {
             case 'light':
-                (_c = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-                break;
             case 'dark':
-                (_d = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
-                break;
-            case 'os':
-                if (prefersDarkMediaQuery != undefined) {
-                    addOSTheme(prefersDarkMediaQuery);
-                    (_e = prefersDarkMediaQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                }
-                else {
-                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
-                }
-                break;
-            default:
-                if (ownerDocument.documentElement.className.indexOf('iui-theme') === -1) {
-                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
+            case 'os': {
+                return handleTheme(theme, ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
+            }
+            default: {
+                // set light theme by default
+                if (ownerDocument.documentElement.dataset.iuiTheme == null) {
+                    return handleTheme('light', ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
                 }
+                return;
+            }
         }
-        return function () {
-            var _a;
-            (_a = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkMediaQuery, 'change', addOSTheme);
-        };
-    }, [highContrast, ownerDocument, theme]);
+    }, [theme, themeContext, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
 };
-var applyTheme = function (theme, _a) {
-    var ownerDocument = _a.ownerDocument, highContrast = _a.highContrast;
-    var classList = ownerDocument.documentElement.classList;
-    var currentTheme = Array.from(classList).find(function (cls) {
-        return cls.startsWith('iui-theme');
-    });
-    if (currentTheme) {
-        classList.remove(currentTheme);
-    }
-    classList.add("iui-theme-".concat(theme).concat(highContrast ? '-hc' : ''));
+/**
+ * Helper function to apply the specified theme, or detect the OS theme.
+ * Returns a cleanup function to remove the change handlers.
+ */
+var handleTheme = function (theme, ownerDocument, highContrast) {
+    var _a, _b, _c, _d, _e;
+    var root = ownerDocument.documentElement;
+    var _window = (_a = ownerDocument.defaultView) !== null && _a !== void 0 ? _a : getWindow();
+    var applyThemeAttributes = function (isDark, isHC) {
+        if (isDark === void 0) { isDark = false; }
+        if (isHC === void 0) { isHC = false; }
+        root.dataset.iuiTheme = isDark ? 'dark' : 'light';
+        root.dataset.iuiContrast = isHC ? 'high' : 'default';
+    };
+    var prefersDarkQuery = (_b = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_window, '(prefers-color-scheme: dark)');
+    var prefersHCQuery = (_c = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(_window, '(prefers-contrast: more)');
+    var changeHandler = function () {
+        var isDark = theme === 'dark' || (theme === 'os' && (prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.matches));
+        var isHC = highContrast !== null && highContrast !== void 0 ? highContrast : prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.matches;
+        applyThemeAttributes(isDark, isHC);
+    };
+    // call handler once to set initial theme
+    changeHandler();
+    // add listeners in supported browsers
+    (_d = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.addEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkQuery, 'change', changeHandler);
+    (_e = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersHCQuery, 'change', changeHandler);
+    // return cleanup function to remove event listeners (should be returned from useEffect)
+    return function () {
+        var _a, _b;
+        (_a = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkQuery, 'change', changeHandler);
+        (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.48.0",
+  "version": "2.0.0-dev.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -44,9 +44,10 @@
     "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.63.0",
+    "@itwin/itwinui-css": "1.0.0-dev.13",
     "@itwin/itwinui-icons-react": "^1.10.1",
     "@itwin/itwinui-illustrations-react": "^1.3.1",
+    "@itwin/itwinui-variables": "1.0.0-dev.0",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",

package/cjs/core/UserIcon/UserIcon.d.ts

@@ -1,57 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
-export declare type UserIconStatus = 'online' | 'busy' | 'away' | 'offline';
-export declare type StatusTitles = {
-    [key in Exclude<UserIconStatus, ''>]: string;
-};
-export declare type UserIconProps = {
-    /**
-     * Size of a user icon.
-     * @default 'small'
-     */
-    size?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * Status/Availability of a user.
-     */
-    status?: UserIconStatus;
-    /**
-     * Text which will appear when hovering over the icon.
-     */
-    title?: string;
-    /**
-     * Abbreviation to be displayed.
-     */
-    abbreviation?: string;
-    /**
-     * User image to be displayed. MUST be an <img> element!
-     */
-    image?: JSX.Element;
-    /**
-     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
-     * @default 'white'
-     */
-    backgroundColor?: string;
-    /**
-     * Translated status messages shown on hover.
-     */
-    translatedStatusTitles?: StatusTitles;
-} & Omit<CommonProps, 'title'>;
-export declare const defaultStatusTitles: StatusTitles;
-/**
- * Basic user icon component
- * @example
- * <caption>Small icon with abbreviation</caption>
- * <UserIcon size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
- * @example
- * <caption>Medium icon with image</caption>
- * <UserIcon size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- * @example
- * <caption>Large icon with status</caption>
- * <UserIcon size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
- * @example
- * <caption>X-large icon with image</caption>
- * <UserIcon size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- */
-export declare const UserIcon: (props: UserIconProps) => JSX.Element;
-export default UserIcon;

package/cjs/core/UserIcon/index.d.ts

@@ -1,4 +0,0 @@
-export { UserIcon } from './UserIcon';
-export type { UserIconProps, StatusTitles, UserIconStatus } from './UserIcon';
-declare const _default: "./UserIcon";
-export default _default;

package/cjs/core/UserIconGroup/UserIconGroup.d.ts

@@ -1,62 +0,0 @@
-import React from 'react';
-import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
-export declare type UserIconGroupProps = {
-    /**
-     * Max number of icons unstacked.
-     * @default 5
-     */
-    maxIcons?: number;
-    /**
-     * If true, group will be stacked to take less space.
-     * @default true
-     */
-    stacked?: boolean;
-    /**
-     * If true, group will be animated on hover.
-     * @default false
-     */
-    animated?: boolean;
-    /**
-     * Size of user and count icons.
-     * @default 'small'
-     */
-    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * User Icons in the group.
-     */
-    children: React.ReactNode;
-    /**
-     * User Count Icon props.
-     */
-    countIconProps?: React.ComponentPropsWithRef<'div'>;
-} & Omit<CommonProps, 'title'>;
-/**
- * Group User Icons together.
- *
- * User Icons stacking is based on `maxIcons` count. If you provide 8 User Icons and keep default 5 `maxIcons` count,
- * this component will show 5 User Icons and User Count Icon with "3" in it.
- *
- * You can add custom User Count Icon behavior by using `countIconProps`.
- *
- * @example
- * <UserIconGroup iconSize='medium'>
- *  <UserIcon
- *    abbreviation="TR"
- *    backgroundColor={getUserColor("Terry Rivers")}
- *    title="Terry Rivers"
- *  />
- *  <UserIcon
- *    abbreviation="RM"
- *    backgroundColor={getUserColor("Robin Mercer")}
- *    title="Robin Mercer"
- *  />
- *  <UserIcon
- *    abbreviation="JM"
- *    backgroundColor={getUserColor("Jean Mullins")}
- *    title="Jean Mullins"
- *  />
- * </UserIconGroup>
- */
-export declare const UserIconGroup: (props: UserIconGroupProps) => JSX.Element;
-export default UserIconGroup;

package/cjs/core/UserIconGroup/index.d.ts

@@ -1,4 +0,0 @@
-export { UserIconGroup } from './UserIconGroup';
-export type { UserIconGroupProps } from './UserIconGroup';
-declare const _default: "./UserIconGroup";
-export default _default;

package/cjs/core/Wizard/Wizard.d.ts

@@ -1,54 +0,0 @@
-import React from 'react';
-import '@itwin/itwinui-css/css/wizard.css';
-export declare type WizardLocalization = {
-    stepsCountLabel: (currentStep: number, totalSteps: number) => string;
-};
-export declare type WizardType = 'default' | 'long' | 'workflow';
-export declare type StepProperties = {
-    /**
-     * The title/label of the step.
-     */
-    name: string;
-    /**
-     * A tooltip giving detailed description to this step.
-     */
-    description?: string;
-};
-export declare type WizardProps = {
-    /**
-     * Current step index, 0 - based.
-     */
-    currentStep?: number;
-    /**
-     * An array of step objects.
-     */
-    steps: StepProperties[];
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType;
-    /**
-     *  Option to provide localized strings.
-     */
-    localization?: WizardLocalization;
-    /**
-     *  Click handler on completed step.
-     */
-    onStepClick?: (clickedIndex: number) => void;
-};
-/**
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;
-export default Wizard;

package/cjs/core/Wizard/index.d.ts

@@ -1,4 +0,0 @@
-export { Wizard } from './Wizard';
-export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-declare const _default: "./Wizard";
-export default _default;

package/esm/core/UserIcon/UserIcon.d.ts

@@ -1,57 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
-export declare type UserIconStatus = 'online' | 'busy' | 'away' | 'offline';
-export declare type StatusTitles = {
-    [key in Exclude<UserIconStatus, ''>]: string;
-};
-export declare type UserIconProps = {
-    /**
-     * Size of a user icon.
-     * @default 'small'
-     */
-    size?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * Status/Availability of a user.
-     */
-    status?: UserIconStatus;
-    /**
-     * Text which will appear when hovering over the icon.
-     */
-    title?: string;
-    /**
-     * Abbreviation to be displayed.
-     */
-    abbreviation?: string;
-    /**
-     * User image to be displayed. MUST be an <img> element!
-     */
-    image?: JSX.Element;
-    /**
-     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
-     * @default 'white'
-     */
-    backgroundColor?: string;
-    /**
-     * Translated status messages shown on hover.
-     */
-    translatedStatusTitles?: StatusTitles;
-} & Omit<CommonProps, 'title'>;
-export declare const defaultStatusTitles: StatusTitles;
-/**
- * Basic user icon component
- * @example
- * <caption>Small icon with abbreviation</caption>
- * <UserIcon size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
- * @example
- * <caption>Medium icon with image</caption>
- * <UserIcon size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- * @example
- * <caption>Large icon with status</caption>
- * <UserIcon size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
- * @example
- * <caption>X-large icon with image</caption>
- * <UserIcon size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- */
-export declare const UserIcon: (props: UserIconProps) => JSX.Element;
-export default UserIcon;

package/esm/core/UserIcon/index.d.ts

@@ -1,4 +0,0 @@
-export { UserIcon } from './UserIcon';
-export type { UserIconProps, StatusTitles, UserIconStatus } from './UserIcon';
-declare const _default: "./UserIcon";
-export default _default;

package/esm/core/UserIconGroup/UserIconGroup.d.ts

@@ -1,62 +0,0 @@
-import React from 'react';
-import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
-export declare type UserIconGroupProps = {
-    /**
-     * Max number of icons unstacked.
-     * @default 5
-     */
-    maxIcons?: number;
-    /**
-     * If true, group will be stacked to take less space.
-     * @default true
-     */
-    stacked?: boolean;
-    /**
-     * If true, group will be animated on hover.
-     * @default false
-     */
-    animated?: boolean;
-    /**
-     * Size of user and count icons.
-     * @default 'small'
-     */
-    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * User Icons in the group.
-     */
-    children: React.ReactNode;
-    /**
-     * User Count Icon props.
-     */
-    countIconProps?: React.ComponentPropsWithRef<'div'>;
-} & Omit<CommonProps, 'title'>;
-/**
- * Group User Icons together.
- *
- * User Icons stacking is based on `maxIcons` count. If you provide 8 User Icons and keep default 5 `maxIcons` count,
- * this component will show 5 User Icons and User Count Icon with "3" in it.
- *
- * You can add custom User Count Icon behavior by using `countIconProps`.
- *
- * @example
- * <UserIconGroup iconSize='medium'>
- *  <UserIcon
- *    abbreviation="TR"
- *    backgroundColor={getUserColor("Terry Rivers")}
- *    title="Terry Rivers"
- *  />
- *  <UserIcon
- *    abbreviation="RM"
- *    backgroundColor={getUserColor("Robin Mercer")}
- *    title="Robin Mercer"
- *  />
- *  <UserIcon
- *    abbreviation="JM"
- *    backgroundColor={getUserColor("Jean Mullins")}
- *    title="Jean Mullins"
- *  />
- * </UserIconGroup>
- */
-export declare const UserIconGroup: (props: UserIconGroupProps) => JSX.Element;
-export default UserIconGroup;

package/esm/core/UserIconGroup/index.d.ts

@@ -1,4 +0,0 @@
-export { UserIconGroup } from './UserIconGroup';
-export type { UserIconGroupProps } from './UserIconGroup';
-declare const _default: "./UserIconGroup";
-export default _default;

package/esm/core/Wizard/Wizard.d.ts

@@ -1,54 +0,0 @@
-import React from 'react';
-import '@itwin/itwinui-css/css/wizard.css';
-export declare type WizardLocalization = {
-    stepsCountLabel: (currentStep: number, totalSteps: number) => string;
-};
-export declare type WizardType = 'default' | 'long' | 'workflow';
-export declare type StepProperties = {
-    /**
-     * The title/label of the step.
-     */
-    name: string;
-    /**
-     * A tooltip giving detailed description to this step.
-     */
-    description?: string;
-};
-export declare type WizardProps = {
-    /**
-     * Current step index, 0 - based.
-     */
-    currentStep?: number;
-    /**
-     * An array of step objects.
-     */
-    steps: StepProperties[];
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType;
-    /**
-     *  Option to provide localized strings.
-     */
-    localization?: WizardLocalization;
-    /**
-     *  Click handler on completed step.
-     */
-    onStepClick?: (clickedIndex: number) => void;
-};
-/**
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;
-export default Wizard;

package/esm/core/Wizard/index.d.ts

@@ -1,4 +0,0 @@
-export { Wizard } from './Wizard';
-export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-declare const _default: "./Wizard";
-export default _default;