@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/cjs/core/Carousel/CarouselNavigation.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,42 +8,42 @@ exports.CarouselNavigation = 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 CarouselContext_1 = require("./CarouselContext");
-var Buttons_1 = require("../Buttons");
-var CarouselDotsList_1 = require("./CarouselDotsList");
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const CarouselContext_1 = require("./CarouselContext");
+const Buttons_1 = require("../Buttons");
+const CarouselDotsList_1 = require("./CarouselDotsList");
+const utils_1 = require("../utils");
 /** Button for switching to previous slide */
-var PreviousButton = react_1.default.forwardRef(function (props, ref) {
-    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+const PreviousButton = react_1.default.forwardRef((props, ref) => {
+    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
-    var slideCount = context.slideCount, currentIndex = context.currentIndex, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollToSlide = context.scrollToSlide;
-    return (react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref }, props, { onClick: function (e) {
+    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
+    return (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
-            var prevIndex = (slideCount + currentIndex - 1) % slideCount;
+            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
             setCurrentIndex(prevIndex);
             scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }),
+        } },
         react_1.default.createElement(utils_1.SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
-var NextButton = react_1.default.forwardRef(function (props, ref) {
-    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+const NextButton = react_1.default.forwardRef((props, ref) => {
+    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
-    var slideCount = context.slideCount, currentIndex = context.currentIndex, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollToSlide = context.scrollToSlide;
-    return (react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref }, props, { onClick: function (e) {
+    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
+    return (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
-            var nextIndex = (slideCount + currentIndex + 1) % slideCount;
+            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
             setCurrentIndex(nextIndex);
             scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }),
+        } },
         react_1.default.createElement(utils_1.SvgChevronRight, null)));
 });
 /**
@@ -74,12 +52,12 @@ var NextButton = react_1.default.forwardRef(function (props, ref) {
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-exports.CarouselNavigation = Object.assign(react_1.default.forwardRef(function (props, ref) {
-    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    return (react_1.default.createElement("nav", __assign({ className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref }, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+exports.CarouselNavigation = Object.assign(react_1.default.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: 'iui-carousel-navigation-left' },
             react_1.default.createElement(PreviousButton, null)),
         react_1.default.createElement(CarouselDotsList_1.CarouselDotsList, null),
         react_1.default.createElement("div", { className: 'iui-carousel-navigation-right' },
             react_1.default.createElement(NextButton, null))))));
-}), { PreviousButton: PreviousButton, NextButton: NextButton });
+}), { PreviousButton, NextButton });

package/cjs/core/Carousel/CarouselSlide.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,30 +8,30 @@ exports.CarouselSlide = 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 CarouselContext_1 = require("./CarouselContext");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const CarouselContext_1 = require("./CarouselContext");
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
  *
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-exports.CarouselSlide = react_1.default.forwardRef(function (props, ref) {
-    var index = props.index, className = props.className, children = props.children, rest = __rest(props, ["index", "className", "children"]);
-    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+exports.CarouselSlide = react_1.default.forwardRef((props, ref) => {
+    const { index, className, children, ...rest } = props;
+    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
     if (!context || index == null) {
         throw new Error('CarouselSlide must be used within Carousel');
     }
-    var isManuallyUpdating = context.isManuallyUpdating, setCurrentIndex = context.setCurrentIndex;
-    var updateActiveIndexOnScroll = react_1.default.useCallback(function () {
+    const { isManuallyUpdating, setCurrentIndex } = context;
+    const updateActiveIndexOnScroll = react_1.default.useCallback(() => {
         // only update index if scroll was triggered by browser
         if (!isManuallyUpdating.current) {
             setCurrentIndex(index);
         }
     }, [index, isManuallyUpdating, setCurrentIndex]);
-    var intersectionRef = (0, utils_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    var refs = (0, utils_1.useMergedRefs)(intersectionRef, ref);
-    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs }, rest), children));
+    const intersectionRef = (0, utils_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    const refs = (0, utils_1.useMergedRefs)(intersectionRef, ref);
+    return (react_1.default.createElement("li", { className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
 });

package/cjs/core/Carousel/CarouselSlider.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,60 +8,57 @@ exports.CarouselSlider = 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 CarouselContext_1 = require("./CarouselContext");
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const CarouselContext_1 = require("./CarouselContext");
+const utils_1 = require("../utils");
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-exports.CarouselSlider = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
-    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+exports.CarouselSlider = react_1.default.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselSlider must be used within Carousel');
     }
-    var setSlideCount = context.setSlideCount, idPrefix = context.idPrefix, scrollToSlide = context.scrollToSlide, isManuallyUpdating = context.isManuallyUpdating;
-    var items = react_1.default.useMemo(function () {
+    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating, } = context;
+    const items = react_1.default.useMemo(() => {
         var _a;
-        return (_a = react_1.default.Children.map(children, function (child, index) {
-            return react_1.default.isValidElement(child)
-                ? react_1.default.cloneElement(child, {
-                    id: "".concat(idPrefix, "--slide-").concat(index),
-                    index: index,
-                })
-                : child;
-        })) !== null && _a !== void 0 ? _a : [];
+        return (_a = react_1.default.Children.map(children, (child, index) => react_1.default.isValidElement(child)
+            ? react_1.default.cloneElement(child, {
+                id: `${idPrefix}--slide-${index}`,
+                index,
+            })
+            : child)) !== null && _a !== void 0 ? _a : [];
     }, [children, idPrefix]);
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
-    var sliderRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(sliderRef, ref);
-    scrollToSlide.current = function (slideIndex, _a) {
-        var _b, _c, _d;
-        var _e = _a === void 0 ? {} : _a, instant = _e.instant;
+    const sliderRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(sliderRef, ref);
+    scrollToSlide.current = (slideIndex, { instant } = {}) => {
+        var _a, _b, _c;
         isManuallyUpdating.current = true; // start manual update
-        var slideToShow = (_b = sliderRef.current) === null || _b === void 0 ? void 0 : _b.children.item(slideIndex);
+        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
         if (!sliderRef.current || !slideToShow) {
             return;
         }
-        var motionOk = (_d = (_c = (0, utils_1.getWindow)()) === null || _c === void 0 ? void 0 : _c.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _d === void 0 ? void 0 : _d.matches;
+        const motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
         sliderRef.current.scrollTo({
             left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
             behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
         });
     };
-    var scrollTimeout = react_1.default.useRef();
+    const scrollTimeout = react_1.default.useRef();
     // reset isManuallyUpdating.current to false after the last scroll event
-    var handleOnScroll = react_1.default.useCallback(function () {
+    const handleOnScroll = react_1.default.useCallback(() => {
         var _a, _b;
         if (scrollTimeout.current) {
             (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
         }
-        scrollTimeout.current = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.setTimeout(function () {
+        scrollTimeout.current = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);
-    return (react_1.default.createElement("ol", __assign({ "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll }, rest), items));
+    return (react_1.default.createElement("ol", { "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
 });

package/cjs/core/Checkbox/Checkbox.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,10 +8,10 @@ exports.Checkbox = 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 classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var ProgressIndicators_1 = require("../ProgressIndicators");
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const ProgressIndicators_1 = require("../ProgressIndicators");
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
@@ -47,18 +25,17 @@ require("@itwin/itwinui-css/css/checkbox.css");
  * <Checkbox label='Negative Checkbox' status='negative' />
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
-exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
-    var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.indeterminate, indeterminate = _d === void 0 ? false : _d, label = props.label, status = props.status, _e = props.variant, variant = _e === void 0 ? 'default' : _e, setFocus = props.setFocus, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, style = props.style, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style"]);
+exports.Checkbox = react_1.default.forwardRef((props, ref) => {
+    const { className, disabled = false, indeterminate = false, label, status, variant = 'default', setFocus, isLoading = false, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
-    react_1.default.useEffect(function () {
+    const inputElementRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
+    react_1.default.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (inputElementRef.current) {
             inputElementRef.current.indeterminate = indeterminate;
             inputElementRef.current.checked = indeterminate
@@ -66,18 +43,17 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
                 : inputElementRef.current.checked;
         }
     });
-    var checkbox = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-checkbox', {
+    const checkbox = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { className: (0, classnames_1.default)('iui-checkbox', {
                 'iui-checkbox-visibility': variant === 'eyeball',
                 'iui-loading': isLoading,
-            }, className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
+            }, className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
         isLoading && react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
-    return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox-wrapper', (_b = {
-                'iui-disabled': disabled
-            },
-            _b["iui-".concat(status)] = !!status,
-            _b['iui-loading'] = isLoading,
-            _b), className), style: style },
+    return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, className), style: style },
         checkbox,
         label && react_1.default.createElement("span", { className: 'iui-checkbox-label' }, label)));
 });

package/cjs/core/ColorPicker/ColorBuilder.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,18 +8,18 @@ exports.ColorBuilder = 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 Slider_1 = require("../Slider");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Slider_1 = require("../Slider");
 require("@itwin/itwinui-css/css/color-picker.css");
-var ColorPickerContext_1 = require("./ColorPickerContext");
-var getVerticalPercentageOfRectangle = function (rect, pointer) {
-    var position = (0, utils_1.getBoundedValue)(pointer, rect.top, rect.bottom);
+const ColorPickerContext_1 = require("./ColorPickerContext");
+const getVerticalPercentageOfRectangle = (rect, pointer) => {
+    const position = (0, utils_1.getBoundedValue)(pointer, rect.top, rect.bottom);
     return ((position - rect.top) / rect.height) * 100;
 };
-var getHorizontalPercentageOfRectangle = function (rect, pointer) {
-    var position = (0, utils_1.getBoundedValue)(pointer, rect.left, rect.right);
+const getHorizontalPercentageOfRectangle = (rect, pointer) => {
+    const position = (0, utils_1.getBoundedValue)(pointer, rect.left, rect.right);
     return ((position - rect.left) / rect.width) * 100;
 };
 /**
@@ -49,32 +27,32 @@ var getHorizontalPercentageOfRectangle = function (rect, pointer) {
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
+exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
     var _a, _b, _c;
-    var className = props.className, rest = __rest(props, ["className"]);
-    var builderRef = react_1.default.useRef();
-    var refs = (0, utils_1.useMergedRefs)(builderRef, ref);
+    const { className, ...rest } = props;
+    const builderRef = react_1.default.useRef();
+    const refs = (0, utils_1.useMergedRefs)(builderRef, ref);
     (0, utils_1.useTheme)();
-    var _d = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _d.activeColor, hsvColor = _d.hsvColor, onChangeComplete = _d.onChangeComplete, applyHsvColorChange = _d.applyHsvColorChange, showAlpha = _d.showAlpha;
+    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = (0, ColorPickerContext_1.useColorPickerContext)();
     // Set values for slider
-    var hueSliderColor = react_1.default.useMemo(function () { return utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }); }, [hsvColor.h]);
-    var sliderValue = react_1.default.useMemo(function () { return hsvColor.h; }, [hsvColor]);
-    var alphaValue = react_1.default.useMemo(function () { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [
+    const hueSliderColor = react_1.default.useMemo(() => utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
+    const sliderValue = react_1.default.useMemo(() => hsvColor.h, [hsvColor]);
+    const alphaValue = react_1.default.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [
         hsvColor.a,
         showAlpha,
     ]);
     // Set values for color square and color dot
-    var dotColorString = react_1.default.useMemo(function () { return activeColor.toHexString(); }, [
+    const dotColorString = react_1.default.useMemo(() => activeColor.toHexString(), [
         activeColor,
     ]);
-    var _e = react_1.default.useState(false), colorDotActive = _e[0], setColorDotActive = _e[1];
-    var hueColorString = hueSliderColor.toHexString();
-    var squareTop = 100 - hsvColor.v;
-    var squareLeft = hsvColor.s;
+    const [colorDotActive, setColorDotActive] = react_1.default.useState(false);
+    const hueColorString = hueSliderColor.toHexString();
+    const squareTop = 100 - hsvColor.v;
+    const squareLeft = hsvColor.s;
     // Update slider change
-    var updateHueSlider = react_1.default.useCallback(function (huePercent, selectionChanged) {
-        var hue = Number(huePercent.toFixed(2));
-        var newHsvColor = {
+    const updateHueSlider = react_1.default.useCallback((huePercent, selectionChanged) => {
+        const hue = Number(huePercent.toFixed(2));
+        const newHsvColor = {
             h: hue,
             s: hsvColor.s,
             v: hsvColor.v,
@@ -83,9 +61,9 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update opacity slider change
-    var updateOpacitySlider = react_1.default.useCallback(function (alphaPercent, selectionChanged) {
-        var alpha = Number(alphaPercent.toFixed(2));
-        var newHsvColor = {
+    const updateOpacitySlider = react_1.default.useCallback((alphaPercent, selectionChanged) => {
+        const alpha = Number(alphaPercent.toFixed(2));
+        const newHsvColor = {
             h: hsvColor.h,
             s: hsvColor.s,
             v: hsvColor.v,
@@ -94,10 +72,10 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update Color field square change
-    var squareRef = react_1.default.useRef(null);
-    var colorDotRef = react_1.default.useRef(null);
-    var updateColorDot = react_1.default.useCallback(function (x, y, selectionChanged) {
-        var newHsvColor = {
+    const squareRef = react_1.default.useRef(null);
+    const colorDotRef = react_1.default.useRef(null);
+    const updateColorDot = react_1.default.useCallback((x, y, selectionChanged) => {
+        const newHsvColor = {
             h: hsvColor.h,
             s: x,
             v: 100 - y,
@@ -105,11 +83,11 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         };
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
-    var updateSquareValue = react_1.default.useCallback(function (event, callbackType) {
+    const updateSquareValue = react_1.default.useCallback((event, callbackType) => {
         if ((squareRef.current && colorDotActive) ||
             (squareRef.current && callbackType === 'onClick')) {
-            var percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
-            var percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
+            const percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
+            const percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
             if (callbackType === 'onChange') {
                 updateColorDot(percentX, percentY, true);
             }
@@ -118,7 +96,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
             }
         }
     }, [colorDotActive, updateColorDot]);
-    var handleSquarePointerUp = react_1.default.useCallback(function (event) {
+    const handleSquarePointerUp = react_1.default.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -128,7 +106,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    var handleSquarePointerMove = react_1.default.useCallback(function (event) {
+    const handleSquarePointerMove = react_1.default.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -137,7 +115,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    var handleSquarePointerLeave = react_1.default.useCallback(function (event) {
+    const handleSquarePointerLeave = react_1.default.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -145,11 +123,11 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
-    var keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
+    const keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
-    var handleColorDotKeyDown = function (event) {
-        var x = squareLeft;
-        var y = squareTop;
+    const handleColorDotKeyDown = (event) => {
+        let x = squareLeft;
+        let y = squareTop;
         keysPressed.current[event.key] = true;
         switch (event.key) {
             case 'ArrowDown': {
@@ -172,7 +150,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
                 break;
         }
     };
-    var handleColorDotKeyUp = function (event) {
+    const handleColorDotKeyUp = (event) => {
         keysPressed.current[event.key] = false;
         switch (event.key) {
             case 'ArrowUp':
@@ -189,11 +167,11 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs, ...rest },
         react_1.default.createElement("div", { className: 'iui-color-field', style: {
                 '--iui-color-field-hue': hueColorString,
                 '--iui-color-picker-selected-color': dotColorString,
-            }, ref: squareRef, onPointerDown: function (event) {
+            }, ref: squareRef, onPointerDown: (event) => {
                 var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
@@ -201,20 +179,20 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
                 (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             } },
             react_1.default.createElement("div", { className: 'iui-color-dot', style: {
-                    '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
-                }, onPointerDown: function () {
+                    '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
+                }, onPointerDown: () => {
                     var _a;
                     setColorDotActive(true);
                     (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
-        react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: function () { return ({ visible: false }); }, onChange: function (values) {
+        react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateHueSlider(values[0], true);
-            }, onUpdate: function (values) {
+            }, onUpdate: (values) => {
                 updateHueSlider(values[0], false);
             }, min: 0, max: 359 }),
-        showAlpha && (react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: function () { return ({ visible: false }); }, onChange: function (values) {
+        showAlpha && (react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateOpacitySlider(values[0], true);
-            }, onUpdate: function (values) {
+            }, onUpdate: (values) => {
                 updateOpacitySlider(values[0], false);
             }, min: 0, max: 1, step: 0.01, style: {
                 '--iui-color-picker-selected-color': hueColorString,