superdesk-ui-framework 4.0.46 → 4.0.48

package/package.json

@@ -1,119 +1,121 @@
 {
-  "name": "superdesk-ui-framework",
-  "version": "4.0.46",
-  "license": "AGPL-3.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/superdesk/superdesk-ui-framework.git"
-  },
-  "main": "dist/superdesk-ui.bundle.js",
-  "types": "react/index.d.ts",
-  "contributors": [
-    "Nemanja Pavlovic",
-    "Vladimir Stefanovic",
-    "Darko Tomic",
-    "Aleksandar Jelicic",
-    "Tomas Kikutis",
-    "Dragana Zivkovic"
-  ],
-  "scripts": {
-    "start": "webpack-dev-server --config tasks/webpack.dev.js",
-    "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
-    "build": "tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc",
-    "build-ui": "webpack && tsc && npm run lint",
-    "playground-lint": "tsc -p examples/pages/playgrounds/react-playgrounds --noEmit",
-    "lint": "tsc -p tsconfig.json --noEmit && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint",
-    "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
-    "prepublishOnly": "npm run build",
-    "unit-test": "mocha",
-    "debug-unit-tests": "mocha --inspect-brk"
-  },
-  "devDependencies": {
-    "@types/assert": "^1.5.6",
-    "@types/chart.js": "^2.9.24",
-    "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.12",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/lodash": "^4.14.161",
-    "@types/mocha": "^9.1.1",
-    "@types/react": "16.8.23",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "16.8.0",
-    "@types/react-router-dom": "^5.1.2",
-    "@types/react-scrollspy": "^3.3.5",
-    "@typescript-eslint/parser": "^5.58.0",
-    "angular": "^1.7.9",
-    "angular-animate": "^1.7.9",
-    "angular-route": "^1.7.9",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "classnames": "^2.2.5",
-    "clean-webpack-plugin": "^1.0.0",
-    "code-prettify": "^0.1.0",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.1.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
-    "eslint": "^4.6.1",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-angular": "^3.1.1",
-    "eslint-plugin-react": "^7.3.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^0.11.2",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "jquery": "^3.1.1",
-    "jquery-ui": "^1.12.1",
-    "jsdom": "20.0.3",
-    "jsdom-global": "3.0.2",
-    "lodash": "4.17.21",
-    "mocha": "^8.4.0",
-    "moment": "^2.29.3",
-    "node-sass": "6.0",
-    "prismjs": "^1.28.0",
-    "prop-types": "^15.6.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^5.1.2",
-    "redux": "^3.7.2",
-    "redux-form": "^7.0.4",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
-    "superdesk-code-style": "^1.1.2",
-    "ts-loader": "^6.0.2",
-    "ts-node": "^10.9.1",
-    "tslint": "^5.18.0",
-    "typescript": "^5.8.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^3.5.5",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "2.11.1",
-    "webpack-merge": "^4.2.1"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.4.0",
-    "@sourcefabric/common": "0.0.63",
-    "@superdesk/primereact": "^5.0.2-13",
-    "@superdesk/react-resizable-panels": "0.0.39",
-    "chart.js": "^2.9.3",
-    "date-fns": "2.7.0",
-    "popper-max-size-modifier": "^0.2.0",
-    "popper.js": "1.14.4",
-    "primeicons": "2.0.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-id-generator": "^3.0.0",
-    "react-scrollspy": "^3.4.3",
-    "tippy.js": "^6.3.7",
-    "weekstart": "^2.0.0"
-  },
-  "peerDependencies": {
-    "moment": "*"
-  },
-  "volta": {
-    "node": "14.21.3"
-  }
+    "name": "superdesk-ui-framework",
+    "version": "4.0.48",
+    "license": "AGPL-3.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/superdesk/superdesk-ui-framework.git"
+    },
+    "main": "dist/superdesk-ui.bundle.js",
+    "types": "react/index.d.ts",
+    "contributors": [
+        "Nemanja Pavlovic",
+        "Vladimir Stefanovic",
+        "Darko Tomic",
+        "Aleksandar Jelicic",
+        "Tomas Kikutis",
+        "Dragana Zivkovic"
+    ],
+    "scripts": {
+        "start": "webpack-dev-server --config tasks/webpack.dev.js",
+        "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
+        "build": "tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc",
+        "build-ui": "webpack && tsc && npm run lint",
+        "playground-lint": "tsc -p examples/pages/playgrounds/react-playgrounds --noEmit",
+        "format-code": "npx prettier . --write",
+        "lint": "tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint",
+        "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
+        "prepublishOnly": "npm run build",
+        "unit-test": "mocha",
+        "debug-unit-tests": "mocha --inspect-brk"
+    },
+    "devDependencies": {
+        "@types/assert": "^1.5.6",
+        "@types/chart.js": "^2.9.24",
+        "@types/classnames": "^2.2.9",
+        "@types/enzyme": "^3.10.12",
+        "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/lodash": "^4.14.161",
+        "@types/mocha": "^9.1.1",
+        "@types/react": "16.8.23",
+        "@types/react-beautiful-dnd": "^13.1.2",
+        "@types/react-dom": "16.8.0",
+        "@types/react-router-dom": "^5.1.2",
+        "@types/react-scrollspy": "^3.3.5",
+        "@typescript-eslint/parser": "^5.58.0",
+        "angular": "^1.7.9",
+        "angular-animate": "^1.7.9",
+        "angular-route": "^1.7.9",
+        "babel-core": "^6.26.0",
+        "babel-loader": "^7.1.2",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
+        "classnames": "^2.2.5",
+        "clean-webpack-plugin": "^1.0.0",
+        "code-prettify": "^0.1.0",
+        "copy-webpack-plugin": "^4.6.0",
+        "css-loader": "^2.1.1",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.7",
+        "eslint": "^4.6.1",
+        "eslint-loader": "^1.9.0",
+        "eslint-plugin-angular": "^3.1.1",
+        "eslint-plugin-react": "^7.3.0",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "file-loader": "^0.11.2",
+        "html-loader": "^0.5.1",
+        "html-webpack-plugin": "^2.30.1",
+        "jquery": "^3.1.1",
+        "jquery-ui": "^1.12.1",
+        "jsdom": "20.0.3",
+        "jsdom-global": "3.0.2",
+        "lodash": "4.17.21",
+        "mocha": "^8.4.0",
+        "moment": "^2.29.3",
+        "node-sass": "6.0",
+        "prettier": "3.5.3",
+        "prismjs": "^1.28.0",
+        "prop-types": "^15.6.0",
+        "react": "16.8.6",
+        "react-dom": "16.8.6",
+        "react-redux": "^5.0.6",
+        "react-router-dom": "^5.1.2",
+        "redux": "^3.7.2",
+        "redux-form": "^7.0.4",
+        "sass-loader": "^6.0.6",
+        "style-loader": "^0.18.2",
+        "superdesk-code-style": "^1.1.2",
+        "ts-loader": "^6.0.2",
+        "ts-node": "^10.9.1",
+        "tslint": "^5.18.0",
+        "typescript": "^5.8.3",
+        "url-loader": "^1.1.2",
+        "webpack": "^3.5.5",
+        "webpack-cli": "3.3.10",
+        "webpack-dev-server": "2.11.1",
+        "webpack-merge": "^4.2.1"
+    },
+    "dependencies": {
+        "@popperjs/core": "^2.4.0",
+        "@sourcefabric/common": "0.0.63",
+        "@superdesk/primereact": "^5.0.2-13",
+        "@superdesk/react-resizable-panels": "0.0.39",
+        "chart.js": "^2.9.3",
+        "date-fns": "2.7.0",
+        "popper-max-size-modifier": "^0.2.0",
+        "popper.js": "1.14.4",
+        "primeicons": "2.0.0",
+        "react-beautiful-dnd": "^13.0.0",
+        "react-id-generator": "^3.0.0",
+        "react-scrollspy": "^3.4.3",
+        "tippy.js": "^6.3.7",
+        "weekstart": "^2.0.0"
+    },
+    "peerDependencies": {
+        "moment": "*"
+    },
+    "volta": {
+        "node": "14.21.3"
+    }
 }

