superdesk-ui-framework 3.0.66 → 3.0.68

package/dist/playgrounds/react-playgrounds/UiPlayground.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
 import dummy_items from '../dummy-data/items';
@@ -77,7 +77,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                         { icon: 'spike', size: 'big' },
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big', active: true }]} />
+                        { icon: 'picture', size: 'big', active: true }
+                    ]}
+                />
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
@@ -93,7 +95,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
                                                 { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
                                             ]
-                                        }]}>
+                                        }
+                                    ]}
+                                >
                                     <NavButton text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'} onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
@@ -107,11 +111,16 @@ export class UiPlayground extends React.Component<IProps, IState> {
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
-                            <RadioButtonGroup options={[
-                                {value:'test10', label:'Radio button with icon'},
-                                {value:'test11', label:'I have an icon!'},
-                                {value:'test12', label:'Yeah, me too!'},
-                            ]} group={{padded:true}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
+                            <RadioButtonGroup
+                                options={[
+                                    {value:'test10', label:'Radio button with icon'},
+                                    {value:'test11', label:'I have an icon!'},
+                                    {value:'test12', label:'Yeah, me too!'},
+                                ]}
+                                group={{padded:true}}
+                                value={this.state.itemType}
+                                onChange={(value) => this.setState({ itemType: value })}
+                            />
                             <ButtonGroup align='end' spaces='no-space'>
                                 <Dropdown
                                     items={[
@@ -123,7 +132,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
                                             ]
                                         },
-                                    ]}>
+                                    ]}
+                                >
                                     <NavButton type='default' icon='adjust' onClick={()=> false} />
                                 </Dropdown>
                                 <NavButton icon='th-list' onClick={() => false} />
@@ -145,8 +155,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 value='Title'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
@@ -156,8 +166,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="option-1">Select ingest source...</Option>
                                                 <Option value="option-2">Associated Press</Option>
                                                 <Option value="option-3">Reuters</Option>
@@ -173,8 +183,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 value='Keyword'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
 
@@ -186,8 +196,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 info='Dolor in hendrerit.'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="">--- Not selected ---</Option>
                                                 <Option value="single">Single usage</Option>
                                                 <Option value="time">Time restricted</Option>
@@ -206,16 +216,19 @@ export class UiPlayground extends React.Component<IProps, IState> {
                     </Components.LeftPanel>
                     {/* FILTER PANEL*/}
 
-                    <Components.MainPanel >
-
+                    <Components.MainPanel>
                         <GridList size="small" gap="medium" margin="3">
-                            {dummy_items.map((item, index) =>
+                            {dummy_items.map((item: any, index: any) =>
                                 <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
                                     <GridElements.GridItemCheckWrapper>
-                                        <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
-                                            item.selected = value;
-                                            this.changeStatus(item, 'selected');
-                                        }} />
+                                        <Checkbox
+                                            checked={item.selected}
+                                            label={{text:''}}
+                                            onChange={(value) => {
+                                                item.selected = value;
+                                                this.changeStatus(item, 'selected');
+                                            }}
+                                        />
                                     </GridElements.GridItemCheckWrapper>
                                     <GridElements.GridItemTopActions>
                                         <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
@@ -265,7 +278,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                         { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
                                                         { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
                                                     ]
-                                                }]}>
+                                                }
+                                            ]}
+                                        >
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
                                         </Dropdown>
                                     </div>

package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {Redirect} from 'react-router-dom';
 
 interface IGraphicButton {
     children?: never;
@@ -10,12 +9,14 @@ interface IGraphicButton {
 }
 
 export class GraphicButton extends React.PureComponent<IGraphicButton> {
-    constructor(props){
+    constructor(props: IGraphicButton){
         super(props);
         this.onSubmit=this.onSubmit.bind(this);
     }
-    onSubmit=() =>{
-        window.location.href = this.props.link;
+    onSubmit=() => {
+        if (this.props.link != null) {
+            window.location.href = this.props.link; 
+        }
     }
     render() {
         return (
@@ -30,4 +31,4 @@ export class GraphicButton extends React.PureComponent<IGraphicButton> {
             </a>
         );
     }
-}
+}

package/dist/playgrounds/react-playgrounds/components/Layout.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { SidebarMenu } from './SidebarMenu';
-import { AuthoringContent } from './AuthoringContent';
 
 interface IProps {
     header: string;

package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx

@@ -20,7 +20,7 @@ interface IState {
 
 export class SearchBar extends React.PureComponent<IProps, IState> {
     private inputRef: any;
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             inputValue: this.props.value ? this.props.value : '', 
@@ -46,27 +46,34 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        let classes = classNames('sd-searchbar', {
+        const classes = classNames('sd-searchbar', {
             [`sd-searchbar--${this.state.type}`] : this.props.type,
             'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
             'sd-searchbar--focused' : this.state.focused,
             'sd-searchbar--boxed': this.state.boxed,
         });
+
         return (
             <div className={classes} ref={this.inputRef}>
                 <label className="sd-searchbar__icon"></label>
-                <input id="search-input"
-                ref={(input: any) => (input && this.props.focused) && input.focus()}
+
+                <input
+                    id="search-input"
+                    ref={(input: any) => (input && this.props.focused) && input.focus()}
                     className="sd-searchbar__input"
                     type="text"
                     placeholder={this.props.placeholder}
                     value={this.state.inputValue}
                     onChange={(e) => this.setState({inputValue: e.target.value})}
-                    onFocus={() => this.setState({focused: true})} />
-                {this.state.inputValue &&
-                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
-                    <Icon name='remove-sign' />
-                </button>}
+                    onFocus={() => this.setState({focused: true})}
+                />
+
+                {this.state.inputValue && (
+                    <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                        <Icon name='remove-sign' />
+                    </button>
+                )}
+
                 <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn" onSubmit={() => this.props.onSubmit}>
                     <Icon name='chevron-right-thin' />
                 </button>

package/dist/playgrounds/react-playgrounds/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../../../tsconfig.json",
+    "files": ["Index.tsx", "../../../../globals.d.ts"]
+}

package/dist/superdesk-ui.bundle.css

@@ -42321,34 +42321,44 @@ a.text-link {
   color: var(--sd-colour-interactive); }
 
 .sd-list-item-nested {
-  display: flex;
-  flex-direction: column; }
+  --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-nested > .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;
-  margin-inline-start: 1rem; }
+  overflow: hidden !important;
+  display: grid;
+  grid-template-rows: 1fr;
+  margin-inline-start: 1rem;
+  transition: all 0.3s ease-out; }
   .sd-list-item-nested__childs .sd-list-item {
     margin-block-start: 0;
     border-block-start: 1px solid var(--sd-colour-line--x-light); }
+  .sd-list-item-nested__childs .sd-list-item-nested__childs-inner {
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease-out; }
 
 .sd-list-item-nested__parent {
   position: relative;
   z-index: 1; }
 
 .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; }
+  opacity: 0; }
 
-.sd-list-item-nested--expanded .sd-list-item-nested__childs {
-  transition: all ease-in 0.2s;
-  max-height: 114rem;
-  opacity: 1; }
+.sd-list-item-nested--expanded {
+  grid-template-rows: var(--parent-item-height) 1fr; }
+  .sd-list-item-nested--expanded .sd-list-item-nested__childs {
+    grid-template-rows: 1fr;
+    opacity: 1; }
+    .sd-list-item-nested--expanded .sd-list-item-nested__childs .sd-list-item-nested__childs-inner {
+      opacity: 1; }
 
 .sd-list-item-group {
   display: flex;