@itwin/itwinui-react 2.10.0 → 2.11.0

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils';
+import * as React from 'react';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils/index.js';
 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>;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -1,4 +1,27 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,9 +31,9 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/global.css");
 require("@itwin/itwinui-variables/index.css");
 /**
@@ -39,40 +62,40 @@ require("@itwin/itwinui-variables/index.css");
  *  <App />
  * </ThemeProvider>
  */
-exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
+exports.ThemeProvider = React.forwardRef((props, ref) => {
     var _a;
     const { theme: themeProp, children, themeOptions, ...rest } = props;
-    const rootRef = react_1.default.useRef(null);
-    const mergedRefs = (0, utils_1.useMergedRefs)(rootRef, ref);
-    const hasChildren = react_1.default.Children.count(children) > 0;
-    const parentContext = react_1.default.useContext(exports.ThemeContext);
+    const rootRef = React.useRef(null);
+    const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
+    const hasChildren = React.Children.count(children) > 0;
+    const parentContext = React.useContext(exports.ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
-    const contextValue = react_1.default.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
-        return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+        return (React.createElement(ThemeLogicWrapper, { theme: 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, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
-        react_1.default.createElement(exports.ThemeContext.Provider, { value: contextValue }, children)));
+    return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
+        React.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) => {
+exports.ThemeContext = React.createContext(undefined);
+const Root = React.forwardRef((props, forwardedRef) => {
     var _a, _b, _c;
     const { theme, children, themeOptions, as: Element = 'div', className, isInheritingTheme, ...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)');
-    const prefersHighContrast = (0, utils_1.useMediaQuery)('(prefers-contrast: more)');
+    const ref = React.useRef(null);
+    const mergedRefs = (0, index_js_1.useMergedRefs)(ref, forwardedRef);
+    const prefersDark = (0, index_js_1.useMediaQuery)('(prefers-color-scheme: dark)');
+    const prefersHighContrast = (0, index_js_1.useMediaQuery)('(prefers-contrast: more)');
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     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 isThemeAlreadySet = (0, index_js_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 : (isInheritingTheme ? false : !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.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));
 });
 const ThemeLogicWrapper = (props) => {
     const { theme, themeOptions } = props;
-    (0, utils_1.useTheme)(theme, themeOptions);
-    return react_1.default.createElement(react_1.default.Fragment, null);
+    (0, index_js_1.useTheme)(theme, themeOptions);
+    return React.createElement(React.Fragment, null);
 };

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

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

package/cjs/core/ThemeProvider/index.js

@@ -5,6 +5,6 @@ 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; } });
+var ThemeProvider_js_1 = require("./ThemeProvider.js");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_js_1.ThemeProvider; } });
 exports.default = './ThemeProvider';