package/react/components/Alert.js

@@ -91,17 +91,14 @@ var Alert = /** @class */ (function (_super) {
         if (this.props.fullWidth) {
             styles.width = '100%';
         }
-        return (React.createElement("div", { className: 'sd-alert__container', style: styles },
+        return (React.createElement("div", { className: "sd-alert__container", style: styles },
             React.createElement("div", { className: classesAlert },
-                this.props.icon ?
-                    React.createElement("span", { className: "sd-alert__icon" },
-                        React.createElement(Icon_1.Icon, { name: this.props.icon })) : null,
-                this.props.restoreIcon ?
-                    React.createElement("button", { className: 'sd-alert__close', onClick: this.onToggle, "aria-label": "Close" }) : null,
+                this.props.icon ? (React.createElement("span", { className: "sd-alert__icon" },
+                    React.createElement(Icon_1.Icon, { name: this.props.icon }))) : null,
+                this.props.restoreIcon ? (React.createElement("button", { className: "sd-alert__close", onClick: this.onToggle, "aria-label": "Close" })) : null,
                 React.createElement("span", { className: "sd-alert__content" }, this.props.children)),
-            this.props.restoreIcon ?
-                React.createElement("span", { className: classesInfoBtn, onClick: this.onToggle },
-                    React.createElement("i", { className: this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large' })) : null));
+            this.props.restoreIcon ? (React.createElement("span", { className: classesInfoBtn, onClick: this.onToggle },
+                React.createElement("i", { className: this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large' }))) : null));
     };
     return Alert;
 }(React.PureComponent));

package/react/components/Autocomplete.js

@@ -148,29 +148,21 @@ var Autocomplete = /** @class */ (function (_super) {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: classes },
-                this.props.label && !this.props.isSearchField ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
-                this.props.label && this.props.isSearchField ? React.createElement("label", { className: 'sd-searchbar__icon', htmlFor: this.htmlId, "aria-label": this.props.label }) : null,
-                React.createElement(autocomplete_1.AutoComplete, { id: this.htmlId, inputClassName: inputFieldClass, value: this.state.selectedItem, placeholder: this.props.placeholder, suggestions: this.state.filteredItems, completeMethod: this.searchItem, itemTemplate: this.props.listItemTemplate, field: this.props.keyValue, disabled: this.props.disabled, minLength: this.props.minLength ? this.props.minLength : 1, onFocus: function () { _this.setState({ focused: true }); }, onBlur: function () { _this.setState({ focused: false }); }, onChange: function (event) { return _this.handleChange(event); }, onSelect: function (event) { return _this.handleSelect(event); } }),
-                this.props.isSearchField && this.state.selectedItem
-                    ? React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.handleInputClear(); } },
-                        React.createElement("i", { className: "icon-remove-sign", "aria-label": "remove-sign" }))
-                    : null,
-                !this.props.isSearchField ?
-                    React.createElement("div", { className: 'sd-input__message-box' },
-                        this.props.info && !this.props.invalid && !this.state.invalid ?
-                            React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                        this.props.invalid || this.state.invalid ?
-                            React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                            : null)
-                    : null),
-            this.props.isSearchField ?
-                React.createElement("div", { className: 'sd-searchbar__message-box' },
-                    this.props.info && !this.props.invalid && !this.state.invalid ?
-                        React.createElement("div", { className: 'sd-searchbar__hint' }, this.props.info) : null,
-                    this.props.invalid || this.state.invalid ?
-                        React.createElement("div", { className: 'sd-searchbar__message' }, this.props.error)
-                        : null)
-                : null));
+                this.props.label && !this.props.isSearchField ? (React.createElement("label", { className: "sd-input__label", htmlFor: this.htmlId }, this.props.label)) : null,
+                this.props.label && this.props.isSearchField ? (React.createElement("label", { className: "sd-searchbar__icon", htmlFor: this.htmlId, "aria-label": this.props.label })) : null,
+                React.createElement(autocomplete_1.AutoComplete, { id: this.htmlId, inputClassName: inputFieldClass, value: this.state.selectedItem, placeholder: this.props.placeholder, suggestions: this.state.filteredItems, completeMethod: this.searchItem, itemTemplate: this.props.listItemTemplate, field: this.props.keyValue, disabled: this.props.disabled, minLength: this.props.minLength ? this.props.minLength : 1, onFocus: function () {
+                        _this.setState({ focused: true });
+                    }, onBlur: function () {
+                        _this.setState({ focused: false });
+                    }, onChange: function (event) { return _this.handleChange(event); }, onSelect: function (event) { return _this.handleSelect(event); } }),
+                this.props.isSearchField && this.state.selectedItem ? (React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.handleInputClear(); } },
+                    React.createElement("i", { className: "icon-remove-sign", "aria-label": "remove-sign" }))) : null,
+                !this.props.isSearchField ? (React.createElement("div", { className: "sd-input__message-box" },
+                    this.props.info && !this.props.invalid && !this.state.invalid ? (React.createElement("div", { className: "sd-input__hint" }, this.props.info)) : null,
+                    this.props.invalid || this.state.invalid ? (React.createElement("div", { className: "sd-input__message" }, this.props.error)) : null)) : null),
+            this.props.isSearchField ? (React.createElement("div", { className: "sd-searchbar__message-box" },
+                this.props.info && !this.props.invalid && !this.state.invalid ? (React.createElement("div", { className: "sd-searchbar__hint" }, this.props.info)) : null,
+                this.props.invalid || this.state.invalid ? (React.createElement("div", { className: "sd-searchbar__message" }, this.props.error)) : null)) : null));
     };
     return Autocomplete;
 }(React.Component));

