superdesk-ui-framework 3.0.1-beta.5 → 3.0.1-beta.7

package/dist/react/MultiSelect.tsx

@@ -184,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
                     <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
                     <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
-                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
+                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
                     <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
                     <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
                     <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>

package/dist/react/TableList.tsx

@@ -14,40 +14,40 @@ interface IProps {
 export default class TableListDoc extends React.Component<IProps, IState> {
     constructor(props: IState) {
         super(props);
-        this.state={
+        this.state = {
             array: [
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 1</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 2</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <Label style='translucent' text='aacc' />
+                        <Label style='translucent' type='primary' text='prlg' />
+                    </>,
                     center: <span>Item 3</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
                     onClick: () => {
                         return false;
                     }
@@ -61,7 +61,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>TableList</h2>
-                
+
                 <Markup.ReactMarkupCodePreview>{`
                     <TableList
                     dragAndDrop
@@ -82,50 +82,50 @@ export default class TableListDoc extends React.Component<IProps, IState> {
 
                         <TableList>
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='translucent' text='aacc' />
+                                        <Label style='translucent' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                }
+                                action={
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
+                                } />
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='hollow' text='aacc' />
-                                    <Label style='filled' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='hollow' text='aacc' />
+                                        <Label style='filled' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                } />
                             <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
+                                start={
+                                    <>
+                                        <Label style='translucent' text='aacc' />
+                                        <Label style='translucent' type='primary' text='prlg' />
+                                    </>
+                                }
+                                center={
+                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                }
+                                end={
+                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                }
+                                action={
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
+                                } />
                         </TableList>
 
                     </Markup.ReactMarkupPreview>
@@ -183,17 +183,18 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 <p className="docs-page__paragraph">With drag and drop functionality:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        
+
                         <TableList
-                        dragAndDrop
-                        addItem
-                        array={this.state.array}
-                        itemsDropdown={[
-                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                        ]}
-                        onClick={() => false}
+                            dragAndDrop
+                            addItem
+                            array={this.state.array}
+                            itemsDropdown={[
+                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            onClick={() => false}
+                            onDrag={(start, end) => console.log(start, end)}
                         />
 
                     </Markup.ReactMarkupPreview>
@@ -216,28 +217,29 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">TableList</p>
                 <PropsList>
-                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.'/>
-                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.'/>
-                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.'/>
-                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.'/>
-                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.'/>
-                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
+                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
+                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
+                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
+                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
+                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
+                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                    <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
                 </PropsList>
                 <p className="docs-page__paragraph">array:</p>
                 <PropsList>
-                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
                 </PropsList>
                 <p className="docs-page__paragraph">TableListItem</p>
                 <PropsList>
-                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
-                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
                 </PropsList>
 
             </section>

package/dist/superdesk-ui.bundle.css

@@ -40367,6 +40367,12 @@ a.text-link {
     .sd-searchbar__search-btn:active i {
       color: #fff; }
 
+.sd-searchbar__search-btn--active {
+  background-color: var(--sd-colour-interactive);
+  opacity: 1; }
+  .sd-searchbar__search-btn--active i {
+    color: #fff; }
+
 [dir="rtl"] .sd-searchbar__search-btn i.icon-chevron-right-thin {
   transform: rotate(180deg); }
 
@@ -46437,7 +46443,9 @@ a.text-link {
   color: var(--color-text);
   text-align: end;
   width: 2.5ch;
-  font-size: 1.4rem; }
+  font-size: 1.4rem;
+  padding: 0 !important;
+  line-height: 3.2rem; }
   .sd-input__duration-input input::-webkit-outer-spin-button, .sd-input__duration-input input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0; }
@@ -46485,6 +46493,13 @@ a.text-link {
   .sd-input.sd-input--disabled .p-calendar .p-calendar-icon, .sd-input.sd-input--disabled:hover .p-calendar .p-calendar-icon {
     pointer-events: none; }
 
+.blink_me {
+  animation: blinker 1s linear infinite; }
+
+@keyframes blinker {
+  50% {
+    opacity: 0; } }
+
 .sd-toggle, .sd-switch {
   display: inline-block;
   flex-shrink: 0;
@@ -58577,7 +58592,7 @@ i.sd-sidetab-menu__helper-icon {
       background-color: var(--sd-colour-interactive--hover);
       box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2); }
 
-.p-dropdown, .p-multiselect {
+.p-dropdown {
   display: inline-flex;
   align-items: center;
   height: 3.2rem;
@@ -58592,10 +58607,32 @@ i.sd-sidetab-menu__helper-icon {
   padding-inline-start: 8px;
   padding-inline-end: 8px;
   color: var(--color-text); }
-  .p-dropdown:hover, .p-multiselect:hover {
+  .p-dropdown:hover {
     background-color: var(--color-input-bg--hover);
     border-color: var(--color-input-border-hover); }
-  .p-dropdown:focus, .p-dropdown:focus-within, .p-dropdown.p-focus, .p-multiselect:focus, .p-multiselect:focus-within, .p-multiselect.p-focus {
+  .p-dropdown:focus, .p-dropdown:focus-within, .p-dropdown.p-focus {
+    background-color: var(--sd-colour-interactive--alpha-20);
+    box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    border-color: var(--sd-colour-interactive); }
+
+.p-multiselect {
+  display: inline-flex;
+  align-items: center;
+  height: 3.2rem;
+  border-bottom: 1px solid var(--color-input-border);
+  background-color: var(--color-input-bg);
+  font-size: 1.4rem;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
+  height: auto !important;
+  min-height: 3.2rem !important;
+  color: var(--color-text);
+  padding: 0.4rem; }
+  .p-multiselect:hover {
+    background-color: var(--color-input-bg--hover);
+    border-color: var(--color-input-border-hover); }
+  .p-multiselect:focus, .p-multiselect:focus-within, .p-multiselect.p-focus {
     background-color: var(--sd-colour-interactive--alpha-20);
     box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
     border-color: var(--sd-colour-interactive); }
@@ -58674,11 +58711,19 @@ i.sd-sidetab-menu__helper-icon {
   padding-inline-end: 8px; }
 
 .p-multiselect-label {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
   display: flex;
-  align-items: center; }
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-inline-start: 0.4rem;
+  gap: 0.4rem; }
 
 .p-multiselect-token {
-  cursor: default; }
+  cursor: default;
+  margin: 0 !important; }
   .p-multiselect-token .pi-times-circle {
     overflow: inherit;
     cursor: default;