superdesk-ui-framework 4.0.47 → 4.0.49

package/react/components/TimePicker.js

@@ -55,21 +55,46 @@ exports.TimePicker = void 0;
 var React = __importStar(require("react"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
+var TimePickerPopover_1 = require("./TimePickerPopover");
+var ShowPopup_1 = require("./ShowPopup");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function TimePicker(props) {
+        var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.timeInputRef = React.createRef();
+        _this.state = {
+            popupOpen: false,
+        };
         return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
+        var _a;
         if (this.props.preview) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
-            React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            this.state.popupOpen && (React.createElement(ShowPopup_1.PopupPositioner, { getReferenceElement: function () { return _this.timeInputRef.current; }, placement: "bottom-start", onClose: function () {
+                    _this.setState({
+                        popupOpen: false,
+                    });
+                }, "data-test-id": "time-picker-popover" },
+                React.createElement(TimePickerPopover_1.TimePickerPopover, { value: this.props.value, onChange: this.props.onChange, closePopup: function () {
+                        _this.setState({
+                            popupOpen: false,
+                        });
+                    }, allowSeconds: this.props.allowSeconds, headerTemplate: this.props.headerTemplate, footerTemplate: this.props.footerTemplate }))),
+            React.createElement("input", { style: {
+                    cursor: 'pointer',
+                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : undefined, type: "time", onClick: function (e) {
+                    // don't show default popup
+                    e.preventDefault();
+                    _this.setState({
+                        popupOpen: true,
+                    });
+                }, className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 }, "data-test-id": this.props['data-test-id'] })));
     };

package/react/components/TimePickerPopover.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ITimeUnit } from '../utils/time';
+interface IProps {
+    closePopup: () => void;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
+    allowSeconds?: boolean;
+    onChange: (nextValue: string) => void;
+    value: string | null;
+}
+export declare class TimePickerPopover extends React.PureComponent<IProps> {
+    private is12HourFormat;
+    private inputRefs;
+    constructor(props: IProps);
+    handleChange(unit: ITimeUnit, value: string): void;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}
+export {};

package/react/components/TimePickerPopover.js

