@itwin/itwinui-react 2.10.1 → 2.11.1

package/cjs/core/ColorPicker/ColorInputPanel.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,12 +31,12 @@ exports.ColorInputPanel = 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 Buttons_1 = require("../Buttons");
-const Input_1 = require("../Input");
-const utils_1 = require("../utils");
-const ColorPickerContext_1 = require("./ColorPickerContext");
+const index_js_1 = require("../Buttons/index.js");
+const index_js_2 = require("../Input/index.js");
+const index_js_3 = require("../utils/index.js");
+const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -24,27 +47,27 @@ require("@itwin/itwinui-css/css/color-picker.css");
  *   <ColorInputPanel defaultColorFormat='hsl' />
  * </ColorPicker>
  */
-exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
+exports.ColorInputPanel = React.forwardRef((props, ref) => {
     var _a, _b, _c, _d, _f, _g, _h, _j;
     const { defaultColorFormat, allowedColorFormats = ['hsl', 'rgb', 'hex'], className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const inputsContainerRef = react_1.default.useRef(null);
-    const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = (0, ColorPickerContext_1.useColorPickerContext)();
-    const [currentFormat, setCurrentFormat] = react_1.default.useState(defaultColorFormat);
-    react_1.default.useEffect(() => {
+    (0, index_js_3.useTheme)();
+    const inputsContainerRef = React.useRef(null);
+    const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = (0, ColorPickerContext_js_1.useColorPickerContext)();
+    const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
+    React.useEffect(() => {
         setCurrentFormat(defaultColorFormat);
     }, [defaultColorFormat]);
     // need to use state since input may have parsing error
-    const [input, setInput] = react_1.default.useState(['', '', '', '']);
-    react_1.default.useEffect(() => {
+    const [input, setInput] = React.useState(['', '', '', '']);
+    React.useEffect(() => {
         var _a, _b;
         if (currentFormat === 'hsl') {
             const hsl = activeColor.toHslColor();
             setInput([
-                utils_1.ColorValue.getFormattedColorNumber(hsvColor.h),
-                utils_1.ColorValue.getFormattedColorNumber(hsl.s),
-                utils_1.ColorValue.getFormattedColorNumber(hsl.l),
-                utils_1.ColorValue.getFormattedColorNumber((_a = hsl.a) !== null && _a !== void 0 ? _a : activeColor.getAlpha() / 255, 2),
+                index_js_3.ColorValue.getFormattedColorNumber(hsvColor.h),
+                index_js_3.ColorValue.getFormattedColorNumber(hsl.s),
+                index_js_3.ColorValue.getFormattedColorNumber(hsl.l),
+                index_js_3.ColorValue.getFormattedColorNumber((_a = hsl.a) !== null && _a !== void 0 ? _a : activeColor.getAlpha() / 255, 2),
             ]);
         }
         else if (currentFormat === 'rgb') {
@@ -53,7 +76,7 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                 rgb.r.toString(),
                 rgb.g.toString(),
                 rgb.b.toString(),
-                utils_1.ColorValue.getFormattedColorNumber((_b = rgb.a) !== null && _b !== void 0 ? _b : activeColor.getAlpha() / 255, 2),
+                index_js_3.ColorValue.getFormattedColorNumber((_b = rgb.a) !== null && _b !== void 0 ? _b : activeColor.getAlpha() / 255, 2),
             ]);
         }
         else {
@@ -61,8 +84,8 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
             setValidHexInput(true);
         }
     }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-    const [validHexInput, setValidHexInput] = react_1.default.useState(true);
-    const swapColorFormat = react_1.default.useCallback(() => {
+    const [validHexInput, setValidHexInput] = React.useState(true);
+    const swapColorFormat = React.useCallback(() => {
         var _a;
         const newFormat = (_a = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
             allowedColorFormats.length]) !== null && _a !== void 0 ? _a : allowedColorFormats[0];
@@ -76,7 +99,7 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
         if (currentFormat === 'hex') {
             try {
                 const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-                color = utils_1.ColorValue.create(value);
+                color = index_js_3.ColorValue.create(value);
                 setValidHexInput(true);
                 if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
                     return;
@@ -103,7 +126,7 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
             if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
                 return;
             }
-            color = utils_1.ColorValue.create({ h, s, l, a });
+            color = index_js_3.ColorValue.create({ h, s, l, a });
         }
         if (currentFormat === 'rgb') {
             const [r, g, b, a] = input.map(Number);
@@ -121,14 +144,14 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
             if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
                 return;
             }
-            color = utils_1.ColorValue.create({ r, g, b, a });
+            color = index_js_3.ColorValue.create({ r, g, b, a });
         }
         if (color) {
             applyHsvColorChange(color.toHsvColor(), true, color);
         }
     };
-    const hexInputField = (react_1.default.createElement(utils_1.InputContainer, { status: validHexInput ? undefined : 'negative' },
-        react_1.default.createElement(Input_1.Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', value: input[0], onChange: (event) => {
+    const hexInputField = (React.createElement(index_js_3.InputContainer, { status: validHexInput ? undefined : 'negative' },
+        React.createElement(index_js_2.Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', value: input[0], onChange: (event) => {
                 const value = event.target.value.startsWith('#')
                     ? event.target.value
                     : `#${event.target.value}`;
@@ -142,11 +165,11 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                 event.preventDefault();
                 handleColorInputChange();
             } })));
-    const hslInputs = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 360
+    const hslInputs = (React.createElement(React.Fragment, null,
+        React.createElement(index_js_3.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 360
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '359', step: '.1', placeholder: 'H', value: (_a = input[0]) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '359', step: '.1', placeholder: 'H', value: (_a = input[0]) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -159,10 +182,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 100
+        React.createElement(index_js_3.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 100
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'S', value: (_b = input[1]) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'S', value: (_b = input[1]) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -175,10 +198,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 100
+        React.createElement(index_js_3.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 100
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'L', value: (_c = input[2]) !== null && _c !== void 0 ? _c : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'L', value: (_c = input[2]) !== null && _c !== void 0 ? _c : '', onChange: (event) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -191,10 +214,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        showAlpha && (react_1.default.createElement(utils_1.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
+        showAlpha && (React.createElement(index_js_3.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_d = input[3]) !== null && _d !== void 0 ? _d : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_d = input[3]) !== null && _d !== void 0 ? _d : '', onChange: (event) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -207,11 +230,11 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })))));
-    const rgbInputs = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 255
+    const rgbInputs = (React.createElement(React.Fragment, null,
+        React.createElement(index_js_3.InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 255
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: (_f = input[0]) !== null && _f !== void 0 ? _f : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: (_f = input[0]) !== null && _f !== void 0 ? _f : '', onChange: (event) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -224,10 +247,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 255
+        React.createElement(index_js_3.InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 255
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: (_g = input[1]) !== null && _g !== void 0 ? _g : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: (_g = input[1]) !== null && _g !== void 0 ? _g : '', onChange: (event) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -240,10 +263,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        react_1.default.createElement(utils_1.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 255
+        React.createElement(index_js_3.InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 255
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: (_h = input[2]) !== null && _h !== void 0 ? _h : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: (_h = input[2]) !== null && _h !== void 0 ? _h : '', onChange: (event) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -256,10 +279,10 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })),
-        showAlpha && (react_1.default.createElement(utils_1.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
+        showAlpha && (React.createElement(index_js_3.InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            react_1.default.createElement(Input_1.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_j = input[3]) !== null && _j !== void 0 ? _j : '', onChange: (event) => {
+            React.createElement(index_js_2.Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_j = input[3]) !== null && _j !== void 0 ? _j : '', onChange: (event) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
                 }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
@@ -272,14 +295,14 @@ exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
                         handleColorInputChange();
                     }
                 } })))));
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-input-wrapper', className), ref: ref, ...rest },
-        react_1.default.createElement("div", { className: 'iui-color-picker-section-label' }, showAlpha && currentFormat != 'hex'
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-color-input-wrapper', className), ref: ref, ...rest },
+        React.createElement("div", { className: 'iui-color-picker-section-label' }, showAlpha && currentFormat != 'hex'
             ? currentFormat.toUpperCase() + 'A'
             : currentFormat.toUpperCase()),
-        react_1.default.createElement("div", { className: 'iui-color-input' },
-            allowedColorFormats.length > 1 && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-                react_1.default.createElement(utils_1.SvgSwap, null))),
-            react_1.default.createElement("div", { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        React.createElement("div", { className: 'iui-color-input' },
+            allowedColorFormats.length > 1 && (React.createElement(index_js_1.IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
+                React.createElement(index_js_3.SvgSwap, null))),
+            React.createElement("div", { ref: inputsContainerRef, className: 'iui-color-input-fields' },
                 currentFormat === 'hex' && hexInputField,
                 currentFormat === 'rgb' && rgbInputs,
                 currentFormat === 'hsl' && hslInputs))));

package/cjs/core/ColorPicker/ColorPalette.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { ColorType, ColorValue, CommonProps } from '../utils';
+import * as React from 'react';
+import { ColorValue } from '../utils/index.js';
+import type { CommonProps, ColorType } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**

package/cjs/core/ColorPicker/ColorPalette.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,12 +31,12 @@ exports.ColorPalette = 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 ColorPicker_1 = require("./ColorPicker");
-const ColorSwatch_1 = require("./ColorSwatch");
-const ColorPickerContext_1 = require("./ColorPickerContext");
+const index_js_1 = require("../utils/index.js");
+const ColorPicker_js_1 = require("./ColorPicker.js");
+const ColorSwatch_js_1 = require("./ColorSwatch.js");
+const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
@@ -26,11 +49,11 @@ require("@itwin/itwinui-css/css/color-picker.css");
  *   // ...
  * </ColorPalette>
  */
-exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
+exports.ColorPalette = React.forwardRef((props, ref) => {
     const { colors, label, className, children, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const { activeColor, setActiveColor, onChangeComplete } = (0, ColorPickerContext_1.useColorPickerContext)();
-    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
+    (0, index_js_1.useTheme)();
+    const { activeColor, setActiveColor, onChangeComplete } = (0, ColorPickerContext_js_1.useColorPickerContext)();
+    const [focusedIndex, setFocusedIndex] = React.useState();
     // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
     const setDefaultTabIndex = (el) => {
         var _a;
@@ -38,14 +61,14 @@ exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
             (_a = el.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
         }
     };
-    const paletteRef = react_1.default.useRef(null);
-    const paletteRefs = (0, utils_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
+    const paletteRef = React.useRef(null);
+    const paletteRefs = (0, index_js_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
     // Color palette arrow key navigation
     const handleKeyDown = (event) => {
         if (event.altKey) {
             return;
         }
-        const swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
+        const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
         if (!swatches.length) {
             return;
         }
@@ -90,21 +113,21 @@ exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
         }
     };
     // call focus() when focusedIndex changes
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         var _a;
         if (focusedIndex != null) {
-            const swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
+            const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
             (_a = swatches[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-palette-wrapper', className), ref: ref, ...rest },
-        label && react_1.default.createElement("div", { className: 'iui-color-picker-section-label' }, label),
-        react_1.default.createElement("div", { className: 'iui-color-palette', onKeyDown: handleKeyDown, ref: paletteRefs },
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-color-palette-wrapper', className), ref: ref, ...rest },
+        label && React.createElement("div", { className: 'iui-color-picker-section-label' }, label),
+        React.createElement("div", { className: 'iui-color-palette', onKeyDown: handleKeyDown, ref: paletteRefs },
             children,
             colors &&
                 colors.map((_color, index) => {
-                    const color = (0, ColorPicker_1.getColorValue)(_color);
-                    return (react_1.default.createElement(ColorSwatch_1.ColorSwatch, { key: index, color: color, onClick: (event) => {
+                    const color = (0, ColorPicker_js_1.getColorValue)(_color);
+                    return (React.createElement(ColorSwatch_js_1.ColorSwatch, { key: index, color: color, onClick: (event) => {
                             event.preventDefault();
                             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
                             setActiveColor(color);

package/cjs/core/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { CommonProps, ColorType, ColorValue } from '../utils';
+import { ColorValue } from '../utils/index.js';
+import type { CommonProps, ColorType } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;
 export declare type ColorPickerProps = {
     /**

package/cjs/core/ColorPicker/ColorPicker.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,16 +31,16 @@ exports.ColorPicker = exports.getColorValue = 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"));
 require("@itwin/itwinui-css/css/color-picker.css");
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
-const ColorPickerContext_1 = require("./ColorPickerContext");
+const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 const getColorValue = (color) => {
-    if (color instanceof utils_1.ColorValue) {
+    if (color instanceof index_js_1.ColorValue) {
         return color;
     }
-    return utils_1.ColorValue.create(color);
+    return index_js_1.ColorValue.create(color);
 };
 exports.getColorValue = getColorValue;
 /**
@@ -35,35 +58,35 @@ exports.getColorValue = getColorValue;
  */
 const ColorPicker = (props) => {
     const { children, className, selectedColor, onChange, onChangeComplete, setFocus = false, showAlpha = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const ref = react_1.default.useRef(null);
+    (0, index_js_1.useTheme)();
+    const ref = React.useRef(null);
     // set focus on the first tabbable element
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (ref.current && setFocus) {
-            const tabbableElements = (0, utils_1.getTabbableElements)(ref.current);
+            const tabbableElements = (0, index_js_1.getTabbableElements)(ref.current);
             tabbableElements[0].focus();
         }
     }, [setFocus]);
-    const inColor = react_1.default.useMemo(() => (0, exports.getColorValue)(selectedColor), [selectedColor]);
-    const activeColorTbgr = react_1.default.useRef(inColor.toTbgr());
-    const [activeColor, setActiveColor] = react_1.default.useState(inColor); // Color of colorDot or active ColorSwatch
-    react_1.default.useEffect(() => {
+    const inColor = React.useMemo(() => (0, exports.getColorValue)(selectedColor), [selectedColor]);
+    const activeColorTbgr = React.useRef(inColor.toTbgr());
+    const [activeColor, setActiveColor] = React.useState(inColor); // Color of colorDot or active ColorSwatch
+    React.useEffect(() => {
         setActiveColor(inColor);
     }, [inColor]);
-    const [hsvColor, setHsvColor] = react_1.default.useState(() => activeColor.toHsvColor());
+    const [hsvColor, setHsvColor] = React.useState(() => activeColor.toHsvColor());
     // The following code is used to preserve the Hue after initial mount. If the current HSV value produces the same rgb value
     // as the selectedColor prop then leave the HSV color unchanged. This prevents the jumping of HUE as the s/v values are changed
     // by user moving the pointer.
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (inColor.toTbgr() !== activeColorTbgr.current) {
             activeColorTbgr.current = inColor.toTbgr();
             setHsvColor(inColor.toHsvColor());
         }
     }, [inColor]);
-    const applyHsvColorChange = react_1.default.useCallback((newColor, selectionChanged, newColorValue) => {
+    const applyHsvColorChange = React.useCallback((newColor, selectionChanged, newColorValue) => {
         // save the HSV values
         setHsvColor(newColor);
-        const newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : utils_1.ColorValue.create(newColor);
+        const newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : index_js_1.ColorValue.create(newColor);
         // Only update selected color when dragging is done
         if (selectionChanged) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newActiveColor);
@@ -75,8 +98,8 @@ const ColorPicker = (props) => {
         // this converts it to store in tbgr
         setActiveColor(newActiveColor);
     }, [onChange, onChangeComplete]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-picker', className), ref: ref, ...rest },
-        react_1.default.createElement(ColorPickerContext_1.ColorPickerContext.Provider, { value: {
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-color-picker', className), ref: ref, ...rest },
+        React.createElement(ColorPickerContext_js_1.ColorPickerContext.Provider, { value: {
                 activeColor,
                 setActiveColor,
                 hsvColor,

package/cjs/core/ColorPicker/ColorPickerContext.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ColorValue, HsvColor } from '../utils';
+import * as React from 'react';
+import type { ColorValue, HsvColor } from '../utils/index.js';
 export declare const ColorPickerContext: React.Context<{
     activeColor: ColorValue;
     setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;

package/cjs/core/ColorPicker/ColorPickerContext.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.useColorPickerContext = exports.ColorPickerContext = void 0;
@@ -8,10 +28,10 @@ exports.useColorPickerContext = exports.ColorPickerContext = 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"));
-exports.ColorPickerContext = react_1.default.createContext(undefined);
+const React = __importStar(require("react"));
+exports.ColorPickerContext = React.createContext(undefined);
 const useColorPickerContext = () => {
-    const context = react_1.default.useContext(exports.ColorPickerContext);
+    const context = React.useContext(exports.ColorPickerContext);
     if (context == undefined) {
         throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
     }

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { ColorValue, ColorType } from '../utils';
+import { ColorValue } from '../utils/index.js';
+import type { ColorType } from '../utils/index.js';
 export declare type ColorSwatchProps = {
     /**
      * Color code.

package/cjs/core/ColorPicker/ColorSwatch.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,24 +31,24 @@ exports.ColorSwatch = 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"));
 require("@itwin/itwinui-css/css/color-picker.css");
-const utils_1 = require("../utils");
-const ColorPicker_1 = require("./ColorPicker");
+const index_js_1 = require("../utils/index.js");
+const ColorPicker_js_1 = require("./ColorPicker.js");
 /**
  * ColorSwatch component to display within a color palette.
  * @example
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-exports.ColorSwatch = react_1.default.forwardRef((props, ref) => {
+exports.ColorSwatch = React.forwardRef((props, ref) => {
     const { color, style, onClick, isActive, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const colorString = react_1.default.useMemo(() => typeof color === 'string'
+    (0, index_js_1.useTheme)();
+    const colorString = React.useMemo(() => typeof color === 'string'
         ? color
-        : (0, ColorPicker_1.getColorValue)(color).toHslString(true), [color]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: {
+        : (0, ColorPicker_js_1.getColorValue)(color).toHslString(true), [color]);
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: {
             '--iui-color-swatch-background': colorString,
             ...style,
         }, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref, ...rest }));