superdesk-ui-framework 3.1.9 → 3.1.13

package/examples/pages/design-patterns.html

@@ -8,9 +8,7 @@
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
-    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
-        <i role="presentation" class="icon-adjust"></i>
-    </button>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 
-<doc-design-patterns class="sd-wrap-helper"></doc-react>
+<doc-design-patterns class="d-contents"></doc-react>

package/examples/pages/design.html

@@ -8,6 +8,7 @@
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 
 <aside class="docs-page__sidebar">

package/examples/pages/main.html

@@ -8,6 +8,7 @@
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 
 <main class="docs-page__content">

package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx

@@ -728,7 +728,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                     contentBg='medium'
                     size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}
                 >
-                    <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
+                    <Container direction='column' className='justify-center items-center py-2' gap='medium'>
                         <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
                         <Text align='center' size='medium'>
                             The show <strong>Marker</strong> has been successfully created.<br />

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -33,6 +33,9 @@ interface IState {
     valueS2: any;
     thisTheme: string;
     isExpanded: boolean;
+    openCollapsibleOne: boolean;
+    openCollapsibleTwo: boolean;
+    openCollapsibleThree: boolean;
 }
 
 let options2 = [
@@ -75,6 +78,9 @@ export class TestGround extends React.Component<IProps, IState> {
             valueS2: undefined,
             thisTheme: 'light-ui',
             isExpanded: false,
+            openCollapsibleOne: false,
+            openCollapsibleTwo: false,
+            openCollapsibleThree: false,
         }
     }
 
