superdesk-ui-framework 3.0.5 → 3.0.7

package/app/styles/_sd-tag-input.scss

@@ -1,6 +1,6 @@
 sd-tag-input {
     display: block;
-    padding-bottom: 3rem;   
+    padding-bottom: 3rem;
     &[data-label] {
         position: relative;
         padding-top: 1rem;
@@ -10,7 +10,7 @@ sd-tag-input {
 // Testing
 .sd-tag-input {
     display: block;
-    padding-bottom: 3rem;   
+    padding-bottom: 3rem;
     &[data-label] {
         position: relative;
         padding-top: 1rem;
@@ -225,6 +225,9 @@ tags-input,
         &:hover {
             opacity: 1;
         }
+        &:focus {
+            opacity: 1;
+        }
         &[disabled], [disabled]:hover, [disabled]:active {
             opacity: 0.5;
             background-color: rgba(123, 123, 123, 0.4);
@@ -277,8 +280,6 @@ tags-input,
         }
         .suggestion-item {
             position: relative;
-            padding: 0.5rem 1rem;
-            cursor: pointer;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -298,9 +299,6 @@ tags-input,
                 cursor: default;
                 pointer-events: none;
             }
-            &:hover {
-                background-color: var(--sd-colour-interactive--alpha-10) !important;
-            }
             .suggestion-item__icon {
                 display: flex;
                 align-items: center;
@@ -309,9 +307,26 @@ tags-input,
             }
         }
         .suggestion-item--multi-select {
+            display: flex;
+            align-items: center;
+        }
+        .suggestion-item--btn {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            cursor: pointer;
+            width: 100%;
+            padding: 0.5rem 1rem;
+
+            &:focus {
+                background-color: $sd-colour-background__menu-item;
+                box-shadow: var(--sd-shadow__menu-item--focus-inner);
+                text-decoration: none;
+                outline: none;
+            }
+            &:hover {
+                background-color: var(--sd-colour-interactive--alpha-10) !important;
+            }
         }
         .suggestion-item--bgcolor {
             min-height: 1.5em;
@@ -323,7 +338,7 @@ tags-input,
             border-radius: 99px;
             white-space: nowrap;
 
-            &[style] {
+            &[style*="background-color"] {
                 padding-inline: 8px;
             }
         }
@@ -430,7 +445,7 @@ tags-input,
                 transform: translate(-3px);
             }
             .arrow-left {
-                cursor: pointer; 
+                cursor: pointer;
             }
             .search {
                 cursor: default;
@@ -485,6 +500,10 @@ tags-input,
                 border: 1px solid var(--sd-colour-interactive);
                 box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
             }
+            &:focus {
+                border: 1px solid var(--sd-colour-interactive);
+                box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
+            }
             &:active {
                 border: 1px solid var(--sd-colour-interactive);
                 box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
@@ -591,7 +610,7 @@ tags-input,
     border-radius: 2px;
 
     &-selected {
-        inset-block: 5px;   
+        inset-block: 5px;
     }
 }
 

package/app-typescript/components/MultiSelect.tsx

@@ -8,7 +8,6 @@ interface IProps<T> {
     value: Array<T>;
     options: Array<T>;
     placeholder?: string;
-    optionLabel: string;
     emptyFilterMessage?: string;
     filterPlaceholder?: string;
     maxSelectedLabels?: number;
@@ -19,6 +18,7 @@ interface IProps<T> {
     showClear?: boolean;
     showSelectAll?: boolean;
     zIndex?: number;
+    optionLabel: (option: T) => string;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
     onChange(newValue: Array<T>): void;
@@ -80,10 +80,9 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 display="chip"
                 zIndex={this.props.zIndex}
                 filter={this.props.filter}
-                filterBy={this.props.optionLabel}
                 appendTo={document.body}
                 placeholder={this.props.placeholder}
-                optionLabel={this.props.optionLabel}
+                optionLabel={(option) => this.props.optionLabel(option)}
                 emptyFilterMessage={this.props.emptyFilterMessage}
                 filterPlaceholder={this.props.filterPlaceholder}
                 itemTemplate={this.props.itemTemplate}

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -16,7 +16,6 @@ export interface ISideBarTab {
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     badgeValue?: string;
-    onClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
 }
 
 export class SideBarTabs extends React.PureComponent<IProps> {
@@ -34,12 +33,11 @@ export class SideBarTabs extends React.PureComponent<IProps> {
         }
     }
 
-    handleClick(item: ISideBarTab, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    handleClick(item: ISideBarTab) {
         if (this.props.activeTab === item.id) {
             this.props.onActiveTabChange(null);
         } else {
             this.props.onActiveTabChange(item.id);
-            item.onClick(event);
         }
     }
 
@@ -62,7 +60,7 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                                             'sd-sidetab-menu__btn',
                                             {'sd-sidetab-menu__btn--active': item.id === this.props.activeTab},
                                         )}
-                                        onClick={(event) => this.handleClick(item, event)}
+                                        onClick={() => this.handleClick(item)}
                                     >
                                         {item.badgeValue != null && (
                                             <Badge text={item['badgeValue']} type='primary' />