@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/ColorPicker/ColorPalette.js

@@ -1,17 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPalette = void 0;
-const tslib_1 = require('tslib');
+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 = 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');
+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
@@ -24,43 +24,19 @@ 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)();
-  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' },
-      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: () => {
-              onChangeComplete?.(color);
-              setActiveColor(color);
-            },
-            isActive: color.equals(activeColor),
-          });
-        }),
-    ),
-  );
+    const { colors, label, className, children, ...rest } = props;
+    const { activeColor, setActiveColor, onChangeComplete } = (0, ColorPickerContext_js_1.useColorPickerContext)();
+    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' },
+            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: () => {
+                            onChangeComplete?.(color);
+                            setActiveColor(color);
+                        }, isActive: color.equals(activeColor) }));
+                }))));
 });
 exports.default = exports.ColorPalette;

package/cjs/core/ColorPicker/ColorPicker.js

@@ -1,20 +1,20 @@
-'use strict';
-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');
+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 = 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 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;
 /**
@@ -31,81 +31,47 @@ exports.getColorValue = getColorValue;
  * </ColorPicker>
  */
 exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
-  const {
-    children,
-    className,
-    selectedColor,
-    onChange,
-    onChangeComplete,
-    showAlpha = false,
-    applyBackground = true,
-    ...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',
-        { 'iui-popover-surface': applyBackground },
-        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, applyBackground = true, ...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', { 'iui-popover-surface': applyBackground }, 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,20 +1,18 @@
-'use strict';
-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');
+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 = tslib_1.__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.js

@@ -1,16 +1,16 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorSwatch = void 0;
-const tslib_1 = require('tslib');
+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 = 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 VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.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 VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * ColorSwatch component to display within a color palette.
  * @example
@@ -18,38 +18,13 @@ const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.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,
-    {
-      as: !!onClick ? index_js_1.ButtonBase : 'span',
-      className: (0, classnames_1.default)(
-        'iui-color-swatch',
-        { 'iui-active': isActive },
-        className,
-      ),
-      style: {
-        '--iui-color-swatch-background': colorString,
-        ...style,
-      },
-      onClick: onClick,
-      'aria-pressed': !!onClick && isActive ? 'true' : undefined,
-      ref: ref,
-      ...rest,
-    },
-    props.children ??
-      React.createElement(
-        VisuallyHidden_js_1.VisuallyHidden,
-        null,
-        colorString.toUpperCase(),
-      ),
-  );
+        : (0, ColorPicker_js_1.getColorValue)(color).toHslString(true), [color]);
+    return (React.createElement(index_js_1.Box, { as: (!!onClick ? index_js_1.ButtonBase : 'span'), className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: {
+            '--iui-color-swatch-background': colorString,
+            ...style,
+        }, onClick: onClick, "aria-pressed": !!onClick && isActive ? 'true' : undefined, ref: ref, ...rest }, props.children ?? (React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, colorString.toUpperCase()))));
 });
 exports.default = exports.ColorSwatch;