superdesk-ui-framework 3.1.12 → 3.1.13

package/app/styles/_helpers.scss

@@ -1721,6 +1721,23 @@ h6 {
     word-break: break-all;
 }
 
+// LINE HIGHT
+.line-height-1 {
+    line-height: 1;
+}
+.line-height-xs {
+    line-height: 1.1;
+}
+.line-height-sm {
+    line-height: 1.2;
+}
+.line-height-md {
+    line-height: 1.4;
+}
+.line-height-lg {
+    line-height: 1.5;
+}
+
 // LINE CLAMP
 // limit the number of horizontal lines in an elemnt (e.g. <p>)
 // it doesn't work if the element has set flex-grow: 1;

package/app/styles/_toggle-box.scss

@@ -2,30 +2,31 @@
 
 .toggle-box {
     position: relative;
-    align-self: stretch;
-
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    transition: grid-template-rows 0.2s ease;
     &.hidden {
+        grid-template-rows: auto 0fr auto;
+        transition: grid-template-rows 0.2s ease;
         .toggle-box__chevron {
             i {
                 transform: rotate(0);
             }
         }
-
         .toggle-box__chevron--circle {
             background-color: var(--sd-colour-btn-bg-neutral);
-
             i {
                 color: var(--color-text-light);
             }
         }
-
         .toggle-box__content-wraper {
-            max-height: 0;
             transition: all ease-out .5s;
         }
-
-        .toggle-box__header {
-            margin-block-end: 0;
+    }
+    &.open {
+        .toggle-box__content {
+            animation: fadeIn 0.3s ease-in 0s 1;
         }
     }
 
@@ -39,23 +40,35 @@
             }
         }
     }
+    &.toggle-box--large-title {
+        .toggle-box__header,
+        a.toggle-box__header  {
+            .toggle-box__label {
+                font-size: var(--text-size-medium);
+                color: var(--color-text);
+                text-transform: none;
+                font-weight: 500;
+            }
+            &:hover {
+                .toggle-box__label {
+                    color: var(--sd-colour-interactive);
+                }
+            }
+        }
+    }
 
     &.toggle-box--marg-b10 {
         margin-block-end: 1rem;
     }
-
     &.toggle-box--margin-none {
         margin-block-end: 0;
     }
-
     &.toggle-box--margin-small {
         margin-block-end: $sd-base-increment * 2;
     }
-
     &.toggle-box--margin-normal {
         margin-block-end: $sd-base-increment * 3;
     }
-
     &.toggle-box--margin-large {
         margin-block-end: $sd-base-increment * 4;
     }
