superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16

package/app-typescript/components/Lists/TableList.tsx

@@ -25,6 +25,8 @@ export interface IPropsArrayItem {
     hexColor?: string;
     onClick?(): void;
     onDoubleClick?(): void;
+    locked?: boolean;
+    positionLocked?: boolean;
 }
 
 interface IState {
@@ -113,7 +115,8 @@ class TableList extends React.PureComponent<IProps, IState> {
                     ? <DragDropContext onDragEnd={this.onDragEnd}>
                         <Droppable droppableId="droppable">
                             {(provided, _snapshot) => (
-                                <ul
+                                <div
+                                    role='list'
                                     className={classes}
                                     ref={provided.innerRef}
                                     {...provided.droppableProps} >
@@ -139,6 +142,8 @@ class TableList extends React.PureComponent<IProps, IState> {
                                                             ? this.props.itemsDropdown(index)
                                                             : []}
                                                         hexColor={item.hexColor}
+                                                        locked={item.locked}
+                                                        positionLocked={item.positionLocked}
                                                         onAddItem={() => this.props.onAddItem
                                                             && this.props.onAddItem(index, item)}
                                                         showDragHandle={this.props.showDragHandle}
@@ -149,19 +154,19 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     ))}
                                     {provided.placeholder}
                                     {(this.props.addItem && !this.props.readOnly) &&
-                                        <li className={`table-list__add-item table-list__item--margin`}>
+                                        <div className={`table-list__add-item table-list__item--margin`}>
                                             <Tooltip text='Add item' flow='top' appendToBody={true}>
                                                 <div className='table-list__add-item--container sd-margin-x--auto'>
                                                     {this.dropDown()}
                                                 </div>
                                             </Tooltip>
-                                        </li>
+                                        </div>
                                     }
-                                </ul>
+                                </div>
                             )}
                         </Droppable>
                     </DragDropContext>
-                    : <ul className={classes}>
+                    : <div role='list' className={classes}>
                         {this.state.items.map((item: IPropsArrayItem, index: number) => (
                             <TableListItem
                                 key={index}
@@ -176,29 +181,31 @@ class TableList extends React.PureComponent<IProps, IState> {
                                 addItem={this.props.addItem}
                                 itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
                                 hexColor={item.hexColor}
+                                locked={item.locked}
+                                positionLocked={item.positionLocked}
                                 onAddItem={() => this.props.onAddItem
                                     && this.props.onAddItem(index, item)}
                             />
                         ))}
                         {(this.props.addItem && !this.props.readOnly) &&
-                            <li className={`table-list__add-item table-list__item--margin`}>
+                            <div className={`table-list__add-item table-list__item--margin`}>
                                 <Tooltip text='Add item' flow='top' appendToBody={true}>
                                     <div className='table-list__add-item--container sd-margin-x--auto'>
                                         {this.dropDown()}
                                     </div>
                                 </Tooltip>
-                            </li>
+                            </div>
                         }
-                    </ul>
-                : (this.props.addItem && !this.props.readOnly) ? <ul className={classes}>
-                    <li className={`table-list__add-item table-list__item--margin`}>
+                    </div>
+                : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
+                    <div className={`table-list__add-item table-list__item--margin`}>
                         <Tooltip text='Add item' flow='top' appendToBody={true}>
                             <div className='table-list__add-item--container sd-margin-x--auto'>
                                 {this.dropDown()}
                             </div>
                         </Tooltip>
-                    </li>
-                </ul>
+                    </div>
+                </div>
                 : null
         );
     }
@@ -213,6 +220,8 @@ export interface IPropsItem {
     dragAndDrop?: boolean;
     hexColor?: string;
     showDragHandle?: 'always' | 'onHover' | 'none';
+    locked?: boolean;
+    positionLocked?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;
@@ -251,14 +260,17 @@ class TableListItem extends React.PureComponent<IPropsItem> {
         let classes = classNames('table-list__item', {
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--locked': this.props.locked,
+            'table-list__item--position-locked': this.props.positionLocked,
             'table-list__item--drag-handles-always': !this.props.showDragHandle,
             'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
         });
 
         return (
             this.props.addItem ?
-                <li className='table-list__item-container'>
+                <div className='table-list__item-container'>
                     <div
+                        role='listitem'
                         onClick={() => this.onSingleClick()}
                         onDoubleClick={() => this.onDoubleClick()}
                         className={classes}>
@@ -297,8 +309,9 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             </div>
                         </Tooltip>
                     </div>
-                </li>
-                : <li
+                </div>
+                : <div
+                    role='listitem'
                     className={`${classes} table-list__item--margin`}
                     onClick={() => this.onSingleClick()}
                     onDoubleClick={() => this.onDoubleClick()}>
@@ -317,7 +330,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                     {this.props.action && <div className='table-list__slide-in-actions'>
                         {this.props.action}
                     </div>}
-                </li>
+                </div>
         );
     }
 }

package/dist/examples.bundle.css

@@ -11118,11 +11118,11 @@ doc-react-playground {
     box-sizing: content-box;
     line-height: 100%;
     color: #9b27b0;
-    right: -0.5rem;
-    bottom: -0.7rem;
+    inset-inline-end: -0.4rem;
+    inset-block-end: -0.6rem;
     height: 1em;
     width: 1em;
-    background-color: var(--sd-item__main-Bg);
+    background-color: var(--sd-item__main-Bg) !important;
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -11138,8 +11138,8 @@ doc-react-playground {
       font-size: 32px; }
     .icn-mix--2x .icn-mix__sub-icn {
       font-size: 1.6rem;
-      right: -0.6rem;
-      bottom: -0.3rem; }
+      inset-inline-end: -0.6rem;
+      inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -11156,13 +11156,13 @@ doc-react-playground {
     opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--100); }
+  background-color: var(--sd-colour-panel-bg--100) !important; }
 
 .subnav--darker .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--200); }
+  background-color: var(--sd-colour-panel-bg--200) !important; }
 
 .subnav--dark-blue-grey .icn-mix__sub-icn {
-  background-color: var(--color-subnav-bg--blueGrey-10);
+  background-color: var(--color-subnav-bg--blueGrey-10) !important;
   color: #d686e4; }
 
 .subnav--dark-blue-grey .icn-mix__icn {