@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/DEV-esm/core/ColorPicker/ColorInputPanel.js

@@ -1,433 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IconButton } from '../Buttons/IconButton.js';
-import { Input } from '../Input/Input.js';
-import {
-  ColorValue,
-  SvgSwap,
-  Box,
-  useId,
-  useMergedRefs,
-  mergeEventHandlers,
-} from '../../utils/index.js';
-import { useColorPickerContext } from './ColorPickerContext.js';
-export const ColorInputPanel = React.forwardRef((props, ref) => {
-  let {
-    defaultColorFormat,
-    allowedColorFormats = ['hsl', 'rgb', 'hex'],
-    className,
-    colorInputContainerProps,
-    panelLabelProps,
-    inputFieldsGroupProps,
-    swapColorFormatButtonProps,
-    ...rest
-  } = props;
-  let inputsContainerRef = React.useRef(null);
-  let { activeColor, applyHsvColorChange, hsvColor, showAlpha } =
-    useColorPickerContext();
-  let [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
-  React.useEffect(() => {
-    setCurrentFormat(defaultColorFormat);
-  }, [defaultColorFormat]);
-  let [input, setInput] = React.useState(['', '', '', '']);
-  React.useEffect(() => {
-    if ('hsl' === currentFormat) {
-      let hsl = activeColor.toHslColor();
-      setInput([
-        ColorValue.getFormattedColorNumber(hsvColor.h),
-        ColorValue.getFormattedColorNumber(hsl.s),
-        ColorValue.getFormattedColorNumber(hsl.l),
-        ColorValue.getFormattedColorNumber(
-          hsl.a ?? activeColor.getAlpha() / 255,
-          2,
-        ),
-      ]);
-    } else if ('rgb' === currentFormat) {
-      let rgb = activeColor.toRgbColor();
-      setInput([
-        rgb.r.toString(),
-        rgb.g.toString(),
-        rgb.b.toString(),
-        ColorValue.getFormattedColorNumber(
-          rgb.a ?? activeColor.getAlpha() / 255,
-          2,
-        ),
-      ]);
-    } else {
-      setInput([activeColor.toHexString(showAlpha)]);
-      setValidHexInput(true);
-    }
-  }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-  let [validHexInput, setValidHexInput] = React.useState(true);
-  let swapColorFormat = React.useCallback(() => {
-    let newFormat =
-      allowedColorFormats[
-        (allowedColorFormats.indexOf(currentFormat) + 1) %
-          allowedColorFormats.length
-      ] ?? allowedColorFormats[0];
-    setCurrentFormat(newFormat);
-  }, [currentFormat, allowedColorFormats]);
-  let isFocusInside = (focused) =>
-    !!(
-      focused &&
-      inputsContainerRef.current &&
-      inputsContainerRef.current.contains(focused)
-    );
-  let handleColorInputChange = () => {
-    let color;
-    if ('hex' === currentFormat)
-      try {
-        let value = input[0].replace(/ /g, '').toLowerCase();
-        color = ColorValue.create(value);
-        setValidHexInput(true);
-        if (activeColor.toHexString(showAlpha).toLowerCase() === value) return;
-      } catch (_e) {
-        setValidHexInput(false);
-        return;
-      }
-    if ('hsl' === currentFormat) {
-      let [h, s, l, a] = input.map(Number);
-      if (
-        h < 0 ||
-        h > 360 ||
-        s < 0 ||
-        s > 100 ||
-        l < 0 ||
-        l > 100 ||
-        a < 0 ||
-        a > 1
-      )
-        return;
-      let hsl = activeColor.toHslColor();
-      if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) return;
-      color = ColorValue.create({
-        h,
-        s,
-        l,
-        a,
-      });
-    }
-    if ('rgb' === currentFormat) {
-      let [r, g, b, a] = input.map(Number);
-      if (
-        r < 0 ||
-        r > 255 ||
-        g < 0 ||
-        g > 255 ||
-        b < 0 ||
-        b > 255 ||
-        a < 0 ||
-        a > 1
-      )
-        return;
-      let rgb = activeColor.toRgbColor();
-      if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) return;
-      color = ColorValue.create({
-        r,
-        g,
-        b,
-        a,
-      });
-    }
-    if (color) applyHsvColorChange(color.toHsvColor(), true, color);
-  };
-  let hexInputField = React.createElement(Input, {
-    size: 'small',
-    maxLength: showAlpha ? 9 : 7,
-    minLength: 1,
-    placeholder: 'HEX',
-    'aria-label': 'Hex',
-    value: input[0],
-    onChange: (event) => {
-      let value = event.target.value.startsWith('#')
-        ? event.target.value
-        : `#${event.target.value}`;
-      setInput([value]);
-    },
-    onKeyDown: (event) => {
-      if ('Enter' === event.key) {
-        event.preventDefault();
-        handleColorInputChange();
-      }
-    },
-    onBlur: (event) => {
-      event.preventDefault();
-      handleColorInputChange();
-    },
-    status: validHexInput ? void 0 : 'negative',
-  });
-  let hslInputs = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '359',
-      step: '.1',
-      placeholder: 'H',
-      'aria-label': 'Hue',
-      value: input[0] ?? '',
-      onChange: (event) => {
-        setInput([event.target.value, input[1], input[2], input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : void 0,
-    }),
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '100',
-      step: '.1',
-      placeholder: 'S',
-      'aria-label': 'Saturation',
-      value: input[1] ?? '',
-      onChange: (event) => {
-        setInput([input[0], event.target.value, input[2], input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : void 0,
-    }),
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '100',
-      step: '.1',
-      placeholder: 'L',
-      'aria-label': 'Lightness',
-      value: input[2] ?? '',
-      onChange: (event) => {
-        setInput([input[0], input[1], event.target.value, input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : void 0,
-    }),
-    showAlpha &&
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '1',
-        step: '.01',
-        placeholder: 'A',
-        'aria-label': 'Alpha',
-        value: input[3] ?? '',
-        onChange: (event) => {
-          setInput([input[0], input[1], input[2], event.target.value]);
-        },
-        onKeyDown: (event) => {
-          if ('Enter' === event.key) {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
-          event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-        },
-        status:
-          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
-      }),
-  );
-  let rgbInputs = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '255',
-      placeholder: 'R',
-      'aria-label': 'Red',
-      value: input[0] ?? '',
-      onChange: (event) => {
-        setInput([event.target.value, input[1], input[2], input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : void 0,
-    }),
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '255',
-      placeholder: 'G',
-      'aria-label': 'Green',
-      value: input[1] ?? '',
-      onChange: (event) => {
-        setInput([input[0], event.target.value, input[2], input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : void 0,
-    }),
-    React.createElement(Input, {
-      size: 'small',
-      type: 'number',
-      min: '0',
-      max: '255',
-      placeholder: 'B',
-      'aria-label': 'Blue',
-      value: input[2] ?? '',
-      onChange: (event) => {
-        setInput([input[0], input[1], event.target.value, input[3]]);
-      },
-      onKeyDown: (event) => {
-        if ('Enter' === event.key) {
-          event.preventDefault();
-          handleColorInputChange();
-        }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-      },
-      status:
-        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : void 0,
-    }),
-    showAlpha &&
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '1',
-        step: '.01',
-        placeholder: 'A',
-        'aria-label': 'Alpha',
-        value: input[3] ?? '',
-        onChange: (event) => {
-          setInput([input[0], input[1], input[2], event.target.value]);
-        },
-        onKeyDown: (event) => {
-          if ('Enter' === event.key) {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
-          event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-        },
-        status:
-          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
-      }),
-  );
-  let fallbackLabelId = useId();
-  let labelId = panelLabelProps?.id ?? fallbackLabelId;
-  return React.createElement(
-    Box,
-    {
-      as: 'div',
-      className: cx('iui-color-input-wrapper', className),
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...panelLabelProps,
-        className: cx(
-          'iui-color-picker-section-label',
-          panelLabelProps?.className,
-        ),
-        id: labelId,
-      },
-      showAlpha && 'hex' !== currentFormat
-        ? currentFormat.toUpperCase() + 'A'
-        : currentFormat.toUpperCase(),
-    ),
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...colorInputContainerProps,
-        className: cx('iui-color-input', colorInputContainerProps?.className),
-      },
-      allowedColorFormats.length > 1 &&
-        React.createElement(
-          IconButton,
-          {
-            size: 'small',
-            styleType: 'borderless',
-            label: 'Switch format',
-            ...swapColorFormatButtonProps,
-            onClick: mergeEventHandlers(
-              swapColorFormatButtonProps?.onClick,
-              swapColorFormat,
-            ),
-          },
-          React.createElement(SvgSwap, null),
-        ),
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          role: 'hex' !== currentFormat ? 'group' : void 0,
-          'aria-labelledby': 'hex' !== currentFormat ? labelId : void 0,
-          ...inputFieldsGroupProps,
-          ref: useMergedRefs(inputsContainerRef, inputFieldsGroupProps?.ref),
-          className: cx(
-            'iui-color-input-fields',
-            inputFieldsGroupProps?.className,
-          ),
-        },
-        'hex' === currentFormat && hexInputField,
-        'rgb' === currentFormat && rgbInputs,
-        'hsl' === currentFormat && hslInputs,
-      ),
-    ),
-  );
-});
-ColorInputPanel.displayName = 'ColorInputPanel';

