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

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -6,52 +6,108 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
 import { Surface } from '../Surface/index.js';
-import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils/index.js';
+import {
+  useSafeContext,
+  useMergedRefs,
+  useVirtualization,
+  mergeRefs,
+  getWindow,
+} from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-const isOverflowOverlaySupported = () => getWindow()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
+const isOverflowOverlaySupported = () =>
+  getWindow()?.CSS?.supports?.('overflow: overlay');
+const VirtualizedComboBoxMenu = React.forwardRef(
+  ({ children, className, style, ...rest }, forwardedRef) => {
+    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } =
+      useSafeContext(ComboBoxStateContext);
     const { menuRef } = useSafeContext(ComboBoxRefsContext);
-    const virtualItemRenderer = React.useCallback((index) => filteredOptions.length > 0
-        ? getMenuItem(filteredOptions[index], index)
-        : children, // Here is expected empty state content
-    [filteredOptions, getMenuItem, children]);
+    const virtualItemRenderer = React.useCallback(
+      (index) =>
+        filteredOptions.length > 0
+          ? getMenuItem(filteredOptions[index], index)
+          : children, // Here is expected empty state content
+      [filteredOptions, getMenuItem, children],
+    );
     const focusedVisibleIndex = React.useMemo(() => {
-        const currentElement = menuRef.current?.querySelector(`[data-iui-index="${focusedIndex}"]`);
-        if (!currentElement) {
-            return focusedIndex;
-        }
-        return Number(currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex);
+      const currentElement = menuRef.current?.querySelector(
+        `[data-iui-index="${focusedIndex}"]`,
+      );
+      if (!currentElement) {
+        return focusedIndex;
+      }
+      return Number(
+        currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
+      );
     }, [focusedIndex, menuRef]);
     const { outerProps, innerProps, visibleChildren } = useVirtualization({
-        // 'Fool' VirtualScroll by passing length 1
-        // whenever there is no elements, to show empty state message
-        itemsLength: filteredOptions.length || 1,
-        itemRenderer: virtualItemRenderer,
-        scrollToIndex: focusedVisibleIndex,
+      // 'Fool' VirtualScroll by passing length 1
+      // whenever there is no elements, to show empty state message
+      itemsLength: filteredOptions.length || 1,
+      itemRenderer: virtualItemRenderer,
+      scrollToIndex: focusedVisibleIndex,
     });
     const surfaceStyles = {
-        minWidth,
-        // set as constant because we don't want it shifting when items are unmounted
-        maxWidth: minWidth,
-        // max-height must be on the outermost element for virtual scroll
-        maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-        overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-        ...style,
+      minWidth,
+      // set as constant because we don't want it shifting when items are unmounted
+      maxWidth: minWidth,
+      // max-height must be on the outermost element for virtual scroll
+      maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
+      overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
+      ...style,
     };
-    return (React.createElement(Surface, { style: surfaceStyles },
-        React.createElement("div", { ...outerProps },
-            React.createElement(Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), className: className, style: innerProps.style, ...rest }, visibleChildren))));
-});
+    return React.createElement(
+      Surface,
+      { style: surfaceStyles },
+      React.createElement(
+        'div',
+        { ...outerProps },
+        React.createElement(
+          Menu,
+          {
+            id: `${id}-list`,
+            setFocus: false,
+            role: 'listbox',
+            ref: mergeRefs(menuRef, innerProps.ref, forwardedRef),
+            className: className,
+            style: innerProps.style,
+            ...rest,
+          },
+          visibleChildren,
+        ),
+      ),
+    );
+  },
+);
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-    const { className, style, ...rest } = props;
-    const { minWidth, id, enableVirtualization } = useSafeContext(ComboBoxStateContext);
-    const { menuRef } = useSafeContext(ComboBoxRefsContext);
-    const refs = useMergedRefs(menuRef, forwardedRef);
-    const styles = React.useMemo(() => ({
-        minWidth,
-        maxWidth: `min(${minWidth * 2}px, 90vw)`,
-    }), [minWidth]);
-    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, { id: `${id}-list`, style: { ...styles, ...style }, setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className), ...rest })) : (React.createElement(VirtualizedComboBoxMenu, { ref: forwardedRef, ...props }))));
+  const { className, style, ...rest } = props;
+  const { minWidth, id, enableVirtualization } =
+    useSafeContext(ComboBoxStateContext);
+  const { menuRef } = useSafeContext(ComboBoxRefsContext);
+  const refs = useMergedRefs(menuRef, forwardedRef);
+  const styles = React.useMemo(
+    () => ({
+      minWidth,
+      maxWidth: `min(${minWidth * 2}px, 90vw)`,
+    }),
+    [minWidth],
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    !enableVirtualization
+      ? React.createElement(Menu, {
+          id: `${id}-list`,
+          style: { ...styles, ...style },
+          setFocus: false,
+          role: 'listbox',
+          ref: refs,
+          className: cx('iui-scroll', className),
+          ...rest,
+        })
+      : React.createElement(VirtualizedComboBoxMenu, {
+          ref: forwardedRef,
+          ...props,
+        }),
+  );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

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

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

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -6,20 +6,66 @@ import * as React from 'react';
 import { useSafeContext, useMergedRefs } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 import { ListItem } from '../List/ListItem.js';
