@itwin/itwinui-react 2.4.0-dev.1 → 2.4.0-dev.2

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

@@ -3,7 +3,7 @@ import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOp
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
-declare type RootProps = {
+declare type RootWithThemeProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
      *
@@ -27,8 +27,8 @@ declare type RootProps = {
         applyBackground?: boolean;
     };
 };
-declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
-    themeOptions?: RootProps['themeOptions'];
+declare type ThemeProviderOwnProps = Pick<RootWithThemeProps, 'theme'> & ({
+    themeOptions?: RootWithThemeProps['themeOptions'];
     children: Required<React.ReactNode>;
 } | {
     themeOptions?: ThemeOptions;
@@ -67,3 +67,23 @@ export declare const ThemeContext: React.Context<{
     themeOptions?: ThemeOptions | undefined;
     rootRef: React.RefObject<HTMLElement>;
 } | undefined>;
+/**
+ * Root component that should wrap all iTwinUI components, preventing styles from leaking out of the tree.
+ *
+ * This is only needed when it's not possible to use ThemeProvider. For example, when building a package
+ * using iTwinUI v2, the package should have no opinion on the app theme, but the components in the package
+ * should probably still be scoped, to prevent potential conflicts with the rest of the page where it's used.
+ *
+ * @example
+ * <Root>
+ *  // UI built using iTwinUI v2
+ * </Root>
+ */
+export declare const Root: PolymorphicForwardRefComponent<"div", RootProps>;
+export declare type RootProps = {
+    /**
+     * Whether or not the root should have the recommended `background-color`.
+     * This is usually only relevant for the topmost root on the page.
+     */
+    withBackground?: boolean;
+} & React.ComponentProps<'div'>;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeContext = exports.ThemeProvider = void 0;
+exports.Root = exports.ThemeContext = exports.ThemeProvider = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -51,14 +51,14 @@ exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
         return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
-    return (react_1.default.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
+    return (react_1.default.createElement(RootWithTheme, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
         react_1.default.createElement(exports.ThemeContext.Provider, { value: contextValue }, children)));
 });
 exports.default = exports.ThemeProvider;
 exports.ThemeContext = react_1.default.createContext(undefined);
-const Root = react_1.default.forwardRef((props, forwardedRef) => {
+const RootWithTheme = react_1.default.forwardRef((props, forwardedRef) => {
     var _a, _b, _c;
-    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const { theme, children, themeOptions, ...rest } = props;
     const ref = react_1.default.useRef(null);
     const mergedRefs = (0, utils_1.useMergedRefs)(ref, forwardedRef);
     const prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
@@ -67,9 +67,25 @@ const Root = react_1.default.forwardRef((props, forwardedRef) => {
     const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
     const isThemeAlreadySet = (0, utils_1.useIsThemeAlreadySet)((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
+    return (react_1.default.createElement(exports.Root, { withBackground: shouldApplyBackground, "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
 const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null);
 };
+/**
+ * Root component that should wrap all iTwinUI components, preventing styles from leaking out of the tree.
+ *
+ * This is only needed when it's not possible to use ThemeProvider. For example, when building a package
+ * using iTwinUI v2, the package should have no opinion on the app theme, but the components in the package
+ * should probably still be scoped, to prevent potential conflicts with the rest of the page where it's used.
+ *
+ * @example
+ * <Root>
+ *  // UI built using iTwinUI v2
+ * </Root>
+ */
+exports.Root = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, withBackground, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': withBackground }, className), ref: ref, ...rest }));
+});

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

@@ -1,4 +1,4 @@
-export { ThemeProvider } from './ThemeProvider';
-export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
+export type { ThemeProviderProps, RootProps } from './ThemeProvider';
 declare const _default: "./ThemeProvider";
 export default _default;

package/cjs/core/ThemeProvider/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = void 0;
+exports.Root = exports.ThemeProvider = 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 ThemeProvider_1 = require("./ThemeProvider");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
+Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return ThemeProvider_1.Root; } });
 exports.default = './ThemeProvider';

package/cjs/core/index.d.ts

@@ -92,8 +92,8 @@ export { TimePicker } from './TimePicker';
 export type { MeridiemType, TimePickerProps } from './TimePicker';
 export { default as toaster } from './Toast';
 export type { ToastOptions } from './Toast';
-export { ThemeProvider } from './ThemeProvider';
-export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
+export type { ThemeProviderProps, RootProps } from './ThemeProvider';
 export { ToggleSwitch } from './ToggleSwitch';
 export type { ToggleSwitchProps } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';

package/cjs/core/index.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.NonIdealState = 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.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.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
-exports.Icon = 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 = exports.Leading = exports.Headline = void 0;
+exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.Root = 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.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
+exports.Icon = 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 = exports.Leading = exports.Headline = exports.Body = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -151,6 +151,7 @@ var Toast_1 = require("./Toast");
 Object.defineProperty(exports, "toaster", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
 var ThemeProvider_1 = require("./ThemeProvider");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
+Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return ThemeProvider_1.Root; } });
 var ToggleSwitch_1 = require("./ToggleSwitch");
 Object.defineProperty(exports, "ToggleSwitch", { enumerable: true, get: function () { return ToggleSwitch_1.ToggleSwitch; } });
 var Tooltip_1 = require("./Tooltip");

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

@@ -3,7 +3,7 @@ import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOp
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
-declare type RootProps = {
+declare type RootWithThemeProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
      *
@@ -27,8 +27,8 @@ declare type RootProps = {
         applyBackground?: boolean;
     };
 };
-declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
-    themeOptions?: RootProps['themeOptions'];
+declare type ThemeProviderOwnProps = Pick<RootWithThemeProps, 'theme'> & ({
+    themeOptions?: RootWithThemeProps['themeOptions'];
     children: Required<React.ReactNode>;
 } | {
     themeOptions?: ThemeOptions;
@@ -67,3 +67,23 @@ export declare const ThemeContext: React.Context<{
     themeOptions?: ThemeOptions | undefined;
     rootRef: React.RefObject<HTMLElement>;
 } | undefined>;
+/**
+ * Root component that should wrap all iTwinUI components, preventing styles from leaking out of the tree.
+ *
+ * This is only needed when it's not possible to use ThemeProvider. For example, when building a package
+ * using iTwinUI v2, the package should have no opinion on the app theme, but the components in the package
+ * should probably still be scoped, to prevent potential conflicts with the rest of the page where it's used.
+ *
+ * @example
+ * <Root>
+ *  // UI built using iTwinUI v2
+ * </Root>
+ */
+export declare const Root: PolymorphicForwardRefComponent<"div", RootProps>;
+export declare type RootProps = {
+    /**
+     * Whether or not the root should have the recommended `background-color`.
+     * This is usually only relevant for the topmost root on the page.
+     */
+    withBackground?: boolean;
+} & React.ComponentProps<'div'>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -45,14 +45,14 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
         return (React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
-    return (React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
+    return (React.createElement(RootWithTheme, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
         React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
 });
 export default ThemeProvider;
 export const ThemeContext = React.createContext(undefined);
-const Root = React.forwardRef((props, forwardedRef) => {
+const RootWithTheme = React.forwardRef((props, forwardedRef) => {
     var _a, _b, _c;
-    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const { theme, children, themeOptions, ...rest } = props;
     const ref = React.useRef(null);
     const mergedRefs = useMergedRefs(ref, forwardedRef);
     const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
@@ -61,9 +61,25 @@ const Root = React.forwardRef((props, forwardedRef) => {
     const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
     const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
-    return (React.createElement(Element, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
+    return (React.createElement(Root, { withBackground: shouldApplyBackground, "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
 const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     useTheme(theme, themeOptions);
     return React.createElement(React.Fragment, null);
 };
+/**
+ * Root component that should wrap all iTwinUI components, preventing styles from leaking out of the tree.
+ *
+ * This is only needed when it's not possible to use ThemeProvider. For example, when building a package
+ * using iTwinUI v2, the package should have no opinion on the app theme, but the components in the package
+ * should probably still be scoped, to prevent potential conflicts with the rest of the page where it's used.
+ *
+ * @example
+ * <Root>
+ *  // UI built using iTwinUI v2
+ * </Root>
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, withBackground, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-root', { 'iui-root-background': withBackground }, className), ref: ref, ...rest }));
+});

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

@@ -1,4 +1,4 @@
-export { ThemeProvider } from './ThemeProvider';
-export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
+export type { ThemeProviderProps, RootProps } from './ThemeProvider';
 declare const _default: "./ThemeProvider";
 export default _default;

package/esm/core/ThemeProvider/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ThemeProvider } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
 export default './ThemeProvider';

package/esm/core/index.d.ts

@@ -92,8 +92,8 @@ export { TimePicker } from './TimePicker';
 export type { MeridiemType, TimePickerProps } from './TimePicker';
 export { default as toaster } from './Toast';
 export type { ToastOptions } from './Toast';
-export { ThemeProvider } from './ThemeProvider';
-export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
+export type { ThemeProviderProps, RootProps } from './ThemeProvider';
 export { ToggleSwitch } from './ToggleSwitch';
 export type { ToggleSwitchProps } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';

package/esm/core/index.js

@@ -49,7 +49,7 @@ export { Textarea } from './Textarea';
 export { Tile } from './Tile';
 export { TimePicker } from './TimePicker';
 export { default as toaster } from './Toast';
-export { ThemeProvider } from './ThemeProvider';
+export { ThemeProvider, Root } from './ThemeProvider';
 export { ToggleSwitch } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.4.0-dev.1",
+  "version": "2.4.0-dev.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",