@itwin/itwinui-react 2.10.1 → 2.11.1

package/cjs/core/SideNavigation/SidenavSubmenuHeader.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.SidenavSubmenuHeader = 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/side-navigation.css");
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
@@ -28,10 +51,10 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 const SidenavSubmenuHeader = (props) => {
     const { children, actions, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className), ...rest },
-        react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-header-label' }, children),
-        actions && (react_1.default.createElement("div", { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
+    (0, index_js_1.useTheme)();
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className), ...rest },
+        React.createElement("div", { className: 'iui-side-navigation-submenu-header-label' }, children),
+        actions && (React.createElement("div", { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
 };
 exports.SidenavSubmenuHeader = SidenavSubmenuHeader;
 exports.default = exports.SidenavSubmenuHeader;

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

@@ -1,10 +1,10 @@
-export { SideNavigation } from './SideNavigation';
-export type { SideNavigationProps } from './SideNavigation';
+export { SideNavigation } from './SideNavigation.js';
+export type { SideNavigationProps } from './SideNavigation.js';
 declare const _default: "./SideNavigation";
 export default _default;
-export { SidenavButton } from './SidenavButton';
-export type { SidenavButtonProps } from './SidenavButton';
-export { SidenavSubmenu } from './SidenavSubmenu';
-export type { SidenavSubmenuProps } from './SidenavSubmenu';
-export { SidenavSubmenuHeader } from './SidenavSubmenuHeader';
-export type { SidenavSubmenuHeaderProps } from './SidenavSubmenuHeader';
+export { SidenavButton } from './SidenavButton.js';
+export type { SidenavButtonProps } from './SidenavButton.js';
+export { SidenavSubmenu } from './SidenavSubmenu.js';
+export type { SidenavSubmenuProps } from './SidenavSubmenu.js';
+export { SidenavSubmenuHeader } from './SidenavSubmenuHeader.js';
+export type { SidenavSubmenuHeaderProps } from './SidenavSubmenuHeader.js';

package/cjs/core/SideNavigation/index.js

@@ -5,12 +5,12 @@ exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton =
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var SideNavigation_1 = require("./SideNavigation");
-Object.defineProperty(exports, "SideNavigation", { enumerable: true, get: function () { return SideNavigation_1.SideNavigation; } });
+var SideNavigation_js_1 = require("./SideNavigation.js");
+Object.defineProperty(exports, "SideNavigation", { enumerable: true, get: function () { return SideNavigation_js_1.SideNavigation; } });
 exports.default = './SideNavigation';
-var SidenavButton_1 = require("./SidenavButton");
-Object.defineProperty(exports, "SidenavButton", { enumerable: true, get: function () { return SidenavButton_1.SidenavButton; } });
-var SidenavSubmenu_1 = require("./SidenavSubmenu");
-Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: function () { return SidenavSubmenu_1.SidenavSubmenu; } });
-var SidenavSubmenuHeader_1 = require("./SidenavSubmenuHeader");
-Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SidenavSubmenuHeader_1.SidenavSubmenuHeader; } });
+var SidenavButton_js_1 = require("./SidenavButton.js");
+Object.defineProperty(exports, "SidenavButton", { enumerable: true, get: function () { return SidenavButton_js_1.SidenavButton; } });
+var SidenavSubmenu_js_1 = require("./SidenavSubmenu.js");
+Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: function () { return SidenavSubmenu_js_1.SidenavSubmenu; } });
+var SidenavSubmenuHeader_js_1 = require("./SidenavSubmenuHeader.js");
+Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SidenavSubmenuHeader_js_1.SidenavSubmenuHeader; } });

