superdesk-ui-framework 3.0.35 → 3.0.38

package/dist/react/TreeSelect.tsx

@@ -20,53 +20,52 @@ let options = [
             {
                 value: {name: 'Sub-category1'},
                 children: [
-                    {value: {name: 'Item31'}},
-                    // {value: {name: 'Item32'}},
-                    // {value: {name: 'Item33'}},
-                    // {value: {name: 'Item34'}},
+                    {value: {name: 'Item5'}},
+                    {value: {name: 'Item6'}},
+                    {value: {name: 'Item7'}},
+                    {value: {name: 'Item8'}},
 
                 ]
             },
             {
                 value: {name: 'Sub-category2'},
                 children: [
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item9'}},
+                    {value: {name: 'Item10'}},
+                    {value: {name: 'Item11'}},
+                    {value: {name: 'Item12'}},
                 ]
             },
             {
                 value: {name: 'Sub-category3'},
                 children: [
-                    {value: {name: 'Item50'}},
-                    {value: {name: 'Item51'}},
-                    {value: {name: 'Item53'}}
+                    {value: {name: 'Item13'}},
+                    {value: {name: 'Item14'}},
                 ]
             },
             {
                 value: {name: 'Sub-category4'},
                 children: [
-                    {value: {name: 'Item23'}},
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item15'}},
+                    {value: {name: 'Item16'}},
                 ]
             },
             {
                 value: {name: 'Sub-category5'},
                 children: [
-                    {value: {name: 'Item24'}},
-                    {value: {name: 'Item41'}},
-                    {value: {name: 'Item42'}},
-                    {value: {name: 'Item43'}}
+                    {value: {name: 'Item17'}},
+                    {value: {name: 'Item18'}},
+                    {value: {name: 'Item19'}},
+                    {value: {name: 'Item20'}},
                 ]
             },
             {
                 value: {name: 'Sub-category6'},
                 children: [
-                    {value: {name: 'Item50'}},
-                    {value: {name: 'Item51'}},
-                    {value: {name: 'Item52'}}
+                    {value: {name: 'Item21'}},
+                    {value: {name: 'Item22'}},
+                    {value: {name: 'Item23'}},
+                    {value: {name: 'Item24'}},
                 ]
             }
         ]
@@ -75,21 +74,21 @@ let options = [
         value: {name: 'Category2'},
         children: [
             {
-                value: {name: 'Item8'}
+                value: {name: 'Item1'}
             },
-            // {
-            //     value: {name: 'Item9'}
-            // }
+            {
+                value: {name: 'Item2'}
+            }
         ]
     },
     {
         value: {name: 'Category3', bgColor: 'red'},
         children: [
             {
-                value: {name: 'Item10'}
+                value: {name: 'Item3'}
             },
             {
-                value: {name: 'Item11'}
+                value: {name: 'Item4'}
             }
         ]
     },
