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

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,
-      }),
-  );
-});

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Input } from '../Input/Input.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxInputProps = {
-    selectTags?: JSX.Element[];
-} & React.ComponentProps<typeof Input>;
-export declare const ComboBoxInput: PolymorphicForwardRefComponent<"input", ComboBoxInputProps>;
-export {};

package/esm/core/ComboBox/ComboBoxInput.js

@@ -1,177 +0,0 @@
-import * as React from 'react';
-import { Input } from '../Input/Input.js';
-import {
-  useSafeContext,
-  useMergedRefs,
-  useContainerWidth,
-  mergeEventHandlers,
-  useLatestRef,
-} from '../../utils/index.js';
-import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
-import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-  let { selectTags, size, style, ...rest } = props;
-  let {
-    isOpen,
-    id,
-    focusedIndex,
-    setFocusedIndex,
-    enableVirtualization,
-    multiple,
-    onClickHandler,
-    popover,
-    show,
-    hide,
-  } = useSafeContext(ComboBoxStateContext);
-  let { inputRef, menuRef, optionsExtraInfo } =
-    useSafeContext(ComboBoxRefsContext);
-  let refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
-  let focusedIndexRef = useLatestRef(focusedIndex ?? -1);
-  let getIdFromIndex = (index) =>
-    menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '';
-  let handleKeyDown = React.useCallback(
-    (event) => {
-      let length = Object.keys(optionsExtraInfo).length ?? 0;
-      if (event.altKey) return;
-      switch (event.key) {
-        case 'ArrowDown': {
-          event.preventDefault();
-          if (!isOpen) return show();
-          if (0 === length) return;
-          if (-1 === focusedIndexRef.current) {
-            let currentElement =
-              menuRef.current?.querySelector('[data-iui-index]');
-            return setFocusedIndex(
-              Number(currentElement?.getAttribute('data-iui-index') ?? 0),
-            );
-          }
-          if (
-            enableVirtualization &&
-            !menuRef.current?.querySelector(
-              `[data-iui-index="${focusedIndexRef.current}"]`,
-            )?.nextElementSibling
-          )
-            return;
-          let nextIndex = focusedIndexRef.current;
-          do {
-            let currentElement = menuRef.current?.querySelector(
-              `[data-iui-index="${nextIndex}"]`,
-            );
-            let nextElement =
-              currentElement?.nextElementSibling ??
-              menuRef.current?.querySelector('[data-iui-index]');
-            nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
-            if (nextElement) return setFocusedIndex(nextIndex);
-          } while (nextIndex !== focusedIndexRef.current);
-          break;
-        }
-        case 'ArrowUp': {
-          event.preventDefault();
-          if (!isOpen) return show();
-          if (0 === length) return;
-          if (
-            enableVirtualization &&
-            !menuRef.current?.querySelector(
-              `[data-iui-index="${focusedIndexRef.current}"]`,
-            )?.previousElementSibling
-          )
-            return;
-          if (-1 === focusedIndexRef.current)
-            return setFocusedIndex(
-              Object.values(optionsExtraInfo)?.[length - 1].__originalIndex ??
-                -1,
-            );
-          let prevIndex = focusedIndexRef.current;
-          do {
-            let currentElement = menuRef.current?.querySelector(
-              `[data-iui-index="${prevIndex}"]`,
-            );
-            let prevElement =
-              currentElement?.previousElementSibling ??
-              menuRef.current?.querySelector('[data-iui-index]:last-of-type');
-            prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
-            if (prevElement) return setFocusedIndex(prevIndex);
-          } while (prevIndex !== focusedIndexRef.current);
-          break;
-        }
-        case 'Enter':
-          event.preventDefault();
-          if (isOpen) {
-            if (focusedIndexRef.current > -1)
-              onClickHandler?.(focusedIndexRef.current);
-          } else show();
-          break;
-        case 'Escape':
-          event.preventDefault();
-          hide();
-          break;
-        case 'Tab':
-          hide();
-          break;
-      }
-    },
-    [
-      setFocusedIndex,
-      enableVirtualization,
-      focusedIndexRef,
-      isOpen,
-      menuRef,
-      onClickHandler,
-      optionsExtraInfo,
-      show,
-      hide,
-    ],
-  );
-  let wasOpenBeforeClick = React.useRef(false);
-  let handlePointerDown = React.useCallback(() => {
-    wasOpenBeforeClick.current = isOpen;
-  }, [isOpen]);
-  let handleClick = React.useCallback(() => {
-    if (wasOpenBeforeClick.current) hide();
-    else show();
-    wasOpenBeforeClick.current = false;
-  }, [hide, show]);
-  let [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Input, {
-      ref: refs,
-      'aria-expanded': isOpen,
-      'aria-activedescendant':
-        isOpen && void 0 != focusedIndex && focusedIndex > -1
-          ? getIdFromIndex(focusedIndex)
-          : void 0,
-      role: 'combobox',
-      'aria-controls': isOpen ? `${id}-list` : void 0,
-      'aria-autocomplete': 'list',
-      spellCheck: false,
-      autoCapitalize: 'none',
-      autoCorrect: 'off',
-      style: {
-        ...(multiple && {
-          paddingInlineStart: tagContainerWidth + 18,
-        }),
-        ...style,
-      },
-      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
-      size: size,
-      ...popover.getReferenceProps({
-        ...rest,
-        onPointerDown: mergeEventHandlers(
-          props.onPointerDown,
-          handlePointerDown,
-        ),
-        onClick: mergeEventHandlers(props.onClick, handleClick),
-        onKeyDown: mergeEventHandlers(props.onKeyDown, handleKeyDown),
-      }),
-    }),
-    multiple && selectTags
-      ? React.createElement(ComboBoxMultipleContainer, {
-          ref: tagContainerWidthRef,
-          selectedItems: selectTags,
-          id: `${id}-selected-live`,
-        })
-      : null,
-  );
-});

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

