superdesk-ui-framework 3.0.17 → 3.0.19

package/images/avatar_dummy.svg

@@ -0,0 +1,4 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="100" cy="100" r="100" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-interactive)" fill-opacity="0.6"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -102,6 +102,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "moment": "^2.29.3",
+    "popper-max-size-modifier": "^0.2.0",
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",
     "react-beautiful-dnd": "^13.0.0",

package/react/components/Icon.d.ts

@@ -6,6 +6,7 @@ interface IProps {
     className?: string;
     scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;
+    color?: string;
 }
 export declare class Icon extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Icon.js

@@ -57,7 +57,7 @@ var Icon = /** @class */ (function (_super) {
             _a["color--".concat(this.props.type)] = this.props.type,
             _a["scale--".concat(this.props.scale)] = this.props.scale,
             _a));
-        return (React.createElement("i", { className: classes, "aria-label": this.props.name, "aria-hidden": this.props.ariaHidden }));
+        return (React.createElement("i", { className: classes, "aria-label": this.props.name, "aria-hidden": this.props.ariaHidden, style: { color: this.props.color } }));
     };
     return Icon;
 }(React.PureComponent));

package/react/components/ShowPopup.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Placement } from '@popperjs/core';
+/**
+ * The popup will remove itself if click/scroll events are detected outside the popup.
+ */
+export declare function showPopup(referenceElement: HTMLElement, placement: Placement, Component: React.ComponentType<{
+    closePopup(): void;
+}>, zIndex?: number, closeOnHoverEnd?: boolean, onClose?: () => void): {
+    close: () => void;
+};

package/react/components/ShowPopup.js

