@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

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

@@ -1,20 +0,0 @@
-import { ColorValue } from '../../utils/index.js';
-import type { ColorType, PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ColorSwatchProps = {
-    /**
-     * Color code.
-     */
-    color: ColorValue | ColorType;
-    /**
-     * Is color selected.
-     */
-    isActive?: boolean;
-};
-/**
- * ColorSwatch component to display within a color palette.
- * @example
- * <ColorSwatch color='#23450b' onClick={onClick}/>
- * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
- */
-export declare const ColorSwatch: PolymorphicForwardRefComponent<"button", ColorSwatchProps>;
-export {};

package/esm/core/ColorPicker/ColorSwatch.js

@@ -1,36 +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()),
-  );
-});

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

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import type { SelectOption } from '../Select/Select.js';
-import type { Input } from '../Input/Input.js';
-import { usePopover } from '../Popover/Popover.js';
-import type { InputContainerProps, CommonProps, PortalProps } from '../../utils/index.js';
-import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
-type ActionType = 'added' | 'removed';
-type MultipleOnChangeProps<T> = {
-    value: T;
-    type: ActionType;
-};
-export type ComboboxMultipleTypeProps<T> = {
-    /**
-     * Enable multiple selection.
-     * @default false
-     */
-    multiple?: false;
-    /**
-     * 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`.
-     */
-    defaultValue?: T | null;
-    /**
-     * Callback fired when selected value changes.
-     */
-    onChange?: (value: T) => void;
-} | {
-    multiple: true;
-    value?: T[] | null | undefined;
-    defaultValue?: T[] | null;
-    onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
-};
-export type ComboBoxProps<T> = {
-    /**
-     * Array of options that populate the dropdown list.
-     */
-    options: SelectOption<T>[];
-    /**
-     * Message shown below the combobox.
-     * Use `StatusMessage` component.
-     */
-    message?: React.ReactNode;
-    /**
-     * Function to customize the default filtering logic.
-     */
-    filterFunction?: (options: SelectOption<T>[], inputValue: string) => SelectOption<T>[];
-    /**
-     * Native input element props.
-     */
-    inputProps?: React.ComponentProps<typeof Input>;
-    /**
-     * Props to customize dropdown menu behavior.
-     */
-    dropdownMenuProps?: React.ComponentProps<'div'> & Pick<Parameters<typeof usePopover>['0'], 'middleware'> & Pick<PortalProps, 'portal'>;
-    /**
-     * End icon props.
-     */
-    endIconProps?: React.ComponentProps<typeof ComboBoxEndIcon>;
-    /**
-     * Message shown when no options are available.
-     * If `JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`.
-     * @default 'No options found'
-     */
-    emptyStateMessage?: React.ReactNode;
-    /**
-     * A custom item renderer can be specified to control the rendering.
-     *
-     * For keyboard navigation to work, the returned element should use the `id` provided by this function.
-     * The `isFocused` state is calculated using this `id` and can be used for specifying the focus styling.
-     * If a `MenuItem` is returned, then focus styling is automatically handled.
-     */
-    itemRenderer?: (option: SelectOption<T>, states: {
-        isSelected: boolean;
-        isFocused: boolean;
-        id: string;
-        index: number;
-    }) => JSX.Element;
-    /**
-     * If enabled, virtualization is used for the scrollable dropdown list.
-     * Use it if you expect a very long list of items.
-     * @default false
-     * @beta
-     */
-    enableVirtualization?: boolean;
-    /**
-     * Callback fired when dropdown menu is opened.
-     */
-    onShow?: () => void;
-    /**
-     * Callback fired when dropdown menu is closed.
-     */
-    onHide?: () => void;
-} & ComboboxMultipleTypeProps<T> & Pick<InputContainerProps, 'status'> & CommonProps;
-/**
- * ComboBox component that allows typing a value to filter the options in dropdown list.
- * Values can be selected either using mouse clicks or using the Enter key.
- * @example
- * <ComboBox
- *   options={[
- *     { label: 'Item 1', value: 1 },
- *     { label: 'Item 2', value: 2 },
- *     { label: 'Item 3', value: 3 },
- *   ]}
- *   onChange={() => {}}
- * />
- */
-export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
-export {};