@@ -153,6 +159,212 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
+                        <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
+                            {/* Header */}
+                            <div className='new-collapse-box__header'>
+                                <div className='new-collapse-box__header-inner'>
+                                    <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                        <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                        <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                            <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                        </div>
+                                        <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                            <div className="sd-list-item__row">
+                                                <span className="sd-list-item__slugline">Planning Slug</span>
+                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                    <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
+                                                </span>
+                                            </div>
+                                            <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                                <Label text='draft' style='translucent'/>
+                                                <span className="sd-margin-s--auto">
+                                                <AvatarGroup
+                                                    size="x-small"
+                                                    items={avatars}
+                                                />
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleOne: !prevState.openCollapsibleOne}))}>
+                                    <span className='label label--translucent new-collapse-box__divider-label'>
+                                        {this.state.openCollapsibleOne ? 'Show less' : 'Show more'}
+                                    </span>
+                                </button>
+                            </div>
+
+                            {/* Content */}
+                            <div className='new-collapse-box__content'>
+                                <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                    <div>
+                                        <FormLabel text='Name'/>
+                                        <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Date'/>
+                                        <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Repeat Summary'/>
+                                        <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='No. of events'/>
+                                        <Text size='small' weight='medium'>1</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+
+                                    {/* NESTED BOX */}
+                                    <div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleTwo ? 'new-collapse-box--open' : ''}`}>
+                                        {/* Header */}
+                                        <div className='new-collapse-box__header'>
+                                            <div className='new-collapse-box__header-inner'>
+                                                <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                                    <div className="sd-list-item__column sd-list-item__column--no-border pe-1">
+                                                    <Avatar
+                                                        displayName="Jeffrey Lebowski"
+                                                        imageUrl={null}
+                                                        initials='JL'
+                                                        size="medium"
+                                                        icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
+                                                    />
+
+                                                    </div>
+                                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                                        <div className="sd-list-item__row">
+                                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                                <span className="sd-list-item__compound-text">
+                                                                    <span className="sd-list-item__text-strong">Photo</span>
+                                                                    <span className="sd-list-item__text-light">//</span>
+                                                                    <span className="sd-list-item__text">Archive</span>
+                                                                </span>
+                                                                
+                                                            </span>
+                                                            <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                        </div>
+                                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
+                                                            <span className="sd-list-item__compound-text">
+                                                                <span className="sd-list-item__text-label">Desk:</span>
+                                                                <span>Sports</span>
+                                                            </span>
+                                                            <span className="sd-list-item__compound-text">
+                                                                <span className="sd-list-item__text-label">Assignee:</span>
+                                                                <span>Jeffrey Lebowski</span>
+                                                            </span>
+                                                            <span className='sd-margin-s--auto'>
+                                                                <Label text='in progress' style='translucent' type='success'/>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleTwo: !prevState.openCollapsibleTwo}))}>
+                                                <span className='label label--translucent new-collapse-box__divider-label'>
+                                                    {this.state.openCollapsibleTwo ? 'Show less' : 'Show more'}
+                                                </span>
+                                            </button>
+                                        </div>
+
+                                        {/* Content */}
+                                        <div className='new-collapse-box__content'>
+                                            <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                                <div>
+                                                    <FormLabel text='Name'/>
+                                                    <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='Current Date'/>
+                                                    <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='Current Repeat Summary'/>
+                                                    <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                                </div>
+                                                <ContentDivider type="dashed" margin='x-small' />
+                                                <div>
+                                                    <FormLabel text='No. of events'/>
+                                                    <Text size='small' weight='medium'>1</Text>
+                                                </div>
+                                                {/* <ContentDivider type="dashed" margin='x-small' /> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Second Collapsible */}
+
+                        <div style={{maxWidth: '600px'}} className={`mt-2 sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleThree ? 'new-collapse-box--open' : ''}`}>
+                            {/* Header */}
+                            <div className='new-collapse-box__header'>
+                                <div className='new-collapse-box__header-inner'>
+                                    <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                        <div className="sd-list-item__border sd-list-item__border--active"></div>
+                                        <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                            <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                        </div>
+                                        <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                            <div className="sd-list-item__row">
+                                                <span className="sd-list-item__slugline">Planning Item Slug</span>
+                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                    <span className="sd-list-item__text-strong">Aenean eu leo quam. Pellentesque ornare sem lacinia quam</span>
+                                                </span>
+                                            </div>
+                                            <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                                <Label text='in progress' type='success' style='translucent'/>
+                                                <span className="sd-margin-s--auto">
+                                                <AvatarGroup
+                                                    size="x-small"
+                                                    items={avatars}
+                                                />
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleThree: !prevState.openCollapsibleThree}))}>
+                                    <span className='label label--translucent new-collapse-box__divider-label'>
+                                        {this.state.openCollapsibleThree ? 'Show less' : 'Show more'}
+                                    </span>
+                                </button>
+                            </div>
+
+                            {/* Content */}
+                            <div className='new-collapse-box__content'>
+                                <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                                    <div>
+                                        <FormLabel text='Name'/>
+                                        <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Date'/>
+                                        <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='Current Repeat Summary'/>
+                                        <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                    <div>
+                                        <FormLabel text='No. of events'/>
+                                        <Text size='small' weight='medium'>1</Text>
+                                    </div>
+                                    <ContentDivider type="dashed" margin='x-small' />
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr />
+
                         <SubNav color='darker'>
                             <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
                                 <button 
@@ -162,7 +374,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <Icon name='chevron-left-thin' />
                                 </button>
                             </Tooltip>
-                            <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+                            <div className='text-2xs text-uppercase d-flex ms-2 gap-0-5'>
                                 <span className='font-medium'>News desk</span>
                                 <span className='font-light text-color-subdued'>/</span>
                                 <span className='text-color-muted'>Working stage</span>

package/examples/pages/playgrounds.html

@@ -8,6 +8,7 @@
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 <main class="docs-page__content">
     <div class="docs-page__hero sd-margin-b--0">

package/package.json

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

package/react/components/DatePicker.d.ts

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

package/react/components/DatePicker.js

@@ -137,7 +137,7 @@ 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, { showButtonBar: this.props.showButtonBar, 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 +162,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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IPropsCustomHeader } from "../ToggleBox/index";
+interface IState {
+    isOpen: boolean;
+}
+export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    htmlId: string;
+    constructor(props: IPropsCustomHeader);
+    toggle: () => void;
+    render(): JSX.Element;
+}
+export {};