superdesk-ui-framework 4.0.46 → 4.0.48

package/react/components/DateTimePicker.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -60,53 +71,97 @@ var TimePicker_1 = require("./TimePicker");
 var IconButton_1 = require("./IconButton");
 var Form_1 = require("./Form");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var date_fns_1 = require("date-fns");
+var helpers_1 = require("../helpers");
 var DateTimePicker = /** @class */ (function (_super) {
     __extends(DateTimePicker, _super);
     function DateTimePicker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleTimeChange = function (time) {
-            var _a = time
-                .split(":")
-                .map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
-            var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
-            origDate.setHours(hours, minutes);
-            _this.props.onChange(origDate);
+            if (_this.props.valueType === 'date') {
+                var _a = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1];
+                var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
+                origDate.setHours(hours, minutes);
+                _this.props.onChange(origDate);
+            }
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange(__assign(__assign({}, _this.props.value), { time: time }));
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
         };
         _this.handleDateChange = function (date) {
             var _a;
-            if (date == null) {
+            if (_this.props.valueType === 'date') {
+                if (date == null) {
+                    _this.props.onChange(null);
+                    return;
+                }
+                var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
+                var selectedDate = new Date(date);
+                selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+                _this.props.onChange(selectedDate);
+            }
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange(__assign(__assign({}, _this.props.value), { date: date ? (0, date_fns_1.format)(date, 'yyyy-MM-dd') : undefined }));
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
+        };
+        _this.handleClear = function () {
+            if (_this.props.valueType === 'date') {
                 _this.props.onChange(null);
-                return;
             }
-            var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
-            var selectedDate = new Date(date);
-            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
-            _this.props.onChange(selectedDate);
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange({ date: undefined, time: undefined });
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
         };
         return _this;
     }
     DateTimePicker.prototype.prepareFormat = function (unitOfTime) {
-        return unitOfTime.toString().padStart(2, "0");
+        return unitOfTime.toString().padStart(2, '0');
+    };
+    DateTimePicker.prototype.getTimeValue = function () {
+        var _a;
+        if (this.props.valueType === 'date') {
+            return this.props.value != null
+                ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
+                : '';
+        }
+        else if (this.props.valueType === 'object') {
+            return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : '';
+        }
+        else {
+            (0, helpers_1.assertNever)(this.props);
+        }
+    };
+    DateTimePicker.prototype.getDateValue = function () {
+        if (this.props.valueType === 'date') {
+            return this.props.value;
+        }
+        else if (this.props.valueType === 'object') {
+            return this.props.value.date ? new Date(this.props.value.date) : null;
+        }
+        else {
+            (0, helpers_1.assertNever)(this.props);
+        }
     };
     DateTimePicker.prototype.render = function () {
-        var _this = this;
-        var convertedTimeValue = this.props.value != null
-            ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-            : "";
-        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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props["data-test-id"], ref: this.props.ref },
+        var timeValue = this.getTimeValue();
+        var dateValue = this.getDateValue();
+        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, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props['data-test-id'], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
-                            _this.handleDateChange(val);
-                        }, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
-                            _this.handleTimeChange(val);
-                        }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
-                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: function () {
-                        _this.props.onChange(null);
-                    }, ariaValue: "Clear" })))));
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
+                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;
 }(React.PureComponent));

package/react/components/Divider.js

@@ -67,7 +67,7 @@ var Divider = /** @class */ (function (_super) {
             },
             _a["button-group__divider--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
             _a));
-        return (React.createElement("div", { className: classes }));
+        return React.createElement("div", { className: classes });
     };
     return Divider;
 }(React.PureComponent));

package/react/components/DonutChart.js

@@ -57,7 +57,7 @@ var DonutChart = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DonutChart.prototype.render = function () {
-        return React.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options });
+        return (React.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options }));
     };
     return DonutChart;
 }(React.Component));

package/react/components/DragHandle.js

@@ -69,7 +69,7 @@ var DragHandle = /** @class */ (function (_super) {
             _a['drag-handle-wrapper--blank'] = this.props.blank,
             _a), this.props.className);
         var calcSize = function (numberOfDots) {
-            return Number(numberOfDots) * dotSize - (dotSize / 2);
+            return Number(numberOfDots) * dotSize - dotSize / 2;
         };
         return (React.createElement("div", { className: classes },
             React.createElement(DragHandleDots_1.DragHandleDots, { style: { width: calcSize((_b = this.props.dotsInRow) !== null && _b !== void 0 ? _b : '2'), height: calcSize((_c = this.props.dotRows) !== null && _c !== void 0 ? _c : '4') }, color: this.props.dotColor })));