package/cjs/core/Tile/Tile.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PolymorphicComponentProps } from '../utils';
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tile.css';
 declare type TileActionOwnProps = {};
 /**

package/cjs/core/Tile/Tile.js

@@ -1,4 +1,27 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,14 +31,14 @@ exports.Tile = exports.TileAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/tile.css");
-const DropdownMenu_1 = require("../DropdownMenu");
-const Buttons_1 = require("../Buttons");
-const ProgressIndicators_1 = require("../ProgressIndicators");
-const TileContext = react_1.default.createContext(undefined);
+const index_js_2 = require("../DropdownMenu/index.js");
+const index_js_3 = require("../Buttons/index.js");
+const index_js_4 = require("../ProgressIndicators/index.js");
+const TileContext = React.createContext(undefined);
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
  * Renders `a` element by default.
@@ -25,13 +48,13 @@ const TileContext = react_1.default.createContext(undefined);
  * />
  */
 const TileAction = (props) => {
-    const tileContext = (0, utils_1.useSafeContext)(TileContext);
-    react_1.default.useEffect(() => {
-        if (!(0, utils_1.supportsHas)()) {
+    const tileContext = (0, index_js_1.useSafeContext)(TileContext);
+    React.useEffect(() => {
+        if (!(0, index_js_1.supportsHas)()) {
             tileContext.setActionable(true);
         }
     }, [tileContext]);
-    return react_1.default.createElement(utils_1.LinkAction, { ...props });
+    return React.createElement(index_js_1.LinkAction, { ...props });
 };
 exports.TileAction = TileAction;
 /**
@@ -53,17 +76,17 @@ exports.TileAction = TileAction;
  */
 exports.Tile = Object.assign((props) => {
     const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const [isMenuVisible, setIsMenuVisible] = react_1.default.useState(false);
-    const showMenu = react_1.default.useCallback(() => setIsMenuVisible(true), []);
-    const hideMenu = react_1.default.useCallback(() => setIsMenuVisible(false), []);
-    const [localActionable, setLocalActionable] = react_1.default.useState(isActionableProp);
+    (0, index_js_1.useTheme)();
+    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+    const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
+    const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
+    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
     const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
-    const tileName = (react_1.default.createElement("div", { className: 'iui-tile-name' },
-        react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        react_1.default.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (react_1.default.createElement(utils_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
-    return (react_1.default.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
+    const tileName = (React.createElement("div", { className: 'iui-tile-name' },
+        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
+        React.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(index_js_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+        React.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
                 'iui-folder': variant === 'folder',
                 'iui-new': isNew,
                 'iui-selected': isSelected,
@@ -72,41 +95,41 @@ exports.Tile = Object.assign((props) => {
                 'iui-loading': isLoading,
             }, className), "aria-disabled": isDisabled, ...rest },
             variant !== 'folder' ? tileName : null,
-            thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+            thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                     className: 'iui-tile-thumbnail-picture',
-                })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
+                })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
                     className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
                 })) : (thumbnail),
                 leftIcon &&
-                    react_1.default.cloneElement(leftIcon, {
+                    React.cloneElement(leftIcon, {
                         className: 'iui-tile-thumbnail-type-indicator',
                         'data-iui-size': 'small',
                     }),
                 rightIcon &&
-                    react_1.default.cloneElement(rightIcon, {
+                    React.cloneElement(rightIcon, {
                         className: 'iui-tile-thumbnail-quick-action',
                         'data-iui-size': 'small',
                     }),
-                badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            react_1.default.createElement("div", { className: 'iui-tile-content' },
+                badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            React.createElement("div", { className: 'iui-tile-content' },
                 variant === 'folder' ? tileName : null,
-                description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-                moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
+                description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                moreOptions && (React.createElement(index_js_2.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
                         onClick: (value) => {
                             var _a, _b;
                             close();
                             (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
                         },
                     })) },
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
+                    React.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
                             'iui-visible': isMenuVisible,
                         }) },
-                        react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                            react_1.default.createElement(utils_1.SvgMore, null))))),
+                        React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                            React.createElement(index_js_1.SvgMore, null))))),
                 children),