package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/skip-to-content.css';
 export declare type SkipToContentLinkProps = {
     /**

package/cjs/core/SkipToContentLink/SkipToContentLink.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.SkipToContentLink = 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/skip-to-content.css");
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
@@ -20,9 +43,9 @@ require("@itwin/itwinui-css/css/skip-to-content.css");
  * <body><SkipToContentLink href='#main-content-id' /> ... </body>
  * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
  */
-exports.SkipToContentLink = react_1.default.forwardRef((props, ref) => {
+exports.SkipToContentLink = React.forwardRef((props, ref) => {
     const { children = 'Skip to main content', className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("a", { ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
+    (0, index_js_1.useTheme)();
+    return (React.createElement("a", { ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
 });
 exports.default = exports.SkipToContentLink;

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

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

package/cjs/core/SkipToContentLink/index.js

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

package/cjs/core/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/slider.css';
-import { TooltipProps } from '../Tooltip';
+import type { CommonProps } from '../utils/index.js';
+import type { TooltipProps } from '../Tooltip/index.js';
 /**
  * Determines which segments are shown with color.
  */

package/cjs/core/Slider/Slider.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,17 +32,17 @@ exports.Slider = 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/slider.css");
-const Track_1 = require("./Track");
-const Thumb_1 = require("./Thumb");
+const Track_js_1 = require("./Track.js");
+const Thumb_js_1 = require("./Thumb.js");
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
     if (orientation === 'horizontal') {
-        const position = (0, utils_1.getBoundedValue)(pointerX, rect.left, rect.right);
+        const position = (0, index_js_1.getBoundedValue)(pointerX, rect.left, rect.right);
         return (position - rect.left) / rect.width;
     }
-    const position = (0, utils_1.getBoundedValue)(pointerY, rect.top, rect.bottom);
+    const position = (0, index_js_1.getBoundedValue)(pointerY, rect.top, rect.bottom);
     return (rect.bottom - position) / rect.height;
 };
 const getClosestValueIndex = (values, pointerValue) => {
@@ -65,38 +88,38 @@ const focusThumb = (sliderContainer, activeIndex) => {
  * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
  *   thumbMode='allow-crossing' />
  */
-exports.Slider = react_1.default.forwardRef((props, ref) => {
+exports.Slider = React.forwardRef((props, ref) => {
     var _a, _b;
     const { min = 0, max = 100, values, step = 1, setFocus = false, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, railContainerProps, orientation = 'horizontal', ...rest } = props;
-    const [currentValues, setCurrentValues] = react_1.default.useState(values);
-    react_1.default.useEffect(() => {
+    const [currentValues, setCurrentValues] = React.useState(values);
+    React.useEffect(() => {
         setCurrentValues(values);
     }, [values]);
-    const [minValueLabel, setMinValueLabel] = react_1.default.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
-    react_1.default.useEffect(() => {
+    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+    React.useEffect(() => {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    const [maxValueLabel, setMaxValueLabel] = react_1.default.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
-    react_1.default.useEffect(() => {
+    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+    React.useEffect(() => {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    const [trackDisplay, setTrackDisplay] = react_1.default.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
-    react_1.default.useEffect(() => {
+    const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
+    React.useEffect(() => {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
-    (0, utils_1.useTheme)();
-    const containerRef = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
+    (0, index_js_1.useTheme)();
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
         if (containerRef.current && setFocus) {
             focusThumb(containerRef.current, 0);
         }
     }, [setFocus]);
-    const getNumDecimalPlaces = react_1.default.useMemo(() => {
+    const getNumDecimalPlaces = React.useMemo(() => {
         const stepString = step.toString();
         const decimalIndex = stepString.indexOf('.');
         return stepString.length - (decimalIndex + 1);
     }, [step]);
-    const getAllowableThumbRange = react_1.default.useCallback((index) => {
+    const getAllowableThumbRange = React.useCallback((index) => {
         if (thumbMode === 'inhibit-crossing') {
             const minVal = index === 0 ? min : currentValues[index - 1] + step;
             const maxVal = index < currentValues.length - 1
@@ -106,14 +129,14 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
         }
         return [min, max];
     }, [max, min, step, thumbMode, currentValues]);
-    const [activeThumbIndex, setActiveThumbIndex] = react_1.default.useState(undefined);
-    const updateThumbValue = react_1.default.useCallback((event, callbackType) => {
+    const [activeThumbIndex, setActiveThumbIndex] = React.useState(undefined);
+    const updateThumbValue = React.useCallback((event, callbackType) => {
         if (containerRef.current && undefined !== activeThumbIndex) {
             const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             let pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             const [minVal, maxVal] = getAllowableThumbRange(activeThumbIndex);
-            pointerValue = (0, utils_1.getBoundedValue)(pointerValue, minVal, maxVal);
+            pointerValue = (0, index_js_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
                 const newValues = [...currentValues];
                 newValues[activeThumbIndex] = pointerValue;
@@ -137,7 +160,7 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
         onChange,
         orientation,
     ]);
-    const handlePointerMove = react_1.default.useCallback((event) => {
+    const handlePointerMove = React.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -146,7 +169,7 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
         updateThumbValue(event, 'onUpdate');
     }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
-    const onThumbValueChanged = react_1.default.useCallback((index, value, keyboardReleased) => {
+    const onThumbValueChanged = React.useCallback((index, value, keyboardReleased) => {
         if (currentValues[index] === value && !keyboardReleased) {
             return;
         }
@@ -160,10 +183,10 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
             setCurrentValues(newValues);
         }
     }, [currentValues, onUpdate, onChange]);
-    const onThumbActivated = react_1.default.useCallback((index) => {
+    const onThumbActivated = React.useCallback((index) => {
         setActiveThumbIndex(index);
     }, []);
-    const handlePointerUp = react_1.default.useCallback((event) => {
+    const handlePointerUp = React.useCallback((event) => {
         if (activeThumbIndex === undefined) {
             return;
         }
@@ -172,14 +195,14 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
         event.preventDefault();
         event.stopPropagation();
     }, [activeThumbIndex, updateThumbValue]);
-    const handlePointerDownOnSlider = react_1.default.useCallback((event) => {
+    const handlePointerDownOnSlider = React.useCallback((event) => {
         if (containerRef.current) {
             const percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             let pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             const closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
             const [minVal, maxVal] = getAllowableThumbRange(closestValueIndex);
-            pointerValue = (0, utils_1.getBoundedValue)(pointerValue, minVal, maxVal);
+            pointerValue = (0, index_js_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue === currentValues[closestValueIndex]) {
                 return;
             }
@@ -202,18 +225,18 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
         onUpdate,
         orientation,
     ]);
-    (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    const tickMarkArea = react_1.default.useMemo(() => {
+    (0, index_js_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    (0, index_js_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    const tickMarkArea = React.useMemo(() => {
         if (!tickLabels) {
             return null;
         }
         if (Array.isArray(tickLabels)) {
-            return (react_1.default.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (react_1.default.createElement("span", { key: index, className: 'iui-slider-tick' }, label)))));
+            return (React.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement("span", { key: index, className: 'iui-slider-tick' }, label)))));
         }
         return tickLabels;
     }, [tickLabels]);
-    const generateTooltipProps = react_1.default.useCallback((index, val) => {
+    const generateTooltipProps = React.useCallback((index, val) => {
         const outProps = tooltipProps
             ? tooltipProps(index, val, step)
             : {};
@@ -224,20 +247,20 @@ exports.Slider = react_1.default.forwardRef((props, ref) => {
                 : formatNumberValue(val, step, getNumDecimalPlaces),
         };
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
-        minValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
-        react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
+    return (React.createElement("div", { ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
+        minValueLabel && (React.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
+        React.createElement("div", { ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
             }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
-            react_1.default.createElement("div", { className: 'iui-slider-rail' }),
+            React.createElement("div", { className: 'iui-slider-rail' }),
             currentValues.map((thumbValue, index) => {
                 var _a;
                 const [minVal, maxVal] = getAllowableThumbRange(index);
                 const thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
-                return (react_1.default.createElement(Thumb_1.Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
+                return (React.createElement(Thumb_js_1.Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
             }),
-            react_1.default.createElement(Track_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
+            React.createElement(Track_js_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
-        maxValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
+        maxValueLabel && (React.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
 });
 exports.default = exports.Slider;

package/cjs/core/Slider/Thumb.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { TooltipProps } from '../Tooltip';
-import { SliderProps } from './Slider';
+import * as React from 'react';
+import type { TooltipProps } from '../Tooltip/index.js';
+import type { SliderProps } from './Slider.js';
 export declare type ThumbProps = {
     /**
      * Thumb value.

package/cjs/core/Slider/Thumb.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.Thumb = 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 Tooltip_1 = require("../Tooltip");
+const index_js_1 = require("../Tooltip/index.js");
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
@@ -18,8 +41,8 @@ const Tooltip_1 = require("../Tooltip");
  */
 const Thumb = (props) => {
     const { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled, orientation, } = props;
-    const thumbRef = react_1.default.useRef(null);
-    const handleOnKeyboardEvent = react_1.default.useCallback((event, keyboardReleased) => {
+    const thumbRef = React.useRef(null);
+    const handleOnKeyboardEvent = React.useCallback((event, keyboardReleased) => {
         if (disabled || event.altKey) {
             return;
         }
@@ -43,10 +66,10 @@ const Thumb = (props) => {
         }
         event.preventDefault();
     }, [disabled, onThumbValueChanged, index, value, step, minVal, maxVal]);
-    const handlePointerDownOnThumb = react_1.default.useCallback(() => {
+    const handlePointerDownOnThumb = React.useCallback(() => {
         !disabled && onThumbActivated(index);
     }, [disabled, index, onThumbActivated]);
-    const adjustedValue = react_1.default.useMemo(() => {
+    const adjustedValue = React.useMemo(() => {
         if (value < sliderMin) {
             return sliderMin;
         }
@@ -55,15 +78,15 @@ const Thumb = (props) => {
         }
         return value;
     }, [sliderMax, sliderMin, value]);
-    const lowPercent = react_1.default.useMemo(() => {
+    const lowPercent = React.useMemo(() => {
         if (sliderMax === sliderMin) {
             return 0;
         }
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
-        react_1.default.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
+    return (React.createElement(index_js_1.Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
+        React.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'
                     ? { left: `${lowPercent}%` }

package/cjs/core/Slider/Track.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SliderProps, TrackDisplayMode } from './Slider';
+import type { SliderProps, TrackDisplayMode } from './Slider.js';
 export declare type TrackProps = {
     trackDisplayMode: TrackDisplayMode;
     sliderMin: number;

package/cjs/core/Slider/Track.js

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.Track = void 0;
@@ -8,7 +28,7 @@ exports.Track = 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"));
 function shouldDisplaySegment(segmentIndex, mode) {
     if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
         return true;
@@ -42,11 +62,11 @@ function generateSegments(values, min, max) {
  */
 const Track = (props) => {
     const { trackDisplayMode, sliderMin, sliderMax, values, orientation } = props;
-    const [segments, setSegments] = react_1.default.useState(() => generateSegments(values, sliderMin, sliderMax));
-    react_1.default.useEffect(() => {
+    const [segments, setSegments] = React.useState(() => generateSegments(values, sliderMin, sliderMax));
+    React.useEffect(() => {
         setSegments(generateSegments(values, sliderMin, sliderMax));
     }, [values, sliderMin, sliderMax]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, 'none' !== trackDisplayMode &&
+    return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map((segment, index) => {
             const lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
                 ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
@@ -55,7 +75,7 @@ const Track = (props) => {
                 ? 100.0 -
                     (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
                 : 100;
-            return (react_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: {
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: {
                     ...(orientation === 'horizontal'
                         ? {
                             left: `${lowPercent}%`,

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

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

package/cjs/core/Slider/index.js

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

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.