superdesk-ui-framework 5.2.0 → 5.2.2

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom"), require("angular")) : factory(root["react"], root["react-dom"], root["angular"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_923__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_927__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 920);
+/******/ 	return __webpack_require__(__webpack_require__.s = 924);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -17303,11 +17303,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(56), __webpack_require__(73)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(57), __webpack_require__(73)(module)))
 
 /***/ }),
 
-/***/ 56:
+/***/ 57:
 /***/ (function(module, exports) {
 
 var g;
@@ -17364,7 +17364,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 89:
+/***/ 90:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28253,24 +28253,24 @@ return jQuery;
 
 /***/ }),
 
-/***/ 920:
+/***/ 924:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
 __webpack_require__(24);
-__webpack_require__(89);
-__webpack_require__(921);
-__webpack_require__(923);
-__webpack_require__(924);
+__webpack_require__(90);
+__webpack_require__(925);
+__webpack_require__(927);
+__webpack_require__(928);
 __webpack_require__(0);
 __webpack_require__(14);
 
 
 /***/ }),
 
-/***/ 921:
+/***/ 925:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28294,7 +28294,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(89), __webpack_require__(922) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(90), __webpack_require__(926) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29032,7 +29032,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 922:
+/***/ 926:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29041,7 +29041,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(89) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(90) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29062,23 +29062,23 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 923:
+/***/ 927:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_923__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_927__;
 
 /***/ }),
 
