@itwin/itwinui-react 1.48.1 → 2.0.0-dev.1

package/cjs/core/index.js

@@ -3,15 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
-exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = void 0;
+exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
+exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
+Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return Avatar_1.UserIcon; } });
+var AvatarGroup_1 = require("./AvatarGroup");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_1.AvatarGroup; } });
+Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return AvatarGroup_1.UserIconGroup; } });
 var Backdrop_1 = require("./Backdrop");
 Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
 var Badge_1 = require("./Badge");
@@ -64,9 +70,9 @@ Object.defineProperty(exports, "HeaderButton", { enumerable: true, get: function
 Object.defineProperty(exports, "HeaderLogo", { enumerable: true, get: function () { return Header_1.HeaderLogo; } });
 var Tabs_1 = require("./Tabs");
 Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });
 Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
-Object.defineProperty(exports, "HorizontalTab", { enumerable: true, get: function () { return Tabs_1.HorizontalTab; } });
 var InformationPanel_1 = require("./InformationPanel");
 Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: function () { return InformationPanel_1.InformationPanel; } });
 Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelWrapper; } });
@@ -163,12 +169,10 @@ Object.defineProperty(exports, "Code", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { return Typography_1.Kbd; } });
 Object.defineProperty(exports, "KbdKeys", { enumerable: true, get: function () { return Typography_1.KbdKeys; } });
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Typography_1.Text; } });
-var UserIcon_1 = require("./UserIcon");
-Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return UserIcon_1.UserIcon; } });
-var UserIconGroup_1 = require("./UserIconGroup");
-Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return UserIconGroup_1.UserIconGroup; } });
-var Wizard_1 = require("./Wizard");
-Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Wizard_1.Wizard; } });
+var Stepper_1 = require("./Stepper");
+Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Stepper_1.Wizard; } });
+Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return Stepper_1.Stepper; } });
+Object.defineProperty(exports, "WorkflowDiagram", { enumerable: true, get: function () { return Stepper_1.WorkflowDiagram; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return utils_1.getUserColor; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });

package/cjs/core/utils/components/Popover.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/popover.css';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.
@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "className" | "role" | "children" | "plugins" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/cjs/core/utils/components/Popover.js

@@ -32,7 +32,7 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_2 = __importDefault(require("@tippyjs/react"));
 var useMergedRefs_1 = require("../hooks/useMergedRefs");
-require("@itwin/itwinui-css/css/popover.css");
+require("@itwin/itwinui-css/css/utils.css");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

package/cjs/core/utils/components/Resizer.d.ts

@@ -9,6 +9,11 @@ export declare type ResizerProps = {
      * If not passed, viewport will be used.
      */
     containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Callback that is being called on resize start.
+     * Useful to set state, style, or other properties when resizing is started.
+     */
+    onResizeStart?: () => void;
     /**
      * Callback that is being called on resize end.
      * Useful to preserve state if element is being closed.

package/cjs/core/utils/components/Resizer.js

@@ -23,7 +23,8 @@ var functions_1 = require("../functions");
  * );
  */
 var Resizer = function (props) {
-    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeEnd = props.onResizeEnd;
+    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
+    var isResizing = react_1.default.useRef(false);
     var onResizePointerDown = function (event) {
         if (!elementRef.current || event.button !== 0) {
             return;
@@ -46,6 +47,10 @@ var Resizer = function (props) {
             if (!elementRef.current) {
                 return;
             }
+            if (!isResizing.current) {
+                isResizing.current = true;
+                onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
+            }
             var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             var clientX = (0, functions_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
             var clientY = (0, functions_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
@@ -128,6 +133,7 @@ var Resizer = function (props) {
             document.removeEventListener('pointermove', onResizePointerMove);
             if (elementRef.current) {
                 elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
+                isResizing.current = false;
                 onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
                     width: width,
                     height: height,

package/cjs/core/utils/components/VisuallyHidden.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'div'>;
 /**
  * Hides content visually but is still accessible to screen readers.

package/cjs/core/utils/components/VisuallyHidden.js

@@ -33,6 +33,7 @@ exports.VisuallyHidden = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var hooks_1 = require("../hooks");
+require("@itwin/itwinui-css/css/utils.css");
 /**
  * Hides content visually but is still accessible to screen readers.
  */

package/cjs/core/utils/components/index.d.ts

@@ -2,7 +2,6 @@ export * from './Popover';
 export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
-export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';

package/cjs/core/utils/components/index.js

@@ -22,7 +22,6 @@ __exportStar(require("./Popover"), exports);
 __exportStar(require("./Resizer"), exports);
 __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
-__exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
 __exportStar(require("./MiddleTextTruncation"), exports);
 __exportStar(require("./VirtualScroll"), exports);

package/cjs/core/utils/functions/colors.d.ts

@@ -1,20 +1,20 @@
 export declare const SoftBackgrounds: {
-    readonly skyblue: "hsl(197, 71%, 83%)";
-    readonly celery: "hsl(72, 51%, 66%)";
-    readonly froly: "hsl(2, 90%, 83%)";
-    readonly steelblue: "hsl(207, 44%, 73%)";
-    readonly sunglow: "hsl(42, 100%, 70%)";
-    readonly seabuckthorn: "hsl(29, 92%, 71%)";
-    readonly montecarlo: "hsl(176, 43%, 72%)";
-    readonly poloblue: "hsl(211, 44%, 77%)";
-    readonly bouquet: "hsl(305, 19%, 75%)";
-    readonly ash: "hsl(42, 15%, 85%)";
-    readonly oak: "hsl(27, 32%, 72%)";
+    readonly skyblue: "var(--iui-color-background-skyblue)";
+    readonly celery: "var(--iui-color-background-celery)";
+    readonly froly: "var(--iui-color-background-froly)";
+    readonly steelblue: "var(--iui-color-background-steelblue)";
+    readonly sunglow: "var(--iui-color-background-sunglow)";
+    readonly seabuckthorn: "var(--iui-color-background-seabuckthorn)";
+    readonly montecarlo: "var(--iui-color-background-montecarlo)";
+    readonly poloblue: "var(--iui-color-background-poloblue)";
+    readonly bouquet: "var(--iui-color-background-bouquet)";
+    readonly ash: "var(--iui-color-background-ash)";
+    readonly oak: "var(--iui-color-background-oak)";
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
 export declare const isSoftBackground: (value: string) => value is "skyblue" | "celery" | "froly" | "steelblue" | "sunglow" | "seabuckthorn" | "montecarlo" | "poloblue" | "bouquet" | "ash" | "oak";
 /**
  * Generate color from user name or email.
- * Recommended to use for `backgroundColor` in `UserIcon` component.
+ * Recommended to use for `backgroundColor` in `Avatar` component.
  */
 export declare const getUserColor: (emailOrName: string) => string;

package/cjs/core/utils/functions/colors.js

@@ -6,17 +6,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUserColor = exports.isSoftBackground = exports.SoftBackgrounds = void 0;
 exports.SoftBackgrounds = {
-    skyblue: 'hsl(197, 71%, 83%)',
-    celery: 'hsl(72, 51%, 66%)',
-    froly: 'hsl(2, 90%, 83%)',
-    steelblue: 'hsl(207, 44%, 73%)',
-    sunglow: 'hsl(42, 100%, 70%)',
-    seabuckthorn: 'hsl(29, 92%, 71%)',
-    montecarlo: 'hsl(176, 43%, 72%)',
-    poloblue: 'hsl(211, 44%, 77%)',
-    bouquet: 'hsl(305, 19%, 75%)',
-    ash: 'hsl(42, 15%, 85%)',
-    oak: 'hsl(27, 32%, 72%)',
+    skyblue: 'var(--iui-color-background-skyblue)',
+    celery: 'var(--iui-color-background-celery)',
+    froly: 'var(--iui-color-background-froly)',
+    steelblue: 'var(--iui-color-background-steelblue)',
+    sunglow: 'var(--iui-color-background-sunglow)',
+    seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
+    montecarlo: 'var(--iui-color-background-montecarlo)',
+    poloblue: 'var(--iui-color-background-poloblue)',
+    bouquet: 'var(--iui-color-background-bouquet)',
+    ash: 'var(--iui-color-background-ash)',
+    oak: 'var(--iui-color-background-oak)',
 };
 /** Returns true if a string value is one of the SoftBackgrounds keys */
 var isSoftBackground = function (value) {
@@ -38,7 +38,7 @@ var USER_COLORS = [
 ];
 /**
  * Generate color from user name or email.
- * Recommended to use for `backgroundColor` in `UserIcon` component.
+ * Recommended to use for `backgroundColor` in `Avatar` component.
  */
 var getUserColor = function (emailOrName) {
     var normalizedString = emailOrName.trim().toLowerCase();

package/cjs/core/utils/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './useIntersection';
 export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
+export * from './useIsomorphicLayoutEffect';

package/cjs/core/utils/hooks/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useSafeContext"), exports);
 __exportStar(require("./useLatestRef"), exports);
+__exportStar(require("./useIsomorphicLayoutEffect"), exports);

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
+ *
+ * @see https://fb.me/react-uselayouteffect-ssr
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+/**
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
+ *
+ * @see https://fb.me/react-uselayouteffect-ssr
+ */
+exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.default.useLayoutEffect : react_1.default.useEffect;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -10,9 +10,10 @@ exports.useMediaQuery = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var functions_1 = require("../functions");
+var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 var useMediaQuery = function (queryString) {
     var _a = react_1.default.useState(), matches = _a[0], setMatches = _a[1];
-    react_1.default.useLayoutEffect(function () {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
         var _a, _b, _c;
         var mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
         var handleChange = function (_a) {

package/cjs/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/cjs/core/utils/hooks/useTheme.js

@@ -9,78 +9,77 @@ exports.useTheme = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
+var ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
+var functions_1 = require("../functions");
+var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 require("@itwin/itwinui-css/css/global.css");
-var dom_1 = require("../functions/dom");
-var useMediaQuery_1 = require("./useMediaQuery");
+require("@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.
  */
 var useTheme = function (theme, themeOptions) {
     var _a;
-    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, dom_1.getDocument)();
-    var prefersHighContrast = (0, useMediaQuery_1.useMediaQuery)('(prefers-contrast: more)');
-    var highContrast = react_1.default.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_1.default.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_1.default.useLayoutEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!ownerDocument) {
+    var themeContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
+    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+        // exit early if theme was already set by provider
+        if (themeContext || !ownerDocument) {
             return;
         }
-        var prefersDarkMediaQuery = (_b = (_a = (0, dom_1.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]);
 };
 exports.useTheme = useTheme;
-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 : (0, functions_1.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/cjs/core/utils/{components/icons.d.ts → icons/StatusIconMap.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../props';
+import { type CommonProps } from '../props';
 export declare const StatusIconMap: {
     negative: (args?: CommonProps) => JSX.Element;
     positive: (args?: CommonProps) => JSX.Element;

package/cjs/core/utils/icons/StatusIconMap.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIconMap = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var React = __importStar(require("react"));
+var SvgInfoCircular_1 = require("./SvgInfoCircular");
+var SvgStatusError_1 = require("./SvgStatusError");
+var SvgStatusSuccess_1 = require("./SvgStatusSuccess");
+var SvgStatusWarning_1 = require("./SvgStatusWarning");
+exports.StatusIconMap = {
+    negative: function (args) { return React.createElement(SvgStatusError_1.SvgStatusError, __assign({ "aria-hidden": true }, args)); },
+    positive: function (args) { return React.createElement(SvgStatusSuccess_1.SvgStatusSuccess, __assign({ "aria-hidden": true }, args)); },
+    warning: function (args) { return React.createElement(SvgStatusWarning_1.SvgStatusWarning, __assign({ "aria-hidden": true }, args)); },
+    informational: function (args) { return (React.createElement(SvgInfoCircular_1.SvgInfoCircular, __assign({ "aria-hidden": true }, args))); },
+};

package/cjs/core/utils/icons/SvgCalendar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCalendar: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/cjs/core/utils/icons/SvgCalendar.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgCalendar = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var React = __importStar(require("react"));
+var SvgCalendar = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+        React.createElement("path", { d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z' })));
+};
+exports.SvgCalendar = SvgCalendar;

package/cjs/core/utils/icons/SvgCaretDownSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgCaretDownSmall: (props: React.ComponentProps<'svg'>) => JSX.Element;