@@ -0,0 +1,225 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePickerPopover = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@sourcefabric/common");
+var ContentDivider_1 = require("./ContentDivider");
+var RadioButtonGroup_1 = require("./RadioButtonGroup");
+var time_1 = require("../utils/time");
+var helpers_1 = require("../helpers");
+var TimeValueHolder = /** @class */ (function (_super) {
+    __extends(TimeValueHolder, _super);
+    function TimeValueHolder(props) {
+        var _this = _super.call(this, props) || this;
+        _this.spanEl = React.createRef();
+        return _this;
+    }
+    TimeValueHolder.prototype.scrollToValue = function () {
+        var _a;
+        (_a = this.spanEl.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+    };
+    TimeValueHolder.prototype.render = function () {
+        var _a;
+        return (React.createElement("span", { ref: this.props.isActive ? this.spanEl : undefined, onClick: this.props.onClick, className: (0, common_1.classnames)('p-1 time-unit', {
+                'time-unit-highlight': (_a = this.props.isActive) !== null && _a !== void 0 ? _a : false,
+            }) }, this.props.value));
+    };
+    return TimeValueHolder;
+}(React.PureComponent));
+function parseUnitOfTime(unit, value, is12HourFormat) {
+    var _a = (value !== null && value !== void 0 ? value : '').split(':'), hour = _a[0], minutes = _a[1], seconds = _a[2];
+    var valueForUnit = (function () {
+        if (unit === 'hours') {
+            /**
+             * Hour value is always in 24-hour format, so we need to adjust it
+             * to 12-hour if needed.
+             */
+            if (is12HourFormat) {
+                return hour === '00' ? '12' : hour;
+            }
+            else {
+                return hour;
+            }
+        }
+        else if (unit === 'minutes') {
+            return minutes;
+        }
+        else if (unit === 'seconds') {
+            return seconds;
+        }
+        else {
+            (0, helpers_1.assertNever)(unit);
+        }
+    })();
+    var valueParsed = is12HourFormat && unit === 'hours' && valueForUnit !== '12'
+        ? parseInt(valueForUnit, 10) % 12
+        : parseInt(valueForUnit, 10);
+    return (0, time_1.padValue)(valueParsed);
+}
+var TimePickerPopover = /** @class */ (function (_super) {
+    __extends(TimePickerPopover, _super);
+    function TimePickerPopover(props) {
+        var _this = _super.call(this, props) || this;
+        _this.inputRefs = [React.createRef(), React.createRef(), React.createRef()];
+        _this.handleChange = _this.handleChange.bind(_this);
+        var hour = new Date().toLocaleTimeString([]);
+        _this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
+        return _this;
+    }
+    TimePickerPopover.prototype.handleChange = function (unit, value) {
+        var fallbackDate = new Date();
+        var _a = this.props.value == null
+            ? [
+                (0, time_1.padValue)(fallbackDate.getHours()),
+                (0, time_1.padValue)(fallbackDate.getMinutes()),
+                (0, time_1.padValue)(fallbackDate.getSeconds()),
+            ]
+            : this.props.value.split(':'), hour = _a[0], minutes = _a[1], seconds = _a[2];
+        var nextValue = '';
+        if (unit === 'hours') {
+            nextValue = "".concat(value, ":").concat(minutes);
+        }
+        else if (unit === 'minutes') {
+            nextValue = "".concat(hour, ":").concat(value);
+        }
+        else if (unit === 'seconds') {
+            nextValue = "".concat(hour, ":").concat(minutes, ":").concat(value);
+        }
+        else {
+            (0, helpers_1.assertNever)(unit);
+        }
+        if (this.props.allowSeconds && unit !== 'seconds') {
+            nextValue += ":".concat(seconds);
+        }
+        this.props.onChange(nextValue);
+    };
+    TimePickerPopover.prototype.componentDidMount = function () {
+        this.inputRefs.forEach(function (unitOfTime) { var _a, _b; return (_b = (_a = unitOfTime === null || unitOfTime === void 0 ? void 0 : unitOfTime.current) === null || _a === void 0 ? void 0 : _a.scrollToValue) === null || _b === void 0 ? void 0 : _b.call(_a); });
+    };
+    TimePickerPopover.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var styleForColumnOfUnit = {
+            maxHeight: 190,
+            overflowY: 'auto',
+            scrollbarWidth: 'none',
+            marginTop: 'var(--gap-1)',
+        };
+        return (React.createElement("div", { className: "sd-shadow--z2 radius-md", onBlur: this.props.closePopup },
+            React.createElement(common_1.Spacer, { v: true, gap: "0", style: {
+                    width: 200,
+                    padding: 'var(--gap-1)',
+                    backgroundColor: 'var(--color-bg-00)',
+                    borderRadius: 'var(--b-radius--small)',
+                } },
+                this.props.headerTemplate && (React.createElement(React.Fragment, null,
+                    this.props.headerTemplate,
+                    React.createElement(ContentDivider_1.ContentDivider, { border: true, type: "solid", orientation: "horizontal", margin: "none" }))),
+                React.createElement(common_1.Spacer, { h: true, gap: "4", noWrap: true, justifyContent: "center", alignItems: "start" },
+                    React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('hours', this.is12HourFormat).map(function (hour) {
+                        var isActiveHour = hour === parseUnitOfTime('hours', _this.props.value, _this.is12HourFormat);
+                        return (React.createElement(TimeValueHolder, { ref: isActiveHour ? _this.inputRefs[0] : undefined, onClick: function () {
+                                _this.handleChange('hours', hour);
+                            }, isActive: isActiveHour, value: hour }));
+                    })),
+                    React.createElement(ContentDivider_1.ContentDivider, { align: "center", border: true, type: "solid", orientation: "vertical", margin: "none" }),
+                    React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('minutes', this.is12HourFormat).map(function (minute) {
+                        var isActiveMinute = minute === parseUnitOfTime('minutes', _this.props.value, _this.is12HourFormat);
+                        return (React.createElement(TimeValueHolder, { ref: isActiveMinute ? _this.inputRefs[1] : undefined, isActive: isActiveMinute, value: minute, onClick: function () {
+                                _this.handleChange('minutes', minute);
+                            } }));
+                    })),
+                    this.props.allowSeconds && (React.createElement(React.Fragment, null,
+                        React.createElement(ContentDivider_1.ContentDivider, { align: "center", border: true, type: "solid", orientation: "vertical", margin: "none" }),
+                        React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('seconds', this.is12HourFormat).map(function (second) {
+                            var isActiveMinute = second ===
+                                parseUnitOfTime('seconds', _this.props.value, _this.is12HourFormat);
+                            return (React.createElement(TimeValueHolder, { ref: isActiveMinute ? _this.inputRefs[2] : undefined, onClick: function () {
+                                    _this.handleChange('seconds', second);
+                                }, isActive: isActiveMinute, value: second }));
+                        })))),
+                    this.is12HourFormat && (React.createElement("div", { style: {
+                            marginTop: 'var(--gap-1)',
+                        } },
+                        React.createElement(RadioButtonGroup_1.RadioButtonGroup, { onChange: function (nextValue) {
+                                var _a;
+                                var _b = ((_a = _this.props.value) !== null && _a !== void 0 ? _a : '').split(':'), hour = _b[0], minutes = _b[1], seconds = _b[2];
+                                if (nextValue === 'PM') {
+                                    var newValue = "".concat((0, time_1.padValue)(parseInt(hour, 10) + 12), ":").concat(minutes);
+                                    if (_this.props.allowSeconds) {
+                                        newValue += ":".concat(seconds);
+                                    }
+                                    _this.props.onChange(newValue);
+                                }
+                                else {
+                                    var newValue = "".concat((0, time_1.padValue)(parseInt(hour, 10) - 12), ":").concat(minutes);
+                                    if (_this.props.allowSeconds) {
+                                        newValue += ":".concat(seconds);
+                                    }
+                                    _this.props.onChange(newValue);
+                                }
+                            }, options: [
+                                {
+                                    label: 'AM',
+                                    value: 'AM',
+                                },
+                                {
+                                    label: 'PM',
+                                    value: 'PM',
+                                },
+                            ], value: parseInt(((_a = this.props.value) !== null && _a !== void 0 ? _a : '').split(':')[0], 10) < 12 ? 'AM' : 'PM' })))),
+                this.props.footerTemplate && (React.createElement(React.Fragment, null,
+                    React.createElement(ContentDivider_1.ContentDivider, { border: true, type: "solid", orientation: "horizontal", margin: "none" }),
+                    this.props.footerTemplate)))));
+    };
+    return TimePickerPopover;
+}(React.PureComponent));
+exports.TimePickerPopover = TimePickerPopover;

