@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/Toast/Toast.js

@@ -5,18 +5,10 @@
 import * as React from 'react';
 import { Transition } from 'react-transition-group';
 import cx from 'classnames';
-import {
-  getWindow,
-  StatusIconMap,
-  SvgCloseSmall,
-  Box,
-  useSafeContext,
-  ButtonBase,
-} from '../utils/index.js';
+import { getWindow, StatusIconMap, SvgCloseSmall, Box, useSafeContext, ButtonBase, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
-const isMotionOk = () =>
-  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
+const isMotionOk = () => getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
  * @example
@@ -26,198 +18,112 @@ const isMotionOk = () =>
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export const Toast = (props) => {
-  const {
-    content,
-    category,
-    type = 'temporary',
-    isVisible: isVisibleProp,
-    link,
-    duration = 7000,
-    hasCloseButton,
-    onRemove,
-    animateOutTo,
-    domProps,
-  } = props;
-  const closeTimeout = React.useRef(0);
-  const { placement } = useSafeContext(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') {
-      return { marginBlockEnd: margin };
-    }
-    return { marginBlockStart: margin };
-  };
-  React.useEffect(() => {
-    if (type === 'temporary') {
-      setCloseTimeout(duration);
-    }
-    return () => {
-      clearCloseTimeout();
+    const { content, category, type = 'temporary', isVisible: isVisibleProp, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, domProps, } = props;
+    const closeTimeout = React.useRef(0);
+    const { placement } = useSafeContext(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') {
+            return { marginBlockEnd: margin };
+        }
+        return { marginBlockStart: margin };
+    };
+    React.useEffect(() => {
+        if (type === 'temporary') {
+            setCloseTimeout(duration);
+        }
+        return () => {
+            clearCloseTimeout();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [duration, type]);
+    React.useEffect(() => {
+        // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
+        // Close all and close on toasts with no anchor.
+        if (!isVisible && !animateOutTo) {
+            setMargin(-height);
+        }
+    }, [isVisible, animateOutTo, setMargin, height]);
+    const close = () => {
+        clearCloseTimeout();
+        // move element up when this element is closed.
+        setMargin(-height);
+        setVisible(false);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, type]);
-  React.useEffect(() => {
-    // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
-    // Close all and close on toasts with no anchor.
-    if (!isVisible && !animateOutTo) {
-      setMargin(-height);
-    }
-  }, [isVisible, animateOutTo, setMargin, height]);
-  const close = () => {
-    clearCloseTimeout();
-    // move element up when this element is closed.
-    setMargin(-height);
-    setVisible(false);
-  };
-  const setCloseTimeout = (timeout) => {
-    const definedWindow = getWindow();
-    if (!definedWindow) {
-      return;
-    }
-    closeTimeout.current = definedWindow.setTimeout(() => {
-      close();
-    }, timeout);
-  };
-  const clearCloseTimeout = () => {
-    getWindow()?.clearTimeout(closeTimeout.current);
-  };
-  const onRef = (ref) => {
-    if (ref) {
-      const { height } = ref.getBoundingClientRect();
-      setHeight(height);
-    }
-  };
-  const calculateOutAnimation = (node) => {
-    // calculation translate x and y pixels.
-    let translateX = 0;
-    let translateY = 0;
-    if (animateOutTo && node) {
-      const { x: startX, y: startY } = node.getBoundingClientRect(); // current element
-      const { x: endX, y: endY } = animateOutTo.getBoundingClientRect(); // anchor point
-      translateX = endX - startX;
-      translateY = endY - startY;
-    }
-    return { translateX, translateY };
-  };
-  return React.createElement(
-    Transition,
-    {
-      timeout: { enter: 240, exit: animateOutTo ? 400 : 120 },
-      in: isVisible,
-      appear: true,
-      unmountOnExit: true,
-      onEnter: (node) => {
-        if (isMotionOk()) {
-          node.style.transform = 'translateY(15%)';
-          node.style.transitionTimingFunction = 'ease';
+    const setCloseTimeout = (timeout) => {
+        const definedWindow = getWindow();
+        if (!definedWindow) {
+            return;
         }
-      },
-      onEntered: (node) => {
-        if (isMotionOk()) {
-          node.style.transform = 'translateY(0)';
+        closeTimeout.current = definedWindow.setTimeout(() => {
+            close();
+        }, timeout);
+    };
+    const clearCloseTimeout = () => {
+        getWindow()?.clearTimeout(closeTimeout.current);
+    };
+    const onRef = (ref) => {
+        if (ref) {
+            const { height } = ref.getBoundingClientRect();
+            setHeight(height);
         }
-      },
-      onExiting: (node) => {
-        if (isMotionOk()) {
-          const { translateX, translateY } = calculateOutAnimation(node);
-          node.style.transform = animateOutTo
-            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : `scale(0.9)`;
-          node.style.opacity = '0';
-          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+    };
+    const calculateOutAnimation = (node) => {
+        // calculation translate x and y pixels.
+        let translateX = 0;
+        let translateY = 0;
+        if (animateOutTo && node) {
+            const { x: startX, y: startY } = node.getBoundingClientRect(); // current element
+            const { x: endX, y: endY } = animateOutTo.getBoundingClientRect(); // anchor point
+            translateX = endX - startX;
+            translateY = endY - startY;
         }
-      },
-      onExited: onRemove,
-    },
-    React.createElement(
-      Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      React.createElement(
-        'div',
-        { ref: onRef },
-        React.createElement(ToastPresentation, {
-          as: 'div',
-          category: category,
-          content: content,
-          link: link,
-          type: type,
-          hasCloseButton: hasCloseButton,
-          onClose: close,
-          ...domProps?.toastProps,
-          contentProps: domProps?.contentProps,
-        }),
-      ),
-    ),
-  );
+        return { translateX, translateY };
+    };
+    return (React.createElement(Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: isVisible, appear: true, unmountOnExit: true, onEnter: (node) => {
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(15%)';
+                node.style.transitionTimingFunction = 'ease';
+            }
+        }, onEntered: (node) => {
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(0)';
+            }
+        }, onExiting: (node) => {
+            if (isMotionOk()) {
+                const { translateX, translateY } = calculateOutAnimation(node);
+                node.style.transform = animateOutTo
+                    ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+                    : `scale(0.9)`;
+                node.style.opacity = '0';
+                node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+                node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+            }
+        }, onExited: onRemove },
+        React.createElement(Box, { ref: thisElement, className: 'iui-toast-all', style: {
+                height,
+                ...marginStyle(),
+            } },
+            React.createElement("div", { ref: onRef },
+                React.createElement(ToastPresentation, { as: 'div', category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close, ...domProps?.toastProps, contentProps: domProps?.contentProps })))));
 };
 /**
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
 export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
-  const {
-    content,
-    category,
-    type = 'temporary',
-    link,
-    hasCloseButton,
-    onClose,
-    className,
-    contentProps,
-    ...rest
-  } = props;
-  const StatusIcon = StatusIconMap[category];
-  return React.createElement(
-    Box,
-    {
-      className: cx(`iui-toast iui-${category}`, className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      { className: 'iui-status-area' },
-      React.createElement(StatusIcon, { className: 'iui-icon' }),
-    ),
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...contentProps,
-        className: cx('iui-message', contentProps?.className),
-      },
-      content,
-    ),
-    link &&
-      React.createElement(
-        ButtonBase,
-        { className: 'iui-toast-anchor', ...link, title: undefined },
-        link.title,
-      ),
-    (type === 'persisting' || hasCloseButton) &&
-      React.createElement(
-        IconButton,
-        {
-          size: 'small',
-          styleType: 'borderless',
-          onClick: onClose,
-          'aria-label': 'Close',
-        },
-        React.createElement(SvgCloseSmall, null),
-      ),
-  );
+    const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, contentProps, ...rest } = props;
+    const StatusIcon = StatusIconMap[category];
+    return (React.createElement(Box, { className: cx(`iui-toast iui-${category}`, className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
+        React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-message', contentProps?.className) }, content),
+        link && (React.createElement(ButtonBase, { className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
+        (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            React.createElement(SvgCloseSmall, null)))));
 });
 export default Toast;

package/esm/core/Toast/Toaster.js

@@ -8,95 +8,82 @@ import { Box, useSafeContext } from '../utils/index.js';
 import { Toast } from './Toast.js';
 // ----------------------------------------------------------------------------
 export const useToaster = () => {
-  const dispatch = useSafeContext(ToasterDispatchContext);
-  return React.useMemo(() => {
-    const showToast = (category) => (content, options) => {
-      const id = nextId();
-      dispatch({
-        type: 'add',
-        toast: { ...options, id, content, category },
-      });
-      return { close: () => dispatch({ type: 'remove', id }) };
-    };
-    return {
-      positive: showToast('positive'),
-      informational: showToast('informational'),
-      negative: showToast('negative'),
-      warning: showToast('warning'),
-      closeAll: () => {
-        dispatch({ type: 'close-all' });
-      },
-      setSettings: (settings) => {
-        dispatch({ type: 'settings', settings });
-      },
-    };
-  }, [dispatch]);
+    const dispatch = useSafeContext(ToasterDispatchContext);
+    return React.useMemo(() => {
+        const showToast = (category) => (content, options) => {
+            const id = nextId();
+            dispatch({
+                type: 'add',
+                toast: { ...options, id, content, category },
+            });
+            return { close: () => dispatch({ type: 'remove', id }) };
+        };
+        return {
+            positive: showToast('positive'),
+            informational: showToast('informational'),
+            negative: showToast('negative'),
+            warning: showToast('warning'),
+            closeAll: () => {
+                dispatch({ type: 'close-all' });
+            },
+            setSettings: (settings) => {
+                dispatch({ type: 'settings', settings });
+            },
+        };
+    }, [dispatch]);
 };
 // ----------------------------------------------------------------------------
 export const Toaster = () => {
-  const { toasts, settings } = useSafeContext(ToasterStateContext);
-  return React.createElement(
-    Box,
-    {
-      className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`),
-    },
-    toasts.map((toastProps) => {
-      return React.createElement(Toast, { key: toastProps.id, ...toastProps });
-    }),
-  );
+    const { toasts, settings } = useSafeContext(ToasterStateContext);
+    return (React.createElement(Box, { className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`) }, toasts.map((toastProps) => {
+        return React.createElement(Toast, { key: toastProps.id, ...toastProps });
+    })));
 };
 // ----------------------------------------------------------------------------
 export const ToastProvider = ({ children }) => {
-  const [toasterState, dispatch] = React.useReducer(toastReducer, {
-    toasts: [],
-    settings: {
-      order: 'auto',
-      placement: 'top',
-    },
-  });
-  return React.createElement(
-    ToasterDispatchContext.Provider,
-    { value: dispatch },
-    React.createElement(
-      ToasterStateContext.Provider,
-      { value: toasterState },
-      children,
-    ),
-  );
+    const [toasterState, dispatch] = React.useReducer(toastReducer, {
+        toasts: [],
+        settings: {
+            order: 'auto',
+            placement: 'top',
+        },
+    });
+    return (React.createElement(ToasterDispatchContext.Provider, { value: dispatch },
+        React.createElement(ToasterStateContext.Provider, { value: toasterState }, children)));
 };
 const toastReducer = (state, action) => {
-  if (action.type === 'add') {
-    let order = state.settings.order;
-    if (order === 'auto') {
-      order = state.settings.placement.startsWith('top')
-        ? 'descending'
-        : 'ascending';
+    if (action.type === 'add') {
+        let order = state.settings.order;
+        if (order === 'auto') {
+            order = state.settings.placement.startsWith('top')
+                ? 'descending'
+                : 'ascending';
+        }
+        return {
+            ...state,
+            toasts: [
+                ...(order === 'ascending' ? state.toasts : []),
+                action.toast,
+                ...(order === 'descending' ? state.toasts : []),
+            ],
+        };
     }
-    return {
-      ...state,
-      toasts: [
-        ...(order === 'ascending' ? state.toasts : []),
-        action.toast,
-        ...(order === 'descending' ? state.toasts : []),
-      ],
-    };
-  }
-  if (action.type === 'remove') {
-    return {
-      ...state,
-      toasts: state.toasts.filter((toast) => toast.id !== action.id),
-    };
-  }
-  if (action.type === 'close-all') {
-    return {
-      ...state,
-      toasts: state.toasts.map((toast) => ({ ...toast, isVisible: false })),
-    };
-  }
-  if (action.type === 'settings') {
-    return { ...state, settings: { ...state.settings, ...action.settings } };
-  }
-  return state;
+    if (action.type === 'remove') {
+        return {
+            ...state,
+            toasts: state.toasts.filter((toast) => toast.id !== action.id),
+        };
+    }
+    if (action.type === 'close-all') {
+        return {
+            ...state,
+            toasts: state.toasts.map((toast) => ({ ...toast, isVisible: false })),
+        };
+    }
+    if (action.type === 'settings') {
+        return { ...state, settings: { ...state.settings, ...action.settings } };
+    }
+    return state;
 };
 // ----------------------------------------------------------------------------
 export const ToasterStateContext = React.createContext(undefined);
@@ -106,6 +93,6 @@ const ToasterDispatchContext = React.createContext(undefined);
 ToasterDispatchContext.displayName = 'ToasterDispatchContext';
 // ----------------------------------------------------------------------------
 const nextId = (() => {
-  let count = 0;
-  return () => ++count;
+    let count = 0;
+    return () => ++count;
 })();

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -24,65 +24,22 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 export const ToggleSwitch = React.forwardRef((props, ref) => {
-  let icon;
-  if (props.size !== 'small') {
-    icon = props.icon;
-    props = { ...props };
-    delete props.icon;
-  }
-  const {
-    disabled = false,
-    labelPosition = 'right',
-    label,
-    className,
-    style,
-    size = 'default',
-    ...rest
-  } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = useMergedRefs(inputElementRef, ref);
-  return React.createElement(
-    Box,
-    {
-      as: label ? 'label' : 'div',
-      className: cx(
-        'iui-toggle-switch-wrapper',
-        {
-          'iui-disabled': disabled,
-          'iui-label-on-right': label && labelPosition === 'right',
-          'iui-label-on-left': label && labelPosition === 'left',
-        },
-        className,
-      ),
-      'data-iui-size': size,
-      style: style,
-    },
-    React.createElement(Box, {
-      as: 'input',
-      className: 'iui-toggle-switch',
-      type: 'checkbox',
-      role: 'switch',
-      disabled: disabled,
-      ref: refs,
-      ...rest,
-    }),
-    icon &&
-      size !== 'small' &&
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          className: 'iui-toggle-switch-icon',
-          'aria-hidden': true,
-        },
-        icon,
-      ),
-    label &&
-      React.createElement(
-        Box,
-        { as: 'span', className: 'iui-toggle-switch-label' },
-        label,
-      ),
-  );
+    let icon;
+    if (props.size !== 'small') {
+        icon = props.icon;
+        props = { ...props };
+        delete props.icon;
+    }
+    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', ...rest } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = useMergedRefs(inputElementRef, ref);
+    return (React.createElement(Box, { as: label ? 'label' : 'div', className: cx('iui-toggle-switch-wrapper', {
+            'iui-disabled': disabled,
+            'iui-label-on-right': label && labelPosition === 'right',
+            'iui-label-on-left': label && labelPosition === 'left',
+        }, className), "data-iui-size": size, style: style },
+        React.createElement(Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
+        icon && size !== 'small' && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        label && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });
 export default ToggleSwitch;