superdesk-ui-framework 3.1.9 → 3.1.13

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+import {IPropsCustomHeader} from "../ToggleBox/index";
+
+interface IState {
+    isOpen: boolean;
+}
+
+export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    htmlId = nextId('togglebox-');
+    constructor(props: IPropsCustomHeader) {
+        super(props);
+        this.state = {
+            isOpen: this.props.initiallyOpen ?? false,
+        };
+    }
+
+    toggle = (): void => {
+        this.setState({isOpen: !this.state.isOpen}, () => {
+            this.props.onToggle?.(this.state.isOpen);
+        });
+    }
+
+    render() {
+        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'>
+                    <div className='new-collapse-box__header-inner'>
+                        {this.props.header}
+                    </div>
+
+                    <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}
+                        </span>
+                    </button>
+                </div>
+
+                <div className='new-collapse-box__content'>
+                    <div id={this.htmlId} aria-hidden={!isOpen} className='new-collapse-box__content-inner p-2 pt-0-5'>
+                        {this.props.children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx}

@@ -1,18 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
-
-interface IProps {
-    title: string;
-    badge?: JSX.Element;
-    children: any;
-    hideUsingCSS?: boolean;
-    initiallyOpen?: boolean; // defaults to false
-    className?: string;
-    margin?: 'none' | 'small' | 'normal' | 'large';
-    onOpen?(): void;
-    onClose?(): void;
-}
+import {IPropsSimple} from "../ToggleBox/index";
 
 interface IState {
     isOpen: boolean;
@@ -24,9 +13,9 @@ interface IState {
  * @description ToggleBox used to open/close a set of details
  */
 
-export class ToggleBox extends React.PureComponent<IProps, IState> {
-    htmlId = nextId();
-    constructor(props: IProps) {
+export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
+    htmlId = nextId('togglebox-');
+    constructor(props: IPropsSimple) {
         super(props);
         this.state = {
             isOpen: this.props.initiallyOpen ?? false,
@@ -56,10 +45,13 @@ export class ToggleBox extends React.PureComponent<IProps, 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 (
@@ -72,7 +64,8 @@ export class ToggleBox extends React.PureComponent<IProps, 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" />
@@ -86,23 +79,9 @@ export class ToggleBox extends React.PureComponent<IProps, 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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {SimpleToggleBox} from './SimpleToggleBox';
+import {CustomHeaderToggleBox} from './CustomHeaderToggleBox';
+
+export interface IPropsSimple {
+    variant: 'simple';
+    title: string;
+    badge?: JSX.Element;
+    children: React.ReactNode;
+    circledChevron?: boolean;
+    initiallyOpen?: boolean; // defaults to false
+    largeTitle?: boolean;
+
+    className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
+    onOpen?(): void;
+    onClose?(): void;
+}
+
+export interface IPropsCustomHeader {
+    variant: 'custom-header'; // always visible
+    header: React.ReactNode;
+    children: React.ReactNode;
+    toggleButtonLabel: string;
+    initiallyOpen?: boolean;
+    onToggle?(isOpen: boolean): void;
+}
+
+type IProps = IPropsSimple | IPropsCustomHeader;
+
+export class ToggleBox extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.variant === "simple") {
+            return (
+                <SimpleToggleBox {...this.props} />
+            );
+        } else {
+            return (
+                <CustomHeaderToggleBox {...this.props} />
+            );
+        }
+    }
+}

package/app-typescript/components/TreeMenu.tsx

@@ -57,7 +57,7 @@ function nodeCanBeSelected<T>(item: IParent<T> | IChildren<T>): item is IChildre
 
 function onSelect<T>(item: ITreeMenuNode<T>) {
     if (nodeCanBeSelected(item)) {
-        return item.onSelect;
+        return item.onSelect();
     }
 
     return undefined;
@@ -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,15 +412,22 @@ 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
                                             key={i}
                                             option={option}
                                             handleTree={this.handleTree}
-                                            onClick={onSelect(option)}
+                                            onClick={() => {
+                                                onSelect(option);
+                                            }}
                                             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}

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -455,11 +455,9 @@ export class TreeSelect<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<ITreeNode<T>>) {
@@ -738,6 +736,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         }
                                     }}
                                     data-test-id="open-popover"
+                                    aria-haspopup="tree"
+                                    aria-expanded={this.state.openDropdown}
                                 >
                                     <i className="icon-plus-large"></i>
                                 </button>
@@ -893,12 +893,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         ref={this.dropdownRef}
                     >
                         <div className='autocomplete__header'>
-                            <div
-                                className="autocomplete__icon"
-                                onClick={() => {
-                                    this.backButton();
-                                }}
-                            >
+                            <div className="autocomplete__icon">
                                 <Icon name="search" className="search"></Icon>
                             </div>
 
@@ -968,6 +963,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         className="suggestion-list suggestion-list--multi-select"
                                         ref={this.ref}
                                         data-test-id="options"
+                                        role='tree'
+                                        aria-multiselectable={this.props.allowMultiple}
                                     >
                                         {this.state.options.map((option, i: React.Key | undefined) => {
                                             let selectedItem = this.state.value.some((obj) =>
@@ -981,11 +978,15 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                     handleTree={this.handleTree}
                                                     selectedItem={selectedItem}
                                                     allowMultiple={this.props.allowMultiple}
+                                                    parentCategory={this.state.buttonValue == null
+                                                        ? undefined
+                                                        : this.props.getLabel(this.state.buttonValue.value)
+                                                    }
                                                     getBorderColor={this.props.getBorderColor}
                                                     getBackgroundColor={this.props.getBackgroundColor}
                                                     getId={this.props.getId}
-                                                    optionTemplate={this.props.optionTemplate}
                                                     getLabel={this.props.getLabel}
+                                                    optionTemplate={this.props.optionTemplate}
                                                     onKeyDown={() => this.setState({
                                                         buttonTarget: [
                                                             ...this.state.buttonTarget,

package/app-typescript/components/TreeSelect/TreeSelectItem.tsx

@@ -12,6 +12,7 @@ interface IProps<T> {
     selectedItem?: boolean;
     disabledItem?: boolean;
     allowMultiple?: boolean;
+    parentCategory?: string | undefined;
     handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -24,9 +25,14 @@ interface IProps<T> {
 
 export class TreeSelectItem<T> extends React.Component<IProps<T>> {
     render() {
+        const ariaLabel = this.props.parentCategory !== undefined
+            ? `${this.props.getLabel(this.props.option.value)}, parent ${this.props.parentCategory}`
+            : this.props.getLabel(this.props.option.value);
+
         return (
             <li
                 className='suggestion-item suggestion-item--multi-select'
+                role='none'
                 onClick={(event) => {
                     if (!this.props.disabledItem) {
                         this.props.onClick?.();
@@ -49,6 +55,9 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     }}
                     disabled={this.props.disabledItem}
                     data-test-id="option"
+                    role='treeItem'
+                    aria-selected={this.props.selectedItem === true}
+                    aria-disabled={this.props.disabledItem === true}
                 >
                     {(this.props.getBorderColor && !this.props.allowMultiple)
                         && <div
@@ -74,6 +83,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                                 }
                                 : undefined
                         }
+                        aria-label={ariaLabel}
                     >
                         {this.props.optionTemplate
                             ? this.props.optionTemplate(this.props.option.value)
@@ -82,7 +92,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     </span>
 
                     {this.props.option.children
-                        && <span className="suggestion-item__icon">
+                        && <span className="suggestion-item__icon" aria-hidden="true">
                             <Icon name="chevron-right-thin"></Icon>
                         </span>
                     }

package/app-typescript/index.ts

@@ -27,6 +27,7 @@ export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
 export { TimePicker } from './components/TimePicker';
+export { TimePickerV2 } from './components/TimePickerV2';
 export { FormLabel } from './components/FormLabel';
 export { Switch } from './components/Switch';
 export { SwitchGroup } from './components/SwitchGroup';
@@ -69,7 +70,7 @@ export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemConte
 } from './components/GridItem';
 export { toasted } from './components/Toast';
 export { Menu } from './components/Menu';
-export { ToggleBox } from './components/Togglebox';
+export { ToggleBox } from './components/ToggleBox/index';
 export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
 export { ThemeSelector } from './components/ThemeSelector';

package/dist/components/Alerts.tsx

@@ -142,7 +142,7 @@ export default class AlertDoc extends React.Component {
                 This will strip all margins and the border-radius from the component. Hollow style is not recommended in this case, and small size is advised.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
                             <PanelElements.Panel open={true} side='left' size='small'>
                                 <PanelElements.PanelHeader title='Panel example' onClose={()=> false}>
                                     <Alert type='warning' icon='exclamation-sign' banner={true} size='small'>

package/dist/components/ContentDivider.tsx

@@ -125,7 +125,7 @@ export default class ContentDividerDoc extends React.Component {
                         </div>
                         <p className="docs-page__paragraph ">// With text</p>
                         <p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
-                        <div className='docs-page__content-row sd-display--flex'>
+                        <div className='docs-page__content-row d-flex'>
                             <div style={{width:'100%'}}>
                                 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
                                 magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit

package/dist/components/DragHandleDocs.tsx

@@ -23,7 +23,7 @@ export default class DragHandleDocs extends React.Component {
                             offering a wide range of size options.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle dotsInRow='2' dotRows='5' />
                                 <DragHandle dotsInRow='2' dotRows='8' />
                                 <DragHandle dotsInRow='3' dotRows='6' />
@@ -39,7 +39,7 @@ export default class DragHandleDocs extends React.Component {
                             To be used within list items, draggable labels, and similar contexts.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle blank={true} />
                                 <DragHandle dotsInRow='2' dotRows='10' blank={true} />
                                 <DragHandle dotsInRow='4' dotRows='10' blank={true} />