@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,173 +1,242 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
 function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
 }
 _export(exports, {
-    Toast: function() {
-        return Toast;
-    },
-    ToastPresentation: function() {
-        return ToastPresentation;
-    }
+  Toast: function () {
+    return Toast;
+  },
+  ToastPresentation: function () {
+    return ToastPresentation;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _reacttransitiongroup = require("react-transition-group");
-const _classnames = _interop_require_default._(require("classnames"));
-const _index = require("../../utils/index.js");
-const _IconButton = require("../Buttons/IconButton.js");
-const _Toaster = require("./Toaster.js");
-const isMotionOk = ()=>(0, _index.getWindow)()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
-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 } = (0, _index.useSafeContext)(_Toaster.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);
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _reacttransitiongroup = require('react-transition-group');
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _Toaster = require('./Toaster.js');
+const isMotionOk = () =>
+  (0, _index.getWindow)()?.matchMedia?.(
+    '(prefers-reduced-motion: no-preference)',
+  )?.matches;
+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 } = (0, _index.useSafeContext)(
+    _Toaster.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 setCloseTimeout = (timeout)=>{
-        let definedWindow = (0, _index.getWindow)();
-        if (!definedWindow) return;
-        closeTimeout.current = definedWindow.setTimeout(()=>{
-            close();
-        }, timeout);
+  };
+  _react.useEffect(() => {
+    if ('temporary' === type) setCloseTimeout(duration);
+    return () => {
+      clearCloseTimeout();
     };
-    let clearCloseTimeout = ()=>{
-        (0, _index.getWindow)()?.clearTimeout(closeTimeout.current);
+  }, [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 = (0, _index.getWindow)();
+    if (!definedWindow) return;
+    closeTimeout.current = definedWindow.setTimeout(() => {
+      close();
+    }, timeout);
+  };
+  let clearCloseTimeout = () => {
+    (0, _index.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 onRef = (ref)=>{
-        if (ref) {
-            let { height } = ref.getBoundingClientRect();
-            setHeight(height);
+  };
+  return _react.createElement(
+    _reacttransitiongroup.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(_reacttransitiongroup.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(_index.Box, {
+      },
+      onExited: onRemove,
+    },
+    _react.createElement(
+      _index.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,
+        }),
+      ),
+    ),
+  );
 };
-const ToastPresentation = _react.forwardRef((props, forwardedRef)=>{
-    let { content, category, type = 'temporary', link, hasCloseButton, onClose, className, contentProps, ...rest } = props;
-    let StatusIcon = _index.StatusIconMap[category];
-    return _react.createElement(_index.Box, {
-        className: (0, _classnames.default)(`iui-toast iui-${category}`, className),
-        ref: forwardedRef,
-        ...rest
-    }, _react.createElement(_index.Box, {
-        className: "iui-status-area"
-    }, _react.createElement(StatusIcon, {
-        className: "iui-icon"
-    })), _react.createElement(_index.Box, {
-        as: "div",
+const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
+  let {
+    content,
+    category,
+    type = 'temporary',
+    link,
+    hasCloseButton,
+    onClose,
+    className,
+    contentProps,
+    ...rest
+  } = props;
+  let StatusIcon = _index.StatusIconMap[category];
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        `iui-toast iui-${category}`,
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        className: 'iui-status-area',
+      },
+      _react.createElement(StatusIcon, {
+        className: 'iui-icon',
+      }),
+    ),
+    _react.createElement(
+      _index.Box,
+      {
+        as: 'div',
         ...contentProps,
-        className: (0, _classnames.default)('iui-message', contentProps?.className)
-    }, content), link && _react.createElement(_index.ButtonBase, {
-        ...link,
-        className: (0, _classnames.default)('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.IconButton, {
-        size: "small",
-        styleType: "borderless",
-        onClick: onClose,
-        "aria-label": "Close"
-    }, _react.createElement(_index.SvgCloseSmall, null)));
+        className: (0, _classnames.default)(
+          'iui-message',
+          contentProps?.className,
+        ),
+      },
+      content,
+    ),
+    link &&
+      _react.createElement(
+        _index.ButtonBase,
+        {
+          ...link,
+          className: (0, _classnames.default)(
+            '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.IconButton,
+        {
+          size: 'small',
+          styleType: 'borderless',
+          onClick: onClose,
+          'aria-label': 'Close',
+        },
+        _react.createElement(_index.SvgCloseSmall, null),
+      ),
+  );
 });