package/react/components/DragHandleDots.js

@@ -64,7 +64,7 @@ var DragHandleDots = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('drag-handle-dots', (_a = {},
             _a["drag-handle-dots--".concat(this.props.color)] = this.props.color,
             _a));
-        return (React.createElement("div", { style: this.props.style, className: classes }));
+        return React.createElement("div", { style: this.props.style, className: classes });
     };
     return DragHandleDots;
 }(React.PureComponent));

package/react/components/DropZone.js

@@ -95,14 +95,12 @@ var DropZone = /** @class */ (function (_super) {
             _a["sd-dropzone__drop-target--".concat(this.props.type)] = this.props.type,
             _a), this.props.className);
         return (React.createElement("div", { className: classes, onDragLeave: function (event) { return _this.dragLeave(event); }, onDragEnter: function (event) { return _this.dragEnter(event); }, onDragOver: function (event) { return _this.dragOver(event); }, onDrop: function (event) { return _this.drop(event); }, onDragStart: function () { return false; }, onDragEnd: function () { return false; } },
-            React.createElement("div", { className: 'sd-dropzone__target-border' }),
-            React.createElement("input", { type: "file", className: 'sd-dropzone__input' }),
-            this.props.icon ?
-                React.createElement("figure", { className: 'sd-dropzone__icon', "aria-hidden": 'true' },
-                    React.createElement(Icon_1.Icon, { name: 'upload-alt', size: 'big' })) : null,
-            this.props.heading ?
-                React.createElement("h4", { className: 'sd-dropzone__heading' }, this.props.heading) : null,
-            React.createElement("p", { className: 'sd-dropzone__description' }, this.props.text)));
+            React.createElement("div", { className: "sd-dropzone__target-border" }),
+            React.createElement("input", { type: "file", className: "sd-dropzone__input" }),
+            this.props.icon ? (React.createElement("figure", { className: "sd-dropzone__icon", "aria-hidden": "true" },
+                React.createElement(Icon_1.Icon, { name: "upload-alt", size: "big" }))) : null,
+            this.props.heading ? React.createElement("h4", { className: "sd-dropzone__heading" }, this.props.heading) : null,
+            React.createElement("p", { className: "sd-dropzone__description" }, this.props.text)));
     };
     return DropZone;
 }(React.PureComponent));

package/react/components/Dropdown.d.ts

@@ -26,5 +26,5 @@ interface IMenu {
     onChange?(event?: any): void;
     maxHeight?: number;
 }
-export declare const Dropdown: ({ items, header, footer, children, align, onChange, maxHeight, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, align, onChange, maxHeight }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -50,7 +50,7 @@ var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var zIndex_1 = require("./../zIndex");
-var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+var DROPDOWN_ID_CONTAINER = 'sd-dropdown-constainer';
 var Dropdown = function (_a) {
     var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, align = _a.align, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(-1), zIndex = _b[0], setZIndex = _b[1];
@@ -75,7 +75,7 @@ var Dropdown = function (_a) {
     React.useEffect(function () {
         var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
-            var el = document.createElement("div");
+            var el = document.createElement('div');
             el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
@@ -94,23 +94,23 @@ var Dropdown = function (_a) {
     }, [open]);
     function createAppendMenu() {
         if (header && footer) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
+                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
         }
         else if (header) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements)));
         }
         else if (footer) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
+                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
+            return (React.createElement("ul", { className: "dropdown__menu ", id: menuID, role: "menu", ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -180,36 +180,32 @@ var Dropdown = function (_a) {
                 groupItems_1));
         }
         else if (item === 'divider') {
-            return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
+            return React.createElement("li", { className: "dropdown__menu-divider", key: index });
         }
         else {
             return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
-    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object'
-        ? (React.isValidElement(children)
-            ? React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
-                var attrs = {
-                    className: children.props.className
-                        ? (children.props.className + ' dropdown__toggle dropdown-toggle')
-                        : 'dropdown__toggle dropdown-toggle',
-                    'aria-haspopup': "menu",
-                    'aria-expanded': open,
-                    onClick: toggleDisplay,
-                    ref: buttonRef,
-                };
-                return React.cloneElement(children, attrs);
-            })())
-            : null)
-        : React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
-            children,
-            React.createElement("span", { className: "dropdown__caret" }))));
+    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object' ? (React.isValidElement(children) ? (React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
+        var attrs = {
+            className: children.props.className
+                ? children.props.className + ' dropdown__toggle dropdown-toggle'
+                : 'dropdown__toggle dropdown-toggle',
+            'aria-haspopup': 'menu',
+            'aria-expanded': open,
+            onClick: toggleDisplay,
+            ref: buttonRef,
+        };
+        return React.cloneElement(children, attrs);
+    })())) : null) : (React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: " dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+        children,
+        React.createElement("span", { className: "dropdown__caret" })))));
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
     var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
