@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/Toast/Toast.js

@@ -1,21 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToastPresentation = exports.Toast = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const react_transition_group_1 = require('react-transition-group');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const Toaster_js_1 = require('./Toaster.js');
-const isMotionOk = () =>
-  (0, index_js_1.getWindow)()?.matchMedia?.(
-    '(prefers-reduced-motion: no-preference)',
-  )?.matches;
+const React = tslib_1.__importStar(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const Toaster_js_1 = require("./Toaster.js");
+const isMotionOk = () => (0, index_js_1.getWindow)()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
  * @example
@@ -25,144 +22,99 @@ const isMotionOk = () =>
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 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 } = (0, index_js_1.useSafeContext)(
-    Toaster_js_1.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 } = (0, index_js_1.useSafeContext)(Toaster_js_1.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 = (0, index_js_1.getWindow)();
-    if (!definedWindow) {
-      return;
-    }
-    closeTimeout.current = definedWindow.setTimeout(() => {
-      close();
-    }, timeout);
-  };
-  const clearCloseTimeout = () => {
-    (0, index_js_1.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(
-    react_transition_group_1.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 = (0, index_js_1.getWindow)();
+        if (!definedWindow) {
+            return;
         }
-      },
-      onEntered: (node) => {
-        if (isMotionOk()) {
-          node.style.transform = 'translateY(0)';
+        closeTimeout.current = definedWindow.setTimeout(() => {
+            close();
+        }, timeout);
+    };
+    const clearCloseTimeout = () => {
+        (0, index_js_1.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(
-      index_js_1.Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      React.createElement(
-        'div',
-        { ref: onRef },
-        React.createElement(exports.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(react_transition_group_1.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(index_js_1.Box, { ref: thisElement, className: 'iui-toast-all', style: {
+                height,
+                ...marginStyle(),
+            } },
+            React.createElement("div", { ref: onRef },
+                React.createElement(exports.ToastPresentation, { as: 'div', category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close, ...domProps?.toastProps, contentProps: domProps?.contentProps })))));
 };
 exports.Toast = Toast;
 /**
@@ -170,62 +122,13 @@ exports.Toast = Toast;
  * @private
  */
 exports.ToastPresentation = React.forwardRef((props, forwardedRef) => {
-  const {
-    content,
-    category,
-    type = 'temporary',
-    link,
-    hasCloseButton,
-    onClose,
-    className,
-    contentProps,
-    ...rest
-  } = props;
-  const StatusIcon = index_js_1.StatusIconMap[category];
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        `iui-toast iui-${category}`,
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-status-area' },
-      React.createElement(StatusIcon, { className: 'iui-icon' }),
-    ),
-    React.createElement(
-      index_js_1.Box,
-      {
-        as: 'div',
-        ...contentProps,
-        className: (0, classnames_1.default)(
-          'iui-message',
-          contentProps?.className,
-        ),
-      },
-      content,
-    ),
-    link &&
-      React.createElement(
-        index_js_1.ButtonBase,
-        { className: 'iui-toast-anchor', ...link, title: undefined },
-        link.title,
-      ),
-    (type === 'persisting' || hasCloseButton) &&
-      React.createElement(
-        IconButton_js_1.IconButton,
-        {
-          size: 'small',
-          styleType: 'borderless',
-          onClick: onClose,
-          'aria-label': 'Close',
-        },
-        React.createElement(index_js_1.SvgCloseSmall, null),
-      ),
-  );
+    const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, contentProps, ...rest } = props;
+    const StatusIcon = index_js_1.StatusIconMap[category];
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast iui-${category}`, className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
+        React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-message', contentProps?.className) }, content),
+        link && (React.createElement(index_js_1.ButtonBase, { className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
+        (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            React.createElement(index_js_1.SvgCloseSmall, null)))));
 });
 exports.default = exports.Toast;

package/cjs/core/Toast/Toaster.js

@@ -1,122 +1,96 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.ToasterStateContext =
-  exports.ToastProvider =
-  exports.Toaster =
-  exports.useToaster =
-    void 0;
-const tslib_1 = require('tslib');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToasterStateContext = exports.ToastProvider = exports.Toaster = exports.useToaster = void 0;
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const Toast_js_1 = require('./Toast.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const Toast_js_1 = require("./Toast.js");
 // ----------------------------------------------------------------------------
 const useToaster = () => {
-  const dispatch = (0, index_js_1.useSafeContext)(ToasterDispatchContext);
-  const showToast = React.useCallback(
-    (category) => (content, options) => {
-      const id = nextId();
-      dispatch({
-        type: 'add',
-        toast: { ...options, id, content, category },
-      });
-      return { close: () => dispatch({ type: 'remove', id }) };
-    },
-    [dispatch],
-  );
-  return {
-    positive: showToast('positive'),
-    informational: showToast('informational'),
-    negative: showToast('negative'),
-    warning: showToast('warning'),
-    closeAll: () => {
-      dispatch({ type: 'close-all' });
-    },
-    setSettings: (settings) => {
-      dispatch({ type: 'settings', settings });
-    },
-  };
+    const dispatch = (0, index_js_1.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]);
 };
 exports.useToaster = useToaster;
 // ----------------------------------------------------------------------------
 const Toaster = () => {
-  const { toasts, settings } = (0, index_js_1.useSafeContext)(
-    exports.ToasterStateContext,
-  );
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        `iui-toast-wrapper`,
-        `iui-placement-${settings.placement}`,
-      ),
-    },
-    toasts.map((toastProps) => {
-      return React.createElement(Toast_js_1.Toast, {
-        key: toastProps.id,
-        ...toastProps,
-      });
-    }),
-  );
+    const { toasts, settings } = (0, index_js_1.useSafeContext)(exports.ToasterStateContext);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast-wrapper`, `iui-placement-${settings.placement}`) }, toasts.map((toastProps) => {
+        return React.createElement(Toast_js_1.Toast, { key: toastProps.id, ...toastProps });
+    })));
 };
 exports.Toaster = Toaster;
 // ----------------------------------------------------------------------------
 const ToastProvider = ({ children }) => {
-  const [toasterState, dispatch] = React.useReducer(toastReducer, {
-    toasts: [],
-    settings: {
-      order: 'auto',
-      placement: 'top',
-    },
-  });
-  return React.createElement(
-    ToasterDispatchContext.Provider,
-    { value: dispatch },
-    React.createElement(
-      exports.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(exports.ToasterStateContext.Provider, { value: toasterState }, children)));
 };
 exports.ToastProvider = ToastProvider;
 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;
 };
 // ----------------------------------------------------------------------------
 exports.ToasterStateContext = React.createContext(undefined);
@@ -126,6 +100,6 @@ const ToasterDispatchContext = React.createContext(undefined);
 ToasterDispatchContext.displayName = 'ToasterDispatchContext';
 // ----------------------------------------------------------------------------
 const nextId = (() => {
-  let count = 0;
-  return () => ++count;
+    let count = 0;
+    return () => ++count;
 })();

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleSwitch = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * A switch for turning on and off.
  * @example
@@ -28,65 +28,22 @@ const index_js_1 = require('../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>} />
  */
 exports.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 = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: label ? 'label' : 'div',
-      className: (0, classnames_1.default)(
-        '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(index_js_1.Box, {
-      as: 'input',
-      className: 'iui-toggle-switch',
-      type: 'checkbox',
-      role: 'switch',
-      disabled: disabled,
-      ref: refs,
-      ...rest,
-    }),
-    icon &&
-      size !== 'small' &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'span',
-          className: 'iui-toggle-switch-icon',
-          'aria-hidden': true,
-        },
-        icon,
-      ),
-    label &&
-      React.createElement(
-        index_js_1.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 = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('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(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
+        icon && size !== 'small' && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });
 exports.default = exports.ToggleSwitch;