package/esm/core/ComboBox/ComboBox.js

@@ -1,410 +0,0 @@
-import * as React from 'react';
-import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
-import { SelectTag } from '../Select/SelectTag.js';
-import { Text } from '../Typography/Text.js';
-import {
-  mergeRefs,
-  useLatestRef,
-  useLayoutEffect,
-  AutoclearingHiddenLiveRegion,
-  useId,
-  useControlledState,
-} from '../../utils/index.js';
-import { usePopover } from '../Popover/Popover.js';
-import { ComboBoxRefsContext, ComboBoxStateContext } from './helpers.js';
-import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
-import { ComboBoxInput } from './ComboBoxInput.js';
-import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
-import { ComboBoxMenu } from './ComboBoxMenu.js';
-import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
-let isMultipleEnabled = (variable, multiple) =>
-  multiple && (Array.isArray(variable) || null == variable);
-let isSingleOnChange = (onChange, multiple) => !multiple;
-let getOptionId = (option, idPrefix) =>
-  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
-export const ComboBox = React.forwardRef((props, forwardedRef) => {
-  let idPrefix = useId();
-  let defaultFilterFunction = React.useCallback(
-    (options, inputValue) =>
-      options.filter((option) =>
-        option.label.toLowerCase().includes(inputValue.toLowerCase()),
-      ),
-    [],
-  );
-  let {
-    options,
-    value: valueProp,
-    onChange,
-    filterFunction = defaultFilterFunction,
-    inputProps,
-    endIconProps,
-    dropdownMenuProps: { middleware, ...dropdownMenuProps } = {},
-    emptyStateMessage = 'No options found',
-    itemRenderer,
-    enableVirtualization = false,
-    multiple = false,
-    onShow: onShowProp,
-    onHide: onHideProp,
-    id = inputProps?.id ? `iui-${inputProps.id}-cb` : idPrefix,
-    defaultValue,
-    ...rest
-  } = props;
-  let inputRef = React.useRef(null);
-  let menuRef = React.useRef(null);
-  let onChangeProp = useLatestRef(onChange);
-  let optionsRef = useLatestRef(options);
-  let filterFunctionRef = useLatestRef(filterFunction);
-  let optionsExtraInfo = React.useMemo(() => {
-    let newOptionsExtraInfo = {};
-    options.forEach((option, index) => {
-      newOptionsExtraInfo[getOptionId(option, id)] = {
-        __originalIndex: index,
-      };
-    });
-    return newOptionsExtraInfo;
-  }, [id, options]);
-  let getSelectedIndexes = React.useCallback(
-    (value) => {
-      if (void 0 === value) return;
-      if (isMultipleEnabled(value, multiple)) {
-        let indexArray = [];
-        value?.forEach((value) => {
-          let indexToAdd = options.findIndex(
-            (option) => option.value === value,
-          );
-          if (indexToAdd > -1) indexArray.push(indexToAdd);
-        });
-        return indexArray;
-      }
-      return options.findIndex((option) => option.value === value);
-    },
-    [multiple, options],
-  );
-  let [selectedIndexes, setSelectedIndexes] = useControlledState(
-    getSelectedIndexes(defaultValue) ?? (multiple ? [] : -1),
-    getSelectedIndexes(valueProp),
-  );
-  let previousValue = React.useRef(valueProp);
-  useLayoutEffect(() => {
-    if (valueProp !== previousValue.current) {
-      previousValue.current = valueProp;
-      if (void 0 === valueProp)
-        isMultipleEnabled(selectedIndexes, multiple)
-          ? setSelectedIndexes([])
-          : setSelectedIndexes(-1);
-    }
-  }, [multiple, selectedIndexes, setSelectedIndexes, valueProp]);
-  let [isOpen, setIsOpen] = React.useState(false);
-  let [focusedIndex, setFocusedIndex] = React.useState(-1);
-  let onShowRef = useLatestRef(onShowProp);
-  let onHideRef = useLatestRef(onHideProp);
-  let show = React.useCallback(() => {
-    setIsOpen(true);
-    onShowRef.current?.();
-  }, [onShowRef]);
-  let hide = React.useCallback(() => {
-    setIsOpen(false);
-    onHideRef.current?.();
-  }, [onHideRef]);
-  useLayoutEffect(() => {
-    if (isOpen) {
-      inputRef.current?.focus();
-      if (!isMultipleEnabled(selectedIndexes, multiple))
-        setFocusedIndex(selectedIndexes ?? -1);
-    } else {
-      setFocusedIndex(-1);
-      isMultipleEnabled(selectedIndexes, multiple)
-        ? setInputValue('')
-        : setInputValue(
-            selectedIndexes >= 0
-              ? optionsRef.current[selectedIndexes]?.label ?? ''
-              : '',
-          );
-      setIsInputDirty(false);
-    }
-  }, [isOpen, multiple, optionsRef, selectedIndexes]);
-  let previousOptions = React.useRef(options);
-  React.useEffect(() => {
-    if (options !== previousOptions.current) {
-      previousOptions.current = options;
-      onOptionsChange();
-    }
-    function onOptionsChange() {
-      isMultipleEnabled(selectedIndexes, multiple)
-        ? setFocusedIndex(-1)
-        : setFocusedIndex(selectedIndexes);
-      if (!isMultipleEnabled(selectedIndexes, multiple) && !isOpen)
-        setInputValue(
-          selectedIndexes >= 0 ? options[selectedIndexes]?.label : '',
-        );
-    }
-  }, [options, isOpen, multiple, selectedIndexes]);
-  let [inputValue, setInputValue] = React.useState(
-    inputProps?.value?.toString() ?? '',
-  );
-  let [isInputDirty, setIsInputDirty] = React.useState(false);
-  let filteredOptions = React.useMemo(() => {
-    if (!isInputDirty) return options;
-    return filterFunctionRef.current?.(options, inputValue);
-  }, [filterFunctionRef, inputValue, options, isInputDirty]);
-  let [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-  let handleOnInput = React.useCallback(
-    (event) => {
-      let { value } = event.currentTarget;
-      setInputValue(value);
-      show();
-      setIsInputDirty(true);
-      if (-1 != focusedIndex) setFocusedIndex(-1);
-      inputProps?.onChange?.(event);
-    },
-    [focusedIndex, inputProps, show],
-  );
-  let isMenuItemSelected = React.useCallback(
-    (index) => {
-      if (isMultipleEnabled(selectedIndexes, multiple))
-        return selectedIndexes.includes(index);
-      return selectedIndexes === index;
-    },
-    [multiple, selectedIndexes],
-  );
-  let selectedChangeHandler = React.useCallback(
-    (__originalIndex, action) => {
-      if (!isMultipleEnabled(selectedIndexes, multiple)) return;
-      if ('added' === action) return [...selectedIndexes, __originalIndex];
-      return selectedIndexes?.filter((index) => index !== __originalIndex);
-    },
-    [selectedIndexes, multiple],
-  );
-  let onChangeHandler = React.useCallback(
-    (__originalIndex, actionType, newSelectedIndexes) => {
-      if (isSingleOnChange(onChangeProp.current, multiple))
-        onChangeProp.current?.(optionsRef.current[__originalIndex]?.value);
-      else
-        actionType &&
-          newSelectedIndexes &&
-          onChangeProp.current?.(
-            newSelectedIndexes?.map(
-              (index) => optionsRef.current[index]?.value,
-            ),
-            {
-              value: optionsRef.current[__originalIndex]?.value,
-              type: actionType,
-            },
-          );
-    },
-    [multiple, onChangeProp, optionsRef],
-  );
-  let onClickHandler = React.useCallback(
-    (__originalIndex) => {
-      inputRef.current?.focus({
-        preventScroll: true,
-      });
-      if (optionsRef.current[__originalIndex]?.disabled) return;
-      setIsInputDirty(false);
-      if (multiple) {
-        let actionType = isMenuItemSelected(__originalIndex)
-          ? 'removed'
-          : 'added';
-        let newSelectedIndexes = selectedChangeHandler(
-          __originalIndex,
-          actionType,
-        );
-        if (null == newSelectedIndexes) return;
-        setSelectedIndexes(newSelectedIndexes);
-        onChangeHandler(__originalIndex, actionType, newSelectedIndexes);
-        setLiveRegionSelection(
-          newSelectedIndexes
-            .map((item) => optionsRef.current[item]?.label)
-            .filter(Boolean)
-            .join(', '),
-        );
-        setInputValue('');
-      } else {
-        setSelectedIndexes(__originalIndex);
-        hide();
-        onChangeHandler(__originalIndex);
-      }
-    },
-    [
-      selectedChangeHandler,
-      isMenuItemSelected,
-      multiple,
-      onChangeHandler,
-      optionsRef,
-      hide,
-      setSelectedIndexes,
-    ],
-  );
-  let getMenuItem = React.useCallback(
-    (option, filteredIndex) => {
-      let optionId = getOptionId(option, id);
-      let { __originalIndex } = optionsExtraInfo[optionId];
-      let { icon, startIcon: startIconProp, label, ...restOptions } = option;
-      let startIcon = startIconProp ?? icon;
-      let customItem = itemRenderer
-        ? itemRenderer(option, {
-            isFocused: focusedIndex === __originalIndex,
-            isSelected: isMenuItemSelected(__originalIndex),
-            index: __originalIndex,
-            id: optionId,
-          })
-        : null;
-      return customItem
-        ? React.cloneElement(customItem, {
-            onClick: (e) => {
-              onClickHandler(__originalIndex);
-              customItem.props.onClick?.(e);
-            },
-            focused: focusedIndex === __originalIndex,
-            'data-iui-index': __originalIndex,
-            'data-iui-filtered-index': filteredIndex,
-            ref: mergeRefs(customItem.props.ref, (el) => {
-              if (!enableVirtualization && focusedIndex === __originalIndex)
-                el?.scrollIntoView({
-                  block: 'nearest',
-                });
-            }),
-          })
-        : React.createElement(
-            ComboBoxMenuItem,
-            {
-              key: optionId,
-              id: optionId,
-              startIcon: startIcon,
-              ...restOptions,
-              isSelected: isMenuItemSelected(__originalIndex),
-              onClick: () => {
-                onClickHandler(__originalIndex);
-              },
-              index: __originalIndex,
-              'data-iui-filtered-index': filteredIndex,
-            },
-            label,
-          );
-    },
-    [
-      enableVirtualization,
-      focusedIndex,
-      id,
-      isMenuItemSelected,
-      itemRenderer,
-      onClickHandler,
-      optionsExtraInfo,
-    ],
-  );
-  let emptyContent = React.useMemo(
-    () =>
-      React.createElement(
-        React.Fragment,
-        null,
-        React.isValidElement(emptyStateMessage)
-          ? emptyStateMessage
-          : React.createElement(
-              MenuExtraContent,
-              null,
-              React.createElement(
-                Text,
-                {
-                  isMuted: true,
-                },
-                emptyStateMessage,
-              ),
-            ),
-      ),
-    [emptyStateMessage],
-  );
-  let popover = usePopover({
-    visible: isOpen,
-    onVisibleChange: (open) => (open ? show() : hide()),
-    matchWidth: true,
-    middleware: {
-      size: {
-        maxHeight: 'var(--iui-menu-max-height)',
-      },
-      ...middleware,
-    },
-    closeOnOutsideClick: true,
-    interactions: {
-      click: false,
-      focus: true,
-    },
-  });
-  return React.createElement(
-    ComboBoxRefsContext.Provider,
-    {
-      value: {
-        inputRef,
-        menuRef,
-        optionsExtraInfo,
-      },
-    },
-    React.createElement(
-      ComboBoxStateContext.Provider,
-      {
-        value: {
-          id,
-          isOpen,
-          focusedIndex,
-          setFocusedIndex,
-          onClickHandler,
-          enableVirtualization,
-          filteredOptions,
-          getMenuItem,
-          multiple,
-          popover,
-          show,
-          hide,
-        },
-      },
-      React.createElement(
-        ComboBoxInputContainer,
-        {
-          ref: forwardedRef,
-          disabled: inputProps?.disabled,
-          ...rest,
-        },
-        React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(ComboBoxInput, {
-            value: inputValue,
-            disabled: inputProps?.disabled,
-            ...inputProps,
-            onChange: handleOnInput,
-            selectTags: isMultipleEnabled(selectedIndexes, multiple)
-              ? selectedIndexes
-                  ?.map((index) => {
-                    let item = options[index];
-                    return React.createElement(SelectTag, {
-                      key: item.label,
-                      label: item.label,
-                    });
-                  })
-                  .filter(Boolean)
-              : void 0,
-          }),
-        ),
-        React.createElement(ComboBoxEndIcon, {
-          ...endIconProps,
-          disabled: inputProps?.disabled,
-          isOpen: isOpen,
-        }),
-        multiple
-          ? React.createElement(AutoclearingHiddenLiveRegion, {
-              text: liveRegionSelection,
-            })
-          : null,
-      ),
-      React.createElement(
-        ComboBoxMenu,
-        {
-          as: 'div',
-          ...dropdownMenuProps,
-        },
-        filteredOptions.length > 0 && !enableVirtualization
-          ? filteredOptions.map(getMenuItem)
-          : emptyContent,
-      ),
-    ),
-  );
-});

