superdesk-ui-framework 5.2.0 → 5.2.1

package/app/styles/app.scss

@@ -58,6 +58,7 @@
 @import 'components/card-item';
 @import 'components/sd-grid-item';
 @import 'components/sd-searchbar';
+@import 'components/overflow-stack';
 @import 'components/sd-collapse-box';
 @import 'components/sd-photo-preview';
 @import 'components/sd-media-carousel';

package/app/styles/components/_overflow-stack.scss

@@ -0,0 +1,120 @@
+// Overflow Stack Component
+// A generic component for stacking items with overflow indicator
+
+.overflow-stack {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+
+    // Gap variations (for non-overlapping items)
+    &.overflow-stack--gap-compact {
+        gap: var(--gap-0-5); // 4px
+    }
+
+    &.overflow-stack--gap-loose {
+        gap: var(--gap-1); // 8px
+    }
+
+    &.overflow-stack--gap-none {
+        gap: 0; // no gap
+    }
+
+    // Overlapping mode (like avatars)
+    &.overflow-stack--overlap {
+        gap: 0;
+
+        .overflow-stack__item {
+            margin-inline-start: calc(var(--space--1) * -1);
+            transition: transform 0.2s ease, z-index 0.2s ease;
+            position: relative;
+            z-index: 1;
+
+            &:first-child {
+                margin-inline-start: 0;
+            }
+
+            &:hover {
+                transform: translateY(-2px);
+                z-index: 10;
+                > * {
+                    outline: 2px solid var(--color-surface-base);
+                }
+            }
+        }
+
+        .overflow-stack__indicator {
+            margin-inline-start: calc(var(--space--1) * -1);
+            z-index: 0;
+
+            &:hover {
+                transform: translateY(-2px);
+                z-index: 10;
+            }
+        }
+    }
+}
+
+.overflow-stack__item {
+    display: inline-flex;
+    align-items: center;
+}
+
+.overflow-stack__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 3.2rem;
+    height: 3.2rem;
+    padding: 0 var(--space--0-5);
+    background-color: var(--sd-colour-primary);
+    color: var(--white);
+    border: none;
+    border-radius: var(--border-radius--medium);
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    position: relative;
+
+    &:hover {
+        background-color: var(--sd-colour-primary--darker);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--sd-colour-primary);
+        outline-offset: 2px;
+    }
+}
+
+.overflow-stack__indicator-content {
+    font-size: var(--text-size--small);
+    color: var(--color-text-muted);
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: var(--space--0-5);
+}
+
+.overflow-stack__popover {
+    background-color: var(--color-dropdown-menu-Bg);
+    border-radius: var(--b-radius--large);
+    padding: var(--space--1-5);
+    box-shadow: var(--sd-shadow__dropdown);
+    display: flex;
+    flex-direction: column;
+    min-width: max-content;
+    overflow-y: auto;
+}
+
+.overflow-stack__popover-item {
+    display: flex;
+    align-items: center;
+    padding-block: var(--space--0-5);
+    transition: all 0.2s ease;
+}

package/app-typescript/components/CopyableTextBox.tsx

@@ -0,0 +1,94 @@
+import React, {useEffect} from 'react';
+import {Button} from './Button';
+import {gettext} from '../translations';
+import {InputWrapper} from './Form';
+import nextId from 'react-id-generator';
+import {IInputCommon} from './Form/InputWrapper';
+import {toasted} from './Toast';
+
+interface ICopyableTextBoxProps extends IInputCommon {
+    value: string;
+
+    /**
+     * Defaults to medium
+     */
+    size?: 'medium' | 'large';
+
+    'data-test-id'?: string;
+}
+
+export const CopyableTextBox: React.FC<ICopyableTextBoxProps> = (props) => {
+    const htmlId = nextId();
+    const timeoutIdRef = React.useRef<number>();
+    const [copied, setCopied] = React.useState(false);
+
+    useEffect(() => {
+        return () => {
+            if (timeoutIdRef.current) {
+                window.clearTimeout(timeoutIdRef.current);
+            }
+        };
+    }, []);
+
+    const handleCopy = () => {
+        navigator.clipboard
+            .writeText(props.value)
+            .then(() => {
+                setCopied(true);
+
+                if (timeoutIdRef.current) {
+                    window.clearTimeout(timeoutIdRef.current);
+                }
+
+                timeoutIdRef.current = window.setTimeout(() => {
+                    setCopied(false);
+                }, 2000);
+            })
+            .catch(() => {
+                toasted.notify(gettext("Couldn't copy"), {
+                    type: 'warning',
+                });
+            });
+    };
+
+    return (
+        <InputWrapper
+            label={props.label}
+            disabled={props.disabled}
+            value={props.value}
+            error={props.error}
+            invalid={props.error != null}
+            info={props.info}
+            size={props.size ?? 'medium'}
+            fullWidth={true}
+            htmlId={htmlId}
+            tabindex={props.tabindex}
+        >
+            <div className="d-flex items-center gap-1">
+                <input
+                    id={htmlId}
+                    aria-describedby={htmlId + 'label'}
+                    type="text"
+                    className="sd-input__input"
+                    style={{
+                        border: '1px solid var(--color-input-border)',
+                        borderRadius: 'var(--b-radius--medium)',
+                    }}
+                    value={props.value}
+                    disabled
+                    data-test-id={props['data-test-id']}
+                />
+                <Button
+                    text={gettext('Copy')}
+                    icon={copied ? 'ok' : 'copy'}
+                    iconOnly={true}
+                    onClick={handleCopy}
+                    type="default"
+                    style="hollow"
+                    size={props.size === 'medium' ? 'normal' : (props.size ?? 'normal')}
+                    data-test-id="copy-button"
+                />
+            </div>
+        </InputWrapper>
+    );
+};

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

@@ -0,0 +1,418 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash/debounce';
+import {WithPopover} from '../WithPopover';
+import {HeadlessButton} from '../HeadlessButton';
+import {IconButton} from '../IconButton';
+import {OverflowStackPopover} from './OverflowStackPopover';
+import {defaultIndicator, HIDDEN_ITEM_STYLE} from './utils';
+
+interface IPropsOverflowStackBase {
+    /**
+     * Default: {type: `fixed`, max: 4}
+     */
+    overflow?:
+        | {
+              type: 'fixed';
+              max?: number | 'show-all';
+          }
+        | {
+              type: 'auto';
+          };
+
+    /**
+     * Defaults to `compact`
+     */
+    gap?: 'compact' | 'loose' | 'none';
+
+    /**
+     * When `true`, items will have negative margin and expand on hover
+     */
+    overlap?: boolean;
+
+    showOnlyHiddenInPopover?: boolean;
+
+    /**
+     * Defaults to `count`
+     * `count`: Shows "+N" with the number of hidden items
+     * `dots`: Shows a three dots icon without the count
+     */
+    indicatorStyle?: 'count' | 'dots';
+
+    renderIndicator?: (count: number) => React.ReactNode;
+    onIndicatorClick?: () => void;
+
+    /**
+     * Defaults to `full`
+     * Border radius for the indicator button
+     */
+    indicatorRadius?: 'x-small' | 'small' | 'medium' | 'full';
+
+    containerClassName?: string;
+}
+
+interface IPropsOverflowStackSimple extends IPropsOverflowStackBase {
+    type: 'simple';
+    items: Array<React.ReactNode>;
+
+    /**
+     * Custom render function for items in the popover.
+     * Useful if you just want to wrap children, but still keep everything else default.
+     * If not provided, items will be rendered as-is
+     */
+    renderPopoverItem?: (item: React.ReactNode, index: number) => React.ReactNode;
+}
+
+interface IPropsOverflowStackData<T> extends IPropsOverflowStackBase {
+    type: 'data';
+    items: Array<T>;
+
+    renderVisibleItem: (data: T, index: number) => React.ReactNode;
+
+    /**
+     * If not provided, `renderVisibleItem` will be used
+     */
+    renderHiddenItem?: (data: T, index: number) => React.ReactNode;
+}
+
+export type IPropsOverflowStack<T> = IPropsOverflowStackSimple | IPropsOverflowStackData<T>;
+
+interface IStateOverflowStack {
+    /**
+     * Number of visible items when using auto overflow
+     */
+    visibleCount: number;
+}
+
+export class OverflowStack<T> extends React.PureComponent<IPropsOverflowStack<T>, IStateOverflowStack> {
+    private containerRef = React.createRef<HTMLDivElement>();
+    private itemRefs: Array<React.RefObject<HTMLDivElement>> = [];
+    private indicatorRef = React.createRef<HTMLDivElement>();
+    private resizeObserver: ResizeObserver | null = null;
+    private popoverContentRef = React.createRef<OverflowStackPopover<T>>();
+
+    /**
+     * Use a ref to avoid closure when passing props.
+     */
+    private currentPropsRef: {current: IPropsOverflowStack<T> | null} = {current: null};
+
+    /**
+     * Debounced calculation to avoid excessive updates during resize
+     */
+    private debouncedCalculate = debounce(() => {
+        this.calculateVisibleItems();
+    }, 50);
+
+    constructor(props: IPropsOverflowStack<T>) {
+        super(props);
+        const itemCount = this.getItemCount(props);
+        this.state = {
+            visibleCount: itemCount,
+        };
+
+        this.itemRefs = Array.from({length: itemCount}, () => React.createRef<HTMLDivElement>());
+        this.currentPropsRef.current = props;
+    }
+
+    private getItemCount(props: IPropsOverflowStack<T>): number {
+        if (props.type === 'data') {
+            return props.items.length;
+        }
+
+        return props.items?.length ?? 0;
+    }
+
+    componentDidMount() {
+        if (this.props.overflow?.type === 'auto') {
+            this.setupResizeObserver();
+
+            requestAnimationFrame(() => {
+                this.calculateVisibleItems();
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps: IPropsOverflowStack<T>) {
+        // Update the props ref for the popover
+        this.currentPropsRef.current = this.props;
+        this.popoverContentRef.current?.forceUpdate?.();
+
+        const isAutoMode = this.props.overflow?.type === 'auto';
+
+        if (prevProps.overflow !== this.props.overflow) {
+            if (isAutoMode) {
+                this.setupResizeObserver();
+            } else {
+                this.cleanupResizeObserver();
+            }
+        }
+
+        if (isAutoMode) {
+            const prevItemCount = this.getItemCount(prevProps);
+            const currentItemCount = this.getItemCount(this.props);
+
+            if (prevItemCount !== currentItemCount) {
+                // Recreate refs if item count changed
+                this.itemRefs = Array.from({length: currentItemCount}, () => React.createRef<HTMLDivElement>());
+
+                this.setState({visibleCount: currentItemCount}, () => {
+                    requestAnimationFrame(() => this.calculateVisibleItems());
+                });
+            } else {
+                requestAnimationFrame(() => this.calculateVisibleItems());
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.cleanupResizeObserver();
+        this.debouncedCalculate.cancel();
+    }
+
+    private setupResizeObserver() {
+        if (this.resizeObserver) {
+            return;
+        }
+
+        this.resizeObserver = new ResizeObserver(() => {
+            this.debouncedCalculate();
+        });
+
+        if (this.containerRef.current) {
+            this.resizeObserver.observe(this.containerRef.current);
+        }
+    }
+
+    private cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+
+    private getGapSize(): number {
+        const {gap = 'compact', overlap = false} = this.props;
+
+        if (overlap) {
+            return -8; // Overlapping items have negative margin
+        }
+
+        switch (gap) {
+            case 'compact':
+                return 4;
+            case 'loose':
+                return 8;
+            case 'none':
+                return 0;
+            default:
+                return 4;
+        }
+    }
+
+    private calculateVisibleItems() {
+        if (!this.containerRef.current || this.props.overflow?.type !== 'auto') {
+            return;
+        }
+
+        const containerWidth = this.containerRef.current.offsetWidth;
+
+        // If container has no width yet, skip calculation
+        if (containerWidth === 0) {
+            return;
+        }
+
+        const gapSize = this.getGapSize();
+        const indicatorWidth = this.indicatorRef.current?.offsetWidth || 40;
+        const totalItemCount = this.getItemCount(this.props);
+
+        let totalWidth = 0;
+        let visibleCount = 0;
+
+        // Calculate how many items fit
+        for (let i = 0; i < this.itemRefs.length; i++) {
+            const itemRef = this.itemRefs[i];
+
+            if (!itemRef.current) {
+                visibleCount = totalItemCount;
+                break;
+            }
+
+            const itemWidth = itemRef.current.offsetWidth;
+
+            if (itemWidth === 0) {
+                visibleCount = totalItemCount;
+                break;
+            }
+
+            const widthWithGap = itemWidth + (i > 0 ? gapSize : 0);
+            const needsIndicator = i < totalItemCount - 1;
+            const availableWidth = containerWidth - (needsIndicator ? indicatorWidth + gapSize : 0);
+
+            if (totalWidth + widthWithGap <= availableWidth) {
+                totalWidth += widthWithGap;
+                visibleCount = i + 1;
+            } else {
+                break;
+            }
+        }
+
+        if (visibleCount === 0 && totalItemCount > 0) {
+            visibleCount = 1;
+        }
+
+        if (this.state.visibleCount !== visibleCount) {
+            this.setState({visibleCount});
+        }
+    }
+
+    render() {
+        const {
+            gap = 'compact',
+            overlap = false,
+            overflow = {
+                type: 'fixed',
+                max: 4,
+            },
+            showOnlyHiddenInPopover = false,
+            indicatorStyle = 'count',
+            renderIndicator,
+            onIndicatorClick,
+            indicatorRadius = 'full',
+            containerClassName: className,
+        } = this.props;
+
+        const itemCount = this.getItemCount(this.props);
+
+        let max: number;
+
+        if (overflow.type === 'auto') {
+            max = this.state.visibleCount;
+        } else if (overflow.max === 'show-all') {
+            max = itemCount;
+        } else {
+            max = overflow.max ?? 4;
+        }
+
+        const itemsOverLimit = itemCount - max;
+
+        const renderVisibleItems = () => {
+            const renderItemWrapper = (content: React.ReactNode, index: number) => {
+                const isVisible = index < max;
+
+                return (
+                    <div
+                        key={index}
+                        ref={overflow.type === 'auto' ? this.itemRefs[index] : undefined}
+                        className="overflow-stack__item"
+                        style={overflow.type === 'auto' && !isVisible ? HIDDEN_ITEM_STYLE : undefined}
+                    >
+                        {content}
+                    </div>
+                );
+            };
+
+            const {props} = this;
+
+            if (props.type === 'data') {
+                const itemsToRender = overflow.type === 'auto' ? props.items : props.items.slice(0, max);
+
+                return itemsToRender.map((data, index) =>
+                    renderItemWrapper(props.renderVisibleItem(data, index), index),
+                );
+            } else {
+                const itemsToRender = overflow.type === 'auto' ? props.items : props.items.slice(0, max);
+
+                return itemsToRender.map((item, index) => renderItemWrapper(item, index));
+            }
+        };
+
+        const ariaLabel = showOnlyHiddenInPopover
+            ? `Show ${itemsOverLimit} hidden items`
+            : `Show ${itemsOverLimit} more items`;
+
+        const renderIndicatorButton = (onToggle: (ref: HTMLElement) => void) => {
+            const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+                e.stopPropagation();
+
+                if (onIndicatorClick == null) {
+                    onToggle(e.currentTarget);
+                } else {
+                    onIndicatorClick();
+                }
+            };
+
+            let indicator: React.ReactNode;
+
+            if (indicatorStyle === 'dots') {
+                indicator = <IconButton size="small" icon="dots" ariaValue={ariaLabel} onClick={handleClick} />;
+            } else {
+                const content = renderIndicator?.(itemsOverLimit) ?? defaultIndicator(itemsOverLimit);
+
+                indicator = (
+                    <HeadlessButton
+                        radius={indicatorRadius}
+                        onClick={handleClick}
+                        ariaLabel={ariaLabel}
+                        tooltip={ariaLabel}
+                    >
+                        {content}
+                    </HeadlessButton>
+                );
+            }
+
+            // Wrap in a div with ref for auto mode (needed for width measurement)
+            if (overflow.type === 'auto') {
+                return (
+                    <div ref={this.indicatorRef} style={{display: 'inline-flex'}}>
+                        {indicator}
+                    </div>
+                );
+            }
+
+            return indicator;
+        };
+
+        const classes = classNames(
+            'overflow-stack',
+            {
+                'overflow-stack--overlap': overlap,
+                [`overflow-stack--gap-${gap}`]: !overlap,
+            },
+            className,
+        );
+
+        return (
+            <WithPopover
+                component={({closePopup}) => (
+                    <OverflowStackPopover
+                        ref={this.popoverContentRef}
+                        propsRef={this.currentPropsRef}
+                        max={max}
+                        showOnlyHiddenInPopover={showOnlyHiddenInPopover}
+                        closePopup={closePopup}
+                    />
+                )}
+            >
+                {(onToggle) => {
+                    const stackContent = (
+                        <div
+                            ref={this.containerRef}
+                            className={classes}
+                            role="group"
+                            style={overflow.type === 'auto' ? {width: '100%'} : undefined}
+                        >
+                            {renderVisibleItems()}
+                            {itemsOverLimit > 0 && renderIndicatorButton(onToggle)}
+                        </div>
+                    );
+
+                    if (overflow.type === 'auto') {
+                        return <div style={{display: 'flex', width: '100%', minWidth: 0}}>{stackContent}</div>;
+                    }
+
+                    return stackContent;
+                }}
+            </WithPopover>
+        );
+    }
+}

package/app-typescript/components/OverflowStack/OverflowStackPopover.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {renderHiddenItemDefault} from './utils';
+import type {IPropsOverflowStack} from './OverflowStack';
+
+interface IPopoverContentProps<T> {
+    max: number;
+    closePopup(): void;
+    showOnlyHiddenInPopover: boolean;
+    propsRef: {current: IPropsOverflowStack<T> | null};
+}
+
+export class OverflowStackPopover<T> extends React.Component<IPopoverContentProps<T>> {
+    render() {
+        const {propsRef, max, showOnlyHiddenInPopover} = this.props;
+        const props = propsRef.current;
+
+        if (props == null) {
+            return null;
+        }
+
+        const itemsToShow = showOnlyHiddenInPopover ? props.items.slice(max) : props.items;
+
+        if (props.type === 'data') {
+            const renderFn = props.renderHiddenItem ?? props.renderVisibleItem;
+
+            return (
+                <div className="overflow-stack__popover">
+                    {itemsToShow.map((data, index) => (
+                        <div key={index} className="overflow-stack__popover-item">
+                            {renderFn(data as T, showOnlyHiddenInPopover ? index + max : index)}
+                        </div>
+                    ))}
+                </div>
+            );
+        } else {
+            const renderFn = props.renderPopoverItem ?? renderHiddenItemDefault;
+
+            return (
+                <div className="overflow-stack__popover">
+                    {itemsToShow.map((item, index) => renderFn(item, showOnlyHiddenInPopover ? index + max : index))}
+                </div>
+            );
+        }
+    }
+}

package/app-typescript/components/OverflowStack/utils.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const HIDDEN_ITEM_STYLE: React.CSSProperties = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    whiteSpace: 'nowrap',
+} as const;
+
+export const defaultIndicator = (count: number) => <span className="overflow-stack__indicator-content">+{count}</span>;
+
+export const renderHiddenItemDefault = (item: React.ReactNode, index: number) => (
+    <div key={index} className="overflow-stack__popover-item">
+        {item}
+    </div>
+);