@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,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.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var Buttons_1 = require("../Buttons");
-var Input_1 = require("../Input");
-var utils_1 = require("../utils");
-var ColorPickerContext_1 = require("./ColorPickerContext");
+const react_1 = __importDefault(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");
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -46,22 +24,22 @@ require("@itwin/itwinui-css/css/color-picker.css");
  *   <ColorInputPanel defaultColorFormat='hsl' />
  * </ColorPicker>
  */
-exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
+exports.ColorInputPanel = react_1.default.forwardRef((props, ref) => {
     var _a, _b, _c, _d, _f, _g, _h, _j;
-    var defaultColorFormat = props.defaultColorFormat, _k = props.allowedColorFormats, allowedColorFormats = _k === void 0 ? ['hsl', 'rgb', 'hex'] : _k, className = props.className, rest = __rest(props, ["defaultColorFormat", "allowedColorFormats", "className"]);
+    const { defaultColorFormat, allowedColorFormats = ['hsl', 'rgb', 'hex'], className, ...rest } = props;
     (0, utils_1.useTheme)();
-    var inputsContainerRef = react_1.default.useRef(null);
-    var _l = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _l.activeColor, applyHsvColorChange = _l.applyHsvColorChange, hsvColor = _l.hsvColor, showAlpha = _l.showAlpha;
-    var _m = react_1.default.useState(defaultColorFormat), currentFormat = _m[0], setCurrentFormat = _m[1];
-    react_1.default.useEffect(function () {
+    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(() => {
         setCurrentFormat(defaultColorFormat);
     }, [defaultColorFormat]);
     // need to use state since input may have parsing error
-    var _o = react_1.default.useState(['', '', '', '']), input = _o[0], setInput = _o[1];
-    react_1.default.useEffect(function () {
+    const [input, setInput] = react_1.default.useState(['', '', '', '']);
+    react_1.default.useEffect(() => {
         var _a, _b;
         if (currentFormat === 'hsl') {
-            var hsl = activeColor.toHslColor();
+            const hsl = activeColor.toHslColor();
             setInput([
                 utils_1.ColorValue.getFormattedColorNumber(hsvColor.h),
                 utils_1.ColorValue.getFormattedColorNumber(hsl.s),
@@ -70,7 +48,7 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
             ]);
         }
         else if (currentFormat === 'rgb') {
-            var rgb = activeColor.toRgbColor();
+            const rgb = activeColor.toRgbColor();
             setInput([
                 rgb.r.toString(),
                 rgb.g.toString(),
@@ -83,23 +61,21 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
             setValidHexInput(true);
         }
     }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-    var _p = react_1.default.useState(true), validHexInput = _p[0], setValidHexInput = _p[1];
-    var swapColorFormat = react_1.default.useCallback(function () {
+    const [validHexInput, setValidHexInput] = react_1.default.useState(true);
+    const swapColorFormat = react_1.default.useCallback(() => {
         var _a;
-        var newFormat = (_a = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
+        const newFormat = (_a = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
             allowedColorFormats.length]) !== null && _a !== void 0 ? _a : allowedColorFormats[0];
         setCurrentFormat(newFormat);
     }, [currentFormat, allowedColorFormats]);
-    var isFocusInside = function (focused) {
-        return !!(focused &&
-            inputsContainerRef.current &&
-            inputsContainerRef.current.contains(focused));
-    };
-    var handleColorInputChange = function () {
-        var color;
+    const isFocusInside = (focused) => !!(focused &&
+        inputsContainerRef.current &&
+        inputsContainerRef.current.contains(focused));
+    const handleColorInputChange = () => {
+        let color;
         if (currentFormat === 'hex') {
             try {
-                var value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
+                const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
                 color = utils_1.ColorValue.create(value);
                 setValidHexInput(true);
                 if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
@@ -112,7 +88,7 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
             }
         }
         if (currentFormat === 'hsl') {
-            var _a = input.map(Number), h = _a[0], s = _a[1], l = _a[2], a = _a[3];
+            const [h, s, l, a] = input.map(Number);
             if (h < 0 ||
                 h > 360 ||
                 s < 0 ||
@@ -123,14 +99,14 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
                 a > 1) {
                 return;
             }
-            var hsl = activeColor.toHslColor();
+            const hsl = activeColor.toHslColor();
             if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
                 return;
             }
-            color = utils_1.ColorValue.create({ h: h, s: s, l: l, a: a });
+            color = utils_1.ColorValue.create({ h, s, l, a });
         }
         if (currentFormat === 'rgb') {
-            var _b = input.map(Number), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
+            const [r, g, b, a] = input.map(Number);
             if (r < 0 ||
                 r > 255 ||
                 g < 0 ||
@@ -141,43 +117,43 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
                 a > 1) {
                 return;
             }
-            var rgb = activeColor.toRgbColor();
+            const rgb = activeColor.toRgbColor();
             if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
                 return;
             }
-            color = utils_1.ColorValue.create({ r: r, g: g, b: b, a: a });
+            color = utils_1.ColorValue.create({ r, g, b, a });
         }
         if (color) {
             applyHsvColorChange(color.toHsvColor(), true, color);
         }
     };
-    var 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: function (event) {
-                var value = event.target.value.startsWith('#')
+    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 value = event.target.value.startsWith('#')
                     ? event.target.value
-                    : "#".concat(event.target.value);
+                    : `#${event.target.value}`;
                 setInput([value]);
-            }, onKeyDown: function (event) {
+            }, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     event.preventDefault();
                     handleColorInputChange();
                 }
-            }, onBlur: function (event) {
+            }, onBlur: (event) => {
                 event.preventDefault();
                 handleColorInputChange();
             } })));
-    var hslInputs = (react_1.default.createElement(react_1.default.Fragment, null,
+    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
                 ? '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: function (event) {
+            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) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -186,14 +162,14 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -202,14 +178,14 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -218,31 +194,31 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         showAlpha && (react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
                     }
                 } })))));
