superdesk-ui-framework 4.0.8 → 4.0.10

package/app-typescript/components/DateTimePicker.tsx

@@ -12,7 +12,7 @@ interface IProps {
         hidden?: boolean;
     };
     dateFormat: string;
-    onChange: (value: string | null) => void;
+    onChange: (value: Date | null) => void;
     preview?: boolean;
     fullWidth?: boolean;
     allowSeconds?: boolean;
@@ -31,10 +31,10 @@ export class DateTimePicker extends React.PureComponent<IProps> {
         origDate.setHours(hours);
         origDate.setMinutes(minutes);
 
-        this.props.onChange(origDate.toISOString());
+        this.props.onChange(origDate);
     }
 
-    handleDateChange = (date?: string) => {
+    handleDateChange = (date: Date | null) => {
         if (date == null) {
             this.props.onChange(null);
 
@@ -47,7 +47,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
         selectedDate.setHours(origDate.getHours());
         selectedDate.setMinutes(origDate.getMinutes());
 
-        this.props.onChange(selectedDate.toISOString());
+        this.props.onChange(selectedDate);
     }
 
     prepareFormat(unitOfTime: number) {
@@ -55,9 +55,9 @@ export class DateTimePicker extends React.PureComponent<IProps> {
     }
 
     render() {
-        const convertedValue = this.props.value ? new Date(this.props.value) : null;
-        const convertedTimeValue = convertedValue
-            ? `${this.prepareFormat(convertedValue.getHours())}:${this.prepareFormat(convertedValue.getMinutes())}`
+        const {value} = this.props;
+        const convertedTimeValue = value
+            ? `${this.prepareFormat(value.getHours())}:${this.prepareFormat(value.getMinutes())}`
             : '';
 
         return (
@@ -68,9 +68,9 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                         preview={this.props.preview}
                         required={this.props.required}
                         hideClearButton={true}
-                        value={convertedValue}
+                        value={value}
                         onChange={(val) => {
-                            this.handleDateChange(val?.toString());
+                            this.handleDateChange(val);
                         }}
                         dateFormat={this.props.dateFormat}
                         label={this.props.label.text}

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -20,7 +20,14 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
         };
     }
 
-    toggle = (): void => {
+    /**
+     * Called via ref
+     */
+    public isOpen = () => {
+        return this.state.isOpen;
+    }
+
+    public toggle = (): void => {
         this.setState({isOpen: !this.state.isOpen}, () => {
             this.props.onToggle?.(this.state.isOpen);
         });

package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx

@@ -36,7 +36,14 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
         }
     }
 
-    toggle = (): void => {
+    /**
+     * Called via ref
+     */
+    public isOpen = () => {
+        return this.state.isOpen;
+    }
+
+    public toggle = (): void => {
         this.setState({ isOpen: !this.state.isOpen }, () => {
             if (!this.state.isOpen && this.props.onClose) {
                 this.props.onClose();

package/app-typescript/components/ToggleBox/index.tsx

@@ -15,6 +15,7 @@ export interface IPropsSimple {
     margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;
     onClose?(): void;
+    toggleBoxRef?: React.RefObject<SimpleToggleBox>;
 }
 
 export interface IPropsCustomHeader {
@@ -24,6 +25,7 @@ export interface IPropsCustomHeader {
     getToggleButtonLabel: (isOpen: boolean) => string;
     initiallyOpen?: boolean;
     onToggle?(isOpen: boolean): void;
+    toggleBoxRef?: React.RefObject<CustomHeaderToggleBox>;
 }
 
 type IProps = IPropsSimple | IPropsCustomHeader;
@@ -32,11 +34,11 @@ export class ToggleBox extends React.PureComponent<IProps> {
     render() {
         if (this.props.variant === "simple") {
             return (
-                <SimpleToggleBox {...this.props} />
+                <SimpleToggleBox ref={this.props.toggleBoxRef} {...this.props} />
             );
         } else {
             return (
-                <CustomHeaderToggleBox {...this.props} />
+                <CustomHeaderToggleBox ref={this.props.toggleBoxRef} {...this.props} />
             );
         }
     }

package/dist/components/DateTimePicker.tsx

@@ -14,11 +14,11 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label='Planning datetime'
+                label={{text: "Planning date"}}
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
                 onChange={(val) => {
-                    const parsedVal = val != null && (val.length > 0) ? new Date(val) : null;
+                    const parsedVal = val != null ? new Date(val) : null;
 
                     this.setState({dateTime: parsedVal});
                 }}

package/dist/examples.bundle.js

@@ -78752,10 +78752,10 @@ var ToggleBox = /** @class */ (function (_super) {
     }
     ToggleBox.prototype.render = function () {
         if (this.props.variant === "simple") {
-            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({}, this.props)));
+            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
         else {
-            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({}, this.props)));
+            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
     };
     return ToggleBox;
@@ -124106,7 +124106,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             origDate.setHours(hours);
             origDate.setMinutes(minutes);
-            _this.props.onChange(origDate.toISOString());
+            _this.props.onChange(origDate);
         };
         _this.handleDateChange = function (date) {
             var _a;
@@ -124118,7 +124118,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             selectedDate.setHours(origDate.getHours());
             selectedDate.setMinutes(origDate.getMinutes());
-            _this.props.onChange(selectedDate.toISOString());
+            _this.props.onChange(selectedDate);
         };
         return _this;
     }
@@ -124128,14 +124128,14 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        var convertedValue = this.props.value ? new Date(this.props.value) : null;
-        var convertedTimeValue = convertedValue
-            ? "".concat(this.prepareFormat(convertedValue.getHours()), ":").concat(this.prepareFormat(convertedValue.getMinutes()))
+        var value = this.props.value;
+        var convertedTimeValue = value
+            ? "".concat(this.prepareFormat(value.getHours()), ":").concat(this.prepareFormat(value.getMinutes()))
             : '';
         return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
             React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
-                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: convertedValue, onChange: function (val) {
-                        _this.handleDateChange(val === null || val === void 0 ? void 0 : val.toString());
+                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: value, onChange: function (val) {
+                        _this.handleDateChange(val);
                     }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
                 React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
                         _this.handleTimeChange(val);
@@ -147417,6 +147417,12 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 _this.toggle();
             }
         };
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 if (!_this.state.isOpen && _this.props.onClose) {
@@ -147537,6 +147543,12 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.contentRef = React.createRef();
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;
@@ -171957,8 +171969,8 @@ var DateTimePickerExample = /** @class */ (function (_super) {
     }
     DateTimePickerExample.prototype.render = function () {
         var _this = this;
-        return (React.createElement(app_typescript_1.DateTimePicker, { label: 'Planning datetime', value: this.state.dateTime, dateFormat: "YYYY-MM-DD", onChange: function (val) {
-                var parsedVal = val != null && (val.length > 0) ? new Date(val) : null;
+        return (React.createElement(app_typescript_1.DateTimePicker, { label: { text: "Planning date" }, value: this.state.dateTime, dateFormat: "YYYY-MM-DD", onChange: function (val) {
+                var parsedVal = val != null ? new Date(val) : null;
                 _this.setState({ dateTime: parsedVal });
             } }));
     };
@@ -185393,7 +185405,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 938 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.8","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":"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":"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":"4.9.5","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","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@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"},"peerDependencies":{"moment":"*"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.10","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":"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":"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":"4.9.5","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","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@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"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 939 */

package/dist/superdesk-ui.bundle.js

@@ -77873,10 +77873,10 @@ var ToggleBox = /** @class */ (function (_super) {
     }
     ToggleBox.prototype.render = function () {
         if (this.props.variant === "simple") {
-            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({}, this.props)));
+            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
         else {
-            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({}, this.props)));
+            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
     };
     return ToggleBox;
@@ -123227,7 +123227,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             origDate.setHours(hours);
             origDate.setMinutes(minutes);
-            _this.props.onChange(origDate.toISOString());
+            _this.props.onChange(origDate);
         };
         _this.handleDateChange = function (date) {
             var _a;
@@ -123239,7 +123239,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             selectedDate.setHours(origDate.getHours());
             selectedDate.setMinutes(origDate.getMinutes());
-            _this.props.onChange(selectedDate.toISOString());
+            _this.props.onChange(selectedDate);
         };
         return _this;
     }
@@ -123249,14 +123249,14 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        var convertedValue = this.props.value ? new Date(this.props.value) : null;
-        var convertedTimeValue = convertedValue
-            ? "".concat(this.prepareFormat(convertedValue.getHours()), ":").concat(this.prepareFormat(convertedValue.getMinutes()))
+        var value = this.props.value;
+        var convertedTimeValue = value
+            ? "".concat(this.prepareFormat(value.getHours()), ":").concat(this.prepareFormat(value.getMinutes()))
             : '';
         return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
             React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
-                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: convertedValue, onChange: function (val) {
-                        _this.handleDateChange(val === null || val === void 0 ? void 0 : val.toString());
+                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: value, onChange: function (val) {
+                        _this.handleDateChange(val);
                     }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
                 React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
                         _this.handleTimeChange(val);
@@ -146538,6 +146538,12 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 _this.toggle();
             }
         };
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 if (!_this.state.isOpen && _this.props.onClose) {
@@ -146658,6 +146664,12 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.contentRef = React.createRef();
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;

package/examples/pages/components/DateTimePicker.tsx

@@ -14,11 +14,11 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label='Planning datetime'
+                label={{text: "Planning date"}}
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
                 onChange={(val) => {
-                    const parsedVal = val != null && (val.length > 0) ? new Date(val) : null;
+                    const parsedVal = val != null ? new Date(val) : null;
 
                     this.setState({dateTime: parsedVal});
                 }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.8",
+  "version": "4.0.10",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -110,5 +110,8 @@
   },
   "peerDependencies": {
     "moment": "*"
+  },
+  "volta": {
+    "node": "14.21.3"
   }
 }

package/react/components/DateTimePicker.d.ts

@@ -6,7 +6,7 @@ interface IProps {
         hidden?: boolean;
     };
     dateFormat: string;
-    onChange: (value: string | null) => void;
+    onChange: (value: Date | null) => void;
     preview?: boolean;
     fullWidth?: boolean;
     allowSeconds?: boolean;
@@ -16,7 +16,7 @@ interface IProps {
 }
 export declare class DateTimePicker extends React.PureComponent<IProps> {
     handleTimeChange: (time: string) => void;
-    handleDateChange: (date?: string) => void;
+    handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;
     render(): JSX.Element;
 }

package/react/components/DateTimePicker.js

@@ -56,7 +56,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             origDate.setHours(hours);
             origDate.setMinutes(minutes);
-            _this.props.onChange(origDate.toISOString());
+            _this.props.onChange(origDate);
         };
         _this.handleDateChange = function (date) {
             var _a;
@@ -68,7 +68,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
             selectedDate.setHours(origDate.getHours());
             selectedDate.setMinutes(origDate.getMinutes());
-            _this.props.onChange(selectedDate.toISOString());
+            _this.props.onChange(selectedDate);
         };
         return _this;
     }
@@ -78,14 +78,14 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        var convertedValue = this.props.value ? new Date(this.props.value) : null;
-        var convertedTimeValue = convertedValue
-            ? "".concat(this.prepareFormat(convertedValue.getHours()), ":").concat(this.prepareFormat(convertedValue.getMinutes()))
+        var value = this.props.value;
+        var convertedTimeValue = value
+            ? "".concat(this.prepareFormat(value.getHours()), ":").concat(this.prepareFormat(value.getMinutes()))
             : '';
         return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
             React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
-                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: convertedValue, onChange: function (val) {
-                        _this.handleDateChange(val === null || val === void 0 ? void 0 : val.toString());
+                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: value, onChange: function (val) {
+                        _this.handleDateChange(val);
                     }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
                 React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
                         _this.handleTimeChange(val);

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

@@ -8,6 +8,10 @@ export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCus
     htmlId: string;
     contentRef: React.RefObject<HTMLDivElement>;
     constructor(props: IPropsCustomHeader);
+    /**
+     * Called via ref
+     */
+    isOpen: () => boolean;
     toggle: () => void;
     componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState): void;
     handleAnimationEnd: () => void;

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -53,6 +53,12 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
         _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.contentRef = React.createRef();
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 var _a, _b;

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

@@ -14,6 +14,10 @@ export declare class SimpleToggleBox extends React.PureComponent<IPropsSimple, I
     contentRef: React.RefObject<HTMLDivElement>;
     constructor(props: IPropsSimple);
     handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /**
+     * Called via ref
+     */
+    isOpen: () => boolean;
     toggle: () => void;
     componentDidUpdate(_prevProps: IPropsSimple, prevState: IState): void;
     handleAnimationEnd: () => void;

package/react/components/ToggleBox/SimpleToggleBox.js

@@ -69,6 +69,12 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 _this.toggle();
             }
         };
+        /**
+         * Called via ref
+         */
+        _this.isOpen = function () {
+            return _this.state.isOpen;
+        };
         _this.toggle = function () {
             _this.setState({ isOpen: !_this.state.isOpen }, function () {
                 if (!_this.state.isOpen && _this.props.onClose) {

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SimpleToggleBox } from './SimpleToggleBox';
+import { CustomHeaderToggleBox } from './CustomHeaderToggleBox';
 export interface IPropsSimple {
     variant: 'simple';
     title: string;
@@ -11,6 +13,7 @@ export interface IPropsSimple {
     margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;
     onClose?(): void;
+    toggleBoxRef?: React.RefObject<SimpleToggleBox>;
 }
 export interface IPropsCustomHeader {
     variant: 'custom-header';
@@ -19,6 +22,7 @@ export interface IPropsCustomHeader {
     getToggleButtonLabel: (isOpen: boolean) => string;
     initiallyOpen?: boolean;
     onToggle?(isOpen: boolean): void;
+    toggleBoxRef?: React.RefObject<CustomHeaderToggleBox>;
 }
 type IProps = IPropsSimple | IPropsCustomHeader;
 export declare class ToggleBox extends React.PureComponent<IProps> {

package/react/components/ToggleBox/index.js

@@ -60,10 +60,10 @@ var ToggleBox = /** @class */ (function (_super) {
     }
     ToggleBox.prototype.render = function () {
         if (this.props.variant === "simple") {
-            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({}, this.props)));
+            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
         else {
-            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({}, this.props)));
+            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
         }
     };
     return ToggleBox;