@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Toast/Toast.js

@@ -1,153 +1,214 @@
 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';
-let isMotionOk = ()=>getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
-export const Toast = (props)=>{
-    let { content, category, type = 'temporary', isVisible: isVisibleProp, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, domProps } = props;
-    let closeTimeout = React.useRef(0);
-    let { placement } = useSafeContext(ToasterStateContext).settings;
-    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
-        };
+let isMotionOk = () =>
+  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
+export const Toast = (props) => {
+  let {
+    content,
+    category,
+    type = 'temporary',
+    isVisible: isVisibleProp,
+    link,
+    duration = 7000,
+    hasCloseButton,
+    onRemove,
+    animateOutTo,
+    domProps,
+  } = props;
+  let closeTimeout = React.useRef(0);
+  let { placement } = useSafeContext(ToasterStateContext).settings;
+  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 ('temporary' === type) setCloseTimeout(duration);
-        return ()=>{
-            clearCloseTimeout();
-        };
-    }, [
-        duration,
-        type
-    ]);
-    React.useEffect(()=>{
-        if (!isVisible && !animateOutTo) setMargin(-height);
-    }, [
-        isVisible,
-        animateOutTo,
-        setMargin,
-        height
-    ]);
-    let close = ()=>{
-        clearCloseTimeout();
-        setMargin(-height);
-        setVisible(false);
+  };
+  React.useEffect(() => {
+    if ('temporary' === type) setCloseTimeout(duration);
+    return () => {
+      clearCloseTimeout();
     };
-    let setCloseTimeout = (timeout)=>{
-        let definedWindow = getWindow();
-        if (!definedWindow) return;
-        closeTimeout.current = definedWindow.setTimeout(()=>{
-            close();
-        }, timeout);
+  }, [duration, type]);
+  React.useEffect(() => {
+    if (!isVisible && !animateOutTo) setMargin(-height);
+  }, [isVisible, animateOutTo, setMargin, height]);
+  let close = () => {
+    clearCloseTimeout();
+    setMargin(-height);
+    setVisible(false);
+  };
+  let setCloseTimeout = (timeout) => {
+    let definedWindow = getWindow();
+    if (!definedWindow) return;
+    closeTimeout.current = definedWindow.setTimeout(() => {
+      close();
+    }, timeout);
+  };
+  let clearCloseTimeout = () => {
+    getWindow()?.clearTimeout(closeTimeout.current);
+  };
+  let onRef = (ref) => {
+    if (ref) {
+      let { height } = ref.getBoundingClientRect();
+      setHeight(height);
+    }
+  };
+  let calculateOutAnimation = (node) => {
+    let translateX = 0;
+    let translateY = 0;
+    if (animateOutTo && node) {
+      let { x: startX, y: startY } = node.getBoundingClientRect();
+      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
+      translateX = endX - startX;
+      translateY = endY - startY;
+    }
+    return {
+      translateX,
+      translateY,
     };
-    let clearCloseTimeout = ()=>{
-        getWindow()?.clearTimeout(closeTimeout.current);
-    };
-    let onRef = (ref)=>{
-        if (ref) {
-            let { height } = ref.getBoundingClientRect();
-            setHeight(height);
+  };
+  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';
         }
-    };
-    let calculateOutAnimation = (node)=>{
-        let translateX = 0;
-        let translateY = 0;
-        if (animateOutTo && node) {
-            let { x: startX, y: startY } = node.getBoundingClientRect();
-            let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
-            translateX = endX - startX;
-            translateY = endY - startY;
+      },
+      onEntered: (node) => {
+        if (isMotionOk()) node.style.transform = 'translateY(0)';
+      },
+      onExiting: (node) => {
+        if (isMotionOk()) {
+          let { 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)';
         }
-        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()) {
-                let { 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, {
+      },
+      onExited: onRemove,
+    },
+    React.createElement(
+      Box,
+      {
         ref: thisElement,
-        className: "iui-toast-all",
+        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
-    }))));
+          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,
+        }),
+      ),
+    ),
+  );
 };