package/DEV-esm/core/ColorPicker/ColorPalette.js

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-import { getColorValue } from './ColorPicker.js';
-import { ColorSwatch } from './ColorSwatch.js';
-import { useColorPickerContext } from './ColorPickerContext.js';
-export const ColorPalette = React.forwardRef((props, ref) => {
-  let {
-    colors,
-    label,
-    labelProps,
-    className,
-    children,
-    paletteContainerProps,
-    ...rest
-  } = props;
-  let { activeColor, setActiveColor, onChangeComplete } =
-    useColorPickerContext();
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-color-palette-wrapper', className),
-      ref: ref,
-      ...rest,
-    },
-    label &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...labelProps,
-          className: cx(
-            'iui-color-picker-section-label',
-            labelProps?.className,
-          ),
-        },
-        label,
-      ),
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...paletteContainerProps,
-        className: cx('iui-color-palette', paletteContainerProps?.className),
-      },
-      children,
-      colors &&
-        colors.map((_color, index) => {
-          let color = getColorValue(_color);
-          return React.createElement(ColorSwatch, {
-            key: index,
-            color: color,
-            onClick: () => {
-              onChangeComplete?.(color);
-              setActiveColor(color);
-            },
-            isActive: color.equals(activeColor),
-          });
-        }),
-    ),
-  );
-});
-ColorPalette.displayName = 'ColorPalette';

