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

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -40,22 +18,22 @@ import '@itwin/itwinui-css/css/color-picker.css';
  *   <ColorInputPanel defaultColorFormat='hsl' />
  * </ColorPicker>
  */
-export var ColorInputPanel = React.forwardRef(function (props, ref) {
+export const ColorInputPanel = React.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;
     useTheme();
-    var inputsContainerRef = React.useRef(null);
-    var _l = useColorPickerContext(), activeColor = _l.activeColor, applyHsvColorChange = _l.applyHsvColorChange, hsvColor = _l.hsvColor, showAlpha = _l.showAlpha;
-    var _m = React.useState(defaultColorFormat), currentFormat = _m[0], setCurrentFormat = _m[1];
-    React.useEffect(function () {
+    const inputsContainerRef = React.useRef(null);
+    const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = useColorPickerContext();
+    const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
+    React.useEffect(() => {
         setCurrentFormat(defaultColorFormat);
     }, [defaultColorFormat]);
     // need to use state since input may have parsing error
-    var _o = React.useState(['', '', '', '']), input = _o[0], setInput = _o[1];
-    React.useEffect(function () {
+    const [input, setInput] = React.useState(['', '', '', '']);
+    React.useEffect(() => {
         var _a, _b;
         if (currentFormat === 'hsl') {
-            var hsl = activeColor.toHslColor();
+            const hsl = activeColor.toHslColor();
             setInput([
                 ColorValue.getFormattedColorNumber(hsvColor.h),
                 ColorValue.getFormattedColorNumber(hsl.s),
@@ -64,7 +42,7 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
             ]);
         }
         else if (currentFormat === 'rgb') {
-            var rgb = activeColor.toRgbColor();
+            const rgb = activeColor.toRgbColor();
             setInput([
                 rgb.r.toString(),
                 rgb.g.toString(),
@@ -77,23 +55,21 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
             setValidHexInput(true);
         }
     }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-    var _p = React.useState(true), validHexInput = _p[0], setValidHexInput = _p[1];
-    var swapColorFormat = React.useCallback(function () {
+    const [validHexInput, setValidHexInput] = React.useState(true);
+    const swapColorFormat = React.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 = ColorValue.create(value);
                 setValidHexInput(true);
                 if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
@@ -106,7 +82,7 @@ export var ColorInputPanel = React.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 ||
@@ -117,14 +93,14 @@ export var ColorInputPanel = React.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 = ColorValue.create({ h: h, s: s, l: l, a: a });
+            color = 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 ||
@@ -135,43 +111,43 @@ export var ColorInputPanel = React.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 = ColorValue.create({ r: r, g: g, b: b, a: a });
+            color = ColorValue.create({ r, g, b, a });
         }
         if (color) {
             applyHsvColorChange(color.toHsvColor(), true, color);
         }
     };
-    var hexInputField = (React.createElement(InputContainer, { status: validHexInput ? undefined : 'negative' },
-        React.createElement(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.createElement(InputContainer, { status: validHexInput ? undefined : 'negative' },
+        React.createElement(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.createElement(React.Fragment, null,
+    const hslInputs = (React.createElement(React.Fragment, null,
         React.createElement(InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 360
                 ? 'negative'
                 : undefined },
-            React.createElement(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.createElement(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();
@@ -180,14 +156,14 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 100
                 ? 'negative'
                 : undefined },
-            React.createElement(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.createElement(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();
@@ -196,14 +172,14 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 100
                 ? 'negative'
                 : undefined },
-            React.createElement(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.createElement(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();
@@ -212,31 +188,31 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         showAlpha && (React.createElement(InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            React.createElement(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.createElement(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.createElement(React.Fragment, null,
+    const rgbInputs = (React.createElement(React.Fragment, null,
         React.createElement(InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: (_f = input[0]) !== null && _f !== void 0 ? _f : '', onChange: function (event) {
+            React.createElement(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();
@@ -245,14 +221,14 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: (_g = input[1]) !== null && _g !== void 0 ? _g : '', onChange: function (event) {
+            React.createElement(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();
@@ -261,14 +237,14 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 255
                 ? 'negative'
                 : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: (_h = input[2]) !== null && _h !== void 0 ? _h : '', onChange: function (event) {
+            React.createElement(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();
@@ -277,20 +253,20 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         showAlpha && (React.createElement(InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
                 ? 'negative'
                 : undefined },
-            React.createElement(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.createElement(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.createElement("div", __assign({ className: cx('iui-color-input-wrapper', className), ref: ref }, rest),
+    return (React.createElement("div", { className: cx('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()),

package/esm/core/ColorPicker/ColorPalette.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -42,43 +20,41 @@ import '@itwin/itwinui-css/css/color-picker.css';
  *   // ...
  * </ColorPalette>
  */
-export var ColorPalette = React.forwardRef(function (props, ref) {
-    var colors = props.colors, label = props.label, className = props.className, children = props.children, rest = __rest(props, ["colors", "label", "className", "children"]);
+export const ColorPalette = React.forwardRef((props, ref) => {
+    const { colors, label, className, children, ...rest } = props;
     useTheme();
-    var _a = useColorPickerContext(), activeColor = _a.activeColor, setActiveColor = _a.setActiveColor, onChangeComplete = _a.onChangeComplete;
-    var _b = React.useState(), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    const { activeColor, setActiveColor, onChangeComplete, } = useColorPickerContext();
+    const [focusedIndex, setFocusedIndex] = React.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.useRef(null);
-    var paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
+    const paletteRef = React.useRef(null);
+    const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
     // Color palette arrow key navigation
-    var handleKeyDown = function (event) {
-        var swatches = getFocusableElements(paletteRef.current);
+    const handleKeyDown = (event) => {
+        const swatches = 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;
@@ -105,21 +81,21 @@ export var ColorPalette = React.forwardRef(function (props, ref) {
         }
     };
     // call focus() when focusedIndex changes
-    React.useEffect(function () {
+    React.useEffect(() => {
         var _a;
         if (focusedIndex != null) {
-            var swatches = getFocusableElements(paletteRef.current);
+            const swatches = getFocusableElements(paletteRef.current);
             (_a = swatches[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    return (React.createElement("div", __assign({ className: cx('iui-color-palette-wrapper', className), ref: ref }, rest),
+    return (React.createElement("div", { className: cx('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(function (_color, index) {
-                    var color = getColorValue(_color);
-                    return (React.createElement(ColorSwatch, { key: index, color: color, onClick: function (event) {
+                colors.map((_color, index) => {
+                    const color = getColorValue(_color);
+                    return (React.createElement(ColorSwatch, { key: index, color: color, onClick: (event) => {
                             event.preventDefault();
                             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
                             setActiveColor(color);

package/esm/core/ColorPicker/ColorPicker.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -29,7 +7,7 @@ import '@itwin/itwinui-css/css/color-picker.css';
 import { useTheme, ColorValue, getTabbableElements, } from '../utils';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext';
-export var getColorValue = function (color) {
+export const getColorValue = (color) => {
     if (color instanceof ColorValue) {
         return color;
     }
@@ -48,41 +26,39 @@ export var getColorValue = function (color) {
  *   <ColorPalette label='Saved colors' colors={['#FFFFFF', '#5A6973']} />
  * </ColorPicker>
  */
-export 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"]);
+export const ColorPicker = (props) => {
+    const { children, className, selectedColor, onChange, onChangeComplete, setFocus = false, showAlpha = false, ...rest } = props;
     useTheme();
-    var ref = React.useRef(null);
+    const ref = React.useRef(null);
     // set focus on the first tabbable element
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (ref.current && setFocus) {
-            var tabbableElements = getTabbableElements(ref.current);
+            const tabbableElements = getTabbableElements(ref.current);
             tabbableElements[0].focus();
         }
     }, [setFocus]);
-    var inColor = React.useMemo(function () { return getColorValue(selectedColor); }, [
+    const inColor = React.useMemo(() => getColorValue(selectedColor), [
         selectedColor,
     ]);
-    var activeColorTbgr = React.useRef(inColor.toTbgr());
-    var _c = React.useState(inColor), activeColor = _c[0], setActiveColor = _c[1]; // Color of colorDot or active ColorSwatch
-    React.useEffect(function () {
+    const activeColorTbgr = React.useRef(inColor.toTbgr());
+    const [activeColor, setActiveColor] = React.useState(inColor); // Color of colorDot or active ColorSwatch
+    React.useEffect(() => {
         setActiveColor(inColor);
     }, [inColor]);
-    var _d = React.useState(function () {
-        return activeColor.toHsvColor();
-    }), hsvColor = _d[0], setHsvColor = _d[1];
+    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.useEffect(function () {
+    React.useEffect(() => {
         if (inColor.toTbgr() !== activeColorTbgr.current) {
             activeColorTbgr.current = inColor.toTbgr();
             setHsvColor(inColor.toHsvColor());
         }
     }, [inColor]);
-    var applyHsvColorChange = React.useCallback(function (newColor, selectionChanged, newColorValue) {
+    const applyHsvColorChange = React.useCallback((newColor, selectionChanged, newColorValue) => {
         // save the HSV values
         setHsvColor(newColor);
-        var newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : ColorValue.create(newColor);
+        const newActiveColor = newColorValue !== null && newColorValue !== void 0 ? newColorValue : ColorValue.create(newColor);
         // Only update selected color when dragging is done
         if (selectionChanged) {
             onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newActiveColor);
@@ -94,14 +70,14 @@ export var ColorPicker = function (props) {
         // this converts it to store in tbgr
         setActiveColor(newActiveColor);
     }, [onChange, onChangeComplete]);
-    return (React.createElement("div", __assign({ className: cx('iui-color-picker', className), ref: ref }, rest),
+    return (React.createElement("div", { className: cx('iui-color-picker', className), ref: ref, ...rest },
         React.createElement(ColorPickerContext.Provider, { value: {
-                activeColor: activeColor,
-                setActiveColor: setActiveColor,
-                hsvColor: hsvColor,
-                applyHsvColorChange: applyHsvColorChange,
-                onChangeComplete: onChangeComplete,
-                showAlpha: showAlpha,
+                activeColor,
+                setActiveColor,
+                hsvColor,
+                applyHsvColorChange,
+                onChangeComplete,
+                showAlpha,
             } }, children)));
 };
 export default ColorPicker;

package/esm/core/ColorPicker/ColorPickerContext.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-export var ColorPickerContext = React.createContext(undefined);
-export var useColorPickerContext = function () {
-    var context = React.useContext(ColorPickerContext);
+export const ColorPickerContext = React.createContext(undefined);
+export const useColorPickerContext = () => {
+    const context = React.useContext(ColorPickerContext);
     if (context == undefined) {
         throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
     }

package/esm/core/ColorPicker/ColorSwatch.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -35,14 +13,15 @@ import { getColorValue } from './ColorPicker';
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export var ColorSwatch = React.forwardRef(function (props, ref) {
-    var color = props.color, style = props.style, onClick = props.onClick, isActive = props.isActive, className = props.className, rest = __rest(props, ["color", "style", "onClick", "isActive", "className"]);
+export const ColorSwatch = React.forwardRef((props, ref) => {
+    const { color, style, onClick, isActive, className, ...rest } = props;
     useTheme();
-    var colorString = React.useMemo(function () {
-        return typeof color === 'string'
-            ? color
-            : getColorValue(color).toHslString(true);
-    }, [color]);
-    return (React.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: __assign({ '--iui-color-swatch-background': colorString }, style), onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
+    const colorString = React.useMemo(() => typeof color === 'string'
+        ? color
+        : getColorValue(color).toHslString(true), [color]);
+    return (React.createElement("div", { className: cx('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 }));
 });
 export default ColorSwatch;