superdesk-ui-framework 3.0.66 → 3.0.68

package/app/styles/components/_list-item.scss

@@ -549,22 +549,34 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
 // NESTED list items
 .sd-list-item-nested {
-    display: flex;
-    flex-direction: column;
-    //margin-block-start: .8rem;
+    --parent-item-height: 58px;
+    display: grid;
+    grid-template-rows: var(--parent-item-height) 0fr;
+    transition: grid-template-rows 0.3s ease-out;
+    & > .sd-list-item {
+        max-height: var(--parent-item-height);
+        height: var(--parent-item-height);
+    }
 }
 
 .sd-list-item-nested__childs {
     position: relative;
     z-index: 0;
-    display: flex;
-    flex-direction: column;
+    overflow: hidden !important;
+    display: grid;
+    grid-template-rows: 1fr;
     margin-inline-start: 1rem;
+    transition: all 0.3s ease-out;
 
     .sd-list-item {
         margin-block-start: 0;
         border-block-start: 1px solid var(--sd-colour-line--x-light);
     }
+    .sd-list-item-nested__childs-inner {
+        overflow: hidden;
+        opacity: 0;
+        transition: opacity 0.2s ease-out;
+    }
 }
 
 .sd-list-item-nested__parent {
@@ -574,19 +586,18 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 
 .sd-list-item-nested--collapsed {
     .sd-list-item-nested__childs {
-        transition: all ease-in 0.2s;
-        max-height: 0;
         opacity: 0;
-        margin-block-end: 0;
-        overflow: hidden;
     }
 }
 
 .sd-list-item-nested--expanded {
+    grid-template-rows: var(--parent-item-height) 1fr;
     .sd-list-item-nested__childs {
-        transition: all ease-in 0.2s;
-        max-height: 114rem;
+        grid-template-rows: 1fr;
         opacity: 1;
+        .sd-list-item-nested__childs-inner {
+            opacity: 1;
+        }
     }
 }
 

package/app-typescript/components/Autocomplete.tsx

@@ -146,9 +146,15 @@ export class Autocomplete extends React.Component<IProps, IState> {
                         onChange={(event: {originalEvent: Event, value: any}) => this.handleChange(event)}
                         onSelect={(event: {originalEvent: Event, value: any}) => this.handleSelect(event)} />
 
-                    {this.props.isSearchField && this.state.selectedItem ?
-                        <button className="sd-searchbar__cancel" onClick={() => this.handleInputClear()}><i className="icon-remove-sign" aria-label="remove-sign"></i></button>
-                    : null }
+                    {this.props.isSearchField && this.state.selectedItem
+                        ? <button
+                            className="sd-searchbar__cancel"
+                            onClick={() => this.handleInputClear()}
+                        >
+                            <i className="icon-remove-sign" aria-label="remove-sign" />
+                        </button>
+                        : null
+                    }
 
                     {!this.props.isSearchField ?
                         <div className='sd-input__message-box'>

package/app-typescript/components/Badge.tsx

@@ -22,11 +22,25 @@ export class Badge extends React.PureComponent<IProps> {
             return (
                 <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
                     {this.props.children}
-                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
+                    <span
+                        className={classes}
+                        style={{backgroundColor: this.props.hexColor}}
+                        data-test-id="badge-content"
+                    >
+                        {this.props.text}
+                    </span>
                 </div>
             );
         } else {
-            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+            return (
+                <span
+                    className={classes}
+                    style={{backgroundColor: this.props.hexColor}}
+                    data-test-id={this.props['data-test-id']}
+                >
+                    {this.props.text}
+                </span>
+            );
         }
     }
 }

package/app-typescript/components/Dropdown.tsx

@@ -259,7 +259,9 @@ export const Dropdown = ({
                     <div ref={buttonRef} style={{ display: 'content' }}>
                         {(() => {
                             const attrs = {
-                                className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
+                                className: children.props.className
+                                    ? (children.props.className + ' dropdown__toggle dropdown-toggle')
+                                    : 'dropdown__toggle dropdown-toggle',
                                 'aria-haspopup': "menu",
                                 'aria-expanded': open,
                                 onClick: toggleDisplay,

package/app-typescript/components/DropdownFirst.tsx

@@ -125,7 +125,13 @@ export const DropdownFirst = ({
     if (headerFooter) {
         return (
             <div className={classes} >
-                <button className={navDropdown ? 'dropdown__toggle navbtn dropdown-toggle' : 'dropdown__toggle nav-btn dropdown-toggle'} onClick={isOpen}>
+                <button
+                    className={navDropdown
+                        ? 'dropdown__toggle navbtn dropdown-toggle'
+                        : 'dropdown__toggle nav-btn dropdown-toggle'
+                    }
+                    onClick={isOpen}
+                >
                     {icon ?
                         (<i className={"icon-" + icon}></i>) :
                         (<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)
@@ -157,7 +163,13 @@ export const DropdownFirst = ({
         } else {
             return (
                 <div className={classes} >
-                    <button className={navDropdown ? 'dropdown__toggle navbtn dropdown-toggle' : 'dropdown__toggle nav-btn dropdown-toggle'} onClick={isOpen}>
+                    <button
+                        className={navDropdown
+                            ? 'dropdown__toggle navbtn dropdown-toggle'
+                            : 'dropdown__toggle nav-btn dropdown-toggle'
+                        }
+                        onClick={isOpen}
+                    >
                         {icon ?
                             (<i className={"icon-" + icon}></i>) :
                             (<React.Fragment>{name}<span className="dropdown__caret"></span></React.Fragment>)

package/app-typescript/components/DurationInput.tsx

@@ -261,7 +261,13 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
     }
 
     handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null) {
-        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
+        if (
+            event.key !== 'ArrowRight'
+            && event.key !== 'ArrowLeft'
+            && event.key !== 'ArrowUp'
+            && event.key !== 'ArrowDown'
+            && event.key !== 'Backspace'
+        ) {
             if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
                 const target = event.target as HTMLInputElement;
                 if (target.value.length >= 2) {
@@ -278,9 +284,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
         if (this.props.preview) {
             return (
                 <div className='sd-input__duration-input-preview'>
-                    <div><span className='duration-input-preview'>{this.state.hours}</span><span className='sd-input__suffix'>h</span></div>
-                    <div><span className='duration-input-preview'>{this.state.minutes}</span><span className='sd-input__suffix'>m</span></div>
-                    <div><span className='duration-input-preview'>{this.state.seconds}</span><span className='sd-input__suffix'>s</span></div>
+                    <div>
+                        <span className='duration-input-preview'>{this.state.hours}</span>
+                        <span className='sd-input__suffix'>h</span>
+                    </div>
+                    <div>
+                        <span className='duration-input-preview'>{this.state.minutes}</span>
+                        <span className='sd-input__suffix'>m</span>
+                    </div>
+                    <div>
+                        <span className='duration-input-preview'>{this.state.seconds}</span>
+                        <span className='sd-input__suffix'>s</span>
+                    </div>
                 </div>
             );
         }

package/app-typescript/components/EmptyState.tsx

@@ -16,10 +16,19 @@ export class EmptyState extends React.PureComponent<IProps> {
             [`content-state__image--${this.props.size}`]: this.props.size || this.props.size !== undefined,
         });
 
-        let image = require(`../../app/img/empty_states/empty-state--${this.props.size ? this.props.size : 'small'}-${this.props.illustration ? this.props.illustration : '1'}.svg`);
+        let image = require(
+            `../../app/img/empty_states/empty-state--${
+                this.props.size ? this.props.size : 'small'
+            }-${
+                this.props.illustration ? this.props.illustration : '1'
+            }.svg`,
+        );
 
         return (
-            <div className={'content-state--empty-container' + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '')}>
+            <div className={
+                    'content-state--empty-container'
+                    + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '')}
+                >
                 <div className='content-state__empty-info'>
                     <figure className={classes}>
                         <img src={image} alt={this.props.illustration} />

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

@@ -11,7 +11,18 @@ interface IPropsPanel {
     side?: 'left' | 'right';
     theme?: 'light' | 'dark';
     className?: string;
-    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto' | {custom: React.CSSProperties['width']};
+    size?:
+        'xx-small'
+        | 'x-small'
+        | 'small'
+        | 'medium'
+        | 'large'
+        | 'x-large'
+        | 'xx-large'
+        | 'xxx-large'
+        | 'full'
+        | 'auto'
+        | {custom: React.CSSProperties['width']};
     background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
     open?: boolean;
 }

package/app-typescript/components/Lists/ContentList.tsx

@@ -66,7 +66,11 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
                 }
                 {this.props.itemColum.map((item, index) => {
                     return <div
-                        className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
+                        className={`
+                            sd-list-item__column
+                            ${item.fullwidth && 'sd-list-item__column--grow'}
+                            ${!item.border && 'sd-list-item__column--no-border'}`
+                    }
                         key={index}>
                         {item.itemRow.map((e, i) => {
                             return (

package/app-typescript/components/Modal.tsx

@@ -13,7 +13,16 @@ interface IProps {
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
-    position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    position?:
+        "center"
+        | "top"
+        | "bottom"
+        | "left"
+        | "right"
+        | "top-left"
+        | "top-right"
+        | "bottom-left"
+        | "bottom-right";
     maximized?: boolean;
     maximizable?: boolean;
     headerTemplate?: JSX.Element | string;

package/app-typescript/components/Navigation/BottomNav.tsx

@@ -58,8 +58,15 @@ export class BottomNav extends React.PureComponent<IProps, IState> {
             <ul className='sd-bottom-nav-list'>
                 {this.props.items.map((item, index) => {
                     return (
-                        <li key={index}
-                            className={'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))}>
+                        <li
+                            key={index}
+                            className={
+                                'sd-bottom-nav-list__item'
+                                + (item['active']
+                                    ? ' sd-bottom-nav-list__item--active'
+                                    : (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))
+                            }
+                        >
                             <a className='sd-bottom-nav-list__item-title' onClick={(event) => {
                                 this.handleClick(index);
                                 item.onClick(event);

package/app-typescript/components/Navigation/QuickNavBar.tsx

@@ -76,7 +76,12 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
                                         );
                                 } else {
                                     return (
-                                        <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right' className="sd-quickbar-menu__list-item">
+                                        <li
+                                            key={index}
+                                            data-sd-tooltip={item['tooltip']}
+                                            data-flow='right'
+                                            className="sd-quickbar-menu__list-item"
+                                        >
                                             <a role='button' aria-label={item['tooltip']} className={'sd-quickbar__btn'}
                                                 onClick={() => this.handleClick(item, index, event)}>
                                                 <Icon size={'small'} name={item['icon']} />
@@ -98,7 +103,10 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
                                     <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
                                         <a role='button'
                                             aria-label={item['tooltip']}
-                                            className={'sd-quickbar__btn' +  (index === this.state.index ? ' sd-quickbar__btn--active' : '')}
+                                            className={
+                                                'sd-quickbar__btn'
+                                                +  (index === this.state.index ? ' sd-quickbar__btn--active' : '')
+                                            }
                                             onClick={() => this.handleClick(item, index, event)}>
                                                 <Icon size={'small'} name={item['icon']} />
                                         </a>

package/app-typescript/components/Navigation/SideBarMenu.tsx

@@ -67,9 +67,13 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
                                 data-sd-tooltip={item['tooltip']}
                                 data-flow='right'
                                 className={item.hover ? 'authoring-active__item' : ''}>
-                                    <a className={'sd-sidebar-menu__btn'
-                                    + (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
-                                    + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
+                                    <a
+                                        className={'sd-sidebar-menu__btn'
+                                            + (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
+                                            + (item['active']
+                                                ? ' sd-sidebar-menu__btn--active'
+                                                : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : '')
+                                        )}
                                         onClick={() => {
                                             this.handleClick(index);
                                             if (item.hover) {
@@ -78,7 +82,8 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
                                                     item.onCLick();
                                                 }
                                             }
-                                        }}>
+                                        }}
+                                    >
                                         <span className='sd-sidebar-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>

package/app-typescript/components/SidebarMenu.tsx

@@ -50,7 +50,14 @@ export class SidebarMenu extends React.PureComponent<IProps, IState> {
                         } else {
                             return (
                                 <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
-                                    <a className={'sd-sidebar-menu__btn' + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : ''))}
+                                    <a className={
+                                        'sd-sidebar-menu__btn'
+                                        + (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '')
+                                        + (item['active']
+                                            ? ' sd-sidebar-menu__btn--active'
+                                            : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : '')
+                                        )
+                                    }
                                         onClick={() => this.handleClick(index)}>
                                         <span className='sd-sidebar-menu__main-icon '>
                                             <Icon size={item['size']} name={item['icon']} />

package/app-typescript/components/TabList.tsx

@@ -63,7 +63,11 @@ class TabList extends React.PureComponent<ITabList, IState> {
                             onClick={() => this.handleChange(index)}
                             role='tab'
                             aria-selected={this.state.index === index ? 'true' : 'false'}
-                            className={'sd-nav-tabs__tab' + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')}>
+                            className={
+                                'sd-nav-tabs__tab'
+                                + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')
+                            }
+                        >
                             <span>{item.props.label}</span>
                         </button>)}
                 </div>

package/app-typescript/components/TagInput.tsx

@@ -41,7 +41,10 @@ export class TagInput extends React.Component<IProps> {
                 tabindex={this.props.tabindex}
             >
                 <Chips
-                    className={`tags-input--multi-select sd-input__input ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`}
+                    className={`
+                        tags-input--multi-select sd-input__input
+                        ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`
+                    }
                     allowDuplicate={false}
                     separator=","
                     onChange={(event) => onChange(event.value)}

package/app-typescript/components/ThemeSelector.tsx

@@ -40,12 +40,23 @@ export class ThemeSelector extends React.Component<IProps> {
                     <div className='sd-theme-selector__item'
                         key={index}
                         tabIndex={-1}>
-                        <figure className="sd-theme-selector__item-thumb" data-theme={item.theme + '-ui'} aria-hidden="true">
+                        <figure
+                            className="sd-theme-selector__item-thumb"
+                            data-theme={item.theme + '-ui'}
+                            aria-hidden="true"
+                        >
                             <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
                                 <g fill="none" fillRule="evenodd">
                                     <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)" />
                                     <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4" />
-                                    <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71" />
+                                    <rect
+                                        fill="var(--sd-colour-interactive)"
+                                        height="15"
+                                        rx="2"
+                                        width="58"
+                                        x="91"
+                                        y="71"
+                                    />
                                     <g fill="var(--sd-colour-btn-bg-neutral)">
                                         <rect height="15" rx="2" width="58" x="29" y="52" />
                                         <rect height="15" rx="2" width="58" x="29" y="71" />