-/***/ 924:
+/***/ 928:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(925);
+__webpack_require__(929);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 925:
+/***/ 929:
 /***/ (function(module, exports) {
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "5.2.0",
+    "version": "5.2.2",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",
@@ -20,7 +20,7 @@
     ],
     "scripts": {
         "start": "webpack-dev-server --config tasks/webpack.dev.js",
-        "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
+        "watch": "webpack --watch --config tasks/webpack.prod.js & tsc --watch",
         "build": "tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc",
         "build-ui": "webpack && tsc && npm run lint",
         "playground-lint": "tsc -p examples/pages/playgrounds/react-playgrounds --noEmit",

package/react/components/CopyableTextBox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IInputCommon } from './Form/InputWrapper';
+interface ICopyableTextBoxProps extends IInputCommon {
+    value: string;
+    /**
+     * Defaults to medium
+     */
+    size?: 'medium' | 'large';
+    'data-test-id'?: string;
+}
+export declare const CopyableTextBox: React.FC<ICopyableTextBoxProps>;
+export {};

package/react/components/CopyableTextBox.js

@@ -0,0 +1,88 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyableTextBox = void 0;
+var react_1 = __importStar(require("react"));
+var Button_1 = require("./Button");
+var translations_1 = require("../translations");
+var Form_1 = require("./Form");
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Toast_1 = require("./Toast");
+var CopyableTextBox = function (props) {
+    var _a, _b;
+    var htmlId = (0, react_id_generator_1.default)();
+    var timeoutIdRef = react_1.default.useRef();
+    var _c = react_1.default.useState(false), copied = _c[0], setCopied = _c[1];
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (timeoutIdRef.current) {
+                window.clearTimeout(timeoutIdRef.current);
+            }
+        };
+    }, []);
+    var handleCopy = function () {
+        navigator.clipboard
+            .writeText(props.value)
+            .then(function () {
+            Toast_1.toasted.notify((0, translations_1.gettext)('Copied to clipboard'), {
+                type: 'success',
+                duration: 500,
+            });
+            setCopied(true);
+            if (timeoutIdRef.current) {
+                window.clearTimeout(timeoutIdRef.current);
+            }
+            timeoutIdRef.current = window.setTimeout(function () {
+                setCopied(false);
+            }, 2000);
+        })
+            .catch(function () {
+            Toast_1.toasted.notify((0, translations_1.gettext)("Couldn't copy"), {
+                type: 'warning',
+            });
+        });
+    };
+    return (react_1.default.createElement(Form_1.InputWrapper, { label: props.label, disabled: props.disabled, value: props.value, error: props.error, invalid: props.error != null, info: props.info, size: (_a = props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: true, htmlId: htmlId, tabindex: props.tabindex },
+        react_1.default.createElement("div", { className: "d-flex items-center gap-1" },
+            react_1.default.createElement("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: true, "data-test-id": props['data-test-id'] }),
+            react_1.default.createElement(Button_1.Button, { text: (0, translations_1.gettext)('Copy'), icon: copied ? 'ok' : 'copy', iconOnly: true, onClick: handleCopy, type: "default", style: "hollow", size: props.size === 'medium' ? 'normal' : ((_b = props.size) !== null && _b !== void 0 ? _b : 'normal'), "data-test-id": "copy-button" }))));
+};
+exports.CopyableTextBox = CopyableTextBox;

package/react/components/IconButton.d.ts

@@ -4,16 +4,10 @@ interface IProps {
     icon: string;
     ariaValue: string;
     toolTipFlow?: 'top' | 'left' | 'right' | 'down';
-    toolTipAppend?: boolean;
     size?: 'default' | 'small' | 'x-large';
     style?: 'default' | 'outline' | 'outlineWhite';
     disabled?: boolean;
     onClick(event: React.MouseEvent): void;
 }
-export declare class IconButton extends React.PureComponent<IProps> {
-    static defaultProps: {
-        toolTipAppend: boolean;
-    };
-    render(): JSX.Element;
-}
+export declare const IconButton: React.FC<IProps>;
 export {};

package/react/components/IconButton.js

@@ -1,19 +1,4 @@
 "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);
@@ -56,25 +41,15 @@ var React = __importStar(require("react"));
 var Icon_1 = require("./Icon");
 var Tooltip_1 = require("./Tooltip");
 var classnames_1 = __importDefault(require("classnames"));
-var IconButton = /** @class */ (function (_super) {
-    __extends(IconButton, _super);
-    function IconButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    IconButton.prototype.render = function () {
-        var _a;
-        var classes = (0, classnames_1.default)('icn-btn', (_a = {},
-            _a["icn-btn--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
-            _a["icn-btn--".concat(this.props.style)] = this.props.style || this.props.style !== undefined,
-            _a['icn-btn--disabled'] = this.props.disabled,
-            _a));
-        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.disabled ? null : this.props.ariaValue, flow: this.props.toolTipFlow },
-            React.createElement("button", { id: this.props.id, tabIndex: 0, onClick: this.props.onClick, className: classes, disabled: this.props.disabled, "aria-label": this.props.ariaValue },
-                React.createElement(Icon_1.Icon, { name: this.props.icon, ariaHidden: true }))));
-    };
-    IconButton.defaultProps = {
-        toolTipAppend: true,
-    };
-    return IconButton;
-}(React.PureComponent));
+var IconButton = function (props) {
+    var _a;
+    var classes = (0, classnames_1.default)('icn-btn', (_a = {},
+        _a["icn-btn--".concat(props.size)] = props.size || props.size !== undefined,
+        _a["icn-btn--".concat(props.style)] = props.style || props.style !== undefined,
+        _a['icn-btn--disabled'] = props.disabled,
+        _a));
+    return (React.createElement(Tooltip_1.Tooltip, { text: props.disabled ? null : props.ariaValue, flow: props.toolTipFlow },
+        React.createElement("button", { id: props.id, tabIndex: 0, onClick: props.onClick, className: classes, disabled: props.disabled, "aria-label": props.ariaValue },
+            React.createElement(Icon_1.Icon, { name: props.icon, ariaHidden: true }))));
+};
 exports.IconButton = IconButton;

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+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 declare class OverflowStack<T> extends React.PureComponent<IPropsOverflowStack<T>, IStateOverflowStack> {
+    private containerRef;
+    private itemRefs;
+    private indicatorRef;
+    private resizeObserver;
+    private popoverContentRef;
+    /**
+     * Use a ref to avoid closure when passing props.
+     */
+    private currentPropsRef;
+    /**
+     * Debounced calculation to avoid excessive updates during resize
+     */
+    private debouncedCalculate;
+    constructor(props: IPropsOverflowStack<T>);
+    private getItemCount;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IPropsOverflowStack<T>): void;
+    componentWillUnmount(): void;
+    private setupResizeObserver;
+    private cleanupResizeObserver;
+    private getGapSize;
+    private calculateVisibleItems;
+    render(): JSX.Element;
+}
+export {};