superdesk-ui-framework 3.0.1-beta.26 → 3.0.1-beta.27

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

@@ -4,7 +4,6 @@ export { TestGround } from './TestGround';
 export { UiPlayground } from './UiPlayground';
 export { PageLayoutTest } from './PageLayoutTest';
 export { EditorTest } from './EditorTest';
-export { Multiedit } from './Multiedit';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';

package/dist/react/TableList.tsx

@@ -98,7 +98,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupPreview>
                         <TableList
                             dragAndDrop
-                            append
                             addItem
                             array={this.state.array}
                             itemsDropdown={(index) => [
@@ -136,7 +135,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
                     <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
                     <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
-                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Set append to body on individual item while draging.' />
                     <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
                     <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
                     <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />

package/dist/react/TreeSelect.tsx

@@ -13,79 +13,51 @@ interface IState {
     arr: any;
 }
 
-let options = [
+let itemArr = [
     {
-        value: {name: 'Category1'},
+        value: 'Category1',
         children: [
             {
-                value: {name: 'Sub-category1'},
+                value: 'Sub-Category1',
                 children: [
-                    {value: {name: 'Item20'}}
+                    {value: 'Item10'}
                 ]
             },
             {
-                value: {name: 'Sub-category2'},
-                children: [
-                    {value: {name: 'Item21'}}
-                ]
-            }
-            ,
-            {
-                value: {name: 'Sub-category3'},
-                children: [
-                    {value: {name: 'Item22'}}
-                ]
-            }
-            ,
-            {
-                value: {name: 'Sub-category4'},
-                children: [
-                    {value: {name: 'Item23'}}
-                ]
-            }
-            ,
-            {
-                value: {name: 'Sub-category5'},
+                value: 'Sub-Category2',
                 children: [
-                    {value: {name: 'Item24'}}
-                ]
-            }
-            ,
-            {
-                value: {name: 'Sub-category6'},
-                children: [
-                    {value: {name: 'Item25'}}
+                    {value: 'Item11'}
                 ]
             }
         ]
     },
     {
-        value: {name: 'Category2'},
+        value: 'Category2',
         children: [
             {
-                value: {name: 'Item8'}
+                value: 'Sub-Category3'
             },
             {
-                value: {name: 'Item9'}
+                value: 'Sub-Category4'
             }
         ]
     },
     {
-        value: {name: 'Category3', bgColor: 'red'},
+        value: 'Category3',
         children: [
             {
-                value: {name: 'Item10'}
+                value: 'Sub-Category5'
             },
             {
-                value: {name: 'Item11'}
+                value: 'Sub-Category6'
             }
         ]
     },
 ]
 
-let options2 = [
+let itemArr2 = [
     {
-        value: {name: 'Category1', border: 'red'},
+        value: {name: 'Category1'},
         children: [
             {
                 value: {name: 'Sub-category1'},
@@ -130,7 +102,7 @@ let options2 = [
         ]
     },
     {
-        value: {name: 'Category2', border: 'green'},
+        value: {name: 'Category2'},
         children: [
             {
                 value: {name: 'Item8'}
@@ -141,7 +113,7 @@ let options2 = [
         ]
     },
     {
-        value: {name: 'Category3', border: 'yellow'},
+        value: {name: 'Category3'},
         children: [
             {
                 value: {name: 'Item10'}
@@ -153,6 +125,37 @@ let options2 = [
     },
 ]
 
+const source = [
+    {
+        'name': 'Article (news)',
+        'qcode': 'Article (news)',
+    },
+    {
+        'name': 'Article',
+        'qcode': 'Article',
+    },
+    {
+        'name': 'Sidebar',
+        'qcode': 'Sidebar',
+    },
+    {
+        'name': 'Factbox',
+        'qcode': 'Factbox',
+    },
+    {
+        'name': 'Item',
+        'qcode': 'Item',
+    },
+    {
+        'name': 'Array',
+        'qcode': 'Array',
+    },
+    {
+        'name': 'Object',
+        'qcode': 'Object',
+    },
+];
+
 let fetchedArr = [];
 fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
 );
@@ -183,8 +186,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: options,
-            options2: options,
+            options: itemArr2,
+            options2: itemArr2,
             inputValue: '',
             arr: []
         }
@@ -225,29 +228,21 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
-                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
-                                    getOptions={() => options}
-                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    getOptions={() => itemArr2}
+                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
                                     selectBranchWithChildren={true}
+                                    onChange={(e) => console.log(e)}
                                     allowMultiple
+                                    kind={'synchronous'}
                                     fullWidth
-                                    singleLevelSearch
-                                    required
                                     info={'Info Message'}
                                     error={'Error Message'}
+                                    required
                                     label={'TreeSelect Label'}
+                                    singleLevelSearch
                                     searchPlaceholder='Search...'
-                                    onChange={(e) => false}
-                                    valueTemplate={(item, Wrapper) => {
-                                        return (
-                                            <Wrapper backgroundColor={item.bgColor}>
-                                                <span>{item.name}</span>
-                                            </Wrapper>
-                                        );
-                                    }}    
                                 />
                             </div>
                         </div>
@@ -255,29 +250,21 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
-                            value={[{name: 'Item1'}, {name: 'Item2'}]}
-                            getOptions={() => options}
-                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getBackgroundColor={(item: any) => item.bgColor}
+                            getOptions={() => {
+                                return itemArr2
+                            }}
+                            value={[{name: 'Item1'}, {name: 'Item2'}]}
                             selectBranchWithChildren={true}
+                            onChange={(e) => console.log(e)}
                             allowMultiple
+                            kind={'synchronous'}
                             fullWidth
-                            singleLevelSearch
-                            required
                             info={'Info Message'}
                             error={'Error Message'}
+                            required
                             label={'TreeSelect Label'}
-                            searchPlaceholder='Search...'
-                            onChange={(e) => false}
-                            valueTemplate={(item, Wrapper) => {
-                                return (
-                                    <Wrapper backgroundColor={item.bgColor}>
-                                        <span>{item.name}</span>
-                                    </Wrapper>
-                                );
-                            }}    
                         />
                     `}</Markup.ReactMarkupCode>
                     
@@ -299,6 +286,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 }
                                 getId={({qcode}) => qcode.display_name}
                                 selectBranchWithChildren={false}
+                                //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
                                 allowMultiple={true}
                             />
                             </div>
@@ -329,23 +317,20 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
-                                    getOptions={() => options2}
-                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item) => item.bgColor}
-                                    getBorderColor={(item) => item.border}
                                     placeholder='Select one'
-                                    selectBranchWithChildren={true}
-                                    onChange={(e) => false}
+                                    getOptions={() => this.state.options}
+                                    kind={'synchronous'}
+                                    onChange={(e) => console.log(e)}
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
-                                    valueTemplate={(item: any, Wrapper) => {
-                                        return <Wrapper borderColor={item.border}>
-                                            <span>{item.name}</span>
-                                        </Wrapper>
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item.name}</span>
                                     }}
+                                    //allowMultiple
+                                    //readOnly
                                 />
                             </div>
                         </div>
@@ -353,22 +338,17 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
-                            getOptions={() => options2}
-                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getBackgroundColor={(item) => item.bgColor}
-                            getBorderColor={(item) => item.border}
-                            placeholder='Select one'
-                            selectBranchWithChildren={true}
-                            onChange={(e) => false}
+                            value={[{name: 'Item4'}, {name: 'Item10'}]}
+                            getOptions={() => this.state.options}
+                            kind={'synchronous'}
+                            onChange={(e) => console.log(e)}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
-                            valueTemplate={(item: any, Wrapper) => {
-                                return <Wrapper borderColor={item.border}>
-                                    <span>{item.name}</span>
-                                </Wrapper>
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item.name}</span>
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
@@ -390,10 +370,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
                     <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
-                    <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
-                    <Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
-                    <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
                     <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>

package/dist/superdesk-ui.bundle.css

@@ -33764,7 +33764,6 @@ tags-input,
         position: relative; }
     tags-input .autocomplete .suggestion-item,
     .tags-input .autocomplete .suggestion-item {
-      position: relative;
       padding: 0.5rem 1rem;
       cursor: pointer;
       white-space: nowrap;
@@ -33802,19 +33801,6 @@ tags-input,
       display: flex;
       justify-content: space-between;
       align-items: center; }
-    tags-input .autocomplete .suggestion-item--bgcolor,
-    .tags-input .autocomplete .suggestion-item--bgcolor {
-      min-height: 1.5em;
-      min-width: 1.5em;
-      padding: 4px 0;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 99px;
-      white-space: nowrap; }
-      tags-input .autocomplete .suggestion-item--bgcolor[style],
-      .tags-input .autocomplete .suggestion-item--bgcolor[style] {
-        padding-inline: 8px; }
     tags-input .autocomplete .suggestion-item--disabled,
     .tags-input .autocomplete .suggestion-item--disabled {
       opacity: 0.5; }
@@ -33958,10 +33944,6 @@ tags-input,
     .tags-input .autocomplete--fixed-width {
       width: 275px !important; }
 
-.tags-input--single-select {
-  display: grid !important;
-  align-items: center !important; }
-
 .tags-input--multi-select,
 .tags-input--single-select {
   position: relative; }
@@ -34007,7 +33989,7 @@ tags-input,
   .tags-input__single-item .tags-input__remove-button {
     display: flex;
     align-items: center;
-    align-self: center;
+    align-self: flex-end;
     margin-inline-start: auto;
     z-index: 2;
     cursor: pointer;
@@ -34019,16 +34001,6 @@ tags-input,
     color: var(--color-text-lighter);
     font-weight: 300; }
 
-.item-border {
-  width: 5px;
-  z-index: 2;
-  position: absolute;
-  inset-block: 7px;
-  inset-inline-start: 3px;
-  border-radius: 2px; }
-  .item-border-selected {
-    inset-block: 5px; }
-
 .boxed-list {
   display: flex;
   flex-direction: column;
@@ -35363,8 +35335,7 @@ input.sd-inset-search__input {
   display: flex;
   flex-direction: column;
   align-self: stretch;
-  overflow: hidden !important;
-  padding: 1px; }
+  overflow: hidden !important; }
   .table-list--comfortable {
     gap: 1.6rem; }
   .table-list--contained {
@@ -60370,9 +60341,6 @@ i.sd-sidetab-menu__helper-icon {
 .p-dialog-content {
   overflow-y: auto; }
 
-.p-dialog-flex {
-  display: flex; }
-
 .p-dialog-header {
   display: flex;
   align-items: center;