package/react/components/Badge.js

@@ -67,7 +67,7 @@ var Badge = /** @class */ (function (_super) {
             _a['badge--square'] = this.props.shape === 'square',
             _a));
         if (this.props.children) {
-            return (React.createElement("div", { className: 'element-with-badge', "data-test-id": this.props['data-test-id'] },
+            return (React.createElement("div", { className: "element-with-badge", "data-test-id": this.props['data-test-id'] },
                 this.props.children,
                 React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": "badge-content" }, this.props.text)));
         }

package/react/components/Button.js

@@ -107,12 +107,10 @@ var TooltipWrapper = /** @class */ (function (_super) {
     }
     TooltipWrapper.prototype.render = function () {
         var _a = this.props, tooltipText = _a.tooltipText, children = _a.children;
-        return (tooltipText !== null && tooltipText !== void 0 ? tooltipText : '').length > 0
-            ? (React.createElement(Tooltip_1.WithTooltip, { text: tooltipText }, function (_a) {
-                var attributes = _a.attributes;
-                return children({ attributes: attributes });
-            }))
-            : (React.createElement(React.Fragment, null, children({ attributes: {} })));
+        return (tooltipText !== null && tooltipText !== void 0 ? tooltipText : '').length > 0 ? (React.createElement(Tooltip_1.WithTooltip, { text: tooltipText }, function (_a) {
+            var attributes = _a.attributes;
+            return children({ attributes: attributes });
+        })) : (React.createElement(React.Fragment, null, children({ attributes: {} })));
     };
     return TooltipWrapper;
 }(React.PureComponent));

package/react/components/ButtonGroup.js

@@ -70,7 +70,7 @@ var ButtonGroup = /** @class */ (function (_super) {
             _a["button-group--padded"] = this.props.padded === true,
             _a["button-group--sub-group"] = this.props.subgroup === true,
             _a), this.props.className);
-        return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
+        return (React.createElement("div", { className: classes, role: "group" }, this.props.children));
     };
     return ButtonGroup;
 }(React.PureComponent));