-export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
-    const { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
+export const ComboBoxMenuItem = React.memo(
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      children,
+      isSelected,
+      disabled,
+      value,
+      onClick,
+      sublabel,
+      size = !!sublabel ? 'large' : 'default',
+      startIcon,
+      endIcon,
+      role = 'option',
+      index,
+      ...rest
+    } = props;
+    const { focusedIndex, enableVirtualization } =
+      useSafeContext(ComboBoxStateContext);
     const focusRef = (el) => {
-        if (!enableVirtualization && focusedIndex === index) {
-            el?.scrollIntoView({ block: 'nearest' });
-        }
+      if (!enableVirtualization && focusedIndex === index) {
+        el?.scrollIntoView({ block: 'nearest' });
+      }
     };
     const refs = useMergedRefs(forwardedRef, focusRef);
-    return (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick?.(value), role: role, tabIndex: role === 'presentation' ? undefined : -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 && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
-}));
+    return React.createElement(
+      ListItem,
+      {
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        focused: focusedIndex === index,
+        ref: refs,
+        onClick: () => onClick?.(value),
+        role: role,
+        tabIndex: role === 'presentation' ? undefined : -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 &&
+        React.createElement(
+          ListItem.Icon,
+          { as: 'span', 'aria-hidden': true },
+          endIcon,
+        ),
+    );
+  }),
+);
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

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

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

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
-declare type ComboBoxAction = {
+type ComboBoxAction = {
     type: 'multiselect';
     value: number[];
 } | {
@@ -31,7 +31,7 @@ export declare const ComboBoxRefsContext: React.Context<{
         __originalIndex: number;
     }>>;
 } | undefined>;
-declare type ComboBoxStateContextProps<T = unknown> = {
+type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
     minWidth: number;

package/esm/core/ComboBox/helpers.js

@@ -4,45 +4,45 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 export const comboBoxReducer = (state, action) => {
-    switch (action.type) {
-        case 'open': {
-            return { ...state, isOpen: true };
-        }
-        case 'close': {
-            return { ...state, isOpen: false };
-        }
-        case 'select': {
-            if (Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return {
-                ...state,
-                selected: action.value ?? state.selected,
-                focusedIndex: action.value ?? state.focusedIndex,
-            };
-        }
-        case 'multiselect': {
-            if (!Array.isArray(state.selected)) {
-                return { ...state };
-            }
-            return { ...state, selected: action.value };
-        }
-        case 'focus': {
-            if (Array.isArray(state.selected)) {
-                return {
-                    ...state,
-                    focusedIndex: action.value ?? -1,
-                };
-            }
-            return {
-                ...state,
-                focusedIndex: action.value ?? state.selected ?? -1,
-            };
-        }
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case 'open': {
+      return { ...state, isOpen: true };
     }
+    case 'close': {
+      return { ...state, isOpen: false };
+    }
+    case 'select': {
+      if (Array.isArray(state.selected)) {
+        return { ...state };
+      }
+      return {
+        ...state,
+        selected: action.value ?? state.selected,
+        focusedIndex: action.value ?? state.focusedIndex,
+      };
+    }
+    case 'multiselect': {
+      if (!Array.isArray(state.selected)) {
+        return { ...state };
+      }
+      return { ...state, selected: action.value };
+    }
+    case 'focus': {
+      if (Array.isArray(state.selected)) {
+        return {
+          ...state,
+          focusedIndex: action.value ?? -1,
+        };
+      }
+      return {
+        ...state,
+        focusedIndex: action.value ?? state.selected ?? -1,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
 };
 export const ComboBoxRefsContext = React.createContext(undefined);
 ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';

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

@@ -9,7 +9,7 @@ export declare const generateLocalizedStrings: (locale?: string) => {
     shortDays: string[];
     days: string[];
 };
-export declare type DateRangePickerProps = {
+export type DateRangePickerProps = {
     /**
      * Enable date range support.
      * @default false
@@ -33,7 +33,7 @@ export declare type DateRangePickerProps = {
     endDate: Date;
     onChange?: (startDate: Date, endDate: Date) => void;
 };
-declare type DatePickerProps = {
+type DatePickerProps = {
     /**
      * Selected date.
      */