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

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CheckboxProps = {
-    /**
-     * Text that will be shown next to the checkbox.
-     */
-    label?: React.ReactNode;
-    /**
-     * Allow checkbox to be indeterminate.
-     * @default false
-     */
-    indeterminate?: boolean;
-    /**
-     * Status of checkbox.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Type of checkbox, regular or eyeball checkbox that is used for visibility.
-     * @default 'default'
-     */
-    variant?: 'default' | 'eyeball';
-    /**
-     * Display a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Passes properties for checkbox wrapper.
-     */
-    wrapperProps?: React.ComponentProps<'label'>;
-    /**
-     * Passes properties for checkbox label.
-     */
-    labelProps?: React.ComponentProps<'span'>;
-};
-/**
- * Simple input checkbox
- * @example
- * <Checkbox />
- * <Checkbox label='Basic Checkbox' />
- * <Checkbox label='Disabled Checkbox' disabled />
- * <Checkbox label='Checked' checked />
- * <Checkbox label='Positive Checkbox' status='positive' />
- * <Checkbox label='Warning Checkbox' status='warning' />
- * <Checkbox label='Negative Checkbox' status='negative' />
- * <Checkbox label='Visibility Checkbox' variant='eyeball' />
- */
-export declare const Checkbox: PolymorphicForwardRefComponent<"input", CheckboxProps>;
-export {};

package/esm/core/Checkbox/Checkbox.js

@@ -1,79 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useMergedRefs, Box } from '../../utils/index.js';
-export const Checkbox = React.forwardRef((props, ref) => {
-  let {
-    className,
-    disabled = false,
-    indeterminate = false,
-    label,
-    status,
-    variant = 'default',
-    isLoading = false,
-    wrapperProps = {},
-    labelProps = {},
-    style,
-    ...rest
-  } = props;
-  let inputElementRef = React.useRef(null);
-  let refs = useMergedRefs(inputElementRef, ref);
-  React.useEffect(() => {
-    if (inputElementRef.current) {
-      inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked =
-        !indeterminate && inputElementRef.current.checked;
-    }
-  });
-  let checkbox = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Box, {
-      as: 'input',
-      className: cx(
-        'iui-checkbox',
-        {
-          'iui-checkbox-visibility': 'eyeball' === variant,
-        },
-        className,
-      ),
-      style: style,
-      'data-iui-loading': isLoading ? 'true' : void 0,
-      disabled: disabled || isLoading,
-      type: 'checkbox',
-      ref: refs,
-      ...rest,
-    }),
-    isLoading &&
-      React.createElement(ProgressRadial, {
-        size: 'x-small',
-        indeterminate: true,
-      }),
-  );
-  let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-  let { className: labelClassName, ...restLabelProps } = labelProps;
-  return label
-    ? React.createElement(
-        Box,
-        {
-          as: 'label',
-          className: cx('iui-checkbox-wrapper', wrapperClassName),
-          'data-iui-disabled': disabled ? 'true' : void 0,
-          'data-iui-status': status,
-          'data-iui-loading': isLoading ? 'true' : void 0,
-          ...restWrapperProps,
-        },
-        checkbox,
-        label &&
-          React.createElement(
-            Box,
-            {
-              as: 'span',
-              className: cx('iui-checkbox-label', labelClassName),
-              ...restLabelProps,
-            },
-            label,
-          ),
-      )
-    : checkbox;
-});

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { Slider } from '../Slider/Slider.js';
-type ColorBuilderProps = {
-    /**
-     * Passes props to the color field.
-     */
-    colorFieldProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to the color dot.
-     */
-    colorDotProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to the color opacity slider.
-     */
-    opacitySliderProps?: React.ComponentProps<typeof Slider>;
-    /**
-     * Passes props to the color hue slider.
-     */
-    hueSliderProps?: React.ComponentProps<typeof Slider>;
-};
-/**
- * `ColorBuilder` consists of two parts:
- * a color canvas to adjust saturation and lightness values,
- * and a set of sliders to adjust hue and alpha values.
- */
-export declare const ColorBuilder: PolymorphicForwardRefComponent<"div", ColorBuilderProps>;
-export {};

package/esm/core/ColorPicker/ColorBuilder.js

