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

package/esm/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/esm/core/ColorPicker/ColorPalette.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, getFocusableElements, useMergedRefs, Box, } from '../utils/index.js';
+import {
+  ColorValue,
+  getFocusableElements,
+  useMergedRefs,
+  Box,
+} from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
@@ -20,85 +25,115 @@ import { useColorPickerContext } from './ColorPickerContext.js';
  * </ColorPalette>
  */
 export const ColorPalette = React.forwardRef((props, ref) => {
-    const { colors, label, className, children, ...rest } = props;
-    const { activeColor, setActiveColor, onChangeComplete } = useColorPickerContext();
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
-    const setDefaultTabIndex = (el) => {
-        if (el && !el.querySelector('[tabindex="0"]')) {
-            el.firstElementChild?.setAttribute('tabindex', '0');
+  const { colors, label, className, children, ...rest } = props;
+  const { activeColor, setActiveColor, onChangeComplete } =
+    useColorPickerContext();
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
+  const setDefaultTabIndex = (el) => {
+    if (el && !el.querySelector('[tabindex="0"]')) {
+      el.firstElementChild?.setAttribute('tabindex', '0');
+    }
+  };
+  const paletteRef = React.useRef(null);
+  const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
+  // Color palette arrow key navigation
+  const handleKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const swatches = 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;
+          }
         }
-    };
-    const paletteRef = React.useRef(null);
-    const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
-    // Color palette arrow key navigation
-    const handleKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const swatches = 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 = getFocusableElements(paletteRef.current);
-            swatches[focusedIndex]?.focus();
-        }
-    }, [focusedIndex]);
-    return (React.createElement(Box, { className: cx('iui-color-palette-wrapper', className), ref: ref, ...rest },
-        label && React.createElement(Box, { className: 'iui-color-picker-section-label' }, label),
-        React.createElement(Box, { className: 'iui-color-palette', onKeyDown: handleKeyDown, ref: paletteRefs },
-            children,
-            colors &&
-                colors.map((_color, index) => {
-                    const color = getColorValue(_color);
-                    return (React.createElement(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 = getFocusableElements(paletteRef.current);
+      swatches[focusedIndex]?.focus();
+    }
+  }, [focusedIndex]);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-color-palette-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        Box,
+        { className: 'iui-color-picker-section-label' },
+        label,
+      ),
+    React.createElement(
+      Box,
+      {
+        className: 'iui-color-palette',
+        onKeyDown: handleKeyDown,
+        ref: paletteRefs,
+      },
+      children,
+      colors &&
+        colors.map((_color, index) => {
+          const color = getColorValue(_color);
+          return React.createElement(ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: (event) => {
+              event.preventDefault();
+              onChangeComplete?.(color);
+              setActiveColor(color);
+            },
+            isActive: color.equals(activeColor),
+          });
+        }),
+    ),
+  );
 });
 export default ColorPalette;

package/esm/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/esm/core/ColorPicker/ColorPicker.js

@@ -3,14 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { ColorValue, getTabbableElements, useMergedRefs, Box, } from '../utils/index.js';
+import { ColorValue, useMergedRefs, Box } from '../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';
 export const getColorValue = (color) => {
-    if (color instanceof ColorValue) {
-        return color;
-    }
-    return ColorValue.create(color);
+  if (color instanceof ColorValue) {
+    return color;
+  }
+  return ColorValue.create(color);
 };
 /**
  * ColorPicker to display color builder options, color inputs, and a palette of ColorSwatches.
@@ -26,54 +26,75 @@ export const getColorValue = (color) => {
  * </ColorPicker>
  */
 export const 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 = getTabbableElements(ref.current);
-            tabbableElements[0].focus();
-        }
-    }, [setFocus]);
-    const inColor = React.useMemo(() => 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 ?? 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(Box, { className: cx('iui-color-picker', className), ref: useMergedRefs(ref, forwardedRef), ...rest },
-        React.createElement(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(
+    () => 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 ?? 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(
+    Box,
+    {
+      className: cx('iui-color-picker', className),
+      ref: useMergedRefs(ref, forwardedRef),
+      ...rest,
+    },
+    React.createElement(
+      ColorPickerContext.Provider,
+      {
+        value: {
+          activeColor,
+          setActiveColor,
+          hsvColor,
+          applyHsvColorChange,
+          onChangeComplete,
+          showAlpha,
+        },
+      },
+      children,
+    ),
+  );
 });
 export default ColorPicker;

package/esm/core/ColorPicker/ColorPickerContext.js

@@ -5,9 +5,11 @@
 import * as React from 'react';
 export const ColorPickerContext = React.createContext(undefined);
 export const useColorPickerContext = () => {
-    const context = React.useContext(ColorPickerContext);
-    if (context == undefined) {
-        throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
-    }
-    return context;
+  const context = React.useContext(ColorPickerContext);
+  if (context == undefined) {
+    throw new Error(
+      'useColorPickerContext must be used within a ColorPickerContext.Provider',
+    );
+  }
+  return context;
 };

package/esm/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/esm/core/ColorPicker/ColorSwatch.js

@@ -13,13 +13,25 @@ import { getColorValue } from './ColorPicker.js';
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
 export const 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
-        : getColorValue(color).toHslString(true), [color]);
-    return (React.createElement(Box, { className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: {
-            '--iui-color-swatch-background': colorString,
-            ...style,
-        }, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref, ...rest }));
+        : getColorValue(color).toHslString(true),
+    [color],
+  );
+  return React.createElement(Box, {
+    className: cx('iui-color-swatch', { 'iui-active': isActive }, className),
+    style: {
+      '--iui-color-swatch-background': colorString,
+      ...style,
+    },
+    onClick: onClick,
+    tabIndex: isActive ? 0 : -1,
+    'aria-selected': isActive,
+    ref: ref,
+    ...rest,
+  });
 });
 export default ColorSwatch;

package/esm/core/ComboBox/ComboBox.d.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import type { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
 import type { PopoverProps, InputContainerProps, CommonProps } from '../utils/index.js';
-declare type ActionType = 'added' | 'removed';
-declare type MultipleOnChangeProps<T> = {
+type ActionType = 'added' | 'removed';
+type MultipleOnChangeProps<T> = {
     value: T;
     type: ActionType;
 };
-export declare type ComboboxMultipleTypeProps<T> = {
+export type ComboboxMultipleTypeProps<T> = {
     /**
      * Enable multiple selection.
      * @default false
@@ -27,7 +27,7 @@ export declare type ComboboxMultipleTypeProps<T> = {
     value?: T[];
     onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
 };
-export declare type ComboBoxProps<T> = {
+export type ComboBoxProps<T> = {
     /**
      * Array of options that populate the dropdown list.
      */
@@ -44,7 +44,7 @@ export declare type ComboBoxProps<T> = {
     /**
      * Native input element props.
      */
-    inputProps?: Omit<React.ComponentProps<typeof Input>, 'setFocus'>;
+    inputProps?: React.ComponentProps<typeof Input>;
     /**
      * Props to customize dropdown menu behavior.
      */
@@ -97,5 +97,5 @@ export declare type ComboBoxProps<T> = {
  *   onChange={() => {}}
  * />
  */
-export declare const ComboBox: <T>(props: ComboBoxProps<T>) => JSX.Element;
+export declare const ComboBox: <T>(props: ComboBoxProps<T>) => React.JSX.Element;
 export default ComboBox;