-export const ToastPresentation = React.forwardRef((props, forwardedRef)=>{
-    let { content, category, type = 'temporary', link, hasCloseButton, onClose, className, contentProps, ...rest } = props;
-    let 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",
+export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
+  let {
+    content,
+    category,
+    type = 'temporary',
+    link,
+    hasCloseButton,
+    onClose,
+    className,
+    contentProps,
+    ...rest
+  } = props;
+  let 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, {
-        ...link,
-        className: cx('iui-anchor', 'iui-toast-anchor', link.className),
-        title: void 0,
-        "data-iui-status": category,
-        "data-iui-underline": true
-    }, link.title), ('persisting' === type || hasCloseButton) && React.createElement(IconButton, {
-        size: "small",
-        styleType: "borderless",
-        onClick: onClose,
-        "aria-label": "Close"
-    }, React.createElement(SvgCloseSmall, null)));
+        className: cx('iui-message', contentProps?.className),
+      },
+      content,
+    ),
+    link &&
+      React.createElement(
+        ButtonBase,
+        {
+          ...link,
+          className: cx('iui-anchor', 'iui-toast-anchor', link.className),
+          title: void 0,
+          'data-iui-status': category,
+          'data-iui-underline': true,
+        },
+        link.title,
+      ),
+    ('persisting' === type || hasCloseButton) &&
+      React.createElement(
+        IconButton,
+        {
+          size: 'small',
+          styleType: 'borderless',
+          onClick: onClose,
+          'aria-label': 'Close',
+        },
+        React.createElement(SvgCloseSmall, null),
+      ),
+  );
 });

package/DEV-esm/core/Toast/Toaster.js

@@ -2,109 +2,129 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, useSafeContext } from '../../utils/index.js';
 import { Toast } from './Toast.js';
