@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type ColorPaletteProps = {
+export type ColorPaletteProps = {
     /**
      * Label shown above the palette.
      */

package/cjs/core/ColorPicker/ColorPalette.js

@@ -1,42 +1,17 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ColorPalette = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const ColorPicker_js_1 = require("./ColorPicker.js");
-const ColorSwatch_js_1 = require("./ColorSwatch.js");
-const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const ColorPicker_js_1 = require('./ColorPicker.js');
+const ColorSwatch_js_1 = require('./ColorSwatch.js');
+const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example
@@ -49,85 +24,121 @@ const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
  * </ColorPalette>
  */
 exports.ColorPalette = React.forwardRef((props, ref) => {
-    const { colors, label, className, children, ...rest } = props;
-    const { activeColor, setActiveColor, onChangeComplete } = (0, ColorPickerContext_js_1.useColorPickerContext)();
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
-    const setDefaultTabIndex = (el) => {
-        if (el && !el.querySelector('[tabindex="0"]')) {
-            el.firstElementChild?.setAttribute('tabindex', '0');
-        }
-    };
-    const paletteRef = React.useRef(null);
-    const paletteRefs = (0, index_js_1.useMergedRefs)(paletteRef, setDefaultTabIndex);
-    // Color palette arrow key navigation
-    const handleKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
-        if (!swatches.length) {
-            return;
-        }
-        const currentIndex = swatches.findIndex((swatch) => swatch === paletteRef.current?.ownerDocument.activeElement);
-        if (currentIndex < 0) {
-            return;
-        }
-        let newIndex = -1;
-        switch (event.key) {
-            case 'ArrowDown': {
-                // Look for next ColorSwatch with same offsetLeft value
-                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 (let i = currentIndex - 1; i >= 0; i--) {
-                    if (swatches[i].offsetLeft === swatches[currentIndex].offsetLeft) {
-                        newIndex = i;
-                        break;
-                    }
-                }
-                break;
-            }
-            case 'ArrowLeft':
-                newIndex = Math.max(currentIndex - 1, 0);
-                break;
-            case 'ArrowRight':
-                newIndex = Math.min(currentIndex + 1, swatches.length - 1);
-                break;
-            case 'Enter':
-            case ' ':
-            case 'Spacebar':
-                swatches[currentIndex].click();
-                event.preventDefault();
-                return;
-        }
-        if (newIndex >= 0 && newIndex < swatches.length) {
-            setFocusedIndex(newIndex);
-            event.preventDefault();
-        }
-    };
-    // call focus() when focusedIndex changes
-    React.useEffect(() => {
-        if (focusedIndex != null) {
-            const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
-            swatches[focusedIndex]?.focus();
+  const { colors, label, className, children, ...rest } = props;
+  const { activeColor, setActiveColor, onChangeComplete } = (0,
+  ColorPickerContext_js_1.useColorPickerContext)();
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
+  const setDefaultTabIndex = (el) => {
+    if (el && !el.querySelector('[tabindex="0"]')) {
+      el.firstElementChild?.setAttribute('tabindex', '0');
+    }
+  };
+  const paletteRef = React.useRef(null);
+  const paletteRefs = (0, index_js_1.useMergedRefs)(
+    paletteRef,
+    setDefaultTabIndex,
+  );
+  // Color palette arrow key navigation
+  const handleKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
+    if (!swatches.length) {
+      return;
+    }
+    const currentIndex = swatches.findIndex(
+      (swatch) => swatch === paletteRef.current?.ownerDocument.activeElement,
+    );
+    if (currentIndex < 0) {
+      return;
+    }
+    let newIndex = -1;
+    switch (event.key) {
+      case 'ArrowDown': {
+        // Look for next ColorSwatch with same offsetLeft value
+        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 (let i = currentIndex - 1; i >= 0; i--) {
+          if (swatches[i].offsetLeft === swatches[currentIndex].offsetLeft) {
+            newIndex = i;
+            break;
+          }
         }
-    }, [focusedIndex]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-color-palette-wrapper', className), ref: ref, ...rest },
-        label && React.createElement(index_js_1.Box, { className: 'iui-color-picker-section-label' }, label),
-        React.createElement(index_js_1.Box, { className: 'iui-color-palette', onKeyDown: handleKeyDown, ref: paletteRefs },
-            children,
-            colors &&
-                colors.map((_color, index) => {
-                    const color = (0, ColorPicker_js_1.getColorValue)(_color);
-                    return (React.createElement(ColorSwatch_js_1.ColorSwatch, { key: index, color: color, onClick: (event) => {
-                            event.preventDefault();
-                            onChangeComplete?.(color);
-                            setActiveColor(color);
-                        }, isActive: color.equals(activeColor) }));
-                }))));
+        break;
+      }
+      case 'ArrowLeft':
+        newIndex = Math.max(currentIndex - 1, 0);
+        break;
+      case 'ArrowRight':
+        newIndex = Math.min(currentIndex + 1, swatches.length - 1);
+        break;
+      case 'Enter':
+      case ' ':
+      case 'Spacebar':
+        swatches[currentIndex].click();
+        event.preventDefault();
+        return;
+    }
+    if (newIndex >= 0 && newIndex < swatches.length) {
+      setFocusedIndex(newIndex);
+      event.preventDefault();
+    }
+  };
+  // call focus() when focusedIndex changes
+  React.useEffect(() => {
+    if (focusedIndex != null) {
+      const swatches = (0, index_js_1.getFocusableElements)(paletteRef.current);
+      swatches[focusedIndex]?.focus();
+    }
+  }, [focusedIndex]);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-color-palette-wrapper',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        index_js_1.Box,
+        { className: 'iui-color-picker-section-label' },
+        label,
+      ),
+    React.createElement(
+      index_js_1.Box,
+      {
+        className: 'iui-color-palette',
+        onKeyDown: handleKeyDown,
+        ref: paletteRefs,
+      },
+      children,
+      colors &&
+        colors.map((_color, index) => {
+          const color = (0, ColorPicker_js_1.getColorValue)(_color);
+          return React.createElement(ColorSwatch_js_1.ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: (event) => {
+              event.preventDefault();
+              onChangeComplete?.(color);
+              setActiveColor(color);
+            },
+            isActive: color.equals(activeColor),
+          });
+        }),
+    ),
+  );
 });
 exports.default = exports.ColorPalette;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;