package/esm/core/ComboBox/ComboBox.types-test.js

@@ -1,85 +0,0 @@
-import { useRef } from 'react';
-import { ComboBox } from './ComboBox.js';
-() => {
-  let ref = useRef(null);
-  return React.createElement(ComboBox, {
-    options: [
-      {
-        label: 'Item 1',
-        value: 1,
-      },
-      {
-        label: 'Item 2',
-        value: 2,
-      },
-      {
-        label: 'Item 3',
-        value: 3,
-      },
-    ],
-    onChange: (value) => {
-      let returnValue = value;
-      return returnValue;
-    },
-    ref: ref,
-  });
-};
-() =>
-  React.createElement(ComboBox, {
-    options: [
-      {
-        label: 'Item 1',
-        value: 1,
-      },
-      {
-        label: 'Item 2',
-        value: 2,
-      },
-      {
-        label: 'Item 3',
-        value: 3,
-      },
-    ],
-    onChange: (value) => {
-      let returnValue = value;
-      return returnValue;
-    },
-  });
-() =>
-  React.createElement(ComboBox, {
-    options: [
-      {
-        label: 'Item 1',
-        value: '1',
-      },
-      {
-        label: 'Item 2',
-        value: '2',
-      },
-      {
-        label: 'Item 3',
-        value: '3',
-      },
-    ],
-    onChange: (value) => {
-      let returnValue = value;
-      return returnValue;
-    },
-  });
-() =>
-  React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(ComboBox, {
-      options: [
-        {
-          label: 'Item #1',
-          value: 1,
-        },
-      ],
-      onChange: (value) => {
-        let returnValue = value;
-        return returnValue;
-      },
-    }),
-  );

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

@@ -1,7 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxEndIconProps = {
-    disabled?: boolean;
-    isOpen?: boolean;
-};
-export declare const ComboBoxEndIcon: PolymorphicForwardRefComponent<"span", ComboBoxEndIconProps>;
-export {};

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -1,27 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { SvgCaretDownSmall } from '../../utils/index.js';
-import { Icon } from '../Icon/Icon.js';
-export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  let { className, children, disabled, isOpen, ...rest } = props;
-  return React.createElement(
-    Icon,
-    {
-      as: 'span',
-      ref: forwardedRef,
-      className: cx(
-        'iui-end-icon',
-        {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        },
-        className,
-      ),
-      ...rest,
-    },
-    children ??
-      React.createElement(SvgCaretDownSmall, {
-        'aria-hidden': true,
-      }),
-  );
-});