@@ -102,41 +101,47 @@ let options2 = [
             {
                 value: {name: 'Sub-category1'},
                 children: [
-                    {value: {name: 'Item20'}}
+                    {value: {name: 'Item5'}},
+                    {value: {name: 'Item6'}},
                 ]
             },
             {
                 value: {name: 'Sub-category2'},
                 children: [
-                    {value: {name: 'Item21'}}
+                    {value: {name: 'Item7'}},
+                    {value: {name: 'Item8'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category3'},
                 children: [
-                    {value: {name: 'Item22'}}
+                    {value: {name: 'Item9'}},
+                    {value: {name: 'Item10'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category4'},
                 children: [
-                    {value: {name: 'Item23'}}
+                    {value: {name: 'Item11'}},
+                    {value: {name: 'Item12'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category5'},
                 children: [
-                    {value: {name: 'Item24'}}
+                    {value: {name: 'Item13'}},
+                    {value: {name: 'Item14'}},
                 ]
             }
             ,
             {
                 value: {name: 'Sub-category6'},
                 children: [
-                    {value: {name: 'Item25'}}
+                    {value: {name: 'Item15'}},
+                    {value: {name: 'Item16'}},
                 ]
             }
         ]
@@ -145,10 +150,10 @@ let options2 = [
         value: {name: 'Category2', border: 'green'},
         children: [
             {
-                value: {name: 'Item8'}
+                value: {name: 'Item1'}
             },
             {
-                value: {name: 'Item9'}
+                value: {name: 'Item2'}
             }
         ]
     },
@@ -156,10 +161,10 @@ let options2 = [
         value: {name: 'Category3', border: 'yellow'},
         children: [
             {
-                value: {name: 'Item10'}
+                value: {name: 'Item3'}
             },
             {
-                value: {name: 'Item11'}
+                value: {name: 'Item4'}
             }
         ]
     },
@@ -223,10 +228,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                 <Markup.ReactMarkupCodePreview>{`
                     <TreeSelect
-                        options={this.state.options2}
-                        getLabel={'label'}
-                        getMultilevelArray={'items'}
-                        selectBranchWithChildren={true}
+                        kind={'synchronous' | 'asynchronous'}
+                        value={this.state.value}
+                        getOptions={() => this.state.options}
+                        getLabel={(item) => item.label}
+                        getId={(item) => item.id}
+                        allowMultiple
+                        selectBranchWithChildren
                         onChange={() => false}
                     />
                 `}
@@ -237,22 +245,18 @@ 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'}]}
+                                    kind='synchronous'
+                                    value={[{name: 'Category1'}]}
                                     getOptions={() => options}
-                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item: any) => item.bgColor}
-                                    selectBranchWithChildren={true}
+                                    selectBranchWithChildren
                                     allowMultiple
-                                    fullWidth
-                                    //singleLevelSearch
-                                    required
-                                    info={'Info Message'}
-                                    error={'Error Message'}
-                                    label={'TreeSelect Label'}
                                     searchPlaceholder='Search...'
-                                    onChange={(e) => false}
+                                    info='Info Message'
+                                    error='Error Message'
+                                    label='TreeSelect Label'
+                                    getBackgroundColor={(item: any) => item.bgColor} 
                                     valueTemplate={(item, Wrapper) => {
                                         return (
                                             <Wrapper backgroundColor={item.bgColor}>
@@ -260,6 +264,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                             </Wrapper>
                                         );
                                     }}
+                                    onChange={(e) => false}
                                 />
                             </div>
                         </div>
@@ -267,22 +272,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
-                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            kind='synchronous'
+                            value={[{name: 'Item 1'}, {name: 'Item 2'}]}
                             getOptions={() => options}
-                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getBackgroundColor={(item: any) => item.bgColor}
-                            selectBranchWithChildren={true}
+                            selectBranchWithChildren
                             allowMultiple
-                            fullWidth
-                            singleLevelSearch
-                            required
+                            searchPlaceholder='Search...'
                             info={'Info Message'}
                             error={'Error Message'}
                             label={'TreeSelect Label'}
-                            searchPlaceholder='Search...'
-                            onChange={(e) => false}
+                            getBackgroundColor={(item: any) => item.bgColor} 
                             valueTemplate={(item, Wrapper) => {
                                 return (
                                     <Wrapper backgroundColor={item.bgColor}>
@@ -290,6 +291,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     </Wrapper>
                                 );
                             }}
+                            onChange={(e) => false}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -302,16 +304,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             <div className='form__row'>
                             <TreeSelect
                                 kind="asynchronous"
-                                searchOptions={searchOptions}
                                 value={this.state.value}
+                                getLabel={({display_name}) => display_name}
+                                getId={({display_name}) => display_name}
+                                selectBranchWithChildren
+                                allowMultiple
+                                searchOptions={searchOptions}
+                                info='Info Message'
+                                error='Error Message'
+                                label='TreeSelect Label'
                                 onChange={(val) => {
                                     this.setState({value: val});
                                 }}
-                                getLabel={({display_name}) => display_name
-                                }
-                                getId={({qcode}) => qcode.display_name}
-                                selectBranchWithChildren={false}
-                                allowMultiple={true}
                             />
                             </div>
                         </div>
@@ -320,36 +324,37 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
                             kind="asynchronous"
-                            searchOptions={searchOptions}
                             value={this.state.value}
+                            getLabel={({display_name}) => display_name}
+                            getId={({qcode}) => qcode.display_name}
+                            selectBranchWithChildren
+                            allowMultiple
+                            searchOptions={searchOptions}
                             onChange={(val) => {
                                 this.setState({value: val});
                             }}
-                            getLabel={({name}) => name}
-                            getId={({qcode}) => qcode}
-                            selectBranchWithChildren={false}
-                            optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
-                            allowMultiple={true}
                         />
                     `}</Markup.ReactMarkupCode>
 
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <p className='docs-page__paragraph'>SingleSelect mode with custom template.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    kind='synchronous'
+                                    value={[]}
                                     getOptions={() => options2}
-                                    kind={'synchronous'}
-                                    getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getBackgroundColor={(item) => item.bgColor}
+                                    getId={(item) => item.name}
                                     getBorderColor={(item) => item.border}
+                                    selectBranchWithChildren
                                     placeholder='Select one'
-                                    selectBranchWithChildren={true}
-                                    onChange={(e) => false}
+                                    info='Info Message'
+                                    error='Error Message'
+                                    label='TreeSelect Label'
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
@@ -358,6 +363,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                             <span>{item.name}</span>
                                         </Wrapper>
                                     }}
+                                    onChange={(e) => false}
                                 />
                             </div>
                         </div>
@@ -365,15 +371,15 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            kind='synchronous'
+                            value={[{name: 'Item 1'}]}
                             getOptions={() => options2}
-                            kind={'synchronous'}
-                            getId={(item) => item.name}
                             getLabel={(item) => item.name}
+                            getId={(item) => item.name}
                             getBackgroundColor={(item) => item.bgColor}
                             getBorderColor={(item) => item.border}
+                            selectBranchWithChildren
                             placeholder='Select one'
-                            selectBranchWithChildren={true}
-                            onChange={(e) => false}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
@@ -382,6 +388,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     <span>{item.name}</span>
                                 </Wrapper>
                             }}
+                            onChange={(e) => false}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -408,13 +415,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='optionTemplate' isRequired={false} type='Function(item)' 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'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
-                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
                 </PropsList>
 
                 <p className='docs-page__paragraph'>synchronous:</p>

package/dist/superdesk-ui.bundle.css

@@ -35186,8 +35186,6 @@ a.toggle-box__header {
   text-align: center;
   font-weight: 400;
   transition: background-color .2s ease-out, opacity .1s ease-out;
-  margin: 0.2rem 0;
-  margin-right: 0.3rem;
   height: 2.4rem;
   color: var(--color-text);
   background: var(--sd-colour__tag-label-Bg--1); }
@@ -35352,8 +35350,6 @@ tags-input,
       text-align: center;
       font-weight: 400;
       transition: background-color .2s ease-out, opacity .1s ease-out;
-      margin: 0.2rem 0;
-      margin-right: 0.3rem;
       height: 2.4rem;
       color: var(--color-text);
       transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
@@ -35424,9 +35420,6 @@ tags-input,
           tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span,
           .tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span {
             flex-grow: 1; }
-    tags-input .tags-input__tags .tags-input__tag-item--multi-select,
-    .tags-input .tags-input__tags .tags-input__tag-item--multi-select {
-      margin: 0 !important; }
     tags-input .tags-input__tags .tags-input__tag-item--readonly,
     .tags-input .tags-input__tags .tags-input__tag-item--readonly {
       cursor: default !important; }
@@ -35505,11 +35498,11 @@ tags-input,
     tags-input .tags-input__add-button i,
     .tags-input .tags-input__add-button i {
       color: inherit; }
-    tags-input .tags-input__add-button:hover,
-    .tags-input .tags-input__add-button:hover {
+    tags-input .tags-input__add-button:not(.tags-input__add-button--disabled):hover,
+    .tags-input .tags-input__add-button:not(.tags-input__add-button--disabled):hover {
       opacity: 1; }
-    tags-input .tags-input__add-button:focus,
-    .tags-input .tags-input__add-button:focus {
+    tags-input .tags-input__add-button:not(.tags-input__add-button--disabled):focus,
+    .tags-input .tags-input__add-button:not(.tags-input__add-button--disabled):focus {
       opacity: 1; }
     tags-input .tags-input__add-button[disabled], tags-input .tags-input__add-button [disabled]:hover, tags-input .tags-input__add-button [disabled]:active,
     .tags-input .tags-input__add-button[disabled],
@@ -49266,6 +49259,8 @@ textarea.sd-media-carousel__media-title {
       color: white; }
     .sd-input--boxed-label.sd-input--disabled .sd-input__label--boxed {
       background-color: rgba(0, 0, 0, 0.4) !important; }
+  .sd-input--disabled * {
+    cursor: not-allowed !important; }
 
 .sd-input__duration-input,
 .sd-input__time-date-input {
@@ -49317,11 +49312,11 @@ textarea.sd-media-carousel__media-title {
   appearance: none;
   border: 0;
   background-color: transparent;
-  height: 3.2rem;
   display: inline-block;
-  color: var(--color-text);
   text-align: end;
+  color: var(--color-text);
   width: 2.5ch;
+  height: 3.2rem;
   font-size: 1.4rem;
   padding: 0 !important;
   line-height: 3.2rem; }
@@ -49789,6 +49784,8 @@ textarea.sd-media-carousel__media-title {
     margin-inline-end: 1.2rem; }
   .sd-check-button__group.sd-check-button__group--compact {
     gap: 0.4rem; }
+  .sd-check-button__group.sd-check-button__group--no-wrap {
+    flex-wrap: nowrap; }
 
 .sd-check-new__wrapper {
   display: inline-flex;
@@ -50209,6 +50206,78 @@ label + .sd-radio {
     .input-wrap--medium.sd-input--boxed-style .sd-input__select:focus {
       box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20); }
 
+.tags-preview {
+  display: flex;
+  align-items: flex-start;
+  word-wrap: break-word;
+  min-height: 3.2rem;
+  padding: 0.4rem 0.4rem 0.3rem 0.4rem;
+  overflow: hidden;
+  background-color: transparent; }
+  .tags-preview .tags-preview__tag-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 0;
+    padding: 0;
+    list-style-type: none; }
+  .tags-preview .tags-preview__tag-item {
+    display: inline-flex;
+    align-items: center;
+    min-width: 1.8em;
+    padding: 0;
+    padding-inline: 1em 1em;
+    border-radius: var(--b-radius--full);
+    font-size: 1.4rem;
+    line-height: 100%;
+    position: relative;
+    text-align: center;
+    font-weight: 400;
+    transition: background-color .2s ease-out, opacity .1s ease-out;
+    height: 2.4rem;
+    color: var(--color-text);
+    color: currentColor;
+    background: var(--sd-colour__tag-label-Bg--1); }
+    .tags-preview .tags-preview__tag-item--single-select {
+      border-radius: 2px;
+      padding-inline-start: 0.714em;
+      padding-inline-end: 0.857em; }
+    .tags-preview .tags-preview__tag-item--border {
+      border-left: solid;
+      border-left-width: 5px; }
+  .tags-preview .tags-input__helper-box {
+    display: flex;
+    align-items: center; }
+
+.sd-input__duration-input-preview {
+  display: flex;
+  gap: 2px;
+  grid-row: 2/3;
+  grid-column: 2/4; }
+  .sd-input__duration-input-preview:focus-within {
+    box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    border-color: var(--sd-colour-interactive);
+    background-color: var(--sd-colour-interactive--alpha-20); }
+  .sd-input__duration-input-preview .duration-input-preview {
+    display: inline-block;
+    text-align: end;
+    color: var(--color-text);
+    width: 2.5ch;
+    height: 3.2rem;
+    font-size: 1.4rem;
+    line-height: 3.2rem; }
+  .sd-input__duration-input-preview .sd-input__suffix {
+    height: 3.2rem;
+    line-height: 3.2rem;
+    font-size: 1.4rem;
+    color: var(--color-text-light);
+    display: inline-block;
+    pointer-events: none;
+    margin-inline-end: 2px;
+    text-align: center; }
+
 .sd-sidebar-menu {
   position: absolute;
   bottom: 0;
@@ -62109,8 +62178,6 @@ i.sd-sidetab-menu__helper-icon {
   text-align: center;
   font-weight: 400;
   transition: background-color .2s ease-out, opacity .1s ease-out;
-  margin: 0.2rem 0;
-  margin-right: 0.3rem;
   height: 2.4rem;
   color: var(--color-text);
   background: var(--sd-colour__tag-label-Bg--1); }
@@ -62544,6 +62611,8 @@ i.sd-sidetab-menu__helper-icon {
     margin-inline-end: 1.2rem; }
   .sd-check-button__group.sd-check-button__group--compact {
     gap: 0.4rem; }
+  .sd-check-button__group.sd-check-button__group--no-wrap {
+    flex-wrap: nowrap; }
 
 .sd-check-new__wrapper {
   display: inline-flex;
@@ -63495,8 +63564,6 @@ i.sd-sidetab-menu__helper-icon {
   text-align: center;
   font-weight: 400;
   transition: background-color .2s ease-out, opacity .1s ease-out;
-  margin: 0.2rem 0;
-  margin-right: 0.3rem;
   height: 2.4rem;
   color: var(--color-text);
   transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
@@ -63528,7 +63595,7 @@ i.sd-sidetab-menu__helper-icon {
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.1rem;
+  gap: 0.4rem;
   width: 100%;
   transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
   border-radius: 2px 2px 0 0;