superdesk-ui-framework 5.2.0 → 5.2.2

package/react/components/OverflowStack/OverflowStack.js

@@ -0,0 +1,305 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowStack = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var debounce_1 = __importDefault(require("lodash/debounce"));
+var WithPopover_1 = require("../WithPopover");
+var HeadlessButton_1 = require("../HeadlessButton");
+var IconButton_1 = require("../IconButton");
+var OverflowStackPopover_1 = require("./OverflowStackPopover");
+var utils_1 = require("./utils");
+var OverflowStack = /** @class */ (function (_super) {
+    __extends(OverflowStack, _super);
+    function OverflowStack(props) {
+        var _this = _super.call(this, props) || this;
+        _this.containerRef = React.createRef();
+        _this.itemRefs = [];
+        _this.indicatorRef = React.createRef();
+        _this.resizeObserver = null;
+        _this.popoverContentRef = React.createRef();
+        /**
+         * Use a ref to avoid closure when passing props.
+         */
+        _this.currentPropsRef = { current: null };
+        /**
+         * Debounced calculation to avoid excessive updates during resize
+         */
+        _this.debouncedCalculate = (0, debounce_1.default)(function () {
+            _this.calculateVisibleItems();
+        }, 50);
+        var itemCount = _this.getItemCount(props);
+        _this.state = {
+            visibleCount: itemCount,
+        };
+        _this.itemRefs = Array.from({ length: itemCount }, function () { return React.createRef(); });
+        _this.currentPropsRef.current = props;
+        return _this;
+    }
+    OverflowStack.prototype.getItemCount = function (props) {
+        var _a, _b;
+        if (props.type === 'data') {
+            return props.items.length;
+        }
+        return (_b = (_a = props.items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    };
+    OverflowStack.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a;
+        if (((_a = this.props.overflow) === null || _a === void 0 ? void 0 : _a.type) === 'auto') {
+            this.setupResizeObserver();
+            requestAnimationFrame(function () {
+                _this.calculateVisibleItems();
+            });
+        }
+    };
+    OverflowStack.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var _a, _b, _c;
+        // Update the props ref for the popover
+        this.currentPropsRef.current = this.props;
+        (_b = (_a = this.popoverContentRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+        var isAutoMode = ((_c = this.props.overflow) === null || _c === void 0 ? void 0 : _c.type) === 'auto';
+        if (prevProps.overflow !== this.props.overflow) {
+            if (isAutoMode) {
+                this.setupResizeObserver();
+            }
+            else {
+                this.cleanupResizeObserver();
+            }
+        }
+        if (isAutoMode) {
+            var prevItemCount = this.getItemCount(prevProps);
+            var currentItemCount = this.getItemCount(this.props);
+            if (prevItemCount !== currentItemCount) {
+                // Recreate refs if item count changed
+                this.itemRefs = Array.from({ length: currentItemCount }, function () { return React.createRef(); });
+                this.setState({ visibleCount: currentItemCount }, function () {
+                    requestAnimationFrame(function () { return _this.calculateVisibleItems(); });
+                });
+            }
+            else {
+                requestAnimationFrame(function () { return _this.calculateVisibleItems(); });
+            }
+        }
+    };
+    OverflowStack.prototype.componentWillUnmount = function () {
+        this.cleanupResizeObserver();
+        this.debouncedCalculate.cancel();
+    };
+    OverflowStack.prototype.setupResizeObserver = function () {
+        var _this = this;
+        if (this.resizeObserver) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(function () {
+            _this.debouncedCalculate();
+        });
+        if (this.containerRef.current) {
+            this.resizeObserver.observe(this.containerRef.current);
+        }
+    };
+    OverflowStack.prototype.cleanupResizeObserver = function () {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    OverflowStack.prototype.getGapSize = function () {
+        var _a = this.props, _b = _a.gap, gap = _b === void 0 ? 'compact' : _b, _c = _a.overlap, overlap = _c === void 0 ? false : _c;
+        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;
+        }
+    };
+    OverflowStack.prototype.calculateVisibleItems = function () {
+        var _a, _b;
+        if (!this.containerRef.current || ((_a = this.props.overflow) === null || _a === void 0 ? void 0 : _a.type) !== 'auto') {
+            return;
+        }
+        var containerWidth = this.containerRef.current.offsetWidth;
+        // If container has no width yet, skip calculation
+        if (containerWidth === 0) {
+            return;
+        }
+        var gapSize = this.getGapSize();
+        var indicatorWidth = ((_b = this.indicatorRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 40;
+        var totalItemCount = this.getItemCount(this.props);
+        var totalWidth = 0;
+        var visibleCount = 0;
+        // Calculate how many items fit
+        for (var i = 0; i < this.itemRefs.length; i++) {
+            var itemRef = this.itemRefs[i];
+            if (!itemRef.current) {
+                visibleCount = totalItemCount;
+                break;
+            }
+            var itemWidth = itemRef.current.offsetWidth;
+            if (itemWidth === 0) {
+                visibleCount = totalItemCount;
+                break;
+            }
+            var widthWithGap = itemWidth + (i > 0 ? gapSize : 0);
+            var needsIndicator = i < totalItemCount - 1;
+            var 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: visibleCount });
+        }
+    };
+    OverflowStack.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var _b;
+        var _c = this.props, _d = _c.gap, gap = _d === void 0 ? 'compact' : _d, _e = _c.overlap, overlap = _e === void 0 ? false : _e, _f = _c.overflow, overflow = _f === void 0 ? {
+            type: 'fixed',
+            max: 4,
+        } : _f, _g = _c.showOnlyHiddenInPopover, showOnlyHiddenInPopover = _g === void 0 ? false : _g, _h = _c.indicatorStyle, indicatorStyle = _h === void 0 ? 'count' : _h, renderIndicator = _c.renderIndicator, onIndicatorClick = _c.onIndicatorClick, _j = _c.indicatorRadius, indicatorRadius = _j === void 0 ? 'full' : _j, className = _c.containerClassName;
+        var itemCount = this.getItemCount(this.props);
+        var max;
+        if (overflow.type === 'auto') {
+            max = this.state.visibleCount;
+        }
+        else if (overflow.max === 'show-all') {
+            max = itemCount;
+        }
+        else {
+            max = (_b = overflow.max) !== null && _b !== void 0 ? _b : 4;
+        }
+        var itemsOverLimit = itemCount - max;
+        var renderVisibleItems = function () {
+            var renderItemWrapper = function (content, index) {
+                var isVisible = index < max;
+                return (React.createElement("div", { key: index, ref: overflow.type === 'auto' ? _this.itemRefs[index] : undefined, className: "overflow-stack__item", style: overflow.type === 'auto' && !isVisible ? utils_1.HIDDEN_ITEM_STYLE : undefined }, content));
+            };
+            var props = _this.props;
+            if (props.type === 'data') {
+                var itemsToRender = overflow.type === 'auto' ? props.items : props.items.slice(0, max);
+                return itemsToRender.map(function (data, index) {
+                    return renderItemWrapper(props.renderVisibleItem(data, index), index);
+                });
+            }
+            else {
+                var itemsToRender = overflow.type === 'auto' ? props.items : props.items.slice(0, max);
+                return itemsToRender.map(function (item, index) { return renderItemWrapper(item, index); });
+            }
+        };
+        var ariaLabel = showOnlyHiddenInPopover
+            ? "Show ".concat(itemsOverLimit, " hidden items")
+            : "Show ".concat(itemsOverLimit, " more items");
+        var renderIndicatorButton = function (onToggle) {
+            var _a;
+            var handleClick = function (e) {
+                e.stopPropagation();
+                if (onIndicatorClick == null) {
+                    onToggle(e.currentTarget);
+                }
+                else {
+                    onIndicatorClick();
+                }
+            };
+            var indicator;
+            if (indicatorStyle === 'dots') {
+                indicator = React.createElement(IconButton_1.IconButton, { size: "small", icon: "dots", ariaValue: ariaLabel, onClick: handleClick });
+            }
+            else {
+                var content = (_a = renderIndicator === null || renderIndicator === void 0 ? void 0 : renderIndicator(itemsOverLimit)) !== null && _a !== void 0 ? _a : (0, utils_1.defaultIndicator)(itemsOverLimit);
+                indicator = (React.createElement(HeadlessButton_1.HeadlessButton, { radius: indicatorRadius, onClick: handleClick, ariaLabel: ariaLabel, tooltip: ariaLabel }, content));
+            }
+            // Wrap in a div with ref for auto mode (needed for width measurement)
+            if (overflow.type === 'auto') {
+                return (React.createElement("div", { ref: _this.indicatorRef, style: { display: 'inline-flex' } }, indicator));
+            }
+            return indicator;
+        };
+        var classes = (0, classnames_1.default)('overflow-stack', (_a = {
+                'overflow-stack--overlap': overlap
+            },
+            _a["overflow-stack--gap-".concat(gap)] = !overlap,
+            _a), className);
+        return (React.createElement(WithPopover_1.WithPopover, { component: function (_a) {
+                var closePopup = _a.closePopup;
+                return (React.createElement(OverflowStackPopover_1.OverflowStackPopover, { ref: _this.popoverContentRef, propsRef: _this.currentPropsRef, max: max, showOnlyHiddenInPopover: showOnlyHiddenInPopover, closePopup: closePopup }));
+            } }, function (onToggle) {
+            var stackContent = (React.createElement("div", { ref: _this.containerRef, className: classes, role: "group", style: overflow.type === 'auto' ? { width: '100%' } : undefined },
+                renderVisibleItems(),
+                itemsOverLimit > 0 && renderIndicatorButton(onToggle)));
+            if (overflow.type === 'auto') {
+                return React.createElement("div", { style: { display: 'flex', width: '100%', minWidth: 0 } }, stackContent);
+            }
+            return stackContent;
+        }));
+    };
+    return OverflowStack;
+}(React.PureComponent));
+exports.OverflowStack = OverflowStack;

package/react/components/OverflowStack/OverflowStackPopover.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { IPropsOverflowStack } from './OverflowStack';
+interface IPopoverContentProps<T> {
+    max: number;
+    closePopup(): void;
+    showOnlyHiddenInPopover: boolean;
+    propsRef: {
+        current: IPropsOverflowStack<T> | null;
+    };
+}
+export declare class OverflowStackPopover<T> extends React.Component<IPopoverContentProps<T>> {
+    render(): JSX.Element | null;
+}
+export {};

package/react/components/OverflowStack/OverflowStackPopover.js

@@ -0,0 +1,78 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowStackPopover = void 0;
+var React = __importStar(require("react"));
+var utils_1 = require("./utils");
+var OverflowStackPopover = /** @class */ (function (_super) {
+    __extends(OverflowStackPopover, _super);
+    function OverflowStackPopover() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    OverflowStackPopover.prototype.render = function () {
+        var _a, _b;
+        var _c = this.props, propsRef = _c.propsRef, max = _c.max, showOnlyHiddenInPopover = _c.showOnlyHiddenInPopover;
+        var props = propsRef.current;
+        if (props == null) {
+            return null;
+        }
+        var itemsToShow = showOnlyHiddenInPopover ? props.items.slice(max) : props.items;
+        if (props.type === 'data') {
+            var renderFn_1 = (_a = props.renderHiddenItem) !== null && _a !== void 0 ? _a : props.renderVisibleItem;
+            return (React.createElement("div", { className: "overflow-stack__popover" }, itemsToShow.map(function (data, index) { return (React.createElement("div", { key: index, className: "overflow-stack__popover-item" }, renderFn_1(data, showOnlyHiddenInPopover ? index + max : index))); })));
+        }
+        else {
+            var renderFn_2 = (_b = props.renderPopoverItem) !== null && _b !== void 0 ? _b : utils_1.renderHiddenItemDefault;
+            return (React.createElement("div", { className: "overflow-stack__popover" }, itemsToShow.map(function (item, index) { return renderFn_2(item, showOnlyHiddenInPopover ? index + max : index); })));
+        }
+    };
+    return OverflowStackPopover;
+}(React.Component));
+exports.OverflowStackPopover = OverflowStackPopover;

package/react/components/OverflowStack/utils.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const HIDDEN_ITEM_STYLE: React.CSSProperties;
+export declare const defaultIndicator: (count: number) => JSX.Element;
+export declare const renderHiddenItemDefault: (item: React.ReactNode, index: number) => JSX.Element;

package/react/components/OverflowStack/utils.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHiddenItemDefault = exports.defaultIndicator = exports.HIDDEN_ITEM_STYLE = void 0;
+var React = __importStar(require("react"));
+exports.HIDDEN_ITEM_STYLE = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    whiteSpace: 'nowrap',
+};
+var defaultIndicator = function (count) { return React.createElement("span", { className: "overflow-stack__indicator-content" },
+    "+",
+    count); };
+exports.defaultIndicator = defaultIndicator;
+var renderHiddenItemDefault = function (item, index) { return (React.createElement("div", { key: index, className: "overflow-stack__popover-item" }, item)); };
+exports.renderHiddenItemDefault = renderHiddenItemDefault;

package/react/components/SearchBar.d.ts

@@ -1,24 +1,24 @@
-import * as React from 'react';
+import React from 'react';
 interface IProps {
-    value?: string;
-    type?: 'expanded' | 'collapsed' | 'boxed';
+    children?: React.ReactNode;
+    /**
+     * Defaults to `expanded`
+     */
+    type?: 'expanded' | 'collapsed';
     placeholder: string;
-    focused?: boolean;
     boxed?: boolean;
-    onSubmit?(value: string | number): void;
-}
-interface IState {
-    inputValue: any;
-    type: string;
-    focused: boolean;
-    boxed?: boolean;
-    keyDown?: boolean;
-}
-export declare class SearchBar extends React.PureComponent<IProps, IState> {
-    private inputRef;
-    constructor(props: IProps);
-    componentDidUpdate(prevProps: any): void;
-    componentDidMount: () => void;
-    render(): JSX.Element;
+    hideSearchButton?: boolean;
+    searchOptions?: {
+        searchOnType: true;
+        /**
+         * Defaults to 300ms
+         */
+        searchDelay: number;
+    };
+    onSubmit(value: string): void;
 }
+export declare const SearchBar: React.ForwardRefExoticComponent<IProps & React.RefAttributes<{
+    focus: () => void;
+    search: () => void;
+}>>;
 export {};