-            buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
+            buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
 }, {
     /**
      * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
@@ -119,18 +142,18 @@ exports.Tile = Object.assign((props) => {
     Action: exports.TileAction,
 });
 const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
-    const StatusIcon = !!status && utils_1.StatusIconMap[status];
+    const StatusIcon = !!status && index_js_1.StatusIconMap[status];
     if (isLoading) {
-        return (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
+        return (React.createElement(index_js_4.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
     }
     if (isSelected) {
-        return react_1.default.createElement(utils_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        return React.createElement(index_js_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
     }
     if (isNew) {
-        return react_1.default.createElement(utils_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        return React.createElement(index_js_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
     }
     if (StatusIcon) {
-        return react_1.default.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
+        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
     }
     return null;
 };

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

@@ -1,4 +1,4 @@
-export { Tile } from './Tile';
-export type { TileProps } from './Tile';
+export { Tile } from './Tile.js';
+export type { TileProps } from './Tile.js';
 declare const _default: "./Tile";
 export default _default;

package/cjs/core/Tile/index.js

@@ -5,6 +5,6 @@ exports.Tile = 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 Tile_1 = require("./Tile");
-Object.defineProperty(exports, "Tile", { enumerable: true, get: function () { return Tile_1.Tile; } });
+var Tile_js_1 = require("./Tile.js");
+Object.defineProperty(exports, "Tile", { enumerable: true, get: function () { return Tile_js_1.Tile; } });
 exports.default = './Tile';

package/cjs/core/TimePicker/TimePicker.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { StylingProps } from '../utils';
+import * as React from 'react';
+import type { StylingProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type Precision = 'hours' | 'minutes' | 'seconds';

package/cjs/core/TimePicker/TimePicker.js

@@ -1,4 +1,27 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,8 +32,8 @@ exports.TimePicker = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/time-picker.css");
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem
@@ -85,11 +108,11 @@ const defaultCombinedRenderer = (date, precision) => {
  */
 const TimePicker = (props) => {
     const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const [selectedTime, setSelectedTime] = react_1.default.useState(date);
-    const [focusedTime, setFocusedTime] = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
-    const [meridiem, setMeridiem] = react_1.default.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
-    react_1.default.useEffect(() => {
+    (0, index_js_1.useTheme)();
+    const [selectedTime, setSelectedTime] = React.useState(date);
+    const [focusedTime, setFocusedTime] = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+    const [meridiem, setMeridiem] = React.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
+    React.useEffect(() => {
         setFocusedTime(date !== null && date !== void 0 ? date : new Date());
         setSelectedTime(date);
     }, [date]);
@@ -166,7 +189,7 @@ const TimePicker = (props) => {
         }
         return data;
     };
-    const time = react_1.default.useMemo(() => {
+    const time = React.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         const data = [];
         const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
@@ -193,32 +216,32 @@ const TimePicker = (props) => {
         });
         return data;
     }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
-    const hours = react_1.default.useMemo(() => {
+    const hours = React.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
     }, [hourStep, selectedTime, use12Hours]);
-    const minutes = react_1.default.useMemo(() => {
+    const minutes = React.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
     }, [minuteStep, selectedTime]);
-    const seconds = react_1.default.useMemo(() => {
+    const seconds = React.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-time-picker', className), ...rest },
-        useCombinedRenderer ? (react_1.default.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-            precision !== 'hours' && (react_1.default.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
-            precision === 'seconds' && (react_1.default.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
-        use12Hours && (react_1.default.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-time-picker', className), ...rest },
+        useCombinedRenderer ? (React.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (React.createElement(React.Fragment, null,
+            React.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
+            precision !== 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
+            precision === 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
+        use12Hours && (React.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
 };
 exports.TimePicker = TimePicker;
 const TimePickerColumn = (props) => {
     const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
-    const needFocus = react_1.default.useRef(setFocus);
+    const needFocus = React.useRef(setFocus);
     // Used to focus row only when changed (keyboard navigation)
     // e.g. without this on every rerender it would be focused
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (needFocus.current) {
             needFocus.current = false;
         }
@@ -255,10 +278,10 @@ const TimePickerColumn = (props) => {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement("ol", null, data.map((value, index) => {
+    return (React.createElement("div", { className: className },
+        React.createElement("ol", null, data.map((value, index) => {
             const isSameFocus = isSameFocused(value);
-            return (react_1.default.createElement("li", { onKeyDown: (event) => {
+            return (React.createElement("li", { onKeyDown: (event) => {
                     handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
                 }, className: (0, classnames_1.default)({
                     'iui-selected': isSameSelected(value),

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

@@ -1,4 +1,4 @@
-export { TimePicker } from './TimePicker';
-export type { MeridiemType, TimePickerProps } from './TimePicker';
+export { TimePicker } from './TimePicker.js';
+export type { MeridiemType, TimePickerProps } from './TimePicker.js';
 declare const _default: "./TimePicker";
 export default _default;

package/cjs/core/TimePicker/index.js

@@ -5,6 +5,6 @@ exports.TimePicker = 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 TimePicker_1 = require("./TimePicker");
-Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
+var TimePicker_js_1 = require("./TimePicker.js");
+Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_js_1.TimePicker; } });
 exports.default = './TimePicker';

package/cjs/core/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/toast.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {