superdesk-ui-framework 3.0.23 → 3.0.27

package/app/styles/_avatar.scss

@@ -1,5 +1,5 @@
 .sd-avatar {
-    display: inline-block;
+    display: block;
     position: relative; // required for absolutely positioned indicators
 
     &.sd-avatar--indicator-status--offline {
@@ -339,3 +339,14 @@
         gap: $sd-base-increment * 1.5;
     }
 }
+
+.avatar-popup {
+    background-color: var(--color-dropdown-menu-Bg);
+    border-radius: 5px;
+    padding: 1.5rem;
+    box-shadow: var(--sd-shadow__dropdown);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: auto;
+}

package/app/styles/form-elements/_checkbox.scss

@@ -1,7 +1,7 @@
 // CHECKBOX & RADIO BUTTONS : form-elements/checkbox.scss
 // --------------
 
-// Custom checkox & Radio buttons 
+// Custom checkox & Radio buttons
 
 
 $checkBoxBorderColor: var(--color-checkbox-border);
@@ -149,7 +149,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
                 color: $white;
             }
         }
-        .sd-label--disabled { 
+        .sd-label--disabled {
             opacity: 1 !important;
             cursor: not-allowed !important;
         }
@@ -186,7 +186,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
             margin-inline-start: 0.8rem;
         }
     }
-    .sd-label--disabled { 
+    .sd-label--disabled {
         opacity: 0.40;
     }
 }
@@ -371,7 +371,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
             box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         }
     }
-    .sd-label--disabled { 
+    .sd-label--disabled {
         opacity: 1 !important;
         cursor: not-allowed !important;
     }
@@ -381,6 +381,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
 .sd-check-button__group {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
+    flex-wrap: wrap;
     align-items: center;
     gap: $sd-base-increment * 1;
     flex: 0;
@@ -435,7 +437,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
     .sd-radio-new + label:empty {
         margin: 0 !important;
     }
-    .sd-label--disabled { 
+    .sd-label--disabled {
         opacity: 0.40;
     }
     &[label-position="left"], &[label-position="start"] {
@@ -609,7 +611,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
                 box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 3px $sd-colour--focus-shadow;
             }
         }
-        
+
     }
 }
 

package/app-typescript/components/ShowPopup.tsx

@@ -123,7 +123,7 @@ class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
                 ref={(el) => {
                     this.wrapperEl = el;
                 }}
-                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw'}}
+                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw', display: 'flex'}}
             >
                 {this.props.children}
             </div>

package/app-typescript/components/TabCustom.tsx

@@ -6,6 +6,7 @@ interface ITabs {
     ariaLabel?: string;
     children: Array<any>;
     onClick(i: number): void;
+    initiallySelectedIndex?: number;
 }
 
 interface ITabLabel {
@@ -24,14 +25,14 @@ interface ITabPanel {
     children: any;
 }
 
-export const TabLabel = ({ label }: ITabLabel) => {
+export const TabLabel = ({label}: ITabLabel) => {
     return (
         <span>{label}</span>
     );
 };
 
-export const Tabs = ({ size, theme, ariaLabel, children, onClick }: ITabs) => {
-    const [index, setIndex] = React.useState(0);
+export const Tabs = ({initiallySelectedIndex, size, theme, ariaLabel, children, onClick}: ITabs) => {
+    const [index, setIndex] = React.useState(initiallySelectedIndex ?? 0);
 
     function handleSelected(i: number) {
         setIndex(i);
@@ -46,37 +47,47 @@ export const Tabs = ({ size, theme, ariaLabel, children, onClick }: ITabs) => {
         [`sd-nav-tabs--${size}`]: size && size !== undefined,
         'sd-nav-tabs--ui-dark': theme === 'dark',
     });
+
     return (
         <div className={classes} role='tablist' aria-label={ariaLabel ? ariaLabel : 'tabs'}>
-            {children.map((item, i) =>
-                <button
-                    key={i}
-                    aria-controls={'tabpanel-' + i}
-                    className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
-                    onClick={() => handleSelected(i)}
-                    role='tab'
-                    aria-selected={index === i ? 'true' : 'false'} >
-                    {item}
-                </button>)
+            {
+                children.map((item, i) => (
+                    <button
+                        key={i}
+                        aria-controls={'tabpanel-' + i}
+                        className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
+                        onClick={() => handleSelected(i)}
+                        role='tab'
+                        aria-selected={index === i ? 'true' : 'false'}
+                    >
+                        {item}
+                    </button>
+                ))
             }
         </div>
     );
 };
 
-export const TabContent = ({ theme, children, activePanel }: ITabContent) => {
+export const TabContent = ({theme, children, activePanel}: ITabContent) => {
     return (
-        <div className={'sd-nav-tabs__content' +
-            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-            {children.map((panel: any, i: number) =>
-                panel.props.indexValue === activePanel ?
-                    <div className='sd-nav-tabs__pane' role='tabpanel' aria-labelledby={'tab-' + activePanel} key={i}>
+        <div className={'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
+            {
+                children.map((panel: any, i: number) => panel.props.indexValue === activePanel && (
+                    <div
+                        className='sd-nav-tabs__pane'
+                        role='tabpanel'
+                        aria-labelledby={'tab-' + activePanel}
+                        key={i}
+                    >
                         {panel}
-                    </div> : null)}
+                    </div>
+                ))
+            }
         </div>
     );
 };
 
-export const TabPanel = ({ children, indexValue }: ITabPanel) => {
+export const TabPanel = ({children, indexValue}: ITabPanel) => {
     return (
         <React.Fragment key={indexValue}>
             {children}

package/app-typescript/components/avatar/avatar-group.tsx

@@ -4,6 +4,8 @@ import {Avatar, IPropsAvatar} from './avatar';
 import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentNumber} from './avatar-number';
 import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
+import { Spacer } from '../Spacer';
+import {WithPopover} from '../WithPopover';
 
 export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
 export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
@@ -21,6 +23,13 @@ export interface IPropsAvatarGroup {
      * if exceeded, "+1"/"+2"/"+n" button will be shown
      */
     max?: number | 'show-all';
+
+    zIndex?: number;
+
+    // unless a custom onClick handler is passed
+    // a popover would get shown when maximum number
+    // of avatars is exceeded.
+    onClick?(): void;
 }
 
 function isAvatar(item: IAvatarInGroup | IAvatarPlaceholderInGroup): item is IAvatarInGroup {
@@ -46,41 +55,117 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
         })();
         const itemsOverLimit = items.length - max;
 
+        const PlusButtonWrapper: React.ComponentType<{onToggle(event: HTMLElement): void}> = ({children, onToggle}) => {
+            if (this.props.onClick == null) {
+                return (
+                    <button
+                        style={{padding: 0}}
+                        onClick={(event) => {
+                            if (this.props.onClick == null) {
+                                onToggle(event.target as HTMLElement);
+                            }
+                        }}
+                    >
+                       {children}
+                    </button>
+                );
+            } else {
+                return <>{children}</>;
+            }
+        };
+
+        const someHaveDisplayName = this.props.items.some((item) => isAvatar(item) && item.displayName.length > 0);
+
         return (
-            <div
-                className={classNames(
-                    'sd-avatar-group',
-                    'sd-avatar-group--stacked',
-                    `sd-avatar-group--stacked--gap-${gap}`,
-                )}
-                role='group'
-            >
-                {
-                    items.slice(0, max).map((item, index) => {
-                        if (isAvatar(item)) {
+            <WithPopover
+                zIndex={this.props.zIndex ?? 101}
+                placement='bottom-end'
+                component={() => (
+                    <div className="avatar-popup">
+                        {this.props.items.map((item, index) => {
                             return (
-                                <Avatar {...item} key={index} size={size} />
-                            );
-                        } else {
-                            return (
-                                <AvatarPlaceholder
-                                    {...item}
-                                    key={index}
-                                    size={this.props.size}
-                                />
+                                someHaveDisplayName
+                                    ? <Spacer h alignItems='center' gap='16' noGrow key={index}>
+                                        {
+                                            isAvatar(item)
+                                                && item.displayName
+                                        }
+
+                                        {
+                                            isAvatar(item)
+                                                ? (
+                                                    <Avatar
+                                                        size='small'
+                                                        imageUrl={item.imageUrl}
+                                                        initials={item.initials}
+                                                        displayName={item.displayName}
+                                                        icon={item.icon}
+                                                    />
+                                                )
+                                                : (
+                                                    <AvatarPlaceholder
+                                                        kind='plus-button'
+                                                        size='small'
+                                                        icon={item.icon}
+                                                        onClick={item.onClick}
+                                                    />
+                                                )
+                                        }
+                                    </Spacer>
+                                    : <div>
+                                        <AvatarPlaceholder
+                                            kind='plus-button'
+                                            size='small'
+                                            icon={item.icon}
+                                            onClick={isAvatar(item) ? undefined : item.onClick}
+                                            key={index}
+                                        />
+                                    </div>
                             );
+                        })}
+                    </div>
+                )}
+            >
+                {(onToggle) => (
+                    <div
+                        className={classNames(
+                            'sd-avatar-group',
+                            'sd-avatar-group--stacked',
+                            `sd-avatar-group--stacked--gap-${gap}`,
+                        )}
+                        role='group'
+                        onClick={this.props.onClick}
+                    >
+                        {
+                            items.slice(0, max).map((item, index) => {
+                                if (isAvatar(item)) {
+                                    return (
+                                        <Avatar {...item} key={index} size={size} />
+                                    );
+                                } else {
+                                    return (
+                                        <AvatarPlaceholder
+                                            {...item}
+                                            key={index}
+                                            size={this.props.size}
+                                        />
+                                    );
+                                }
+                            })
                         }
-                    })
-                }
 
-                {
-                    itemsOverLimit > 0 && (
-                        <AvatarWrapper size={size} isEmpty={false}>
-                            <AvatarContentNumber number={`${itemsOverLimit}`} />
-                        </AvatarWrapper>
-                    )
-                }
-            </div>
+                        {
+                            itemsOverLimit > 0 && (
+                                <PlusButtonWrapper onToggle={onToggle}>
+                                    <AvatarWrapper size={size} isEmpty={false}>
+                                        <AvatarContentNumber number={`${itemsOverLimit}`} />
+                                    </AvatarWrapper>
+                                </PlusButtonWrapper>
+                            )
+                        }
+                    </div>
+                )}
+            </WithPopover>
         );
     }
 }

package/app-typescript/components/avatar/avatar.tsx

@@ -5,7 +5,7 @@ import {AvatarContentText} from './avatar-text';
 
 export interface IPropsAvatar {
     imageUrl: string | null; // nullable, but mandatory to communicate importance
-    tooltip: string | null; // nullable, but mandatory to communicate importance
+    displayName: string;
 
     /** 3 letters max */
     initials: string | null; // nullable, but mandatory to communicate importance
@@ -22,7 +22,7 @@ export interface IPropsAvatar {
 
 export class Avatar extends React.PureComponent<IPropsAvatar> {
     render() {
-        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, tooltip} = this.props;
+        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, displayName} = this.props;
 
         return (
             <AvatarWrapper
@@ -35,10 +35,10 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
                 {
                     imageUrl != null || initials == null
                         ? (
-                            <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltip ?? undefined} />
+                            <AvatarContentImage imageUrl={imageUrl} tooltipText={displayName} />
                         )
                         : (
-                            <AvatarContentText text={initials} tooltipText={tooltip ?? undefined} />
+                            <AvatarContentText text={initials} tooltipText={displayName} />
                         )
                 }