package/react/components/TimePickerV2.js

@@ -142,13 +142,13 @@ var TimePickerV2 = /** @class */ (function (_super) {
         }
     };
     TimePickerV2.prototype.padValue = function (value) {
-        return (0, lodash_1.padStart)((value).toString(), 2, '0');
+        return (0, lodash_1.padStart)(value.toString(), 2, '0');
     };
     TimePickerV2.prototype.updatedTimeUnit = function () {
         var timeUnitValuesArray = this.props.value.split(':');
         /**
-        * updating the initial value from props
-        */
+         * updating the initial value from props
+         */
         if (this.is12HourFormat) {
             if (parseInt(timeUnitValuesArray[0], 10) > 12) {
                 timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
@@ -160,27 +160,27 @@ var TimePickerV2 = /** @class */ (function (_super) {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
-            React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
-                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {
+            React.createElement("div", { className: "sd__input__time-picker-v2", "data-test-id": this.props['data-test-id'] },
+                React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[0], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(0, target.value);
                         } }, this.getOptionsForTimeUnit('hours').map(function (hour) { return (React.createElement("option", { value: hour, label: hour, key: hour })); })),
-                    React.createElement("span", { className: 'time-picker-v2-suffix' }, ":")),
-                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[1], onChange: function (_a) {
+                    React.createElement("span", { className: "time-picker-v2-suffix" }, ":")),
+                React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[1], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(1, target.value);
                         } }, this.getOptionsForTimeUnit('minutes').map(function (minute) { return (React.createElement("option", { value: minute, label: minute, key: minute })); })),
-                    this.props.allowSeconds && (React.createElement("span", { className: 'time-picker-v2-suffix' }, ":"))),
-                this.props.allowSeconds && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[2], onChange: function (_a) {
+                    this.props.allowSeconds && React.createElement("span", { className: "time-picker-v2-suffix" }, ":")),
+                this.props.allowSeconds && (React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[2], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(2, target.value);
                         } }, this.getOptionsForTimeUnit('seconds').map(function (second) { return (React.createElement("option", { value: second, label: second, key: second })); })))),