@@ -0,0 +1,158 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.showPopup = void 0;
+var React = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var core_1 = require("@popperjs/core");
+var lodash_1 = require("lodash");
+var popper_max_size_modifier_1 = __importDefault(require("popper-max-size-modifier"));
+var PopupPositioner = /** @class */ (function (_super) {
+    __extends(PopupPositioner, _super);
+    function PopupPositioner(props) {
+        var _this = _super.call(this, props) || this;
+        _this.closeOnClick = _this.closeOnClick.bind(_this);
+        _this.closeOnScroll = (0, lodash_1.throttle)(_this.closeOnScroll.bind(_this), 200);
+        _this.closeOnMouseLeave = _this.closeOnMouseLeave.bind(_this);
+        _this.wrapperEl = null;
+        _this.popper = null;
+        return _this;
+    }
+    PopupPositioner.prototype.closeOnClick = function (event) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+        if (this.props.referenceElement.contains(event.target) !== true
+            && this.wrapperEl.contains(event.target) !== true) {
+            this.props.onClose();
+        }
+    };
+    PopupPositioner.prototype.closeOnScroll = function (event) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+        if (this.wrapperEl.contains(event.target) !== true) {
+            this.props.onClose();
+        }
+    };
+    PopupPositioner.prototype.closeOnMouseLeave = function (event) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+        if (this.wrapperEl.contains(event.target) !== true) {
+            this.props.onClose();
+        }
+    };
+    PopupPositioner.prototype.componentDidMount = function () {
+        var _this = this;
+        window.addEventListener('click', this.closeOnClick, { capture: true });
+        window.addEventListener('scroll', this.closeOnScroll, true);
+        if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
+            this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave);
+            this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave);
+        }
+        var applyMaxSize = {
+            name: 'applyMaxSize',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['maxSize'],
+            fn: function (_a) {
+                var state = _a.state;
+                var height = state.modifiersData.maxSize.height;
+                // subtracting 10 in order to make a gap between the edge of the viewport
+                state.styles.popper.maxHeight = "".concat(height - 10, "px");
+            },
+        };
+        if (this.wrapperEl != null) {
+            /**
+             * Wait until referenceElement renders so createPopper
+             * can take its dimensions into account.
+             */
+            setTimeout(function () {
+                if (_this.wrapperEl != null) {
+                    _this.popper = (0, core_1.createPopper)(_this.props.referenceElement, _this.wrapperEl, {
+                        placement: _this.props.placement,
+                        modifiers: [
+                            popper_max_size_modifier_1.default,
+                            applyMaxSize,
+                        ],
+                    });
+                }
+            }, 50);
+        }
+    };
+    PopupPositioner.prototype.componentWillUnmount = function () {
+        var _a, _b;
+        window.removeEventListener('click', this.closeOnClick);
+        window.removeEventListener('scroll', this.closeOnScroll, true);
+        if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
+            this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave);
+            this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave);
+        }
+        (_b = (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    PopupPositioner.prototype.render = function () {
+        var _this = this;
+        var _a;
+        return (React.createElement("div", { ref: function (el) {
+                _this.wrapperEl = el;
+            }, style: { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 1, position: 'absolute', left: '-100vw' } }, this.props.children));
+    };
+    return PopupPositioner;
+}(React.PureComponent));
+/**
+ * The popup will remove itself if click/scroll events are detected outside the popup.
+ */
+function showPopup(referenceElement, placement, Component, zIndex, closeOnHoverEnd, onClose) {
+    var el = document.createElement('div');
+    document.body.appendChild(el);
+    var closeFn = function () {
+        react_dom_1.default.unmountComponentAtNode(el);
+        el.remove();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    react_dom_1.default.render((React.createElement(PopupPositioner, { referenceElement: referenceElement, placement: placement, onClose: closeFn, zIndex: zIndex, closeOnHoverEnd: closeOnHoverEnd || false },
+        React.createElement(Component, { closePopup: closeFn }))), el);
+    return { close: closeFn };
+}
+exports.showPopup = showPopup;

package/react/components/Spacer.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface IPropsSpacer {
+    h?: boolean;
+    v?: boolean;
+    gap: '0' | '4' | '8' | '16' | '32' | '64';
+    justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch';
+    noGrow?: boolean;
+    /**
+     * Will not wrap children in div elements.
+     * `noGrow` prop would then not be relevant.
+     */
+    noWrap?: boolean;
+    style?: React.CSSProperties;
+    children: Array<React.ReactNode>;
+}
+export declare class Spacer extends React.PureComponent<IPropsSpacer> {
+    render(): JSX.Element;
+}
+/**
+ * Renders a standalone spacing block - similar to <br />
+ */
+export interface ISpacerBlock {
+    h?: boolean;
+    v?: boolean;
+    gap: '4' | '8' | '16' | '32' | '64';
+}
+export declare class SpacerBlock extends React.PureComponent<ISpacerBlock> {
+    render(): JSX.Element;
+}

package/react/components/Spacer.js

@@ -0,0 +1,86 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacerBlock = exports.Spacer = void 0;
+var React = __importStar(require("react"));
+var Spacer = /** @class */ (function (_super) {
+    __extends(Spacer, _super);
+    function Spacer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spacer.prototype.render = function () {
+        var _a;
+        var _b = this.props, h = _b.h, v = _b.v, gap = _b.gap, justifyContent = _b.justifyContent, alignItems = _b.alignItems, noGrow = _b.noGrow, noWrap = _b.noWrap;
+        var justifyContentDefault = h ? 'space-between' : 'start';
+        var alignItemsDefault = h ? 'center' : 'start';
+        return (React.createElement("div", { style: __assign({ display: 'flex', flexDirection: v ? 'column' : 'row', gap: "".concat(gap, "px"), justifyContent: justifyContent !== null && justifyContent !== void 0 ? justifyContent : justifyContentDefault, alignItems: alignItems !== null && alignItems !== void 0 ? alignItems : alignItemsDefault, width: noGrow === true ? undefined : '100%' }, ((_a = this.props.style) !== null && _a !== void 0 ? _a : {})) }, this.props.children.map(function (el, i) { return noWrap ? el : (React.createElement("div", { key: i, style: {
+                width: noGrow === true ? undefined : '100%',
+            } }, el)); })));
+    };
+    return Spacer;
+}(React.PureComponent));
+exports.Spacer = Spacer;
+var SpacerBlock = /** @class */ (function (_super) {
+    __extends(SpacerBlock, _super);
+    function SpacerBlock() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SpacerBlock.prototype.render = function () {
+        var _a = this.props, gap = _a.gap, h = _a.h, v = _a.v;
+        return (React.createElement("span", { style: {
+                display: h === true ? 'inline-block' : 'block',
+                width: h === true ? "".concat(gap, "px") : undefined,
+                height: v === true ? "".concat(gap, "px") : undefined,
+            } }));
+    };
+    return SpacerBlock;
+}(React.PureComponent));
+exports.SpacerBlock = SpacerBlock;

package/react/components/WithPagination.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface IProps<T> {
-    getItems(pageNo: number, signal: AbortSignal): Promise<{
+    getItems(pageNo: number, pageSize: number, signal: AbortSignal): Promise<{
         items: Array<T>;
         itemCount: number;
     }>;

package/react/components/WithPagination.js

@@ -115,7 +115,7 @@ var WithPagination = /** @class */ (function (_super) {
     }
     WithPagination.prototype.getPageSize = function () {
         var _a;
-        return (_a = this.props.pageSize) !== null && _a !== void 0 ? _a : 20;
+        return (_a = this.props.pageSize) !== null && _a !== void 0 ? _a : 100;
     };
     WithPagination.prototype.switchPage = function (page) {
         var _this = this;
@@ -123,7 +123,7 @@ var WithPagination = /** @class */ (function (_super) {
             this.abortController.abort();
         }
         this.inProgress = true;
-        this.props.getItems(page, this.abortController.signal).then(function (res) {
+        this.props.getItems(page, this.getPageSize(), this.abortController.signal).then(function (res) {
             _this.inProgress = false;
             _this.setState({ items: res.items, currentPage: page }, function () {
                 var _a;
@@ -139,7 +139,7 @@ var WithPagination = /** @class */ (function (_super) {
     };
     WithPagination.prototype.componentDidMount = function () {
         var _this = this;
-        this.props.getItems(1, this.abortController.signal).then(function (res) {
+        this.props.getItems(1, this.getPageSize(), this.abortController.signal).then(function (res) {
             _this.pageCount = Math.ceil(res.itemCount / _this.getPageSize());
             _this.setState({ items: res.items });
         });

package/react/components/WithPopover.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Placement } from '@popperjs/core';
+export interface IPropsWithPopover {
+    children(toggle: (referenceElement: HTMLElement) => void): React.ReactNode;
+    placement: Placement;
+    component: React.ComponentType<{
+        closePopup(): void;
+    }>;
+    zIndex?: number;
+    closeOnHoverEnd?: boolean;
+    onClose?: () => void;
+}
+export declare class WithPopover extends React.PureComponent<IPropsWithPopover> {
+    private closePopup?;
+    constructor(props: IPropsWithPopover);
+    togglePopup(referenceElement: HTMLElement): void;
+    render(): React.ReactNode;
+}

package/react/components/WithPopover.js

@@ -0,0 +1,65 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPopover = void 0;
+var React = __importStar(require("react"));
+var ShowPopup_1 = require("./ShowPopup");
+var WithPopover = /** @class */ (function (_super) {
+    __extends(WithPopover, _super);
+    function WithPopover(props) {
+        var _this = _super.call(this, props) || this;
+        _this.togglePopup = _this.togglePopup.bind(_this);
+        return _this;
+    }
+    WithPopover.prototype.togglePopup = function (referenceElement) {
+        if (this.closePopup != null) {
+            this.closePopup();
+            this.closePopup = undefined;
+        }
+        else {
+            this.closePopup = (0, ShowPopup_1.showPopup)(referenceElement, this.props.placement, this.props.component, this.props.zIndex, this.props.closeOnHoverEnd, this.props.onClose).close;
+        }
+    };
+    WithPopover.prototype.render = function () {
+        return this.props.children(this.togglePopup);
+    };
+    return WithPopover;
+}(React.PureComponent));
+exports.WithPopover = WithPopover;

package/react/components/avatar/avatar-action-add.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IPropsBase } from './interfaces';
+interface IProps extends IPropsBase {
+    onClick?(): void;
+}
+export declare class AvatarContentAdd extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/avatar/avatar-action-add.js

@@ -0,0 +1,59 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarContentAdd = void 0;
+var React = __importStar(require("react"));
+var AvatarContentAdd = /** @class */ (function (_super) {
+    __extends(AvatarContentAdd, _super);
+    function AvatarContentAdd() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarContentAdd.prototype.render = function () {
+        var _this = this;
+        if (this.props.onClick == null) {
+            return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--add-item", title: this.props.tooltipText }));
+        }
+        else {
+            return (React.createElement("button", { className: "sd-avatar-content sd-avatar-content--add-item sd-avatar-content--add-item--clickable", title: this.props.tooltipText, onClick: function () { var _a, _b; return (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a); } }));
+        }
+    };
+    return AvatarContentAdd;
+}(React.PureComponent));
+exports.AvatarContentAdd = AvatarContentAdd;

package/react/components/avatar/avatar-group.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IPropsAvatar } from './avatar';
+import { IPropsAvatarPlaceholder } from './avatar-placeholder';
+export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
+export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
+export type IAvatarGroupItem = IAvatarInGroup | IAvatarPlaceholderInGroup;
+export interface IPropsAvatarGroup {
+    size: IPropsAvatar['size'];
+    items: Array<IAvatarGroupItem>;
+    /**
+     * maximum number of avatars to shown inline; defaults to 4
+     * if exceeded, "+1"/"+2"/"+n" button will be shown
+     */
+    max?: number | 'show-all';
+}
+export declare class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render(): JSX.Element;
+}

package/react/components/avatar/avatar-group.js

@@ -0,0 +1,104 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.AvatarGroup = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var avatar_1 = require("./avatar");
+var avatar_wrapper_1 = require("./avatar-wrapper");
+var avatar_number_1 = require("./avatar-number");
+var avatar_placeholder_1 = require("./avatar-placeholder");
+function isAvatar(item) {
+    return item['kind'] == null;
+}
+var AvatarGroup = /** @class */ (function (_super) {
+    __extends(AvatarGroup, _super);
+    function AvatarGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarGroup.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, size = _a.size, items = _a.items;
+        var someIconsHaveExtraElements = items.filter(isAvatar).some(function (_a) {
+            var icon = _a.icon, administratorIndicator = _a.administratorIndicator;
+            return icon != null || administratorIndicator != null;
+        });
+        var gap = someIconsHaveExtraElements ? 'medium' : 'none';
+        var max = (function () {
+            if (_this.props.max === 'show-all') {
+                return _this.props.items.length;
+            }
+            else if (_this.props.max == null) {
+                return 4;
+            }
+            else {
+                return _this.props.max;
+            }
+        })();
+        var itemsOverLimit = items.length - max;
+        return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group' },
+            items.slice(0, max).map(function (item, index) {
+                if (isAvatar(item)) {
+                    return (React.createElement(avatar_1.Avatar, __assign({}, item, { key: index, size: size })));
+                }
+                else {
+                    return (React.createElement(avatar_placeholder_1.AvatarPlaceholder, __assign({}, item, { key: index, size: _this.props.size })));
+                }
+            }),
+            itemsOverLimit > 0 && (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))));
+    };
+    return AvatarGroup;
+}(React.PureComponent));
+exports.AvatarGroup = AvatarGroup;

package/react/components/avatar/avatar-image.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IPropsBase } from './interfaces';
+interface IPropsImageAvatar extends IPropsBase {
+    imageUrl?: string | null;
+}
+export declare class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
+    render(): JSX.Element;
+}
+export {};