@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -1,26 +1,78 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useSafeContext, useMergedRefs, SvgCheckmark, } from '../../utils/index.js';
+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) => {
-    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, { as: 'div', 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,
+    return _jsxs(ListItem, {
+      as: 'div',
+      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,
+      children: [
+        startIcon &&
+          _jsx(ListItem.Icon, {
+            as: 'span',
+            'aria-hidden': true,
+            children: startIcon,
+          }),
+        _jsxs(ListItem.Content, {
+          children: [
             children,
-            sublabel && React.createElement(ListItem.Description, null, sublabel)),
+            sublabel &&
+              _jsx(ListItem.Description, {
+                children: sublabel,
+              }),
+          ],
+        }),
         endIcon ||
-            (isSelected && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon ?? React.createElement(SvgCheckmark, null))))));
-}));
+          (isSelected &&
+            _jsx(ListItem.Icon, {
+              as: 'span',
+              'aria-hidden': true,
+              children: endIcon ?? _jsx(SvgCheckmark, {}),
+            })),
+      ],
+    });
+  }),
+);
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,11 +1,12 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 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 _jsx(SelectTagContainer, {
+    ref: ref,
+    tags: selectedItems,
+    ...rest,
+  });
 });
 ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

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

@@ -1,35 +1,12 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
 import type { usePopover } from '../Popover/Popover.js';
-type ComboBoxAction = {
-    type: 'multiselect';
-    value: number[];
-} | {
-    type: 'open';
-} | {
-    type: 'close';
-} | {
-    type: 'select';
-    value: number;
-} | {
-    type: 'focus';
-    value: number | undefined;
-};
-export declare const comboBoxReducer: (state: {
-    isOpen: boolean;
-    selected: number | number[];
-    focusedIndex: number;
-}, action: ComboBoxAction) => {
-    isOpen: boolean;
-    selected: number | number[];
-    focusedIndex: number;
-};
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
     menuRef: React.RefObject<HTMLElement>;
-    optionsExtraInfoRef: React.MutableRefObject<Record<string, {
+    optionsExtraInfo: Record<string, {
         __originalIndex: number;
-    }>>;
+    }>;
 } | undefined>;
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
@@ -38,12 +15,12 @@ type ComboBoxStateContextProps<T = unknown> = {
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
-    focusedIndex?: number;
+    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 declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;
 export {};

package/esm/core/ComboBox/helpers.js

@@ -1,52 +1,5 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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;
-        }
-    }
-};
 export const ComboBoxRefsContext = React.createContext(undefined);
 ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
 export const ComboBoxStateContext = React.createContext(undefined);
 ComboBoxStateContext.displayName = 'ComboBoxStateContext';
-export const ComboBoxActionContext = React.createContext(undefined);
-ComboBoxActionContext.displayName = 'ComboBoxActionContext';