@@ -1,320 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  ColorValue,
-  getBoundedValue,
-  useEventListener,
-  useMergedRefs,
-  Box,
-  mergeEventHandlers,
-} from '../../utils/index.js';
-import { Slider } from '../Slider/Slider.js';
-import { useColorPickerContext } from './ColorPickerContext.js';
-let getVerticalPercentageOfRectangle = (rect, pointer) => {
-  let position = getBoundedValue(pointer, rect.top, rect.bottom);
-  return ((position - rect.top) / rect.height) * 100;
-};
-let getHorizontalPercentageOfRectangle = (rect, pointer) => {
-  let position = getBoundedValue(pointer, rect.left, rect.right);
-  return ((position - rect.left) / rect.width) * 100;
-};
-export const ColorBuilder = React.forwardRef((props, ref) => {
-  let {
-    className,
-    colorFieldProps,
-    colorDotProps,
-    opacitySliderProps,
-    hueSliderProps,
-    ...rest
-  } = props;
-  let builderRef = React.useRef();
-  let refs = useMergedRefs(builderRef, ref);
-  let {
-    activeColor,
-    hsvColor,
-    onChangeComplete,
-    applyHsvColorChange,
-    showAlpha,
-  } = useColorPickerContext();
-  let hueSliderColor = React.useMemo(
-    () =>
-      ColorValue.create({
-        h: hsvColor.h,
-        s: 100,
-        v: 100,
-      }),
-    [hsvColor.h],
-  );
-  let sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-  let alphaValue = React.useMemo(
-    () => (showAlpha ? hsvColor.a ?? 1 : 1),
-    [hsvColor.a, showAlpha],
-  );
-  let dotColorString = React.useMemo(
-    () => activeColor.toHexString(),
-    [activeColor],
-  );
-  let [colorDotActive, setColorDotActive] = React.useState(false);
-  let hueColorString = hueSliderColor.toHexString();
-  let squareTop = 100 - hsvColor.v;
-  let squareLeft = hsvColor.s;
-  let updateHueSlider = React.useCallback(
-    (huePercent, selectionChanged) => {
-      let hue = Number(huePercent.toFixed(2));
-      let newHsvColor = {
-        h: hue,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  let updateOpacitySlider = React.useCallback(
-    (alphaPercent, selectionChanged) => {
-      let alpha = Number(alphaPercent.toFixed(2));
-      let newHsvColor = {
-        h: hsvColor.h,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: alpha,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  let squareRef = React.useRef(null);
-  let colorDotRef = React.useRef(null);
-  let updateColorDot = React.useCallback(
-    (x, y, selectionChanged) => {
-      let newHsvColor = {
-        h: hsvColor.h,
-        s: x,
-        v: 100 - y,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  let updateSquareValue = React.useCallback(
-    (event, callbackType) => {
-      if (
-        (squareRef.current && colorDotActive) ||
-        (squareRef.current && 'onClick' === callbackType)
-      ) {
-        let percentX = getHorizontalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientX,
-        );
-        let percentY = getVerticalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientY,
-        );
-        'onChange' === callbackType
-          ? updateColorDot(percentX, percentY, true)
-          : updateColorDot(percentX, percentY, false);
-      }
-    },
-    [colorDotActive, updateColorDot],
-  );
-  let handleSquarePointerUp = React.useCallback(
-    (event) => {
-      if (!colorDotActive) return;
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointerup',
-    handleSquarePointerUp,
-    builderRef.current?.ownerDocument,
-  );
-  let handleSquarePointerMove = React.useCallback(
-    (event) => {
-      if (!colorDotActive) return;
-      event.preventDefault();
-      event.stopPropagation();
-      updateSquareValue(event, 'onUpdate');
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointermove',
-    handleSquarePointerMove,
-    builderRef.current?.ownerDocument,
-  );
-  let handleSquarePointerLeave = React.useCallback(
-    (event) => {
-      if (!colorDotActive) return;
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointerleave',
-    handleSquarePointerLeave,
-    builderRef.current?.ownerDocument,
-  );
-  let keysPressed = React.useRef({});
-  let handleColorDotKeyDown = (event) => {
-    if (event.altKey) return;
-    let x = squareLeft;
-    let y = squareTop;
-    keysPressed.current[event.key] = true;
-    switch (event.key) {
-      case 'ArrowDown':
-        y = Math.min(y + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-      case 'ArrowUp':
-        y = Math.max(y - 1, 0);
-        updateColorDot(x, y, false);
-        break;
-      case 'ArrowLeft':
-        x = Math.max(x - 1, 0);
-        updateColorDot(x, y, false);
-        break;
-      case 'ArrowRight':
-        x = Math.min(x + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-    }
-  };
-  let handleColorDotKeyUp = (event) => {
-    keysPressed.current[event.key] = false;
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        if (
-          keysPressed.current['ArrowUp'] ||
-          keysPressed.current['ArrowDown'] ||
-          keysPressed.current['ArrowLeft'] ||
-          keysPressed.current['ArrowRight']
-        )
-          return;
-        onChangeComplete?.(ColorValue.create(hsvColor));
-        break;
-    }
-  };
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-color-selection-wrapper', className),
-      ref: refs,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...colorFieldProps,
-        className: cx('iui-color-field', colorFieldProps?.className),
-        style: {
-          '--iui-color-field-hue': hueColorString,
-          '--iui-color-picker-selected-color': dotColorString,
-          ...colorFieldProps?.style,
-        },
-        ref: useMergedRefs(squareRef, colorFieldProps?.ref),
-        onPointerDown: mergeEventHandlers(
-          colorFieldProps?.onPointerDown,
-          (event) => {
-            event.preventDefault();
-            updateSquareValue(event, 'onClick');
-            setColorDotActive(true);
-            colorDotRef.current?.focus();
-          },
-        ),
-      },
-      React.createElement(Box, {
-        as: 'div',
-        ...colorDotProps,
-        className: cx('iui-color-dot', colorDotProps?.className),
-        style: {
-          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
-          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
-          ...colorDotProps?.style,
-        },
-        onPointerDown: mergeEventHandlers(colorDotProps?.onPointerDown, () => {
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        }),
-        onKeyDown: mergeEventHandlers(
-          colorDotProps?.onKeyDown,
-          handleColorDotKeyDown,
-        ),
-        onKeyUp: mergeEventHandlers(
-          colorDotProps?.onKeyUp,
-          handleColorDotKeyUp,
-        ),
-        tabIndex: 0,
-        ref: useMergedRefs(colorDotRef, colorDotProps?.ref),
-      }),
-    ),
-    React.createElement(Slider, {
-      minLabel: '',
-      maxLabel: '',
-      values: [sliderValue],
-      trackDisplayMode: 'none',
-      min: 0,
-      max: 359,
-      ...hueSliderProps,
-      className: cx('iui-hue-slider', hueSliderProps?.className),
-      tooltipProps: () => ({
-        visible: false,
-        ...hueSliderProps?.tooltipProps,
-      }),
-      onChange: (values) => {
-        hueSliderProps?.onChange?.(values);
-        updateHueSlider(values[0], true);
-      },
-      onUpdate: (values) => {
-        hueSliderProps?.onUpdate?.(values);
-        updateHueSlider(values[0], false);
-      },
-      thumbProps: () => ({
-        'aria-label': 'Hue',
-        ...hueSliderProps?.thumbProps,
-      }),
-    }),
-    showAlpha &&
-      React.createElement(Slider, {
-        minLabel: '',
-        maxLabel: '',
-        values: [alphaValue],
-        trackDisplayMode: 'none',
-        min: 0,
-        max: 1,
-        step: 0.01,
-        ...opacitySliderProps,
-        className: cx('iui-opacity-slider', opacitySliderProps?.className),
-        tooltipProps: () => ({
-          visible: false,
-          ...opacitySliderProps?.tooltipProps,
-        }),
-        onChange: (values) => {
-          opacitySliderProps?.onChange?.(values);
-          updateOpacitySlider(values[0], true);
-        },
-        onUpdate: (values) => {
-          opacitySliderProps?.onUpdate?.(values);
-          updateOpacitySlider(values[0], false);
-        },
-        style: {
-          '--iui-color-picker-selected-color': hueColorString,
-          ...opacitySliderProps?.style,
-        },
-        thumbProps: () => ({
-          'aria-label': 'Opacity',
-          ...opacitySliderProps?.thumbProps,
-        }),
-      }),
-  );
-});

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { IconButton } from '../Buttons/IconButton.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ColorInputPanelProps = {
-    /**
-     * The default color format to be inputted in the panel.
-     */
-    defaultColorFormat: 'hsl' | 'rgb' | 'hex';
-    /**
-     * Color formats to switch between. The swap button will cycle between these formats.
-     *
-     * If array only has one option, then swap button will not be shown.
-     *
-     * @default ['hsl', 'rgb', 'hex']
-     */
-    allowedColorFormats?: ('hsl' | 'rgb' | 'hex')[];
-    /**
-     * Passes props to the color picker section label.
-     */
-    panelLabelProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to the color input container.
-     */
-    colorInputContainerProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to the color input fields group.
-     */
-    inputFieldsGroupProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to the swap color format button.
-     */
-    swapColorFormatButtonProps?: React.ComponentProps<typeof IconButton>;
-};
-/**
- * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
- * It also allows switching between the specified formats using a swap button.
- * @example
- * <ColorPicker>
- *   // ...
- *   <ColorInputPanel defaultColorFormat='hsl' />
- * </ColorPicker>
- */
-export declare const ColorInputPanel: PolymorphicForwardRefComponent<"div", ColorInputPanelProps>;
-export {};