@@ -1,4 +0,0 @@
-import type { InputContainerProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxInputContainerProps = Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
-export declare const ComboBoxInputContainer: PolymorphicForwardRefComponent<"div", ComboBoxInputContainerProps>;
-export {};

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { StatusMessage } from '../StatusMessage/StatusMessage.js';
-import {
-  InputContainer,
-  useSafeContext,
-  InputWithIcon,
-} from '../../utils/index.js';
-import { ComboBoxStateContext } from './helpers.js';
-export const ComboBoxInputContainer = React.forwardRef(
-  (props, forwardedRef) => {
-    let { className, status, message, children, ...rest } = props;
-    let { id } = useSafeContext(ComboBoxStateContext);
-    return React.createElement(
-      InputContainer,
-      {
-        className: className,
-        status: status,
-        statusMessage:
-          'string' == typeof message
-            ? React.createElement(
-                StatusMessage,
-                {
-                  status: status,
-                },
-                message,
-              )
-            : React.isValidElement(message) &&
-              React.cloneElement(message, {
-                status,
-              }),
-        ref: forwardedRef,
-        ...rest,
-        id: id,
-      },
-      React.createElement(InputWithIcon, null, children),
-    );
-  },
-);

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { Menu } from '../Menu/Menu.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick' | 'trigger'> & React.ComponentPropsWithoutRef<'div'>;
-export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;
-export {};

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  useSafeContext,
-  useMergedRefs,
-  Portal,
-  Box,
-  useVirtualScroll,
-  ShadowRoot,
-  useLayoutEffect,
-} from '../../utils/index.js';
-import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-import { List } from '../List/List.js';
-let VirtualizedComboBoxMenu = (props) => {
-  let { children, ...rest } = props;
-  let { filteredOptions, getMenuItem, focusedIndex } =
-    useSafeContext(ComboBoxStateContext);
-  let { menuRef } = useSafeContext(ComboBoxRefsContext);
-  let mostlySubLabeled = React.useMemo(() => {
-    let numberOfSubLabels = 0;
-    for (let i = 0; i < Math.min(5, filteredOptions.length); i++)
-      if (filteredOptions[i].sublabel) numberOfSubLabels++;
-    return numberOfSubLabels >= Math.min(3, filteredOptions.length);
-  }, [filteredOptions]);
-  let focusedVisibleIndex = React.useMemo(() => {
-    let currentElement = menuRef.current?.querySelector(
-      `[data-iui-index="${focusedIndex}"]`,
-    );
-    if (!currentElement) return focusedIndex;
-    return Number(
-      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-    );
-  }, [focusedIndex, menuRef]);
-  let { virtualizer, css: virtualizerCss } = useVirtualScroll({
-    count: filteredOptions.length || 1,
-    getScrollElement: () => menuRef.current,
-    estimateSize: () => (mostlySubLabeled ? 48 : 36),
-    gap: -1,
-  });
-  useLayoutEffect(() => {
-    virtualizer.scrollToIndex(focusedVisibleIndex);
-  }, [virtualizer, focusedVisibleIndex]);
-  let virtualItemRenderer = React.useCallback(
-    (virtualItem) => {
-      let menuItem =
-        filteredOptions.length > 0
-          ? getMenuItem(filteredOptions[virtualItem.index], virtualItem.index)
-          : children;
-      return React.cloneElement(menuItem, {
-        key: virtualItem.key,
-        ref: virtualizer.measureElement,
-        'data-iui-virtualizer': 'item',
-        style: {
-          width: '100%',
-          transform: `translateY(${virtualItem.start}px)`,
-        },
-      });
-    },
-    [filteredOptions, getMenuItem, children, virtualizer.measureElement],
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      ShadowRoot,
-      {
-        css: virtualizerCss,
-      },
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          'data-iui-virtualizer': 'root',
-          ...rest,
-          style: {
-            minBlockSize: virtualizer.getTotalSize(),
-            ...props.style,
-          },
-        },
-        React.createElement('slot', null),
-      ),
-    ),
-    React.createElement(
-      React.Fragment,
-      null,
-      virtualizer
-        .getVirtualItems()
-        .map((virtualItem) => virtualItemRenderer(virtualItem)),
-    ),
-  );
-};
-export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  let { className, children, style, portal = true, ...rest } = props;
-  let { id, enableVirtualization, popover } =
-    useSafeContext(ComboBoxStateContext);
-  let { menuRef } = useSafeContext(ComboBoxRefsContext);
-  let refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
-  return (
-    popover.open &&
-    React.createElement(
-      Portal,
-      {
-        portal: portal,
-      },
-      React.createElement(
-        List,
-        {
-          as: 'div',
-          className: cx('iui-menu', className),
-          id: `${id}-list`,
-          role: 'listbox',
-          ref: refs,
-          ...popover.getFloatingProps({
-            style: enableVirtualization
-              ? {
-                  maxInlineSize: 0,
-                  ...style,
-                }
-              : style,
-            ...rest,
-          }),
-        },
-        enableVirtualization
-          ? React.createElement(VirtualizedComboBoxMenu, null, children)
-          : children,
-      ),
-    )
-  );
-});

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { MenuItemProps } from '../Menu/MenuItem.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxMenuItemProps = MenuItemProps & {
-    index: number;
-};
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
-export {};

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import {
-  useSafeContext,
-  useMergedRefs,
-  SvgCheckmark,
-} from '../../utils/index.js';
-import { ComboBoxStateContext } from './helpers.js';
-import { ListItem } from '../List/ListItem.js';
-export const ComboBoxMenuItem = React.memo(
-  React.forwardRef((props, forwardedRef) => {
-    let {
-      children,
-      isSelected,
-      disabled,
-      value,
-      onClick,
-      sublabel,
-      size = sublabel ? 'large' : 'default',
-      startIcon,
-      endIcon,
-      role = 'option',
-      index,
-      ...rest
-    } = props;
-    let { focusedIndex, enableVirtualization } =
-      useSafeContext(ComboBoxStateContext);
-    let focusRef = (el) => {
-      if (!enableVirtualization && focusedIndex === index)
-        el?.scrollIntoView({
-          block: 'nearest',
-        });
-    };
-    let refs = useMergedRefs(forwardedRef, focusRef);
-    return React.createElement(
-      ListItem,
-      {
-        as: 'div',
-        actionable: true,
-        size: size,
-        active: isSelected,
-        disabled: disabled,
-        focused: focusedIndex === index,
-        ref: refs,
-        onClick: () => onClick?.(value),
-        role: role,
-        tabIndex: 'presentation' === role ? void 0 : -1,
-        'aria-selected': isSelected,
-        'aria-disabled': disabled,
-        'data-iui-index': index,
-        ...rest,
-      },
-      startIcon &&
-        React.createElement(
-          ListItem.Icon,
-          {
-            as: 'span',
-            'aria-hidden': true,
-          },
-          startIcon,
-        ),
-      React.createElement(
-        ListItem.Content,
-        null,
-        children,
-        sublabel && React.createElement(ListItem.Description, null, sublabel),
-      ),
-      endIcon ||
-        (isSelected &&
-          React.createElement(
-            ListItem.Icon,
-            {
-              as: 'span',
-              'aria-hidden': true,
-            },
-            endIcon ?? React.createElement(SvgCheckmark, null),
-          )),
-    );
-  }),
-);

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxMultipleContainerProps = {
-    selectedItems?: React.ReactNode[];
-};
-export declare const ComboBoxMultipleContainer: PolymorphicForwardRefComponent<"div", ComboBoxMultipleContainerProps>;
-export {};

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { SelectTagContainer } from '../Select/SelectTagContainer.js';
-export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
-  let { selectedItems = [], ...rest } = props;
-  return React.createElement(SelectTagContainer, {
-    ref: ref,
-    tags: selectedItems,
-    ...rest,
-  });
-});

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { SelectOption } from '../Select/Select.js';
-import type { usePopover } from '../Popover/Popover.js';
-export declare const ComboBoxRefsContext: React.Context<{
-    inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLElement>;
-    optionsExtraInfo: Record<string, {
-        __originalIndex: number;
-    }>;
-} | undefined>;
-type ComboBoxStateContextProps<T = unknown> = {
-    isOpen: boolean;
-    id: string;
-    enableVirtualization: boolean;
-    filteredOptions: SelectOption<T>[];
-    onClickHandler?: (prop: number) => void;
-    getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
-    focusedIndex: number;
-    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
-    multiple?: boolean;
-    popover: ReturnType<typeof usePopover>;
-    show: () => void;
-    hide: () => void;
-};
-export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
-export {};