-    return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+    return (React.createElement("li", { role: "none", className: active ? 'dropdown__menu-item--active' : '' },
+        React.createElement("button", { tabIndex: 0, role: "menuitem", onClick: function () {
                 setTimeout(function () {
                     onSelect();
                 });
@@ -217,7 +213,7 @@ var DropdownItem = function (_a) {
                     onChange();
                 }
             } },
-            React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
+            React.createElement("i", { className: icon ? 'icon-' + icon : '' }),
             label)));
 };
 var DropdownItemWithSubmenu = function (_a) {
@@ -244,8 +240,8 @@ var DropdownItemWithSubmenu = function (_a) {
         }
     }, [open]);
     return (React.createElement("li", { key: index, ref: refButtonSubMenu },
-        React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
-            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
+        React.createElement("div", { className: "dropdown", onMouseLeave: function () { return setOpen(false); } },
+            React.createElement("button", { className: "dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
                     if (item.onSelect) {
                         setTimeout(function () {
                             item.onSelect();
@@ -257,5 +253,5 @@ var DropdownItemWithSubmenu = function (_a) {
                 }, onMouseOver: function () { return setOpen(true); } },
                 item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
                 item['label']),
-            React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
+            React.createElement("ul", { role: "menu", ref: refSubMenu, style: { display: 'none' }, className: "dropdown__menu" }, subMenuItems))));
 };

package/react/components/DropdownFirst.d.ts

@@ -25,18 +25,18 @@ interface IPropsMenu {
     children: React.ReactNode;
 }
 export declare const DropdownFirst: {
-    ({ name, align, side, level, icon, headerFooter, navDropdown, children, }: IProps): JSX.Element;
-    Item: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+    ({ name, align, side, level, icon, headerFooter, navDropdown, children }: IProps): JSX.Element;
+    Item: ({ text, icon, noLink, onSelect }: IPropsItem) => JSX.Element;
     Divider: ({}: {}) => JSX.Element;
-    Label: ({ text, }: IPropsLabel) => JSX.Element;
-    Header: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Body: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Footer: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Label: ({ text }: IPropsLabel) => JSX.Element;
+    Header: ({ title, children }: IPropsMenu) => JSX.Element;
+    Body: ({ title, children }: IPropsMenu) => JSX.Element;
+    Footer: ({ title, children }: IPropsMenu) => JSX.Element;
 };
-export declare const DropdownItem: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+export declare const DropdownItem: ({ text, icon, noLink, onSelect }: IPropsItem) => JSX.Element;
 export declare const DropdownDivider: ({}: {}) => JSX.Element;
-export declare const DropdownLabel: ({ text, }: IPropsLabel) => JSX.Element;
-export declare const DropdownHeader: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownBody: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownFooter: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownLabel: ({ text }: IPropsLabel) => JSX.Element;
+export declare const DropdownHeader: ({ title, children }: IPropsMenu) => JSX.Element;
+export declare const DropdownBody: ({ title, children }: IPropsMenu) => JSX.Element;
+export declare const DropdownFooter: ({ title, children }: IPropsMenu) => JSX.Element;
 export {};

package/react/components/DropdownFirst.js

@@ -50,7 +50,7 @@ var DropdownFirst = function (_a) {
         var number = getDimensions(ref.current);
         var second = screen.height;
         var heightEl = heightElement(ref.current);
-        if ((second - number.bottom) < (heightEl + 100) && (number.top > heightEl)) {
+        if (second - number.bottom < heightEl + 100 && number.top > heightEl) {
             setHeight(true);
         }
         else {
@@ -67,10 +67,10 @@ var DropdownFirst = function (_a) {
     React.useLayoutEffect(function () {
         var element = document.getElementsByClassName('dropdown')[0];
         var parentElement = getScrollParent(element);
-        parentElement.parentNode.addEventListener("scroll", debounce(50));
+        parentElement.parentNode.addEventListener('scroll', debounce(50));
         calculate();
         return function () {
-            parentElement.removeEventListener("scroll", debounce(50));
+            parentElement.removeEventListener('scroll', debounce(50));
             clearTimeout(inDebounce);
         };
     }, [open]);
@@ -119,12 +119,10 @@ var DropdownFirst = function (_a) {
         return (React.createElement("div", { className: classes },
             React.createElement("button", { className: navDropdown
                     ? 'dropdown__toggle navbtn dropdown-toggle'
-                    : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
-                (React.createElement("i", { className: "icon-" + icon })) :
-                (React.createElement(React.Fragment, null,
-                    name,
-                    React.createElement("span", { className: "dropdown__caret" })))),
-            React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', ref: ref }, children)));
+                    : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ? (React.createElement("i", { className: 'icon-' + icon })) : (React.createElement(React.Fragment, null,
+                name,
+                React.createElement("span", { className: "dropdown__caret" })))),
+            React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", ref: ref }, children)));
     }
     else {
         if (level) {
@@ -133,21 +131,19 @@ var DropdownFirst = function (_a) {
                 _c));
             return (React.createElement("li", null,
                 React.createElement("div", { className: classes },
-                    React.createElement("button", { className: 'dropdown__toggle dropdown-toggle' },
-                        icon && level ? React.createElement("i", { className: icon ? ('icon-' + icon) : '' }) : null,
+                    React.createElement("button", { className: "dropdown__toggle dropdown-toggle" },
+                        icon && level ? React.createElement("i", { className: icon ? 'icon-' + icon : '' }) : null,
                         name),
-                    React.createElement("ul", { className: classesMenu, ref: ref, role: 'menu' }, children))));
+                    React.createElement("ul", { className: classesMenu, ref: ref, role: "menu" }, children))));
         }
         else {
             return (React.createElement("div", { className: classes },
                 React.createElement("button", { className: navDropdown
                         ? 'dropdown__toggle navbtn dropdown-toggle'
-                        : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
-                    (React.createElement("i", { className: "icon-" + icon })) :
-                    (React.createElement(React.Fragment, null,
-                        name,
-                        React.createElement("span", { className: "dropdown__caret" })))),
-                React.createElement("ul", { className: 'dropdown__menu', ref: ref }, children)));
+                        : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ? (React.createElement("i", { className: 'icon-' + icon })) : (React.createElement(React.Fragment, null,
+                    name,
+                    React.createElement("span", { className: "dropdown__caret" })))),
+                React.createElement("ul", { className: "dropdown__menu", ref: ref }, children)));
         }
     }
 };
@@ -155,18 +151,18 @@ exports.DropdownFirst = DropdownFirst;
 var DropdownItem = function (_a) {
     var text = _a.text, icon = _a.icon, noLink = _a.noLink, onSelect = _a.onSelect;
     if (noLink) {
-        return React.createElement("li", { className: 'dropdown__menu-item--no-link' }, text);
+        return React.createElement("li", { className: "dropdown__menu-item--no-link" }, text);
     }
     else {
         return (React.createElement("li", null,
             React.createElement("button", { onSelect: onSelect },
-                React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
+                React.createElement("i", { className: icon ? 'icon-' + icon : '' }),
                 text)));
     }
 };
 exports.DropdownItem = DropdownItem;
 var DropdownDivider = function (_a) {
-    return (React.createElement("li", { className: "dropdown__menu-divider" }));
+    return React.createElement("li", { className: "dropdown__menu-divider" });
 };
 exports.DropdownDivider = DropdownDivider;
 var DropdownLabel = function (_a) {
@@ -177,21 +173,21 @@ var DropdownLabel = function (_a) {
 exports.DropdownLabel = DropdownLabel;
 var DropdownHeader = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-header' },
+    return (React.createElement("ul", { className: "dropdown__menu-header" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
 exports.DropdownHeader = DropdownHeader;
 var DropdownBody = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-body' },
+    return (React.createElement("ul", { className: "dropdown__menu-body" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
 exports.DropdownBody = DropdownBody;
 var DropdownFooter = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list' },
+    return (React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };