@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Toast/Toaster.js

@@ -3,10 +3,10 @@ import cx from 'classnames';
 import { Box, useSafeContext } from '../../utils/index.js';
 import { Toast } from './Toast.js';
 export const useToaster = () => {
-  const dispatch = useSafeContext(ToasterDispatchContext);
+  let dispatch = useSafeContext(ToasterDispatchContext);
   return React.useMemo(() => {
-    const showToast = (category) => (content, options) => {
-      const id = nextId();
+    let showToast = (category) => (content, options) => {
+      let id = nextId();
       dispatch({
         type: 'add',
         toast: {
@@ -44,22 +44,22 @@ export const useToaster = () => {
   }, [dispatch]);
 };
 export const Toaster = () => {
-  const { toasts, settings } = useSafeContext(ToasterStateContext);
+  let { toasts, settings } = useSafeContext(ToasterStateContext);
   return React.createElement(
     Box,
     {
-      className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`),
+      className: cx('iui-toast-wrapper', `iui-placement-${settings.placement}`),
     },
-    toasts.map((toastProps) => {
-      return React.createElement(Toast, {
+    toasts.map((toastProps) =>
+      React.createElement(Toast, {
         key: toastProps.id,
         ...toastProps,
-      });
-    }),
+      }),
+    ),
   );
 };
 export const ToastProvider = ({ children }) => {
-  const [toasterState, dispatch] = React.useReducer(toastReducer, {
+  let [toasterState, dispatch] = React.useReducer(toastReducer, {
     toasts: [],
     settings: {
       order: 'auto',
@@ -80,30 +80,28 @@ export const ToastProvider = ({ children }) => {
     ),
   );
 };
-const toastReducer = (state, action) => {
-  if (action.type === 'add') {
+let toastReducer = (state, action) => {
+  if ('add' === action.type) {
     let order = state.settings.order;
-    if (order === 'auto') {
+    if ('auto' === order)
       order = state.settings.placement.startsWith('top')
         ? 'descending'
         : 'ascending';
-    }
     return {
       ...state,
       toasts: [
-        ...(order === 'ascending' ? state.toasts : []),
+        ...('ascending' === order ? state.toasts : []),
         action.toast,
-        ...(order === 'descending' ? state.toasts : []),
+        ...('descending' === order ? state.toasts : []),
       ],
     };
   }
-  if (action.type === 'remove') {
+  if ('remove' === action.type)
     return {
       ...state,
       toasts: state.toasts.filter((toast) => toast.id !== action.id),
     };
-  }
-  if (action.type === 'close-all') {
+  if ('close-all' === action.type)
     return {
       ...state,
       toasts: state.toasts.map((toast) => ({
@@ -111,8 +109,7 @@ const toastReducer = (state, action) => {
         isVisible: false,
       })),
     };
-  }
-  if (action.type === 'settings') {
+  if ('settings' === action.type)
     return {
       ...state,
       settings: {
@@ -120,14 +117,11 @@ const toastReducer = (state, action) => {
         ...action.settings,
       },
     };
-  }
   return state;
 };
-export const ToasterStateContext = React.createContext(undefined);
-ToasterStateContext.displayName = 'ToasterStateContext';
-const ToasterDispatchContext = React.createContext(undefined);
-ToasterDispatchContext.displayName = 'ToasterDispatchContext';
-const nextId = (() => {
+export const ToasterStateContext = React.createContext(void 0);
+let ToasterDispatchContext = React.createContext(void 0);
+let nextId = (() => {
   let count = 0;
   return () => ++count;
 })();

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, SvgCheckmark } from '../../utils/index.js';
 export const ToggleSwitch = React.forwardRef((props, ref) => {
-  const {
+  let {
     disabled = false,
     labelPosition = 'right',
     label,
@@ -13,8 +13,8 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
     icon: iconProp,
     ...rest
   } = props;
-  const shouldShowIcon =
-    iconProp === undefined || (iconProp !== null && size !== 'small');
+  let shouldShowIcon =
+    void 0 === iconProp || (null !== iconProp && 'small' !== size);
   return React.createElement(
     Box,
     {
@@ -23,8 +23,8 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         'iui-toggle-switch-wrapper',
         {
           'iui-disabled': disabled,
-          'iui-label-on-right': label && labelPosition === 'right',
-          'iui-label-on-left': label && labelPosition === 'left',
+          'iui-label-on-right': label && 'right' === labelPosition,
+          'iui-label-on-left': label && 'left' === labelPosition,
         },
         className,
       ),

package/esm/core/Tooltip/Tooltip.js

@@ -26,9 +26,9 @@ import {
   useId,
   useMergedRefs,
 } from '../../utils/index.js';
-const useTooltip = (options = {}) => {
-  const uniqueId = useId();
-  const {
+let useTooltip = (options = {}) => {
+  let uniqueId = useId();
+  let {
     placement = 'top',
     visible,
     onVisibleChange,
@@ -42,12 +42,12 @@ const useTooltip = (options = {}) => {
     id = uniqueId,
     ...props
   } = options;
-  const [open, onOpenChange] = useControlledState(
+  let [open, onOpenChange] = useControlledState(
     false,
     visible,
     onVisibleChange,
   );
-  const syncWithControlledState = React.useCallback(
+  let syncWithControlledState = React.useCallback(
     (element) => {
       queueMicrotask(() => {
         try {
@@ -57,21 +57,19 @@ const useTooltip = (options = {}) => {
     },
     [open],
   );
-  const floating = useFloating({
+  let floating = useFloating({
     placement,
     open,
     onOpenChange,
     whileElementsMounted: React.useMemo(
       () =>
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined,
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
       [autoUpdateOptions, open],
     ),
     middleware: React.useMemo(
       () =>
         [
-          middleware.offset !== undefined
-            ? offset(middleware.offset)
-            : offset(4),
+          void 0 !== middleware.offset ? offset(middleware.offset) : offset(4),
           middleware.flip && flip(),
           middleware.shift && shift(),
           middleware.size && size(),
@@ -87,31 +85,31 @@ const useTooltip = (options = {}) => {
       },
     }),
   });
-  const ariaProps = React.useMemo(
+  let ariaProps = React.useMemo(
     () =>
-      ariaStrategy === 'description'
+      'description' === ariaStrategy
         ? {
             'aria-describedby': id,
           }
-        : ariaStrategy === 'label'
+        : 'label' === ariaStrategy
           ? {
               'aria-labelledby': id,
             }
           : {},
     [ariaStrategy, id],
   );
-  const { delay } = useDelayGroupContext();
+  let { delay } = useDelayGroupContext();
   useDelayGroup(floating.context, {
     id: useId(),
   });
-  const interactions = useInteractions([
+  let interactions = useInteractions([
     useHover(floating.context, {
       delay: delay ?? {
         open: 50,
         close: 250,
       },
       handleClose: safePolygon({
-        buffer: -Infinity,
+        buffer: -1 / 0,
       }),
       move: false,
     }),
@@ -122,17 +120,15 @@ const useTooltip = (options = {}) => {
     }),
   ]);
   React.useEffect(() => {
-    if (!reference) {
-      return;
-    }
-    const domEventName = (e) => e.toLowerCase().substring(2);
-    const cleanupValues = {};
+    if (!reference) return;
+    let domEventName = (e) => e.toLowerCase().substring(2);
+    let cleanupValues = {};
     Object.entries({
       ...ariaProps,
       ...interactions.getReferenceProps(),
     }).forEach(([key, value]) => {
-      if (typeof value === 'function') {
-        const patchedHandler = (event) => {
+      if ('function' == typeof value) {
+        let patchedHandler = (event) => {
           value({
             ...event,
             nativeEvent: event,
@@ -147,26 +143,22 @@ const useTooltip = (options = {}) => {
     });
     return () => {
       Object.entries(cleanupValues).forEach(([key, value]) => {
-        if (typeof value === 'function') {
+        if ('function' == typeof value)
           reference.removeEventListener(domEventName(key), value);
-        } else if (value) {
-          reference.setAttribute(key, value);
-        } else {
-          reference.removeAttribute(key);
-        }
+        else if (value) reference.setAttribute(key, value);
+        else reference.removeAttribute(key);
       });
     };
   }, [ariaProps, reference, interactions]);
-  const getReferenceProps = React.useCallback(
-    (userProps) => {
-      return interactions.getReferenceProps({
+  let getReferenceProps = React.useCallback(
+    (userProps) =>
+      interactions.getReferenceProps({
         ...userProps,
         ...ariaProps,
-      });
-    },
+      }),
     [interactions, ariaProps],
   );
-  const floatingProps = React.useMemo(
+  let floatingProps = React.useMemo(
     () => ({
       ...interactions.getFloatingProps({
         hidden: !open,
@@ -196,9 +188,9 @@ const useTooltip = (options = {}) => {
   );
 };
 export const Tooltip = React.forwardRef((props, forwardedRef) => {
-  const { content, children, portal = true, className, style, ...rest } = props;
-  const tooltip = useTooltip(rest);
-  const refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
+  let { content, children, portal = true, className, style, ...rest } = props;
+  let tooltip = useTooltip(rest);
+  let refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
   return React.createElement(
     React.Fragment,
     null,
@@ -206,7 +198,7 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
       ...tooltip.getReferenceProps(children.props),
       ref: tooltip.refs.setReference,
     })),
-    props.ariaStrategy !== 'none' || tooltip.context.open
+    'none' !== props.ariaStrategy || tooltip.context.open
       ? React.createElement(
           Portal,
           {

package/esm/core/TransferList/TransferList.js

@@ -11,12 +11,11 @@ import {
 import { List } from '../List/List.js';
 import { ListItem } from '../List/ListItem.js';
 import { Label } from '../Label/Label.js';
-const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
-TransferListComponent.displayName = 'TransferList';
-const TransferListListboxWrapper = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const uid = useId();
-  const [labelId, setLabelId] = React.useState(uid);
+let TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+let TransferListListboxWrapper = React.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
+  let uid = useId();
+  let [labelId, setLabelId] = React.useState(uid);
   return React.createElement(
     Box,
     {
@@ -37,48 +36,41 @@ const TransferListListboxWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
-TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
-const TransferListListbox = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { labelId } = useSafeContext(TransferListContext);
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  const listRef = React.useRef(null);
-  const refs = useMergedRefs(listRef, ref);
-  const getFocusableNodes = React.useCallback(() => {
-    const focusableItems = getFocusableElements(listRef.current);
+let TransferListListbox = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  let { labelId } = useSafeContext(TransferListContext);
+  let [focusedIndex, setFocusedIndex] = React.useState();
+  let listRef = React.useRef(null);
+  let refs = useMergedRefs(listRef, ref);
+  let getFocusableNodes = React.useCallback(() => {
+    let focusableItems = getFocusableElements(listRef.current);
     return focusableItems.filter(
       (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
     );
   }, []);
   React.useEffect(() => {
-    const items = getFocusableNodes();
-    if (focusedIndex != null) {
+    let items = getFocusableNodes();
+    if (null != focusedIndex) {
       items?.[focusedIndex]?.focus();
       return;
     }
   }, [focusedIndex, getFocusableNodes]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (!items?.length) {
-      return;
-    }
-    const currentIndex = focusedIndex ?? 0;
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let items = getFocusableNodes();
+    if (!items?.length) return;
+    let currentIndex = focusedIndex ?? 0;
     switch (event.key) {
-      case 'ArrowDown': {
+      case 'ArrowDown':
         setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
         event.preventDefault();
         event.stopPropagation();
         break;
-      }
-      case 'ArrowUp': {
+      case 'ArrowUp':
         setFocusedIndex(Math.max(currentIndex - 1, 0));
         event.preventDefault();
         event.stopPropagation();
         break;
-      }
       default:
         break;
     }
@@ -98,9 +90,8 @@ const TransferListListbox = React.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListbox.displayName = 'TransferList.Listbox';
-const TransferListItem = React.forwardRef((props, ref) => {
-  const {
+let TransferListItem = React.forwardRef((props, ref) => {
+  let {
     actionable = true,
     disabled,
     onActiveChange,
@@ -108,18 +99,16 @@ const TransferListItem = React.forwardRef((props, ref) => {
     active,
     ...rest
   } = props;
-  const onClickEvents = () =>
+  let onClickEvents = () =>
     actionable && onActiveChange && onActiveChange(!active);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
     if (
-      event.key === 'Enter' ||
-      event.key === ' ' ||
-      event.key === 'Spacebar'
+      'Enter' === event.key ||
+      ' ' === event.key ||
+      'Spacebar' === event.key
     ) {
-      !disabled && onClickEvents();
+      disabled || onClickEvents();
       event.preventDefault();
     }
   };
@@ -133,22 +122,19 @@ const TransferListItem = React.forwardRef((props, ref) => {
       actionable: actionable,
       tabIndex: -1,
       role: 'option',
-      'aria-disabled': disabled ? 'true' : undefined,
-      'aria-selected': active ? 'true' : undefined,
+      'aria-disabled': disabled ? 'true' : void 0,
+      'aria-selected': active ? 'true' : void 0,
       disabled: disabled,
       ...rest,
     },
     children,
   );
 });
-TransferListItem.displayName = 'TransferList.Item';
-const TransferListListboxLabel = React.forwardRef((props, ref) => {
-  const { children, id, ...rest } = props;
-  const { labelId, setLabelId } = useSafeContext(TransferListContext);
+let TransferListListboxLabel = React.forwardRef((props, ref) => {
+  let { children, id, ...rest } = props;
+  let { labelId, setLabelId } = useSafeContext(TransferListContext);
   React.useEffect(() => {
-    if (id && id !== labelId) {
-      setLabelId(id);
-    }
+    if (id && id !== labelId) setLabelId(id);
   }, [id, labelId, setLabelId]);
   return React.createElement(
     Label,
@@ -161,11 +147,9 @@ const TransferListListboxLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
-const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+let TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
   role: 'toolbar',
 });
-TransferListToolbar.displayName = 'TransferList.Toolbar';
 export const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,
@@ -173,4 +157,4 @@ export const TransferList = Object.assign(TransferListComponent, {
   ListboxLabel: TransferListListboxLabel,
   Toolbar: TransferListToolbar,
 });
-export const TransferListContext = React.createContext(undefined);
+export const TransferListContext = React.createContext(void 0);

package/esm/core/Tree/Tree.d.ts

@@ -133,4 +133,7 @@ export type TreeProps<T> = {
     ), [onNodeExpanded])}
   />
  */
-export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;
+export declare const Tree: {
+    <T>(props: TreeProps<T>): React.JSX.Element;
+    displayName: string;
+};