package/react/components/Carousel.js

@@ -61,14 +61,14 @@ var Carousel = /** @class */ (function (_super) {
         var header = (React.createElement("div", { className: "sd-thumb-carousel__header" },
             this.props.title && (React.createElement(React.Fragment, null,
                 React.createElement("h4", { className: "sd-thumb-carousel__heading" }, this.props.title),
-                React.createElement(Badge_1.Badge, { text: '' + (this.props.imageCount || this.props.images.length), type: 'light' }))),
+                React.createElement(Badge_1.Badge, { text: '' + (this.props.imageCount || this.props.images.length), type: "light" }))),
             this.props.headerMeta && (React.createElement("div", { className: "sd-thumb-carousel__header-block--r" }, this.props.headerMeta))));
         var footer = this.props.description ? (React.createElement("div", { className: "sd-thumb-carousel__description" }, this.props.description)) : null;
         var itemTemplate = function (props) { return (React.createElement("div", { className: "sd-thumb-carousel__item" },
             React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
                 React.createElement("img", { src: props.src, alt: props.alt })))); };
-        return React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui', className: this.props.className },
-            React.createElement(carousel_1.Carousel, { id: this.props.id, value: this.props.images, numVisible: this.props.numVisible, numScroll: this.props.numScroll, responsiveOptions: this.props.responsiveOptions, itemTemplate: itemTemplate, header: header, footer: footer, indicatorsContentClassName: 'sd-thumb-carousel__indicators', onPageChange: this.props.onPageChange }));
+        return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui', className: this.props.className },
+            React.createElement(carousel_1.Carousel, { id: this.props.id, value: this.props.images, numVisible: this.props.numVisible, numScroll: this.props.numScroll, responsiveOptions: this.props.responsiveOptions, itemTemplate: itemTemplate, header: header, footer: footer, indicatorsContentClassName: "sd-thumb-carousel__indicators", onPageChange: this.props.onPageChange })));
     };
     return Carousel;
 }(React.PureComponent));