package/DEV-esm/core/ColorPicker/ColorPicker.js

@@ -1,77 +0,0 @@
-import * as React from 'react';
-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);
-};
-export const ColorPicker = React.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    selectedColor,
-    onChange,
-    onChangeComplete,
-    showAlpha = false,
-    applyBackground = true,
-    ...rest
-  } = props;
-  let ref = React.useRef(null);
-  let inColor = React.useMemo(
-    () => getColorValue(selectedColor),
-    [selectedColor],
-  );
-  let activeColorTbgr = React.useRef(inColor.toTbgr());
-  let [activeColor, setActiveColor] = React.useState(inColor);
-  React.useEffect(() => {
-    setActiveColor(inColor);
-  }, [inColor]);
-  let [hsvColor, setHsvColor] = React.useState(() => activeColor.toHsvColor());
-  React.useEffect(() => {
-    if (inColor.toTbgr() !== activeColorTbgr.current) {
-      activeColorTbgr.current = inColor.toTbgr();
-      setHsvColor(inColor.toHsvColor());
-    }
-  }, [inColor]);
-  let applyHsvColorChange = React.useCallback(
-    (newColor, selectionChanged, newColorValue) => {
-      setHsvColor(newColor);
-      let newActiveColor = newColorValue ?? ColorValue.create(newColor);
-      if (selectionChanged) onChangeComplete?.(newActiveColor);
-      else onChange?.(newActiveColor);
-      activeColorTbgr.current = newActiveColor.toTbgr();
-      setActiveColor(newActiveColor);
-    },
-    [onChange, onChangeComplete],
-  );
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-color-picker',
-        {
-          'iui-popover-surface': applyBackground,
-        },
-        className,
-      ),
-      ref: useMergedRefs(ref, forwardedRef),
-      ...rest,
-    },
-    React.createElement(
-      ColorPickerContext.Provider,
-      {
-        value: {
-          activeColor,
-          setActiveColor,
-          hsvColor,
-          applyHsvColorChange,
-          onChangeComplete,
-          showAlpha,
-        },
-      },
-      children,
-    ),
-  );
-});
-ColorPicker.displayName = 'ColorPicker';

package/DEV-esm/core/ColorPicker/ColorPickerContext.js

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

package/DEV-esm/core/ColorPicker/ColorSwatch.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box, ButtonBase } from '../../utils/index.js';
-import { getColorValue } from './ColorPicker.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-export const ColorSwatch = React.forwardRef((props, ref) => {
-  let { color, style, onClick, isActive, className, ...rest } = props;
-  let colorString = React.useMemo(
-    () =>
-      'string' == typeof color ? color : getColorValue(color).toHslString(true),
-    [color],
-  );
-  return React.createElement(
-    Box,
-    {
-      as: onClick ? ButtonBase : 'span',
-      className: cx(
-        'iui-color-swatch',
-        {
-          'iui-active': isActive,
-        },
-        className,
-      ),
-      style: {
-        '--iui-color-swatch-background': colorString,
-        ...style,
-      },
-      onClick: onClick,
-      'aria-pressed': !!onClick && isActive ? 'true' : void 0,
-      ref: ref,
-      ...rest,
-    },
-    props.children ??
-      React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
-  );
-});
-ColorSwatch.displayName = 'ColorSwatch';