@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/ColorPicker/ColorPalette.js

@@ -1,66 +1,62 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-exports.ColorPalette = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-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");
-/**
- * `ColorPalette` is used to show a group of `ColorSwatch` components.
- * @example
- * <ColorPalette colors={['#ffffff', '#000000']} />
- * @example
- * <ColorPalette>
- *   <ColorSwatch color='#ffffff' />
- *   <ColorSwatch color='#000000' />
- *   // ...
- * </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) }));
-                }))));
+Object.defineProperty(exports, 'ColorPalette', {
+  enumerable: true,
+  get: function () {
+    return ColorPalette;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _ColorPicker = require('./ColorPicker.js');
+const _ColorSwatch = require('./ColorSwatch.js');
+const _ColorPickerContext = require('./ColorPickerContext.js');
+const ColorPalette = _react.forwardRef((props, ref) => {
+  const { colors, label, className, children, ...rest } = props;
+  const { activeColor, setActiveColor, onChangeComplete } = (0,
+  _ColorPickerContext.useColorPickerContext)();
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-palette-wrapper',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    label &&
+      _react.createElement(
+        _index.Box,
+        {
+          className: 'iui-color-picker-section-label',
+        },
+        label,
+      ),
+    _react.createElement(
+      _index.Box,
+      {
+        className: 'iui-color-palette',
+      },
+      children,
+      colors &&
+        colors.map((_color, index) => {
+          const color = (0, _ColorPicker.getColorValue)(_color);
+          return _react.createElement(_ColorSwatch.ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: () => {
+              onChangeComplete?.(color);
+              setActiveColor(color);
+            },
+            isActive: color.equals(activeColor),
+          });
+        }),
+    ),
+  );
 });

package/cjs/core/ColorPicker/ColorPicker.js

@@ -1,101 +1,105 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-exports.ColorPicker = exports.getColorValue = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-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");
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ColorPicker: function () {
+    return ColorPicker;
+  },
+  getColorValue: function () {
+    return getColorValue;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _classnames = _interop_require_default._(require('classnames'));
+const _ColorPickerContext = 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.ColorValue) {
+    return color;
+  }
+  return _index.ColorValue.create(color);
 };
-exports.getColorValue = getColorValue;
-/**
- * ColorPicker to display color builder options, color inputs, and a palette of ColorSwatches.
- * @example
- * <ColorPicker onChangeComplete={() => {}} selectedColor={activeColor}>
- *   <ColorPalette colors={['#FFFFFF', '#5A6973']} />
- * </ColorPicker>
- * @example
- * <ColorPicker onChangeComplete={() => {}} selectedColor={activeColor}>
- *   <ColorBuilder />
- *   <ColorInputPanel defaultColorFormat='hsl' />
- *   <ColorPalette label='Saved colors' colors={['#FFFFFF', '#5A6973']} />
- * </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 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(
+    () => getColorValue(selectedColor),
+    [selectedColor],
+  );
+  const activeColorTbgr = _react.useRef(inColor.toTbgr());
+  const [activeColor, setActiveColor] = _react.useState(inColor);
+  _react.useEffect(() => {
+    setActiveColor(inColor);
+  }, [inColor]);
+  const [hsvColor, setHsvColor] = _react.useState(() =>
+    activeColor.toHsvColor(),
+  );
+  _react.useEffect(() => {
+    if (inColor.toTbgr() !== activeColorTbgr.current) {
+      activeColorTbgr.current = inColor.toTbgr();
+      setHsvColor(inColor.toHsvColor());
+    }
+  }, [inColor]);
+  const applyHsvColorChange = _react.useCallback(
+    (newColor, selectionChanged, newColorValue) => {
+      setHsvColor(newColor);
+      const newActiveColor =
+        newColorValue ?? _index.ColorValue.create(newColor);
+      if (selectionChanged) {
+        onChangeComplete?.(newActiveColor);
+      } else {
+        onChange?.(newActiveColor);
+      }
+      activeColorTbgr.current = newActiveColor.toTbgr();
+      setActiveColor(newActiveColor);
+    },
+    [onChange, onChangeComplete],
+  );
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        className,
+      ),
+      ref: (0, _index.useMergedRefs)(ref, forwardedRef),
+      ...rest,
+    },
+    _react.createElement(
+      _ColorPickerContext.ColorPickerContext.Provider,
+      {
+        value: {
+          activeColor,
+          setActiveColor,
+          hsvColor,
+          applyHsvColorChange,
+          onChangeComplete,
+          showAlpha,
+        },
+      },
+      children,
+    ),
+  );
 });

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

@@ -4,7 +4,7 @@ export declare const ColorPickerContext: React.Context<{
     activeColor: ColorValue;
     setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;
     hsvColor: HsvColor;
-    onChangeComplete?: ((color: ColorValue) => void) | undefined;
+    onChangeComplete?: (color: ColorValue) => void;
     applyHsvColorChange: (newColor: HsvColor, selectionChanged: boolean, newColorValue?: ColorValue) => void;
     showAlpha: boolean;
 } | undefined>;
@@ -12,7 +12,7 @@ export declare const useColorPickerContext: () => {
     activeColor: ColorValue;
     setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;
     hsvColor: HsvColor;
-    onChangeComplete?: ((color: ColorValue) => void) | undefined;
+    onChangeComplete?: (color: ColorValue) => void;
     applyHsvColorChange: (newColor: HsvColor, selectionChanged: boolean, newColorValue?: ColorValue) => void;
     showAlpha: boolean;
 };

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -1,40 +1,31 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-exports.useColorPickerContext = exports.ColorPickerContext = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-exports.ColorPickerContext = React.createContext(undefined);
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ColorPickerContext: function () {
+    return ColorPickerContext;
+  },
+  useColorPickerContext: function () {
+    return useColorPickerContext;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const 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(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,54 +1,54 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-exports.ColorSwatch = void 0;
-/*---------------------------------------------------------------------------------------------
- * 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 VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
-/**
- * ColorSwatch component to display within a color palette.
- * @example
- * <ColorSwatch color='#23450b' onClick={onClick}/>
- * <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'
+Object.defineProperty(exports, 'ColorSwatch', {
+  enumerable: true,
+  get: function () {
+    return ColorSwatch;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _ColorPicker = require('./ColorPicker.js');
+const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const ColorSwatch = _react.forwardRef((props, ref) => {
+  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.getColorValue)(color).toHslString(true),
+    [color],
+  );
+  return _react.createElement(
+    _index.Box,
+    {
+      as: !!onClick ? _index.ButtonBase : 'span',
+      className: (0, _classnames.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.VisuallyHidden,
+        null,
+        colorString.toUpperCase(),
+      ),
+  );
 });

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -17,15 +17,25 @@ export type ComboboxMultipleTypeProps<T> = {
     /**
      * Controlled value of ComboBox.
      * If `multiple` is enabled, it is an array of values.
+     *
+     * Pass `null` or `undefined` to reset the value. Apart from resetting the value:
+     * * `value={null}` will switch to/remain in the *controlled* state.
+     * * `value={undefined}` will switch to/remain in the *uncontrolled* state.
+     */
+    value?: T | null | undefined;
+    /**
+     * Default value of `value` that is set on initial render. This is useful when you don't want to
+     * maintain your own state but still want to control the initial `value`.
      */
-    value?: T;
+    defaultValue?: T | null;
     /**
      * Callback fired when selected value changes.
      */
     onChange?: (value: T) => void;
 } | {
     multiple: true;
-    value?: T[];
+    value?: T[] | null | undefined;
+    defaultValue?: T[] | null;
     onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
 };
 export type ComboBoxProps<T> = {
@@ -103,6 +113,6 @@ export type ComboBoxProps<T> = {
  * />
  */
 export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement> | undefined;
+    ref?: React.ForwardedRef<HTMLElement>;
 }) => JSX.Element;
 export {};