-export const useToaster = ()=>{
-    let dispatch = useSafeContext(ToasterDispatchContext);
-    return React.useMemo(()=>{
-        let showToast = (category)=>(content, options)=>{
-                let 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 useToaster = () => {
+  let dispatch = useSafeContext(ToasterDispatchContext);
+  return React.useMemo(() => {
+    let showToast = (category) => (content, options) => {
+      let 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 = ()=>{
-    let { toasts, settings } = useSafeContext(ToasterStateContext);
-    return React.createElement(Box, {
-        className: cx("iui-toast-wrapper", `iui-placement-${settings.placement}`)
-    }, toasts.map((toastProps)=>React.createElement(Toast, {
-            key: toastProps.id,
-            ...toastProps
-        })));
+export const Toaster = () => {
+  let { toasts, settings } = useSafeContext(ToasterStateContext);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-toast-wrapper', `iui-placement-${settings.placement}`),
+    },
+    toasts.map((toastProps) =>
+      React.createElement(Toast, {
+        key: toastProps.id,
+        ...toastProps,
+      }),
+    ),
+  );
 };
-export const ToastProvider = ({ children })=>{
-    let [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));
+export const ToastProvider = ({ children, inherit = false }) => {
+  let [toasterState, dispatch] = React.useReducer(toastReducer, {
+    toasts: [],
+    settings: {
+      order: 'auto',
+      placement: 'top',
+    },
+  });
+  if (React.useContext(ToasterStateContext) && inherit) return children;
+  return React.createElement(
+    ToasterDispatchContext.Provider,
+    {
+      value: dispatch,
+    },
+    React.createElement(
+      ToasterStateContext.Provider,
+      {
+        value: toasterState,
+      },
+      children,
+    ),
+  );
 };
-let toastReducer = (state, action)=>{
-    if ('add' === action.type) {
-        let order = state.settings.order;
-        if ('auto' === order) order = state.settings.placement.startsWith('top') ? 'descending' : 'ascending';
-        return {
-            ...state,
-            toasts: [
-                ...'ascending' === order ? state.toasts : [],
-                action.toast,
-                ...'descending' === order ? state.toasts : []
-            ]
-        };
-    }
-    if ('remove' === action.type) return {
-        ...state,
-        toasts: state.toasts.filter((toast)=>toast.id !== action.id)
+let toastReducer = (state, action) => {
+  if ('add' === action.type) {
+    let order = state.settings.order;
+    if ('auto' === order)
+      order = state.settings.placement.startsWith('top')
+        ? 'descending'
+        : 'ascending';
+    return {
+      ...state,
+      toasts: [
+        ...('ascending' === order ? state.toasts : []),
+        action.toast,
+        ...('descending' === order ? state.toasts : []),
+      ],
+    };
+  }
+  if ('remove' === action.type)
+    return {
+      ...state,
+      toasts: state.toasts.filter((toast) => toast.id !== action.id),
     };
-    if ('close-all' === action.type) return {
-        ...state,
-        toasts: state.toasts.map((toast)=>({
-                ...toast,
-                isVisible: false
-            }))
+  if ('close-all' === action.type)
+    return {
+      ...state,
+      toasts: state.toasts.map((toast) => ({
+        ...toast,
+        isVisible: false,
+      })),
     };
-    if ('settings' === action.type) return {
-        ...state,
-        settings: {
-            ...state.settings,
-            ...action.settings
-        }
+  if ('settings' === action.type)
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        ...action.settings,
+      },
     };
-    return state;
+  return state;
 };
 export const ToasterStateContext = React.createContext(void 0);
 ToasterStateContext.displayName = 'ToasterStateContext';
 let ToasterDispatchContext = React.createContext(void 0);
 ToasterDispatchContext.displayName = 'ToasterDispatchContext';
-let nextId = (()=>{
-    let count = 0;
-    return ()=>++count;
+let nextId = (() => {
+  let count = 0;
+  return () => ++count;
 })();

package/DEV-esm/core/ToggleSwitch/ToggleSwitch.js

@@ -1,34 +1,65 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, SvgCheckmark } from '../../utils/index.js';
-export const ToggleSwitch = React.forwardRef((props, ref)=>{
-    let { disabled = false, labelPosition = 'right', label, className, style, size = 'default', labelProps = {}, icon: iconProp, ...rest } = props;
-    let shouldShowIcon = void 0 === iconProp || null !== iconProp && 'small' !== size;
-    return React.createElement(Box, {
-        as: label ? 'label' : 'div',
-        className: cx('iui-toggle-switch-wrapper', {
-            'iui-disabled': disabled,
-            'iui-label-on-right': label && 'right' === labelPosition,
-            'iui-label-on-left': label && 'left' === labelPosition
-        }, className),
-        "data-iui-size": size,
-        style: style
-    }, React.createElement(Box, {
-        as: "input",
-        className: "iui-toggle-switch",
-        type: "checkbox",
-        role: "switch",
-        disabled: disabled,
-        ref: ref,
-        ...rest
-    }), shouldShowIcon && React.createElement(Box, {
-        as: "span",
-        className: "iui-toggle-switch-icon",
-        "aria-hidden": true
-    }, iconProp || React.createElement(SvgCheckmark, null)), label && React.createElement(Box, {
-        as: "span",
-        ...labelProps,
-        className: cx('iui-toggle-switch-label', labelProps?.className)
-    }, label));
+export const ToggleSwitch = React.forwardRef((props, ref) => {
+  let {
+    disabled = false,
+    labelPosition = 'right',
+    label,
+    className,
+    style,
+    size = 'default',
+    labelProps = {},
+    icon: iconProp,
+    ...rest
+  } = props;
+  let shouldShowIcon =
+    void 0 === iconProp || (null !== iconProp && 'small' !== size);
+  return React.createElement(
+    Box,
+    {
+      as: label ? 'label' : 'div',
+      className: cx(
+        'iui-toggle-switch-wrapper',
+        {
+          'iui-disabled': disabled,
+          'iui-label-on-right': label && 'right' === labelPosition,
+          'iui-label-on-left': label && 'left' === labelPosition,
+        },
+        className,
+      ),
+      'data-iui-size': size,
+      style: style,
+    },
+    React.createElement(Box, {
+      as: 'input',
+      className: 'iui-toggle-switch',
+      type: 'checkbox',
+      role: 'switch',
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    }),
+    shouldShowIcon &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          className: 'iui-toggle-switch-icon',
+          'aria-hidden': true,
+        },
+        iconProp || React.createElement(SvgCheckmark, null),
+      ),
+    label &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          ...labelProps,
+          className: cx('iui-toggle-switch-label', labelProps?.className),
+        },
+        label,
+      ),
+  );
 });
 ToggleSwitch.displayName = 'ToggleSwitch';