-declare type ColorPickerProps = {
+type ColorPickerProps = {
     /**
      * Content of the color palette.
      *
@@ -25,11 +25,6 @@ declare type ColorPickerProps = {
      * or when user clicks on color builder components, or when user clicks on color swatch.
      */
     onChangeComplete?: (color: ColorValue) => void;
-    /**
-     * If true, the first focusable element in the color picker will automatically be focused.
-     * @default false
-     */
-    setFocus?: boolean;
     /**
      * If true, ColorBuilder will show the alpha slider and ColorInputPanel will show an alpha input.
      * @default false

package/cjs/core/ColorPicker/ColorPicker.js

@@ -1,45 +1,20 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ColorPicker = exports.getColorValue = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 const getColorValue = (color) => {
-    if (color instanceof index_js_1.ColorValue) {
-        return color;
-    }
-    return index_js_1.ColorValue.create(color);
+  if (color instanceof index_js_1.ColorValue) {
+    return color;
+  }
+  return index_js_1.ColorValue.create(color);
 };
 exports.getColorValue = getColorValue;
 /**
@@ -56,54 +31,76 @@ exports.getColorValue = getColorValue;
  * </ColorPicker>
  */
 exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
-    const { children, className, selectedColor, onChange, onChangeComplete, setFocus = false, showAlpha = false, ...rest } = props;
-    const ref = React.useRef(null);
-    // set focus on the first tabbable element
-    React.useEffect(() => {
-        if (ref.current && setFocus) {
-            const tabbableElements = (0, index_js_1.getTabbableElements)(ref.current);
-            tabbableElements[0].focus();
-        }
-    }, [setFocus]);
-    const inColor = React.useMemo(() => (0, exports.getColorValue)(selectedColor), [selectedColor]);
-    const activeColorTbgr = React.useRef(inColor.toTbgr());
-    const [activeColor, setActiveColor] = React.useState(inColor); // Color of colorDot or active ColorSwatch
-    React.useEffect(() => {
-        setActiveColor(inColor);
-    }, [inColor]);
-    const [hsvColor, setHsvColor] = React.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(() => {
-        if (inColor.toTbgr() !== activeColorTbgr.current) {
-            activeColorTbgr.current = inColor.toTbgr();
-            setHsvColor(inColor.toHsvColor());
-        }
-    }, [inColor]);
-    const applyHsvColorChange = React.useCallback((newColor, selectionChanged, newColorValue) => {
-        // save the HSV values
-        setHsvColor(newColor);
-        const newActiveColor = newColorValue ?? index_js_1.ColorValue.create(newColor);
-        // Only update selected color when dragging is done
-        if (selectionChanged) {
-            onChangeComplete?.(newActiveColor);
-        }
-        else {
-            onChange?.(newActiveColor);
-        }
-        activeColorTbgr.current = newActiveColor.toTbgr();
-        // this converts it to store in tbgr
-        setActiveColor(newActiveColor);
-    }, [onChange, onChangeComplete]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-color-picker', className), ref: (0, index_js_1.useMergedRefs)(ref, forwardedRef), ...rest },
-        React.createElement(ColorPickerContext_js_1.ColorPickerContext.Provider, { value: {
-                activeColor,
-                setActiveColor,
-                hsvColor,
-                applyHsvColorChange,
-                onChangeComplete,
-                showAlpha,
-            } }, children)));
+  const {
+    children,
+    className,
+    selectedColor,
+    onChange,
+    onChangeComplete,
+    showAlpha = false,
+    ...rest
+  } = props;
+  const ref = React.useRef(null);
+  const inColor = React.useMemo(
+    () => (0, exports.getColorValue)(selectedColor),
+    [selectedColor],
+  );
+  const activeColorTbgr = React.useRef(inColor.toTbgr());
+  const [activeColor, setActiveColor] = React.useState(inColor); // Color of colorDot or active ColorSwatch
+  React.useEffect(() => {
+    setActiveColor(inColor);
+  }, [inColor]);
+  const [hsvColor, setHsvColor] = React.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(() => {
+    if (inColor.toTbgr() !== activeColorTbgr.current) {
+      activeColorTbgr.current = inColor.toTbgr();
+      setHsvColor(inColor.toHsvColor());
+    }
+  }, [inColor]);
+  const applyHsvColorChange = React.useCallback(
+    (newColor, selectionChanged, newColorValue) => {
+      // save the HSV values
+      setHsvColor(newColor);
+      const newActiveColor =
+        newColorValue ?? index_js_1.ColorValue.create(newColor);
+      // Only update selected color when dragging is done
+      if (selectionChanged) {
+        onChangeComplete?.(newActiveColor);
+      } else {
+        onChange?.(newActiveColor);
+      }
+      activeColorTbgr.current = newActiveColor.toTbgr();
+      // this converts it to store in tbgr
+      setActiveColor(newActiveColor);
+    },
+    [onChange, onChangeComplete],
+  );
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-color-picker', className),
+      ref: (0, index_js_1.useMergedRefs)(ref, forwardedRef),
+      ...rest,
+    },
+    React.createElement(
+      ColorPickerContext_js_1.ColorPickerContext.Provider,
+      {
+        value: {
+          activeColor,
+          setActiveColor,
+          hsvColor,
+          applyHsvColorChange,
+          onChangeComplete,
+          showAlpha,
+        },
+      },
+      children,
+    ),
+  );
 });
 exports.default = exports.ColorPicker;

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -1,40 +1,20 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useColorPickerContext = exports.ColorPickerContext = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
+const React = tslib_1.__importStar(require('react'));
 exports.ColorPickerContext = React.createContext(undefined);
 const useColorPickerContext = () => {
-    const context = React.useContext(exports.ColorPickerContext);
-    if (context == undefined) {
-        throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
-    }
-    return context;
+  const context = React.useContext(exports.ColorPickerContext);
+  if (context == undefined) {
+    throw new Error(
+      'useColorPickerContext must be used within a ColorPickerContext.Provider',
+    );
+  }
+  return context;
 };
 exports.useColorPickerContext = useColorPickerContext;

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