-    var rgbInputs = (react_1.default.createElement(react_1.default.Fragment, null,
+    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
                 ? '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: function (event) {
+            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) => {
                     setInput([event.target.value, input[1], input[2], input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -251,14 +227,14 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], event.target.value, input[2], input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -267,14 +243,14 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], input[1], event.target.value, input[3]]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
@@ -283,20 +259,20 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
         showAlpha && (react_1.default.createElement(utils_1.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: function (event) {
+            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) => {
                     setInput([input[0], input[1], input[2], event.target.value]);
-                }, onKeyDown: function (event) {
+                }, onKeyDown: (event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         handleColorInputChange();
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     event.preventDefault();
                     if (!isFocusInside(event.relatedTarget)) {
                         handleColorInputChange();
                     }
                 } })))));
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-input-wrapper', className), ref: ref }, rest),
+    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'
             ? currentFormat.toUpperCase() + 'A'
             : currentFormat.toUpperCase()),

package/cjs/core/ColorPicker/ColorPalette.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,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.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
-var ColorPicker_1 = require("./ColorPicker");
-var ColorSwatch_1 = require("./ColorSwatch");
-var ColorPickerContext_1 = require("./ColorPickerContext");
+const react_1 = __importDefault(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");
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
@@ -48,43 +26,41 @@ require("@itwin/itwinui-css/css/color-picker.css");
  *   // ...
  * </ColorPalette>
  */
-exports.ColorPalette = react_1.default.forwardRef(function (props, ref) {
-    var colors = props.colors, label = props.label, className = props.className, children = props.children, rest = __rest(props, ["colors", "label", "className", "children"]);
+exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
+    const { colors, label, className, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _a = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _a.activeColor, setActiveColor = _a.setActiveColor, onChangeComplete = _a.onChangeComplete;
-    var _b = react_1.default.useState(), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    const { activeColor, setActiveColor, onChangeComplete, } = (0, ColorPickerContext_1.useColorPickerContext)();
+    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
     // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
-    var setDefaultTabIndex = function (el) {
+    const setDefaultTabIndex = (el) => {
         var _a;
         if (el && !el.querySelector('[tabindex="0"]')) {
             (_a = el.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
         }
     };
-    var paletteRef = react_1.default.useRef(null);
-    var paletteRefs = (0, utils_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
+    const paletteRef = react_1.default.useRef(null);
+    const paletteRefs = (0, utils_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
     // Color palette arrow key navigation
-    var handleKeyDown = function (event) {
-        var swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
+    const handleKeyDown = (event) => {
+        const swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
         if (!swatches.length) {
             return;
         }
-        var currentIndex = swatches.findIndex(function (swatch) { var _a; return swatch === ((_a = paletteRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
+        const currentIndex = swatches.findIndex((swatch) => { var _a; return swatch === ((_a = paletteRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
         if (currentIndex < 0) {
             return;
         }
-        var newIndex = -1;
+        let newIndex = -1;
         switch (event.key) {
             case 'ArrowDown': {
                 // Look for next ColorSwatch with same offsetLeft value
-                newIndex = swatches.findIndex(function (swatch, index) {
-                    return index > currentIndex &&
-                        swatch.offsetLeft === swatches[currentIndex].offsetLeft;
-                });
+                newIndex = swatches.findIndex((swatch, index) => index > currentIndex &&
+                    swatch.offsetLeft === swatches[currentIndex].offsetLeft);
                 break;
             }
             case 'ArrowUp': {
                 // Look backwards for next ColorSwatch with same offsetLeft value
-                for (var i = currentIndex - 1; i >= 0; i--) {
+                for (let i = currentIndex - 1; i >= 0; i--) {
                     if (swatches[i].offsetLeft === swatches[currentIndex].offsetLeft) {
                         newIndex = i;
                         break;
@@ -111,21 +87,21 @@ exports.ColorPalette = react_1.default.forwardRef(function (props, ref) {
         }
     };
     // call focus() when focusedIndex changes
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         var _a;
         if (focusedIndex != null) {
-            var swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
+            const swatches = (0, utils_1.getFocusableElements)(paletteRef.current);
             (_a = swatches[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-palette-wrapper', className), ref: ref }, rest),
+    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 },
             children,
             colors &&
-                colors.map(function (_color, index) {
-                    var color = (0, ColorPicker_1.getColorValue)(_color);
-                    return (react_1.default.createElement(ColorSwatch_1.ColorSwatch, { key: index, color: color, onClick: function (event) {
+                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) => {
                             event.preventDefault();
                             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
                             setActiveColor(color);

package/cjs/core/ColorPicker/ColorPicker.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,12 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 require("@itwin/itwinui-css/css/color-picker.css");
-var utils_1 = require("../utils");
-var classnames_1 = __importDefault(require("classnames"));
-var ColorPickerContext_1 = require("./ColorPickerContext");
-var getColorValue = function (color) {
+const utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const ColorPickerContext_1 = require("./ColorPickerContext");
+const getColorValue = (color) => {
     if (color instanceof utils_1.ColorValue) {
         return color;
     }
@@ -55,41 +33,39 @@ exports.getColorValue = getColorValue;
  *   <ColorPalette label='Saved colors' colors={['#FFFFFF', '#5A6973']} />
  * </ColorPicker>
  */
-var ColorPicker = function (props) {
-    var children = props.children, className = props.className, selectedColor = props.selectedColor, onChange = props.onChange, onChangeComplete = props.onChangeComplete, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, _b = props.showAlpha, showAlpha = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "selectedColor", "onChange", "onChangeComplete", "setFocus", "showAlpha"]);
+const ColorPicker = (props) => {
+    const { children, className, selectedColor, onChange, onChangeComplete, setFocus = false, showAlpha = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var ref = react_1.default.useRef(null);
+    const ref = react_1.default.useRef(null);
     // set focus on the first tabbable element
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (ref.current && setFocus) {
-            var tabbableElements = (0, utils_1.getTabbableElements)(ref.current);
+            const tabbableElements = (0, utils_1.getTabbableElements)(ref.current);
             tabbableElements[0].focus();
         }
     }, [setFocus]);
-    var inColor = react_1.default.useMemo(function () { return (0, exports.getColorValue)(selectedColor); }, [
+    const inColor = react_1.default.useMemo(() => (0, exports.getColorValue)(selectedColor), [
         selectedColor,
     ]);
-    var activeColorTbgr = react_1.default.useRef(inColor.toTbgr());
-    var _c = react_1.default.useState(inColor), activeColor = _c[0], setActiveColor = _c[1]; // Color of colorDot or active ColorSwatch
-    react_1.default.useEffect(function () {
+    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(() => {
         setActiveColor(inColor);
     }, [inColor]);
-    var _d = react_1.default.useState(function () {
-        return activeColor.toHsvColor();
-    }), hsvColor = _d[0], setHsvColor = _d[1];
+    const [hsvColor, setHsvColor] = react_1.default.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(function () {
+    react_1.default.useEffect(() => {
         if (inColor.toTbgr() !== activeColorTbgr.current) {
             activeColorTbgr.current = inColor.toTbgr();
             setHsvColor(inColor.toHsvColor());
         }
     }, [inColor]);
-    var applyHsvColorChange = react_1.default.useCallback(function (newColor, selectionChanged, newColorValue) {
+    const applyHsvColorChange = react_1.default.useCallback((newColor, selectionChanged, newColorValue) => {
         // save the HSV values
         setHsvColor(newColor);
-        var newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : utils_1.ColorValue.create(newColor);
+        const newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : utils_1.ColorValue.create(newColor);
         // Only update selected color when dragging is done
         if (selectionChanged) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newActiveColor);
@@ -101,14 +77,14 @@ var ColorPicker = function (props) {
         // this converts it to store in tbgr
         setActiveColor(newActiveColor);
     }, [onChange, onChangeComplete]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-picker', className), ref: ref }, rest),
+    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: {
-                activeColor: activeColor,
-                setActiveColor: setActiveColor,
-                hsvColor: hsvColor,
-                applyHsvColorChange: applyHsvColorChange,
-                onChangeComplete: onChangeComplete,
-                showAlpha: showAlpha,
+                activeColor,
+                setActiveColor,
+                hsvColor,
+                applyHsvColorChange,
+                onChangeComplete,
+                showAlpha,
             } }, children)));
 };
 exports.ColorPicker = ColorPicker;

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -8,10 +8,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.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 exports.ColorPickerContext = react_1.default.createContext(undefined);
-var useColorPickerContext = function () {
-    var context = react_1.default.useContext(exports.ColorPickerContext);
+const useColorPickerContext = () => {
+    const context = react_1.default.useContext(exports.ColorPickerContext);
     if (context == undefined) {
         throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
     }