package/react/components/CheckButtonGroup.js

@@ -69,12 +69,9 @@ var CheckButtonGroup = /** @class */ (function (_super) {
             _a["sd-check-button__group--grid"] = this.props.grid,
             _a["sd-check-button__group--padded"] = this.props.padded === true,
             _a));
-        return (React.createElement(React.Fragment, null, this.props.groupLabel ?
-            React.createElement("div", { className: 'sd-check-button__group-wrapper', "aria-labelledby": this.props.groupLabelledBy },
-                React.createElement(FormLabel_1.FormLabel, { forId: 'group', text: this.props.groupLabel }),
-                React.createElement("div", { className: classes }, this.props.children))
-            :
-                React.createElement("div", { className: classes }, this.props.children)));
+        return (React.createElement(React.Fragment, null, this.props.groupLabel ? (React.createElement("div", { className: "sd-check-button__group-wrapper", "aria-labelledby": this.props.groupLabelledBy },
+            React.createElement(FormLabel_1.FormLabel, { forId: 'group', text: this.props.groupLabel }),
+            React.createElement("div", { className: classes }, this.props.children))) : (React.createElement("div", { className: classes }, this.props.children))));
     };
     return CheckButtonGroup;
 }(React.PureComponent));

package/react/components/CheckboxButton.js

@@ -71,10 +71,8 @@ var CheckboxButton = /** @class */ (function (_super) {
         return (React.createElement("span", { className: "sd-check-button sd-check-button--native", tabIndex: this.props.tabindex === undefined ? undefined : -1 },
             React.createElement("input", { type: "checkbox", className: "sd-check-button__input", id: this.htmlId, tabIndex: this.props.tabindex, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
             React.createElement("label", { className: "sd-check-button__text-label", htmlFor: this.htmlId, "aria-label": this.props.label.hidden ? this.props.label.text : undefined },
-                this.props.label.icon ?
-                    React.createElement("i", { className: "icon-".concat(this.props.label.icon), "aria-hidden": "true" }) : null,
-                !this.props.label.hidden || !this.props.label.icon ?
-                    React.createElement("span", { className: "sd-check-button__text-label-inner" }, this.props.label.text) : null)));
+                this.props.label.icon ? (React.createElement("i", { className: "icon-".concat(this.props.label.icon), "aria-hidden": "true" })) : null,
+                !this.props.label.hidden || !this.props.label.icon ? (React.createElement("span", { className: "sd-check-button__text-label-inner" }, this.props.label.text)) : null)));
     };
     return CheckboxButton;
 }(React.Component));

package/react/components/ContentDivider.js

