superdesk-ui-framework 4.0.48 → 4.0.49

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom"), require("angular")) : factory(root["react"], root["react-dom"], root["angular"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_824__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_826__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 821);
+/******/ 	return __webpack_require__(__webpack_require__.s = 823);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 19:
+/***/ 18:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(42), __webpack_require__(59)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(43), __webpack_require__(59)(module)))
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports) {
 
 var g;
@@ -28246,21 +28246,21 @@ return jQuery;
 
 /***/ }),
 
-/***/ 821:
+/***/ 823:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(19);
+__webpack_require__(18);
 
 __webpack_require__(74);
 
-__webpack_require__(822);
-
 __webpack_require__(824);
 
-__webpack_require__(825);
+__webpack_require__(826);
+
+__webpack_require__(827);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 822:
+/***/ 824:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(74), __webpack_require__(823) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(74), __webpack_require__(825) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 823:
+/***/ 825:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,23 +29060,23 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 824:
+/***/ 826:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_824__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_826__;
 
 /***/ }),
 
-/***/ 825:
+/***/ 827:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(826);
+__webpack_require__(828);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 826:
+/***/ 828:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/components/DateTimePicker.tsx

@@ -7,7 +7,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
         super(props);
 
         this.state = {
-            dateTime: new Date(),
+            dateTime: null,
         };
     }
 
@@ -17,6 +17,8 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
                 label="Planning date"
                 labelHidden
                 inlineLabel
+                fullWidth
+                valueType="date"
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
                 fullWidth

package/examples/pages/components/TimePicker.tsx

@@ -7,12 +7,12 @@ import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
 let minutes = Array.from(Array(60).keys());
 let changedMinutes = minutes.filter((num) => num % 15 !== 0);
 
-class TimePickerExample extends React.PureComponent<{}, {time: string}> {
+class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
     constructor(props) {
         super(props);
 
         this.state = {
-            time: '',
+            time: null,
         };
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "4.0.48",
+    "version": "4.0.49",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",

package/react/components/DateTimePicker.d.ts

@@ -13,6 +13,8 @@ interface IPropsValueDate extends IInputWrapper {
     disabled?: boolean;
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
+    timeHeaderTemplate?: React.ReactNode;
+    timeFooterTemplate?: React.ReactNode;
 }
 type IValue = {
     date?: string;
@@ -30,6 +32,8 @@ interface IPropsValueObject extends IInputWrapper {
     disabled?: boolean;
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
+    timeHeaderTemplate?: React.ReactNode;
+    timeFooterTemplate?: React.ReactNode;
 }
 type IProps = IPropsValueDate | IPropsValueObject;
 export declare class DateTimePicker extends React.PureComponent<IProps> {
@@ -37,7 +41,7 @@ export declare class DateTimePicker extends React.PureComponent<IProps> {
     handleTimeChange: (time: string) => void;
     handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;
-    getTimeValue(): string;
+    getTimeValue(): string | null;
     getDateValue(): Date | null;
     handleClear: () => void;
     render(): JSX.Element;

package/react/components/DateTimePicker.js

@@ -132,10 +132,10 @@ var DateTimePicker = /** @class */ (function (_super) {
         if (this.props.valueType === 'date') {
             return this.props.value != null
                 ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-                : '';
+                : null;
         }
         else if (this.props.valueType === 'object') {
-            return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : '';
+            return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : null;
         }
         else {
             (0, helpers_1.assertNever)(this.props);
@@ -160,7 +160,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 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: 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: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
+                    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, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate })),
                 this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;

package/react/components/ShowPopup.d.ts

@@ -5,6 +5,7 @@ interface IPropsPopupPositioner {
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
+    'data-test-id'?: string;
 }
 export declare class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
     private wrapperEl;

package/react/components/ShowPopup.js

@@ -150,7 +150,7 @@ var PopupPositioner = /** @class */ (function (_super) {
                 left: '-100vw',
                 display: 'flex',
                 zIndex: this.zIndex,
-            } }, this.props.children), document.body)));
+            }, "data-test-id": this.props['data-test-id'] }, this.props.children), document.body)));
     };
     return PopupPositioner;
 }(React.PureComponent));

package/react/components/TimePicker.d.ts

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { IInputWrapper } from './Form/InputWrapper';
 interface IProps extends IInputWrapper {
-    value: string;
+    value: string | null;
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
     'data-test-id'?: string;
 }
-export declare class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    popupOpen: boolean;
+}
+export declare class TimePicker extends React.PureComponent<IProps, IState> {
     private htmlId;
+    private timeInputRef;
+    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/TimePicker.js

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

package/react/components/TimePickerPopover.d.ts

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

package/react/components/TimePickerPopover.js

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

package/react/utils/time.d.ts

@@ -0,0 +1,5 @@
+export type ITimeUnit = 'hours' | 'minutes' | 'seconds';
+export declare function getOptionsForTimeUnit(timeUnit: ITimeUnit, is12HourFormat?: boolean, disabledOptions?: {
+    [key: string]: Array<number>;
+}): Array<string>;
+export declare function padValue(value: number): string;

package/react/utils/time.js

@@ -0,0 +1,36 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOptionsForTimeUnit = getOptionsForTimeUnit;
+exports.padValue = padValue;
+var lodash_1 = require("lodash");
+function getOptionsForTimeUnit(timeUnit, is12HourFormat, disabledOptions) {
+    var format12HourArr = __spreadArray([12], (0, lodash_1.range)(1, 12), true);
+    var timeUnitArray = (function () {
+        if (timeUnit === 'hours') {
+            if (is12HourFormat) {
+                return format12HourArr;
+            }
+            else {
+                return (0, lodash_1.range)(24);
+            }
+        }
+        else {
+            return (0, lodash_1.range)(60);
+        }
+    })();
+    return timeUnitArray
+        .filter(function (item) { var _a; return !((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions[timeUnit]) !== null && _a !== void 0 ? _a : []).includes(item); })
+        .map(function (value) { return value.toString().padStart(2, '0'); });
+}
+function padValue(value) {
+    return value.toString().padStart(2, '0');
+}