@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/Toast/Toast.js

@@ -30,7 +30,7 @@ const isMotionOk = () =>
     '(prefers-reduced-motion: no-preference)',
   )?.matches;
 const Toast = (props) => {
-  const {
+  let {
     content,
     category,
     type = 'temporary',
@@ -42,68 +42,61 @@ const Toast = (props) => {
     animateOutTo,
     domProps,
   } = props;
-  const closeTimeout = _react.useRef(0);
-  const { placement } = (0, _index.useSafeContext)(
+  let closeTimeout = _react.useRef(0);
+  let { placement } = (0, _index.useSafeContext)(
     _Toaster.ToasterStateContext,
   ).settings;
-  const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-  const [visible, setVisible] = _react.useState(isVisibleProp ?? true);
-  const isVisible = isVisibleProp ?? visible;
-  const [height, setHeight] = _react.useState(0);
-  const thisElement = _react.useRef(null);
-  const [margin, setMargin] = _react.useState(0);
-  const marginStyle = () => {
-    if (placementPosition === 'top') {
+  let placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+  let [visible, setVisible] = _react.useState(isVisibleProp ?? true);
+  let isVisible = isVisibleProp ?? visible;
+  let [height, setHeight] = _react.useState(0);
+  let thisElement = _react.useRef(null);
+  let [margin, setMargin] = _react.useState(0);
+  let marginStyle = () => {
+    if ('top' === placementPosition)
       return {
         marginBlockEnd: margin,
       };
-    }
     return {
       marginBlockStart: margin,
     };
   };
   _react.useEffect(() => {
-    if (type === 'temporary') {
-      setCloseTimeout(duration);
-    }
+    if ('temporary' === type) setCloseTimeout(duration);
     return () => {
       clearCloseTimeout();
     };
   }, [duration, type]);
   _react.useEffect(() => {
-    if (!isVisible && !animateOutTo) {
-      setMargin(-height);
-    }
+    if (!isVisible && !animateOutTo) setMargin(-height);
   }, [isVisible, animateOutTo, setMargin, height]);
-  const close = () => {
+  let close = () => {
     clearCloseTimeout();
     setMargin(-height);
     setVisible(false);
   };
-  const setCloseTimeout = (timeout) => {
-    const definedWindow = (0, _index.getWindow)();
-    if (!definedWindow) {
-      return;
-    }
+  let setCloseTimeout = (timeout) => {
+    let definedWindow = (0, _index.getWindow)();
+    if (!definedWindow) return;
     closeTimeout.current = definedWindow.setTimeout(() => {
       close();
     }, timeout);
   };
-  const clearCloseTimeout = () => {
+  let clearCloseTimeout = () => {
     (0, _index.getWindow)()?.clearTimeout(closeTimeout.current);
   };
-  const onRef = (ref) => {
+  let onRef = (ref) => {
     if (ref) {
-      const { height } = ref.getBoundingClientRect();
+      let { height } = ref.getBoundingClientRect();
       setHeight(height);
     }
   };
-  const calculateOutAnimation = (node) => {
+  let calculateOutAnimation = (node) => {
     let translateX = 0;
     let translateY = 0;
     if (animateOutTo && node) {
-      const { x: startX, y: startY } = node.getBoundingClientRect();
-      const { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
+      let { x: startX, y: startY } = node.getBoundingClientRect();
+      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
       translateX = endX - startX;
       translateY = endY - startY;
     }
@@ -129,16 +122,14 @@ const Toast = (props) => {
         }
       },
       onEntered: (node) => {
-        if (isMotionOk()) {
-          node.style.transform = 'translateY(0)';
-        }
+        if (isMotionOk()) node.style.transform = 'translateY(0)';
       },
       onExiting: (node) => {
         if (isMotionOk()) {
-          const { translateX, translateY } = calculateOutAnimation(node);
+          let { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : `scale(0.9)`;
+            : 'scale(0.9)';
           node.style.opacity = '0';
           node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
           node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
@@ -177,7 +168,7 @@ const Toast = (props) => {
   );
 };
 const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     content,
     category,
     type = 'temporary',
@@ -188,7 +179,7 @@ const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
     contentProps,
     ...rest
   } = props;
-  const StatusIcon = _index.StatusIconMap[category];
+  let StatusIcon = _index.StatusIconMap[category];
   return _react.createElement(
     _index.Box,
     {
@@ -230,13 +221,13 @@ const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
             'iui-toast-anchor',
             link.className,
           ),
-          title: undefined,
+          title: void 0,
           'data-iui-status': category,
           'data-iui-underline': true,
         },
         link.title,
       ),
-    (type === 'persisting' || hasCloseButton) &&
+    ('persisting' === type || hasCloseButton) &&
       _react.createElement(
         _IconButton.IconButton,
         {

package/cjs/core/Toast/Toaster.js

@@ -30,10 +30,10 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _Toast = require('./Toast.js');
 const useToaster = () => {
-  const dispatch = (0, _index.useSafeContext)(ToasterDispatchContext);
+  let dispatch = (0, _index.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: {
@@ -71,25 +71,25 @@ const useToaster = () => {
   }, [dispatch]);
 };
 const Toaster = () => {
-  const { toasts, settings } = (0, _index.useSafeContext)(ToasterStateContext);
+  let { toasts, settings } = (0, _index.useSafeContext)(ToasterStateContext);
   return _react.createElement(
     _index.Box,
     {
       className: (0, _classnames.default)(
-        `iui-toast-wrapper`,
+        'iui-toast-wrapper',
         `iui-placement-${settings.placement}`,
       ),
     },
-    toasts.map((toastProps) => {
-      return _react.createElement(_Toast.Toast, {
+    toasts.map((toastProps) =>
+      _react.createElement(_Toast.Toast, {
         key: toastProps.id,
         ...toastProps,
-      });
-    }),
+      }),
+    ),
   );
 };
 const ToastProvider = ({ children }) => {
-  const [toasterState, dispatch] = _react.useReducer(toastReducer, {
+  let [toasterState, dispatch] = _react.useReducer(toastReducer, {
     toasts: [],
     settings: {
       order: 'auto',
@@ -111,29 +111,27 @@ const ToastProvider = ({ children }) => {
   );
 };
 const toastReducer = (state, action) => {
-  if (action.type === 'add') {
+  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) => ({
@@ -141,8 +139,7 @@ const toastReducer = (state, action) => {
         isVisible: false,
       })),
     };
-  }
-  if (action.type === 'settings') {
+  if ('settings' === action.type)
     return {
       ...state,
       settings: {
@@ -150,13 +147,10 @@ const toastReducer = (state, action) => {
         ...action.settings,
       },
     };
-  }
   return state;
 };
-const ToasterStateContext = _react.createContext(undefined);
-ToasterStateContext.displayName = 'ToasterStateContext';
-const ToasterDispatchContext = _react.createContext(undefined);
-ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+const ToasterStateContext = _react.createContext(void 0);
+const ToasterDispatchContext = _react.createContext(void 0);
 const nextId = (() => {
   let count = 0;
   return () => ++count;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const ToggleSwitch = _react.forwardRef((props, ref) => {
-  const {
+  let {
     disabled = false,
     labelPosition = 'right',
     label,
@@ -25,8 +25,8 @@ 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(
     _index.Box,
     {
@@ -35,8 +35,8 @@ 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/cjs/core/Tooltip/Tooltip.js

@@ -15,8 +15,8 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const useTooltip = (options = {}) => {
-  const uniqueId = (0, _index.useId)();
-  const {
+  let uniqueId = (0, _index.useId)();
+  let {
     placement = 'top',
     visible,
     onVisibleChange,
@@ -30,12 +30,12 @@ const useTooltip = (options = {}) => {
     id = uniqueId,
     ...props
   } = options;
-  const [open, onOpenChange] = (0, _index.useControlledState)(
+  let [open, onOpenChange] = (0, _index.useControlledState)(
     false,
     visible,
     onVisibleChange,
   );
-  const syncWithControlledState = _react.useCallback(
+  let syncWithControlledState = _react.useCallback(
     (element) => {
       queueMicrotask(() => {
         try {
@@ -45,7 +45,7 @@ const useTooltip = (options = {}) => {
     },
     [open],
   );
-  const floating = (0, _react1.useFloating)({
+  let floating = (0, _react1.useFloating)({
     placement,
     open,
     onOpenChange,
@@ -53,13 +53,13 @@ const useTooltip = (options = {}) => {
       () =>
         open
           ? (...args) => (0, _react1.autoUpdate)(...args, autoUpdateOptions)
-          : undefined,
+          : void 0,
       [autoUpdateOptions, open],
     ),
     middleware: _react.useMemo(
       () =>
         [
-          middleware.offset !== undefined
+          void 0 !== middleware.offset
             ? (0, _react1.offset)(middleware.offset)
             : (0, _react1.offset)(4),
           middleware.flip && (0, _react1.flip)(),
@@ -77,31 +77,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 } = (0, _react1.useDelayGroupContext)();
+  let { delay } = (0, _react1.useDelayGroupContext)();
   (0, _react1.useDelayGroup)(floating.context, {
     id: (0, _index.useId)(),
   });
-  const interactions = (0, _react1.useInteractions)([
+  let interactions = (0, _react1.useInteractions)([
     (0, _react1.useHover)(floating.context, {
       delay: delay ?? {
         open: 50,
         close: 250,
       },
       handleClose: (0, _react1.safePolygon)({
-        buffer: -Infinity,
+        buffer: -1 / 0,
       }),
       move: false,
     }),
@@ -112,17 +112,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,
@@ -137,26 +135,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,
@@ -186,12 +180,9 @@ const useTooltip = (options = {}) => {
   );
 };
 const Tooltip = _react.forwardRef((props, forwardedRef) => {
-  const { content, children, portal = true, className, style, ...rest } = props;
-  const tooltip = useTooltip(rest);
-  const refs = (0, _index.useMergedRefs)(
-    tooltip.refs.setFloating,
-    forwardedRef,
-  );
+  let { content, children, portal = true, className, style, ...rest } = props;
+  let tooltip = useTooltip(rest);
+  let refs = (0, _index.useMergedRefs)(tooltip.refs.setFloating, forwardedRef);
   return _react.createElement(
     _react.Fragment,
     null,
@@ -199,7 +190,7 @@ 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(
           _index.Portal,
           {

package/cjs/core/TransferList/TransferList.js

@@ -28,11 +28,10 @@ const _Label = require('../Label/Label.js');
 const TransferListComponent = (0, _index.polymorphic)(
   'iui-transfer-list-wrapper',
 );
-TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const uid = (0, _index.useId)();
-  const [labelId, setLabelId] = _react.useState(uid);
+  let { className, children, ...rest } = props;
+  let uid = (0, _index.useId)();
+  let [labelId, setLabelId] = _react.useState(uid);
   return _react.createElement(
     _index.Box,
     {
@@ -56,48 +55,41 @@ const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
-TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = _react.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { labelId } = (0, _index.useSafeContext)(TransferListContext);
-  const [focusedIndex, setFocusedIndex] = _react.useState();
-  const listRef = _react.useRef(null);
-  const refs = (0, _index.useMergedRefs)(listRef, ref);
-  const getFocusableNodes = _react.useCallback(() => {
-    const focusableItems = (0, _index.getFocusableElements)(listRef.current);
+  let { children, className, ...rest } = props;
+  let { labelId } = (0, _index.useSafeContext)(TransferListContext);
+  let [focusedIndex, setFocusedIndex] = _react.useState();
+  let listRef = _react.useRef(null);
+  let refs = (0, _index.useMergedRefs)(listRef, ref);
+  let getFocusableNodes = _react.useCallback(() => {
+    let focusableItems = (0, _index.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;
     }
@@ -120,9 +112,8 @@ const TransferListListbox = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = _react.forwardRef((props, ref) => {
-  const {
+  let {
     actionable = true,
     disabled,
     onActiveChange,
@@ -130,18 +121,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();
     }
   };
@@ -155,24 +144,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 } = (0, _index.useSafeContext)(
-    TransferListContext,
-  );
+  let { children, id, ...rest } = props;
+  let { labelId, setLabelId } = (0, _index.useSafeContext)(TransferListContext);
   _react.useEffect(() => {
-    if (id && id !== labelId) {
-      setLabelId(id);
-    }
+    if (id && id !== labelId) setLabelId(id);
   }, [id, labelId, setLabelId]);
   return _react.createElement(
     _Label.Label,
@@ -185,14 +169,12 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 const TransferListToolbar = (0, _index.polymorphic)(
   'iui-transfer-list-toolbar',
   {
     role: 'toolbar',
   },
 );
-TransferListToolbar.displayName = 'TransferList.Toolbar';
 const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,
@@ -200,4 +182,4 @@ const TransferList = Object.assign(TransferListComponent, {
   ListboxLabel: TransferListListboxLabel,
   Toolbar: TransferListToolbar,
 });
-const TransferListContext = _react.createContext(undefined);
+const TransferListContext = _react.createContext(void 0);

package/cjs/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;
+};