@@ -72,7 +72,7 @@ var ContentDivider = /** @class */ (function (_super) {
             _a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
             _a));
         if (this.props.children) {
-            return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },
+            return (React.createElement("div", { className: 'sd-content-divider--with-text ' + classes, role: "separator" },
                 React.createElement("span", { className: "sd-content-divider__inner-text" }, this.props.children)));
         }
         else {

package/react/components/DatePicker.js

@@ -134,10 +134,10 @@ var DatePicker = /** @class */ (function (_super) {
             valid: true,
         };
         _this.hidePopupOnScroll = (0, lodash_1.throttle)(function () {
-            if (_this.instance != null
-                && _this.instance.panel != null
-                && _this.instance.hideOverlay != null
-                && _this.instance.panel.classList.contains(internalPrimereactClassnames.overlayVisible)) {
+            if (_this.instance != null &&
+                _this.instance.panel != null &&
+                _this.instance.hideOverlay != null &&
+                _this.instance.panel.classList.contains(internalPrimereactClassnames.overlayVisible)) {
                 _this.instance.hideOverlay();
             }
         }, 300);
@@ -159,7 +159,8 @@ var DatePicker = /** @class */ (function (_super) {
                 this.setState({ value: parseToPrimeReactCalendarFormat(this.props.value), valid: true });
             }
         }
-        else if (this.props.value.getTime() !== prevProps.value.getTime()) { // comparing by value
+        else if (this.props.value.getTime() !== prevProps.value.getTime()) {
+            // comparing by value
             this.setState({ value: parseToPrimeReactCalendarFormat(this.props.value), valid: true });
         }
     };
@@ -187,18 +188,18 @@ var DatePicker = /** @class */ (function (_super) {
                 return (0, helpers_1.assertNever)(_this.props.locale);
             }
         })();
-        var showClearButton = this.props.required === true
-            ? false
-            : this.props.hideClearButton !== true;
+        var showClearButton = this.props.required === true ? false : this.props.hideClearButton !== true;
         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(calendar_1.Calendar, { className: 'sd-input__input', footerTemplate: showClearButton ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
-                    React.createElement(Button_1.Button, { onClick: function () {
-                            _this.props.onChange(null);
-                            if (_this.instance != null
-                                && typeof _this.instance.hideOverlay === 'function') {
-                                _this.instance.hideOverlay();
-                            }
-                        }, text: 'Clear', "data-test-id": 'clear-button' }))); } : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
+            React.createElement(calendar_1.Calendar, { className: "sd-input__input", footerTemplate: showClearButton
+                    ? function () { return (React.createElement("div", { className: "d-flex justify-end" },
+                        React.createElement(Button_1.Button, { onClick: function () {
+                                _this.props.onChange(null);
+                                if (_this.instance != null &&
+                                    typeof _this.instance.hideOverlay === 'function') {
+                                    _this.instance.hideOverlay();
+                                }
+                            }, text: "Clear", "data-test-id": "clear-button" }))); }
+                    : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                     var refAny = ref;
                     if (_this.props['data-test-id'] != null && (refAny === null || refAny === void 0 ? void 0 : refAny.inputElement) != null) {
@@ -214,16 +215,18 @@ var DatePicker = /** @class */ (function (_super) {
                         // updating internal state so a user can continue typing and enter a valid value
                         _this.setState({ value: event.value, valid: false });
                     }
-                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
-                    var label = _a.label, days = _a.days;
-                    return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
-                            _this.props.onChange((0, addDays_1.default)(new Date(), days));
-                            if (_this.instance != null
-                                && typeof _this.instance.hideOverlay === 'function') {
-                                _this.instance.hideOverlay();
-                            }
-                        } }, label));
-                }))); }, appendTo: document.body, disabled: this.props.disabled, minDate: this.props.minDate, maxDate: this.props.maxDate, onBlur: function (event) {
+                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () {
+                    return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
+                        var label = _a.label, days = _a.days;
+                        return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
+                                _this.props.onChange((0, addDays_1.default)(new Date(), days));
+                                if (_this.instance != null &&
+                                    typeof _this.instance.hideOverlay === 'function') {
+                                    _this.instance.hideOverlay();
+                                }
+                            } }, label));
+                    })));
+                }, appendTo: document.body, disabled: this.props.disabled, minDate: this.props.minDate, maxDate: this.props.maxDate, onBlur: function (event) {
                     // @ts-ignore: Object is possibly 'null'.
                     if (!(event === null || event === void 0 ? void 0 : event.target.value)) {
                         // @ts-ignore: Object is possibly 'null'.

package/react/components/DateTimePicker.d.ts

@@ -1,7 +1,8 @@
-import * as React from "react";
-import { InputWrapper } from "./Form";
-import { IInputWrapper } from "./Form/InputWrapper";
-interface IProps extends IInputWrapper {
+import * as React from 'react';
+import { InputWrapper } from './Form';
+import { IInputWrapper } from './Form/InputWrapper';
+interface IPropsValueDate extends IInputWrapper {
+    valueType: 'date';
     value: Date | null;
     dateFormat: string;
     onChange: (value: Date | null) => void;
@@ -13,11 +14,32 @@ interface IProps extends IInputWrapper {
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
 }
+type IValue = {
+    date?: string;
+    time?: string;
+};
+interface IPropsValueObject extends IInputWrapper {
+    valueType: 'object';
+    value: IValue;
+    dateFormat: string;
+    onChange: (value: IValue) => void;
+    preview?: boolean;
+    fullWidth?: boolean;
+    allowSeconds?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
+}
+type IProps = IPropsValueDate | IPropsValueObject;
 export declare class DateTimePicker extends React.PureComponent<IProps> {
     private htmlId;
     handleTimeChange: (time: string) => void;
     handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;
+    getTimeValue(): string;
+    getDateValue(): Date | null;
+    handleClear: () => void;
     render(): JSX.Element;
 }
 export {};