package/esm/core/ComboBox/helpers.js

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export const ComboBoxRefsContext = React.createContext(void 0);
-export const ComboBoxStateContext = React.createContext(void 0);

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { TimePickerProps } from '../TimePicker/TimePicker.js';
-export type DatePickerLocalizedNames = {
-    [key in 'months' | 'shortDays' | 'days']: string[];
-};
-/**
- * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
- * If locale is not passed, browser locale will be used.
- */
-export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
-export type DateRangePickerProps = {
-    /**
-     * Enable date range support.
-     * @default false
-     */
-    enableRangeSelect?: false;
-    /**
-     * Selected start date
-     */
-    startDate?: undefined;
-    /**
-     * Selected end date
-     */
-    endDate?: undefined;
-    /**
-     * Callback when date is changed.
-     */
-    onChange?: (date: Date) => void;
-} | {
-    enableRangeSelect: true;
-    startDate?: Date;
-    endDate?: Date;
-    onChange?: (startDate: Date, endDate: Date) => void;
-};
-type DatePickerProps = {
-    /**
-     * Selected date.
-     */
-    date?: Date;
-    /**
-     * Pass localized week days (start from sunday) and months.
-     * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
-     */
-    localizedNames?: DatePickerLocalizedNames;
-    /**
-     * Set focus on selected day or today.
-     * @default false
-     */
-    setFocus?: boolean;
-    /**
-     * Show time picker near the calendar.
-     * @default false
-     */
-    showTime?: boolean;
-    /**
-     * Show additional buttons to select year.
-     * @default false
-     */
-    showYearSelection?: boolean;
-    /**
-     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
-     */
-    monthYearProps?: React.ComponentProps<'div'>;
-    /**
-     * Allows props to be passed for only month, referring to span that wraps around the month title.
-     */
-    monthProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for week days, referring to div that wraps around the week day title.
-     */
-    weekDayProps?: React.ComponentProps<'div'>;
-    /**
-     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
-     */
-    dayProps?: React.ComponentProps<'div'>;
-    /**
-     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
-     */
-    calendarProps?: React.ComponentProps<'div'>;
-    /**
-     * Allows props to be passed for weeks, referring to div that wraps around weeks.
-     */
-    weekProps?: React.ComponentProps<'div'>;
-    /**
-     * Will disable dates for which this function returns true.
-     * Disabled dates cannot be selected.
-     */
-    isDateDisabled?: (date: Date) => boolean;
-    /**
-     * Whether there is a background, border, shadow, etc.
-     *
-     * Should be set to true if used in a popover that doesn't have its own background,
-     * or set to false if the popover has its own background or embedding within a page.
-     *
-     * @default true
-     */
-    applyBackground?: boolean;
-    /**
-     * Whether dates outside the current month should be displayed (in a muted text style).
-     *
-     * It is recommended to set this to false. Currently it defaults to true for backward compatibility.
-     *
-     * @default true
-     */
-    showDatesOutsideMonth?: boolean;
-} & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
-/**
- * Date picker component
- * @example
- * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
- */
-export declare const DatePicker: PolymorphicForwardRefComponent<"div", DatePickerProps>;
-export {};