@@ -1,6 +1,6 @@
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ColorSwatchProps = {
+type ColorSwatchProps = {
     /**
      * Color code.
      */

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -1,40 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ColorSwatch = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const ColorPicker_js_1 = require("./ColorPicker.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const ColorPicker_js_1 = require('./ColorPicker.js');
 /**
  * ColorSwatch component to display within a color palette.
  * @example
@@ -42,13 +17,29 @@ const ColorPicker_js_1 = require("./ColorPicker.js");
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
 exports.ColorSwatch = React.forwardRef((props, ref) => {
-    const { color, style, onClick, isActive, className, ...rest } = props;
-    const colorString = React.useMemo(() => typeof color === 'string'
+  const { color, style, onClick, isActive, className, ...rest } = props;
+  const colorString = React.useMemo(
+    () =>
+      typeof color === 'string'
         ? color
-        : (0, ColorPicker_js_1.getColorValue)(color).toHslString(true), [color]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: {
-            '--iui-color-swatch-background': colorString,
-            ...style,
-        }, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref, ...rest }));
+        : (0, ColorPicker_js_1.getColorValue)(color).toHslString(true),
+    [color],
+  );
+  return React.createElement(index_js_1.Box, {
+    className: (0, classnames_1.default)(
+      'iui-color-swatch',
+      { 'iui-active': isActive },
+      className,
+    ),
+    style: {
+      '--iui-color-swatch-background': colorString,
+      ...style,
+    },
+    onClick: onClick,
+    tabIndex: isActive ? 0 : -1,
+    'aria-selected': isActive,
+    ref: ref,
+    ...rest,
+  });
 });
 exports.default = exports.ColorSwatch;