-                this.is12HourFormat && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("span", { className: 'time-picker-v2-suffix' }),
-                    React.createElement("select", { className: 'sd-input__select', value: (parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM', onChange: function (_a) {
+                this.is12HourFormat && (React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("span", { className: "time-picker-v2-suffix" }),
+                    React.createElement("select", { className: "sd-input__select", value: parseInt(this.props.value.split(':')[0], 10) >= 12 ? 'PM' : 'AM', onChange: function (_a) {
                             var target = _a.target;
                             var splitValue = _this.props.value.split(':');
                             if (target.value === 'PM') {
@@ -191,8 +191,8 @@ var TimePickerV2 = /** @class */ (function (_super) {
                             }
                             _this.props.onChange(splitValue.join(':'));
                         } },
-                        React.createElement("option", { value: 'AM', label: 'AM' }),
-                        React.createElement("option", { value: 'PM', label: 'PM' })))))));
+                        React.createElement("option", { value: "AM", label: "AM" }),
+                        React.createElement("option", { value: "PM", label: "PM" })))))));
     };
     return TimePickerV2;
 }(React.PureComponent));

package/react/components/Toast.js

@@ -40,7 +40,7 @@ exports.toasted = void 0;
 var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var ToastWrapper_1 = __importDefault(require("./ToastWrapper"));
-var TOAST_ID = "react-toast";
+var TOAST_ID = 'react-toast';
 var Toasted = /** @class */ (function () {
     function Toasted() {
         this.componentRef = null;
@@ -56,9 +56,9 @@ var Toasted = /** @class */ (function () {
             element = existingElement;
         }
         else {
-            var el = document.createElement("div");
+            var el = document.createElement('div');
             el.id = TOAST_ID;
-            el.className = "sd-toast__container sd-toast__container--top";
+            el.className = 'sd-toast__container sd-toast__container--top';
             document.body.appendChild(el);
             element = el;
         }

package/react/components/ToastMessage.d.ts

@@ -14,5 +14,5 @@ export interface IMessageOptions {
 interface IProps extends IMessageOptions {
     closeElement(id: string, position: Position): void;
 }
-export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement, }: IProps) => JSX.Element;
+export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement }: IProps) => JSX.Element;
 export {};

package/react/components/ToastMessage.js

@@ -47,7 +47,7 @@ var ToastMessage = function (_a) {
     var _d = React.useState(false), enter = _d[0], setEnter = _d[1];
     var timer;
     React.useEffect(function () { return setShow(true); }, []);
-    if (typeof duration === "number") {
+    if (typeof duration === 'number') {
         React.useEffect(function () {
             timer = window.setTimeout(function () {
                 close(id, position);

package/react/components/ToastText.js

@@ -39,18 +39,15 @@ var ToastText = function (_a) {
     var id = _a.id, title = _a.title, icon = _a.icon, onClose = _a.onClose;
     var ref = React.useRef(null);
     return (React.createElement(React.Fragment, null,
-        icon ?
-            React.createElement("div", { className: 'sd-toast__icon' },
-                React.createElement(Icon_1.Icon, { name: icon })) : null,
-        typeof title === 'string' ?
-            (React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
-                React.createElement("div", { className: 'sd-toast__message' }, title))) :
-            React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title),
+        icon ? (React.createElement("div", { className: "sd-toast__icon" },
+            React.createElement(Icon_1.Icon, { name: icon }))) : null,
+        typeof title === 'string' ? (React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
+            React.createElement("div", { className: "sd-toast__message" }, title))) : (React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title)),
         onClose && React.createElement(Close, { onClose: onClose })));
 };
 var Close = function (_a) {
     var onClose = _a.onClose;
     return (React.createElement("button", { className: "icn-btn sd-toast__actions", type: "button", "aria-label": "Close", onClick: onClose },
-        React.createElement(Icon_1.Icon, { name: 'close-small' })));
+        React.createElement(Icon_1.Icon, { name: "close-small" })));
 };
 exports.default = ToastText;

package/react/components/ToastWrapper.js

@@ -89,8 +89,7 @@ var ToastWrapper = /** @class */ (function (_super) {
             var isTop = position === 'top';
             _this.setState(function (prev) {
                 var _a;
-                return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop
-                    ? __spreadArray([toast], prev[position], true) : __spreadArray(__spreadArray([], prev[position], true), [toast], false), _a));
+                return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop ? __spreadArray([toast], prev[position], true) : __spreadArray(__spreadArray([], prev[position], true), [toast], false), _a));
             });
             return { id: toast.id, position: toast.position };
         };
