superdesk-ui-framework 3.0.65 → 3.0.67

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/superdesk-ui.bundle.css

@@ -17232,7 +17232,8 @@ h6 {
   font-size: calc(var(--text-size--base) * 1.2);
   font-weight: 500;
   text-transform: uppercase;
-  color: var(--color-text-light); }
+  color: var(--color-text-light);
+  letter-spacing: 0.06em; }
 
 .sd-text {
   font-size: 1.4rem;
@@ -36089,11 +36090,14 @@ tags-input,
   display: flex;
   flex-direction: column;
   align-self: stretch;
-  gap: 1.2rem;
+  gap: 0.8rem;
   margin-block-end: 1.6rem; }
 
+.boxed-list--compact {
+  gap: 0.8rem; }
+
 .boxed-list--comfortable {
-  gap: 1.6rem; }
+  gap: 1.2rem; }
 
 .boxed-list__item {
   display: grid;
@@ -36211,7 +36215,10 @@ tags-input,
 
 .boxed-list__item--clickable:hover {
   cursor: pointer;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.24), 0 0 1px rgba(0, 0, 0, 0.1); }
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1); }
+
+.boxed-list__item--clickable:active {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12); }
 
 .boxed-list__item--blank {
   background-color: transparent !important;
@@ -42314,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;
@@ -43393,7 +43410,7 @@ a.text-link {
   border-radius: var(--b-radius--medium);
   border: 1px solid var(--color-border-line--medium);
   background-color: var(--sd-colour-bg__searchbar);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
   transition: box-shadow 0.2s ease-out; }
   .sd-searchbar--boxed:hover {
     border-color: rgba(123, 123, 123, 0.6); }
@@ -43411,6 +43428,18 @@ a.text-link {
       cursor: not-allowed !important; }
     .sd-searchbar--boxed.sd-searchbar--disabled:hover {
       border-color: rgba(123, 123, 123, 0.4); }
+  .sd-searchbar--boxed .dropdown {
+    background-color: var(--sd-colour-bg__searchbar);
+    border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+    border-inline-end: 1px solid var(--color-border-line--medium);
+    margin-inline-end: 1px;
+    transition: box-shadow 0.2s ease-out; }
+    .sd-searchbar--boxed .dropdown .dropdown__toggle {
+      height: 100%;
+      padding-inline: var(--space--1-5); }
+  .sd-searchbar--boxed.sd-searchbar--focused .dropdown, .sd-searchbar--boxed:focus-within .dropdown {
+    border-inline-end-color: var(--sd-colour-interactive--alpha-50);
+    box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
 
 .sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
   flex-grow: 1;
@@ -64251,7 +64280,6 @@ i.sd-sidetab-menu__helper-icon {
   margin-inline-end: 0; }
 
 .p-dialog .p-dialog-content {
-  background-color: transparent;
   font-size: 1.4rem; }
   .p-dialog .p-dialog-content p {
     line-height: 1.5; }
@@ -64297,8 +64325,11 @@ i.sd-sidetab-menu__helper-icon {
   color: var(--sd-colour-interactive) !important;
   opacity: 1; }
 
-.p-dialog-content .sd-main-content-grid {
-  height: 100% !important; }
+.p-dialog-content {
+  padding: var(--dialog-content-padding);
+  background-color: var(--dialog-content-bg); }
+  .p-dialog-content .sd-main-content-grid {
+    height: 100% !important; }
 
 .p-dialog-content--small {
   width: var(--width__modal--small); }
@@ -64314,26 +64345,41 @@ i.sd-sidetab-menu__helper-icon {
   width: var(--width__modal--x-large);
   height: calc(100vh - 200px); }
 
-.p-dialog-content--0-padding {
-  padding: 0 !important; }
+.p-dialog-content--0-padding,
+.p-dialog-content--padding-none {
+  --dialog-content-padding: 0 !important; }
 
-.p-dialog-content--s-padding {
-  padding: 1.6rem; }
+.p-dialog-content--s-padding,
+.p-dialog-content--padding-small {
+  --dialog-content-padding: var(--space--2); }
 
-.p-dialog-content--m-padding {
-  padding: 2.4rem; }
+.p-dialog-content--m-padding,
+.p-dialog-content--padding-medium {
+  --dialog-content-padding: var(--space--3); }
 
-.p-dialog-content--l-padding {
-  padding: 3.2rem; }
+.p-dialog-content--l-padding,
+.p-dialog-content--padding-large {
+  --dialog-content-padding: var(--space--4); }
 
 .p-dialog-content-bg--default {
-  background-color: transparent !important; }
+  --dialog-content-bg: var(--color-modal-Bg) !important; }
 
 .p-dialog-content-bg--dark {
-  background-color: var(--sd-colour-panel-bg--200) !important; }
+  --dialog-content-bg: var(--sd-colour-panel-bg--200) !important; }
 
 .p-dialog-content-bg--medium {
-  background-color: var(--sd-colour-panel-bg--100) !important; }
+  --dialog-content-bg: var(--sd-colour-panel-bg--100) !important; }
+
+.modal__sticky-header {
+  position: sticky;
+  inset-block-start: calc(-1 * var(--dialog-content-padding));
+  background-color: var(--dialog-content-bg);
+  padding-inline: var(--dialog-content-padding);
+  padding-block-start: var(--dialog-content-padding);
+  padding-block-end: var(--space--1);
+  z-index: 2;
+  margin: calc(-1 * var(--dialog-content-padding));
+  margin-block-end: 0; }
 
 .p-tieredmenu, .p-tieredmenu .p-submenu-list {
   padding-block-start: 0.8rem;