superdesk-ui-framework 3.1.12 → 3.1.14

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 800);
+/******/ 	return __webpack_require__(__webpack_require__.s = 801);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 24:
+/***/ 21:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28246,21 +28246,21 @@ return jQuery;
 
 /***/ }),
 
-/***/ 800:
+/***/ 801:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(24);
+__webpack_require__(21);
 
 __webpack_require__(57);
 
-__webpack_require__(801);
+__webpack_require__(802);
 
-__webpack_require__(803);
+__webpack_require__(804);
 
-__webpack_require__(805);
+__webpack_require__(806);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
 
 /***/ }),
 
-/***/ 801:
+/***/ 802:
 /***/ (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__(57), __webpack_require__(802) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(803) ], __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;
 
 /***/ }),
 
-/***/ 802:
+/***/ 803:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 803:
+/***/ 804:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(804);
+__webpack_require__(805);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 804:
+/***/ 805:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 805:
+/***/ 806:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(806);
+__webpack_require__(807);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 806:
+/***/ 807:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/components/TimePicker.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
+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}> {
     constructor(props) {
@@ -27,7 +31,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     }
 }
 
-export default class TimePickerDoc extends React.Component {
+export default class TimePickerDoc extends React.Component<{}, {time: string}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            time: '14:00',
+        };
+    }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -59,6 +71,36 @@ export default class TimePickerDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+                <p className='docs-page__paragraph'>TimePickerV2:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TimePickerV2
+                                value={this.state.time}
+                                label='This is Label'
+                                disabledOptions={{
+                                    minutes: changedMinutes,
+                                }}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TimePickerV2
+                            value={this.state.time}
+                            label='This is Label'
+                            disableOptions={{
+                                minutes: changedMinutes,
+                            }}
+                            onChange={(time) => {
+                                this.setState({time})
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />

package/examples/pages/components/Togglebox.tsx

@@ -37,16 +37,30 @@ const ToggleboxDocs = () => {
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Togglebox</h2>
             <Markup.ReactMarkupCodePreview>{`
-                    <ToggleBox title="togglebox title">togglebox content</ToggleBox>
+                    <ToggleBox variant="simple" title="togglebox title">togglebox content</ToggleBox>
                 `}
             </Markup.ReactMarkupCodePreview>
             <p className="docs-page__paragraph">Simple ToggleBox:</p>
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
                     <div style={{ marginTop: "2em" }}>
-                        <ToggleBox variant='simple' title="Simple togglebox">Togglebox content</ToggleBox>
+                        <ToggleBox variant="simple" title="Simple togglebox">Togglebox content</ToggleBox>
                         <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                        <ToggleBox variant='simple' title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
+                            <div className="px-4 text-sm line-height-lg">
+                                <p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. 
+                                Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
+                                Curabitur blandit tempus porttitor.</p>
+
+                                <p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere 
+                                erat a ante venenatis dapibus posuere velit aliquet.</p>
+
+                                <p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id 
+                                ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                            </div>
+                        </ToggleBox>
                     </div>
                 </Markup.ReactMarkupPreview>
                 <Markup.ReactMarkupCode>{`
@@ -168,12 +182,13 @@ const ToggleboxDocs = () => {
             <PropsList>
                 <Prop name='title' isRequired={true} type='string' default='null' description='Togglebox title' />
                 <Prop name='badge' isRequired={false} type='JSX.Element' default='null' description='Badge' />
-                <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
                 <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
                 <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
                 <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
                 <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
                 <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
+                <Prop name='circledChevron' isRequired={false} type='boolean' default='false' description='Adds a light, circle-shaped background around the chevron.' />
+                <Prop name='largeTitle' isRequired={false} type='boolean' default='false' description='This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option.' />
             </PropsList>
 
             <h3 className="docs-page__h3">Props: variant: 'custom-header'</h3>

package/examples/pages/components/TreeMenu.tsx

@@ -176,6 +176,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}
@@ -208,6 +209,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options2}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}

package/examples/pages/components/utilities/TextUtilities.tsx

@@ -203,6 +203,45 @@ class TextUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
+                <div className='docs-page__container-block--line-height'>
+                    <h3 className="docs-page__h3">Line Height</h3>
+                    <p className="docs-page__paragraph">
+                        Utilities for managing the line height of an element.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>line-height-1</td>
+                                    <td>{'line-height: 1;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-xs</td>
+                                    <td>{'line-height: 1.1;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-sm</td>
+                                    <td>{'line-height: 1.2;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-md</td>
+                                    <td>{'line-height: 1.4;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-lg</td>
+                                    <td>{'line-height: 1.5;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
                 <div className='docs-page__container-block--font-style'>
                     <h3 className="docs-page__h3">Text Align</h3>
                     <div className="utilities-table__container">

package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx

@@ -75,7 +75,7 @@ class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div style={{height: 600,}} className='sd-border--light'>
-                            <Layout.PageLayout
+                            <Layout.PageLayout fullHeight={true}
                                 header={(
                                     <SubNav zIndex={2}>
                                         <ButtonGroup align="inline">

package/package.json

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

package/react/components/DatePicker.d.ts

@@ -13,6 +13,8 @@ interface IDatePickerBase extends IInputWrapper {
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
     onChange(valueNext: Date | null): void;
+    maxDate?: Date;
+    minDate?: Date;
     'data-test-id'?: string;
 }
 interface IState {

package/react/components/DatePicker.js

@@ -61,6 +61,7 @@ var calendar_1 = require("@superdesk/primereact/calendar");
 var lodash_1 = require("lodash");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
+var Button_1 = require("./Button");
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -137,7 +138,10 @@ var DatePicker = /** @class */ (function (_super) {
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
         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 },
-            React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
+            React.createElement(calendar_1.Calendar, { footerTemplate: this.props.required !== true ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
+                    React.createElement(Button_1.Button, { onClick: function () {
+                            _this.props.onChange(null);
+                        }, 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) {
@@ -162,7 +166,7 @@ var DatePicker = /** @class */ (function (_super) {
                                 _this.instance.hideOverlay();
                             }
                         } }, label));
-                }))); }, appendTo: document.body, disabled: this.props.disabled, onBlur: function (event) {
+                }))); }, 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/Layouts/LayoutContainer.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
+    fullHeight?: boolean;
 }
 export declare class LayoutContainer extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/LayoutContainer.js

@@ -37,16 +37,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutContainer = void 0;
 var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var LayoutContainer = /** @class */ (function (_super) {
     __extends(LayoutContainer, _super);
     function LayoutContainer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     LayoutContainer.prototype.render = function () {
-        return (React.createElement("div", { className: 'sd-content-wrapper__main-content-area sd-main-content-grid comfort' }, this.props.children));
+        var classes = (0, classnames_1.default)('sd-content-wrapper__main-content-area sd-main-content-grid comfort', {
+            'sd-main-content-grid--full-height': this.props.fullHeight,
+        });
+        return (React.createElement("div", { className: classes }, this.props.children));
     };
     return LayoutContainer;
 }(React.PureComponent));

package/react/components/Layouts/PageLayout.d.ts

@@ -9,6 +9,7 @@ interface IProps {
     rightPanelOpen?: boolean;
     leftPanel?: React.ReactNode;
     leftPanelOpen?: boolean;
+    fullHeight?: boolean;
 }
 export declare class PageLayout extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/PageLayout.js

@@ -59,7 +59,7 @@ var PageLayout = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     PageLayout.prototype.render = function () {
-        return (React.createElement(Layouts_1.LayoutContainer, null,
+        return (React.createElement(Layouts_1.LayoutContainer, { fullHeight: this.props.fullHeight },
             this.props.header && (React.createElement(Layouts_1.HeaderPanel, null, this.props.header)),
             this.props.leftPanel && (React.createElement(Layouts_1.LeftPanel, { open: this.props.leftPanelOpen }, this.props.leftPanel)),
             this.props.main && (React.createElement(Layouts_1.MainPanel, __assign({ className: this.props.mainClassName }, this.props.mainProps), this.props.main)),

package/react/components/TimePickerV2.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps extends IInputWrapper {
+    value: string;
+    allowSeconds?: boolean;
+    disabledOptions: {
+        hours?: Array<number>;
+        minutes?: Array<number>;
+        seconds?: Array<number>;
+    };
+    'data-test-id'?: string;
+    onChange(valueNext: string): void;
+}
+export declare class TimePickerV2 extends React.PureComponent<IProps> {
+    private is12HourFormat;
+    constructor(props: IProps);
+    /**
+     * in case initial time is not valid according to disabled options, we return first valid option
+     */
+    private getCorrectedTime;
+    private getOptionsForTimeUnit;
+    private handleTimeChange;
+    componentDidMount(): void;
+    padValue(value: number): string;
+    updatedTimeUnit(): string[];
+    render(): JSX.Element;
+}
+export {};

package/react/components/TimePickerV2.js

@@ -0,0 +1,189 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePickerV2 = void 0;
+var React = __importStar(require("react"));
+var Form_1 = require("./Form");
+var lodash_1 = require("lodash");
+var TimePickerV2 = /** @class */ (function (_super) {
+    __extends(TimePickerV2, _super);
+    function TimePickerV2(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleTimeChange = _this.handleTimeChange.bind(_this);
+        _this.getCorrectedTime = _this.getCorrectedTime.bind(_this);
+        _this.getOptionsForTimeUnit = _this.getOptionsForTimeUnit.bind(_this);
+        _this.padValue = _this.padValue.bind(_this);
+        var hour = new Date().toLocaleTimeString([], { hour: 'numeric' });
+        _this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
+        return _this;
+    }
+    /**
+     * in case initial time is not valid according to disabled options, we return first valid option
+     */
+    TimePickerV2.prototype.getCorrectedTime = function (timeUnit, timeStringArray) {
+        var _a;
+        var dividedValue = this.props.value.split(':');
+        var value = (function () {
+            if (timeUnit === 'hours') {
+                return dividedValue[0];
+            }
+            else if (timeUnit === 'minutes') {
+                return dividedValue[1];
+            }
+            return dividedValue[2];
+        })();
+        if (!((_a = this.props.disabledOptions[timeUnit]) !== null && _a !== void 0 ? _a : []).includes(parseInt(value, 10)) && value != null) {
+            return value;
+        }
+        return timeStringArray[0];
+    };
+    TimePickerV2.prototype.getOptionsForTimeUnit = function (timeUnit) {
+        var _this = this;
+        var format12HourArr = (0, lodash_1.range)(1, 13);
+        format12HourArr.unshift(format12HourArr.pop());
+        var timeUnitArray = (function () {
+            if (timeUnit === 'hours') {
+                if (_this.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 = _this.props.disabledOptions[timeUnit]) !== null && _a !== void 0 ? _a : []).includes(item); })
+            .map(function (value) { return (0, lodash_1.padStart)(value.toString(), 2, '0'); });
+    };
+    TimePickerV2.prototype.handleTimeChange = function (index, newValue) {
+        var current = this.props.value.split(':');
+        var updated12HourValue = (function () {
+            if (parseInt(current[0], 10) >= 12) {
+                if (newValue === '12') {
+                    return newValue;
+                }
+                else {
+                    return (parseInt(newValue, 10) + 12).toString();
+                }
+            }
+            else {
+                if (newValue === '12') {
+                    return '00';
+                }
+                else {
+                    return newValue;
+                }
+            }
+        })();
+        current[index] = this.is12HourFormat ? updated12HourValue : newValue;
+        this.props.onChange(current.join(':'));
+    };
+    TimePickerV2.prototype.componentDidMount = function () {
+        var correctedTime = [
+            this.getCorrectedTime('hours', this.getOptionsForTimeUnit('hours')),
+            ':',
+            this.getCorrectedTime('minutes', this.getOptionsForTimeUnit('minutes')),
+            this.props.allowSeconds
+                ? ":".concat(this.getCorrectedTime('seconds', this.getOptionsForTimeUnit('seconds')))
+                : '',
+        ].join('');
+        if (this.props.value !== correctedTime) {
+            this.props.onChange(correctedTime);
+        }
+    };
+    TimePickerV2.prototype.padValue = function (value) {
+        return (0, lodash_1.padStart)((value).toString(), 2, '0');
+    };
+    TimePickerV2.prototype.updatedTimeUnit = function () {
+        var timeUnitValuesArray = this.props.value.split(':');
+        /**
+        * updating the initial value from props
+        */
+        if (this.is12HourFormat) {
+            if (parseInt(timeUnitValuesArray[0], 10) > 12) {
+                timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
+            }
+        }
+        return timeUnitValuesArray;
+    };
+    TimePickerV2.prototype.render = function () {
+        var _this = this;
+        var timeUnitValuesArray = this.updatedTimeUnit();
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex },
+            React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
+                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
+                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {
+                            var target = _a.target;
+                            _this.handleTimeChange(0, target.value);
+                        } }, this.getOptionsForTimeUnit('hours').map(function (hour) { return (React.createElement("option", { value: hour, label: hour, key: hour })); })),
+                    React.createElement("span", { className: 'time-picker-v2-suffix' }, ":")),
+                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
+                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[1], onChange: function (_a) {
+                            var target = _a.target;
+                            _this.handleTimeChange(1, target.value);
+                        } }, this.getOptionsForTimeUnit('minutes').map(function (minute) { return (React.createElement("option", { value: minute, label: minute, key: minute })); })),
+                    this.props.allowSeconds && (React.createElement("span", { className: 'time-picker-v2-suffix' }, ":"))),
+                this.props.allowSeconds && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
+                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[2], onChange: function (_a) {
+                            var target = _a.target;
+                            _this.handleTimeChange(2, target.value);
+                        } }, this.getOptionsForTimeUnit('seconds').map(function (second) { return (React.createElement("option", { value: second, label: second, key: second })); })))),
+                this.is12HourFormat && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
+                    React.createElement("span", { className: 'time-picker-v2-suffix' }),
+                    React.createElement("select", { className: 'sd-input__select', value: (parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM', onChange: function (_a) {
+                            var target = _a.target;
+                            var splitValue = _this.props.value.split(':');
+                            if (target.value === 'PM') {
+                                splitValue[0] = _this.padValue(parseInt(splitValue[0], 10) + 12);
+                            }
+                            else {
+                                splitValue[0] = _this.padValue(parseInt(splitValue[0], 10) - 12);
+                            }
+                            _this.props.onChange(splitValue.join(':'));
+                        } },
+                        React.createElement("option", { value: 'AM', label: 'AM' }),
+                        React.createElement("option", { value: 'PM', label: 'PM' })))))));
+    };
+    return TimePickerV2;
+}(React.PureComponent));
+exports.TimePickerV2 = TimePickerV2;

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

@@ -4,6 +4,7 @@ interface IState {
     isOpen: boolean;
 }
 export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    htmlId: string;
     constructor(props: IPropsCustomHeader);
     toggle: () => void;
     render(): JSX.Element;