@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/TimePicker/TimePicker.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,12 @@ exports.TimePicker = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/time-picker.css");
-var isSameHour = function (date1, date2, meridiem) {
-    var adjustedHours = meridiem
+const isSameHour = (date1, date2, meridiem) => {
+    const adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)
         : date1.getHours();
     if (!!meridiem) {
@@ -43,20 +21,20 @@ var isSameHour = function (date1, date2, meridiem) {
     }
     return !!date2 && adjustedHours === date2.getHours();
 };
-var isSameMinute = function (date1, date2) {
+const isSameMinute = (date1, date2) => {
     return !!date2 && date1.getMinutes() === date2.getMinutes();
 };
-var isSameSecond = function (date1, date2) {
+const isSameSecond = (date1, date2) => {
     return !!date2 && date1.getSeconds() === date2.getSeconds();
 };
-var isSameMeridiem = function (meridiem, date) {
+const isSameMeridiem = (meridiem, date) => {
     return (!!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12));
 };
-var formatHourFrom12 = function (hour, meridiem) {
-    var adjustedHour = hour % 12;
+const formatHourFrom12 = (hour, meridiem) => {
+    const adjustedHour = hour % 12;
     return meridiem === 'PM' ? adjustedHour + 12 : adjustedHour;
 };
-var setHours = function (hour, date) {
+const setHours = (hour, date) => {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, date.getMinutes(), date.getSeconds());
 };
 /**
@@ -64,32 +42,26 @@ var setHours = function (hour, date) {
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
-var TimePicker = function (props) {
-    var date = props.date, onChange = props.onChange, _a = props.use12Hours, use12Hours = _a === void 0 ? false : _a, _b = props.precision, precision = _b === void 0 ? 'minutes' : _b, _c = props.hourStep, hourStep = _c === void 0 ? 1 : _c, _d = props.minuteStep, minuteStep = _d === void 0 ? 1 : _d, _e = props.secondStep, secondStep = _e === void 0 ? 1 : _e, _f = props.setFocusHour, setFocusHour = _f === void 0 ? false : _f, _g = props.hourRenderer, hourRenderer = _g === void 0 ? function (date) {
-        return date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _g, _h = props.minuteRenderer, minuteRenderer = _h === void 0 ? function (date) {
-        return date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _h, _j = props.secondRenderer, secondRenderer = _j === void 0 ? function (date) {
-        return date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _j, _k = props.meridiemRenderer, meridiemRenderer = _k === void 0 ? function (meridiem) { return meridiem; } : _k, className = props.className, rest = __rest(props, ["date", "onChange", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "setFocusHour", "hourRenderer", "minuteRenderer", "secondRenderer", "meridiemRenderer", "className"]);
+const TimePicker = (props) => {
+    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _l = react_1.default.useState(date), selectedTime = _l[0], setSelectedTime = _l[1];
-    var _m = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date()), focusedTime = _m[0], setFocusedTime = _m[1];
-    var _o = react_1.default.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined), meridiem = _o[0], setMeridiem = _o[1];
-    react_1.default.useEffect(function () {
+    const [selectedTime, setSelectedTime] = react_1.default.useState(date);
+    const [focusedTime, setFocusedTime] = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+    const [meridiem, setMeridiem] = react_1.default.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
+    react_1.default.useEffect(() => {
         setFocusedTime(date !== null && date !== void 0 ? date : new Date());
         setSelectedTime(date);
     }, [date]);
-    var onHourClick = function (date) {
-        var adjustedHour = use12Hours
+    const onHourClick = (date) => {
+        const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
-        var adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+        const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
-    var onMeridiemClick = function (value) {
-        var adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        var currentHours = adjustedSelectedTime.getHours();
+    const onMeridiemClick = (value) => {
+        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const currentHours = adjustedSelectedTime.getHours();
         setMeridiem(value);
         if (value === 'AM' && currentHours > 11) {
             adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
@@ -99,8 +71,8 @@ var TimePicker = function (props) {
         }
         updateCurrentTime(adjustedSelectedTime);
     };
-    var updateCurrentTime = function (time) {
-        var adjustedTime = time;
+    const updateCurrentTime = (time) => {
+        let adjustedTime = time;
         // Nullify other values, according to precision
         if (precision === 'hours') {
             adjustedTime = new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), 0, 0);
@@ -112,15 +84,15 @@ var TimePicker = function (props) {
         setSelectedTime(adjustedTime);
         onChange === null || onChange === void 0 ? void 0 : onChange(adjustedTime);
     };
-    var onHourFocus = function (date) {
-        var adjustedHour = use12Hours
+    const onHourFocus = (date) => {
+        const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
         setFocusedTime(setHours(adjustedHour, focusedTime));
     };
-    var onMeridiemFocus = function (value) {
-        var adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        var currentHours = adjustedSelectedTime.getHours();
+    const onMeridiemFocus = (value) => {
+        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const currentHours = adjustedSelectedTime.getHours();
         if (value === 'AM' && currentHours > 11) {
             setMeridiem(value);
             adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
@@ -131,58 +103,48 @@ var TimePicker = function (props) {
         }
         setFocusedTime(adjustedSelectedTime);
     };
-    var generateDataList = function (size, value, step) {
-        var data = [];
-        for (var i = 0; i < size; ++i) {
+    const generateDataList = (size, value, step) => {
+        const data = [];
+        for (let i = 0; i < size; ++i) {
             if (i % step === 0) {
                 data.push(value(i));
             }
         }
         return data;
     };
-    var hours = react_1.default.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(use12Hours ? 12 : 24, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds());
-        }, hourStep);
+    const hours = react_1.default.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
     }, [hourStep, selectedTime, use12Hours]);
-    var minutes = react_1.default.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(60, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds());
-        }, minuteStep);
+    const minutes = react_1.default.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
     }, [minuteStep, selectedTime]);
-    var seconds = react_1.default.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(60, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i);
-        }, secondStep);
+    const seconds = react_1.default.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-time-picker', className) }, rest),
-        react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: function (val) {
-                return isSameHour(val, focusedTime, use12Hours ? meridiem : undefined);
-            }, isSameSelected: function (val) {
-                return isSameHour(val, selectedTime, use12Hours ? meridiem : undefined);
-            }, onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-        precision != 'hours' && (react_1.default.createElement(TimePickerColumn, { data: minutes, isSameFocused: function (val) { return isSameMinute(val, focusedTime); }, isSameSelected: function (val) { return isSameMinute(val, selectedTime); }, onFocusChange: function (date) { return setFocusedTime(date); }, onSelectChange: function (date) { return updateCurrentTime(date); }, valueRenderer: minuteRenderer })),
-        precision == 'seconds' && (react_1.default.createElement(TimePickerColumn, { data: seconds, isSameFocused: function (val) { return isSameSecond(val, focusedTime); }, isSameSelected: function (val) { return isSameSecond(val, selectedTime); }, onFocusChange: function (date) { return setFocusedTime(date); }, onSelectChange: function (date) { return updateCurrentTime(date); }, valueRenderer: secondRenderer })),
-        use12Hours && (react_1.default.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: function (val) { return isSameMeridiem(val, focusedTime); }, isSameSelected: function (val) { return isSameMeridiem(val, selectedTime); }, onFocusChange: function (date) { return onMeridiemFocus(date); }, onSelectChange: function (value) { return onMeridiemClick(value); }, valueRenderer: meridiemRenderer, className: 'iui-period' }))));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-time-picker', className), ...rest },
+        react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
+        precision != 'hours' && (react_1.default.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
+        precision == 'seconds' && (react_1.default.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })),
+        use12Hours && (react_1.default.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
 };
 exports.TimePicker = TimePicker;
-var TimePickerColumn = function (props) {
-    var data = props.data, onFocusChange = props.onFocusChange, onSelectChange = props.onSelectChange, isSameFocused = props.isSameFocused, isSameSelected = props.isSameSelected, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, valueRenderer = props.valueRenderer, _b = props.className, className = _b === void 0 ? 'iui-time' : _b;
-    var needFocus = react_1.default.useRef(setFocus);
+const TimePickerColumn = (props) => {
+    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, className = 'iui-time', } = props;
+    const needFocus = react_1.default.useRef(setFocus);
     // Used to focus row only when changed (keyboard navigation)
     // e.g. without this on every rerender it would be focused
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (needFocus.current) {
             needFocus.current = false;
         }
     });
-    var scrollIntoView = function (ref, isSame) {
+    const scrollIntoView = (ref, isSame) => {
         isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
     };
-    var handleTimeKeyDown = function (event, maxValue, onFocus, onSelect, currentValue) {
+    const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
         switch (event.key) {
             case 'ArrowDown':
                 if (currentValue + 1 > maxValue) {
@@ -209,16 +171,16 @@ var TimePickerColumn = function (props) {
         }
     };
     return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement("ol", null, data.map(function (value, index) {
-            var isSameFocus = isSameFocused(value);
-            return (react_1.default.createElement("li", { onKeyDown: function (event) {
-                    handleTimeKeyDown(event, data.length - 1, function (index) { return onFocusChange(data[index]); }, function (index) { return onSelectChange(data[index]); }, index);
+        react_1.default.createElement("ol", null, data.map((value, index) => {
+            const isSameFocus = isSameFocused(value);
+            return (react_1.default.createElement("li", { onKeyDown: (event) => {
+                    handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
                 }, className: (0, classnames_1.default)({
                     'iui-selected': isSameSelected(value),
-                }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: function (ref) {
+                }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
                     scrollIntoView(ref, isSameFocus);
                     needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
-                }, onClick: function () {
+                }, onClick: () => {
                     onSelectChange(value);
                 } }, valueRenderer(value)));
         }))));

package/cjs/core/Toast/Toast.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,12 @@ exports.ToastPresentation = exports.Toast = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var react_transition_group_1 = require("react-transition-group");
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/toast.css");
-var Buttons_1 = require("../Buttons");
+const Buttons_1 = require("../Buttons");
 /**
  * Generic Toast Component
  * @example
@@ -44,90 +22,92 @@ var Buttons_1 = require("../Buttons");
  * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
-var Toast = function (props) {
-    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove, animateOutTo = props.animateOutTo, _c = props.placementPosition, placementPosition = _c === void 0 ? 'top' : _c;
-    (0, utils_1.useTheme)();
-    var closeTimeout = react_1.default.useRef(0);
-    var _d = react_1.default.useState(isVisible), visible = _d[0], setVisible = _d[1];
-    var _e = react_1.default.useState(0), height = _e[0], setHeight = _e[1];
-    var thisElement = react_1.default.useRef(null);
-    var _f = react_1.default.useState(0), margin = _f[0], setMargin = _f[1];
-    var marginStyle = function () {
+const Toast = (props) => {
+    const { content, category, type = 'temporary', isVisible, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, placementPosition = 'top', } = props;
+    const closeTimeout = react_1.default.useRef(0);
+    const [visible, setVisible] = react_1.default.useState(isVisible);
+    const [height, setHeight] = react_1.default.useState(0);
+    const thisElement = react_1.default.useRef(null);
+    const [margin, setMargin] = react_1.default.useState(0);
+    const marginStyle = () => {
         if (placementPosition === 'top') {
             return { marginBottom: margin };
         }
         return { marginTop: margin };
     };
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (type === 'temporary') {
             setCloseTimeout(duration);
         }
-        return function () {
+        return () => {
             clearCloseTimeout();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [duration, type]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         setVisible(isVisible);
     }, [isVisible]);
-    react_1.default.useEffect(function () {
+    react_1.default.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]);
-    var close = function () {
+    const close = () => {
         clearCloseTimeout();
         // move element up when this element is closed.
         setMargin(-height);
         setVisible(false);
     };
-    var setCloseTimeout = function (timeout) {
-        var definedWindow = (0, utils_1.getWindow)();
+    const setCloseTimeout = (timeout) => {
+        const definedWindow = (0, utils_1.getWindow)();
         if (!definedWindow) {
             return;
         }
-        closeTimeout.current = definedWindow.setTimeout(function () {
+        closeTimeout.current = definedWindow.setTimeout(() => {
             close();
         }, timeout);
     };
-    var clearCloseTimeout = function () {
+    const clearCloseTimeout = () => {
         var _a;
         (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
     };
-    var onRef = function (ref) {
+    const onRef = (ref) => {
         if (ref) {
-            var height_1 = ref.getBoundingClientRect().height;
-            setHeight(height_1);
+            const { height } = ref.getBoundingClientRect();
+            setHeight(height);
         }
     };
-    var calculateOutAnimation = function (node) {
+    const calculateOutAnimation = (node) => {
         // calculation translate x and y pixels.
-        var translateX = 0;
-        var translateY = 0;
+        let translateX = 0;
+        let translateY = 0;
         if (animateOutTo && node) {
-            var _a = node.getBoundingClientRect(), startX = _a.x, startY = _a.y; // current element
-            var _b = animateOutTo.getBoundingClientRect(), endX = _b.x, endY = _b.y; // anchor point
+            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: translateX, translateY: translateY };
+        return { translateX, translateY };
     };
-    return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: function (node) {
+    return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
             node.style.transform = 'translateY(15%)';
             node.style.transitionTimingFunction = 'ease';
-        }, onEntered: function (node) {
+        }, onEntered: (node) => {
             node.style.transform = 'translateY(0)';
-        }, onExiting: function (node) {
-            var _a = calculateOutAnimation(node), translateX = _a.translateX, translateY = _a.translateY;
+        }, onExiting: (node) => {
+            const { translateX, translateY } = calculateOutAnimation(node);
             node.style.transform = animateOutTo
-                ? "scale(0.9) translate(".concat(translateX, "px,").concat(translateY, "px)")
-                : "scale(0.9)";
+                ? `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_1.default.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: __assign({ height: height }, marginStyle()) },
+        }, onExited: onRemove }, react_1.default.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: {
+            height,
+            ...marginStyle(),
+        } },
         react_1.default.createElement("div", { ref: onRef },
             react_1.default.createElement(exports.ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
@@ -136,10 +116,10 @@ exports.Toast = Toast;
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-var ToastPresentation = function (props) {
-    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, link = props.link, hasCloseButton = props.hasCloseButton, onClose = props.onClose, className = props.className, rest = __rest(props, ["content", "category", "type", "link", "hasCloseButton", "onClose", "className"]);
-    var StatusIcon = utils_1.StatusIconMap[category];
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-".concat(category), className) }, rest),
+const ToastPresentation = (props) => {
+    const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, ...rest } = props;
+    const StatusIcon = utils_1.StatusIconMap[category];
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`iui-toast iui-${category}`, className), ...rest },
         react_1.default.createElement("div", { className: 'iui-status-area' }, react_1.default.createElement(StatusIcon, { className: 'iui-icon' })),
         react_1.default.createElement("div", { className: 'iui-message' }, content),
         link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),

package/cjs/core/Toast/ToastWrapper.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,18 +9,18 @@ exports.ToastWrapper = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 require("@itwin/itwinui-css/css/toast.css");
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var Toast_1 = __importDefault(require("./Toast"));
-exports.ToastWrapper = react_1.default.forwardRef(function (_, ref) {
-    var _a = react_1.default.useState([]), toasts = _a[0], setToasts = _a[1];
-    var _b = react_1.default.useState('top'), placement = _b[0], setPlacement = _b[1];
-    var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-    react_1.default.useImperativeHandle(ref, function () { return ({
-        setToasts: setToasts,
-        setPlacement: setPlacement,
-    }); }, []);
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
-        return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Toast_1 = __importDefault(require("./Toast"));
+exports.ToastWrapper = react_1.default.forwardRef((_, ref) => {
+    const [toasts, setToasts] = react_1.default.useState([]);
+    const [placement, setPlacement] = react_1.default.useState('top');
+    const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    react_1.default.useImperativeHandle(ref, () => ({
+        setToasts,
+        setPlacement,
+    }), []);
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
+        return (react_1.default.createElement(Toast_1.default, { key: toastProps.id, placementPosition: placementPosition, ...toastProps }));
     })));
 });