@@ -122,9 +121,8 @@ var ToastWrapper = /** @class */ (function (_super) {
         return Object.keys(this.state).map(function (position) {
             var pos = position;
             var toasts = _this.state[pos];
-            return (React.createElement("div", { key: position, className: "sd-toast__container sd-toast__container--" + pos }, (pos === 'top' ?
-                toasts : __spreadArray([], toasts, true).reverse()).map(function (toast) {
-                return React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size });
+            return (React.createElement("div", { key: position, className: 'sd-toast__container sd-toast__container--' + pos }, (pos === 'top' ? toasts : __spreadArray([], toasts, true).reverse()).map(function (toast) {
+                return (React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size }));
             })));
         });
     };

package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPropsCustomHeader } from "../ToggleBox/index";
+import { IPropsCustomHeader } from '../ToggleBox/index';
 interface IState {
     isOpen: boolean;
     wasOpened: boolean;

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -78,7 +78,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
                             _this.handleAnimationEnd();
                             resolve(_this.state.isOpen);
                         };
-                        _this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
+                        _this.contentRef.current.addEventListener('animationend', handleAnimation, { once: true });
                     }
                     else {
                         reject();
@@ -116,12 +116,12 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
             'new-collapse-box--open': this.state.isOpen,
         });
         var isOpen = this.state.isOpen;
-        return (React.createElement("div", { className: classes, "aria-expanded": isOpen, "data-test-id": 'toggle-box' },
-            React.createElement("div", { className: 'new-collapse-box__header' },
-                React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
-                React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
-                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
-            React.createElement("div", { className: 'new-collapse-box__content' },
+        return (React.createElement("div", { className: classes, "aria-expanded": isOpen, "data-test-id": "toggle-box" },
+            React.createElement("div", { className: "new-collapse-box__header" },
+                React.createElement("div", { className: "new-collapse-box__header-inner" }, this.props.header),
+                React.createElement("button", { className: "new-collapse-box__divider", onClick: this.toggle, "aria-controls": this.htmlId },
+                    React.createElement("span", { className: "label label--translucent new-collapse-box__divider-label" }, this.props.getToggleButtonLabel(isOpen)))),
+            React.createElement("div", { className: "new-collapse-box__content" },
                 React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
                         'toggle-box__content--animation': this.state.isAnimating,
                     }) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true

package/react/components/ToggleBox/SimpleToggleBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPropsSimple } from "../ToggleBox/index";
+import { IPropsSimple } from '../ToggleBox/index';
 interface IState {
     isOpen: boolean;
     isAnimating: boolean;

package/react/components/ToggleBox/SimpleToggleBox.js

@@ -68,13 +68,13 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.contentRef = React.createRef();
         _this.handleKeyDown = function (event) {
-            if (event.key === "ArrowRight" && !_this.state.isOpen) {
+            if (event.key === 'ArrowRight' && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
             }
-            else if (event.key === "ArrowLeft" && _this.state.isOpen) {
+            else if (event.key === 'ArrowLeft' && _this.state.isOpen) {
                 _this.setState({ isOpen: false });
             }
-            else if (event.key === "Enter") {
+            else if (event.key === 'Enter') {
                 _this.toggle();
             }
         };
@@ -122,8 +122,8 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 'toggle-box--circle': this.props.circledChevron
             },
             _a["toggle-box--margin-".concat(this.props.margin)] = this.props.margin,
-            _a['hidden'] = !this.state.isOpen,
-            _a['open'] = this.state.isOpen,
+            _a.hidden = !this.state.isOpen,
+            _a.open = this.state.isOpen,
             _a), this.props.className);
         var _b = this.props, title = _b.title, children = _b.children, badge = _b.badge;
         var isOpen = this.state.isOpen;

package/react/components/ToggleBox/index.js

@@ -69,11 +69,11 @@ var ToggleBox = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ToggleBox.prototype.render = function () {
-        if (this.props.variant === "simple") {
-            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
+        if (this.props.variant === 'simple') {
+            return React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props));
         }
         else {
-            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
+            return React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props));
         }
     };
     return ToggleBox;

package/react/components/TreeMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IState<T> {
     options: Array<ITreeMenuNode<T>>;
     openDropdown: boolean;