@@ -73,12 +86,12 @@
 
 .toggle-box__header,
 a.toggle-box__header {
+    grid-row: 1 / 2;
     display: flex;
     cursor: pointer;
-    margin-block-end: 1.8rem;
     align-items: center;
     text-decoration: none !important;
-
+    align-self: flex-start;
     .toggle-box__chevron {
         i {
             transition: all .3s;
@@ -87,10 +100,11 @@ a.toggle-box__header {
     }
 
     .toggle-box__label {
-        font-size: 1.2rem;
-        padding: 0 1rem 0 0.8rem;
-        color: var(--color-label-text);
+        font-size: var(--text-size-x-small);
+        padding: 0 var(--space--2) 0 var(--space--1);
+        color: var(--color-text-light);
         text-transform: uppercase;
+        transition: color 0.2s ease;
     }
 
     .toggle-box__line {
@@ -101,7 +115,8 @@ a.toggle-box__header {
     }
 
     &:hover {
-        .toggle-box__label {
+        .toggle-box__label,
+         {
             color: var(--sd-colour-interactive);
             text-decoration: none !important;
         }
@@ -115,7 +130,6 @@ a.toggle-box__header {
         .toggle-box__chevron {
             box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
         }
-
         .toggle-box__label {
             color: var(--sd-colour-interactive);
         }
@@ -127,30 +141,33 @@ a.toggle-box__header {
 }
 
 .toggle-box__content-wraper {
-    transition: all ease-out .5s;
+    grid-row: 2 / 3;
+    transition: grid-template-rows 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
 }
 
-.toggle-box__content {  
-    animation: fadeIn 0.3s ease-in 0s 1;
+.toggle-box__content {
+    overflow-y: auto;
+    padding-block-start: 1.8rem;
+    flex:1;
 }
 
 // Buttons
 .toggle-box__button {
     color: $grayLight;
     cursor: pointer;
-
     i {
         color: $grayLight;
         margin-inline-end: 0.5rem;
         vertical-align: text-bottom;
     }
-    
     &:hover {
         text-decoration: none;
         color: $white;
         i { color: $white; }
     }
 }
-
-
-

package/app/styles/form-elements/_inputs.scss

@@ -1365,3 +1365,17 @@
         opacity: 0;
     }
 }
+
+.sd__input__time-picker-v2 {
+    display: flex;
+}
+
+.input-wrapper__time-picker-v2 {
+    display: flex;
+    align-items: center;
+}
+
+.time-picker-v2-suffix {
+    padding: 0 8px;
+    font-size: 1.6rem;
+}

package/app/styles/grids/_grid-layout.scss

@@ -700,6 +700,9 @@ $planningEditor-width: 53rem;
     grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
     grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
     overflow: auto;
+    &.sd-main-content-grid--full-height {
+        height: 100%;
+    }
 }
 
 .sd-main-content-grid__header {

package/app-typescript/components/DatePicker.tsx

@@ -37,6 +37,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;
 }
 
@@ -157,6 +160,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 tabindex={this.props.tabindex}
             >
                 <Calendar
+                    showButtonBar={this.props.showButtonBar}
                     inputId={this.htmlId}
                     ariaLabelledBy={this.htmlId + 'label'}
                     ref={(ref) => {
@@ -208,6 +212,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                     )}
                     appendTo={document.body} // making it work inside `overflow:hidden`
                     disabled={this.props.disabled}
+                    minDate={this.props.minDate}
+                    maxDate={this.props.maxDate}
                     onBlur={(event) => {
                         // @ts-ignore: Object is possibly 'null'.
                         if (!event?.target.value) {

package/app-typescript/components/Layouts/LayoutContainer.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
+    fullHeight?: boolean;
 }
 
 export class LayoutContainer extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('sd-content-wrapper__main-content-area sd-main-content-grid comfort', {
+            'sd-main-content-grid--full-height': this.props.fullHeight,
+        },
+    );
         return (
-            <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Layouts/PageLayout.tsx

@@ -19,12 +19,13 @@ interface IProps {
     rightPanelOpen?: boolean;
     leftPanel?: React.ReactNode;
     leftPanelOpen?: boolean;
+    fullHeight?: boolean; // For cases where the parent container is not display: grid;
 }
 
 export class PageLayout extends React.PureComponent<IProps> {
     render() {
         return (
-            <LayoutContainer>
+            <LayoutContainer fullHeight={this.props.fullHeight}>
                 {this.props.header && (
                     <HeaderPanel>
                         {this.props.header}

package/app-typescript/components/TimePickerV2.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { InputWrapper } from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
+import {padStart, range} from 'lodash';
+
+interface IProps extends IInputWrapper {
+    value: string; // ISO 8601, 13:59:01
+    allowSeconds?: boolean;
+    disabledOptions: {
+        hours?: Array<number>;
+        minutes?: Array<number>;
+        seconds?: Array<number>;
+    };
+    'data-test-id'?: string;
+    onChange(valueNext: string): void;
+}
+
+type ITimeUnit = 'hours' | 'minutes' | 'seconds';
+
+export class TimePickerV2 extends React.PureComponent<IProps> {
+    private is12HourFormat: boolean;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.handleTimeChange = this.handleTimeChange.bind(this);
+        this.getCorrectedTime = this.getCorrectedTime.bind(this);
+        this.getOptionsForTimeUnit = this.getOptionsForTimeUnit.bind(this);
+        this.padValue = this.padValue.bind(this);
+
+        const hour = new Date().toLocaleTimeString([], { hour: 'numeric' });
+        this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
+    }
+
+    /**
+     * in case initial time is not valid according to disabled options, we return first valid option
+     */
+    private getCorrectedTime(timeUnit: ITimeUnit, timeStringArray: Array<string>): string {
+        const dividedValue = this.props.value.split(':');
+        const value = (() => {
+            if (timeUnit === 'hours') {
+                return dividedValue[0];
+            } else if (timeUnit === 'minutes') {
+                return dividedValue[1];
+            }
+
+            return dividedValue[2];
+        })();
+
+        if (!(this.props.disabledOptions[timeUnit] ?? []).includes(parseInt(value, 10)) && value != null) {
+            return value;
+        }
+
+        return timeStringArray[0];
+    }
+
+    private getOptionsForTimeUnit(timeUnit: ITimeUnit): Array<string> {
+        let format12HourArr = range(1, 13);
+        format12HourArr.unshift(format12HourArr.pop() as number);
+
+        const timeUnitArray = (() => {
+            if (timeUnit === 'hours') {
+                if (this.is12HourFormat) {
+                    return format12HourArr;
+                } else {
+                    return range(24);
+                }
+            } else {
+                return range(60);
+            }
+        })();
+
+        return timeUnitArray
+            .filter((item) => !(this.props.disabledOptions[timeUnit] ?? []).includes(item))
+            .map((value) => padStart(value.toString(), 2, '0'));
+    }
+
+    private handleTimeChange(index: number, newValue: string) {
+        let current = this.props.value.split(':');
+
+        const updated12HourValue = (() => {
+            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(':'));
+    }
+
+    componentDidMount(): void {
+        const correctedTime = [
+            this.getCorrectedTime('hours', this.getOptionsForTimeUnit('hours')),
+            ':',
+            this.getCorrectedTime('minutes', this.getOptionsForTimeUnit('minutes')),
+            this.props.allowSeconds
+                ? `:${this.getCorrectedTime('seconds', this.getOptionsForTimeUnit('seconds'))}`
+                : '',
+        ].join('');
+
+        if (this.props.value !== correctedTime) {
+            this.props.onChange(correctedTime);
+        }
+    }
+
+    padValue(value: number) {
+        return padStart((value).toString(), 2, '0');
+    }
+
+    updatedTimeUnit() {
+        const 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;
+    }
+
+    render() {
+        const timeUnitValuesArray = this.updatedTimeUnit();
+
+        return (
+            <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}
+            >
+                <div className='sd__input__time-picker-v2' data-test-id={this.props['data-test-id']}>
+                    <div className='input-wrapper__time-picker-v2'>
+                        <select
+                            className='sd-input__select'
+                            value={timeUnitValuesArray[0]}
+                            onChange={({target}) => {
+                                this.handleTimeChange(0, target.value);
+                            }}
+                        >
+                            {this.getOptionsForTimeUnit('hours').map((hour) => (
+                                <option value={hour} label={hour} key={hour} />
+                            ))}
+                        </select>
+                        <span className='time-picker-v2-suffix'>:</span>
+                    </div>
+                    <div className='input-wrapper__time-picker-v2'>
+                        <select
+                            className='sd-input__select'
+                            value={timeUnitValuesArray[1]}
+                            onChange={({target}) => {
+                                this.handleTimeChange(1, target.value);
+                            }}
+                        >
+                            {this.getOptionsForTimeUnit('minutes').map((minute) => (
+                                <option value={minute} label={minute} key={minute} />
+                            ))}
+                        </select>
+                        {this.props.allowSeconds && (<span className='time-picker-v2-suffix'>:</span>)}
+                    </div>
+                    {this.props.allowSeconds && (
+                        <div className='input-wrapper__time-picker-v2'>
+                            <select
+                                className='sd-input__select'
+                                value={timeUnitValuesArray[2]}
+                                onChange={({target}) => {
+                                    this.handleTimeChange(2, target.value);
+                                }}
+                            >
+                                {this.getOptionsForTimeUnit('seconds').map((second) => (
+                                    <option value={second} label={second} key={second} />
+                                ))}
+                            </select>
+                        </div>
+                    )}
+                    {this.is12HourFormat && (
+                        <div className='input-wrapper__time-picker-v2'>
+                            <span className='time-picker-v2-suffix' />
+                            <select
+                                className='sd-input__select'
+                                value={(parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM'}
+                                onChange={({target}) => {
+                                    let 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(':'));
+                                }}
+                            >
+                                <option value='AM' label='AM' />
+                                <option value='PM' label='PM' />
+                            </select>
+                        </div>
+                    )}
+                </div>
+            </InputWrapper>
+        );
+    }
+}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import nextId from "react-id-generator";
 import {IPropsCustomHeader} from "../ToggleBox/index";
 
 interface IState {
@@ -7,6 +8,7 @@ interface IState {
 }
 
 export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    htmlId = nextId('togglebox-');
     constructor(props: IPropsCustomHeader) {
         super(props);
         this.state = {
@@ -24,10 +26,12 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
         let classes = classNames('sd-shadow--z1 new-collapse-box', {
             'new-collapse-box--open': this.state.isOpen,
         });
+        const { isOpen } = this.state;
 
         return (
             <div
                 className={classes}
+                aria-expanded={isOpen}
                 data-test-id='toggle-box'
             >
                 <div className='new-collapse-box__header'>
@@ -38,6 +42,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                     <button
                         className='new-collapse-box__divider'
                         onClick={this.toggle}
+                        aria-controls={this.htmlId}
                     >
                         <span className='label label--translucent new-collapse-box__divider-label'>
                             {this.props.toggleButtonLabel}
@@ -46,7 +51,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                 </div>
 
                 <div className='new-collapse-box__content'>
-                    <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                    <div id={this.htmlId} aria-hidden={!isOpen} className='new-collapse-box__content-inner p-2 pt-0-5'>
                         {this.props.children}
                     </div>
                 </div>

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

@@ -14,7 +14,7 @@ interface IState {
  */
 
 export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
-    htmlId = nextId();
+    htmlId = nextId('togglebox-');
     constructor(props: IPropsSimple) {
         super(props);
         this.state = {
@@ -45,10 +45,13 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     render() {
         let classes = classNames('toggle-box', {
             'toggle-box--margin-normal': this.props.margin === undefined,
+            'toggle-box--large-title': this.props.largeTitle,
+            'toggle-box--circle': this.props.circledChevron,
             [`toggle-box--margin-${this.props.margin}`]: this.props.margin,
             'hidden': !this.state.isOpen,
+            'open': this.state.isOpen,
         }, this.props.className);
-        const { title, hideUsingCSS, children, badge } = this.props;
+        const { title, children, badge } = this.props;
         const { isOpen } = this.state;
 
         return (
@@ -61,7 +64,8 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
                     role="button"
                     tabIndex={0}
                     onKeyDown={this.handleKeyDown}
-                    id={`togglebox-${this.htmlId}`}
+                    aria-expanded={isOpen}
+                    aria-controls={this.htmlId}
                 >
                     <div className="toggle-box__chevron">
                         <i className="icon-chevron-right-thin" />
@@ -75,23 +79,9 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
                     {badge ? badge : null}
                 </a>
                 <div className="toggle-box__content-wraper">
-                    {isOpen && !hideUsingCSS && (
-                        <div className="toggle-box__content" aria-describedby={`togglebox-${this.htmlId}`}>
-                            {children}
-                        </div>
-                    )}
-
-                    {hideUsingCSS && (
-                        <div
-                            className={classNames(
-                                'toggle-box__content',
-                                { 'toggle-box__content--hidden': !isOpen },
-                            )}
-                            aria-describedby={`togglebox-${this.htmlId}`}
-                        >
-                            {children}
-                        </div>
-                    )}
+                    <div id={this.htmlId} className="toggle-box__content" aria-hidden={!isOpen}>
+                        {children}
+                    </div>
                 </div>
             </div>
         );

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

@@ -7,8 +7,10 @@ export interface IPropsSimple {
     title: string;
     badge?: JSX.Element;
     children: React.ReactNode;
-    hideUsingCSS?: boolean;
+    circledChevron?: boolean;
     initiallyOpen?: boolean; // defaults to false
+    largeTitle?: boolean;
+
     className?: string;
     margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;

package/app-typescript/components/TreeMenu.tsx

@@ -285,11 +285,9 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
 
         const item = this.state.buttonTree.pop();
 
-        if (item != null) {
-            this.setState({
-                buttonValue: item,
-            });
-        }
+        this.setState({
+            buttonValue: item ?? null,
+        });
     }
 
     recursion(arr: Array<ITreeMenuNode<T>>) {
@@ -414,6 +412,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
                                 <ul
                                     ref={this.ref}
                                     className="suggestion-list suggestion-list--multi-select"
+                                    role='tree'
                                 >
                                     {this.state.options.map((option, i: React.Key | undefined) => (
                                         <TreeSelectItem
@@ -425,6 +424,10 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
                                             }}
                                             disabledItem={disabledItem(option)}
                                             getBorderColor={this.props.getBorderColor}
+                                            parentCategory={this.state.buttonValue == null
+                                                ? undefined
+                                                : this.props.getLabel(this.state.buttonValue.value)
+                                            }
                                             getBackgroundColor={this.props.getBackgroundColor}
                                             getId={this.props.getId}
                                             optionTemplate={this.props.optionTemplate}