@pinnacle0/web-ui 0.3.38 → 0.3.39

package/core/MultipleCascader/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ControlledFormValue } from "../../internal/type";
+import type { DefaultOptionType } from "rc-cascader";
+import "antd/lib/cascader/style";
+import "./index.less";
+/**
+ * Attention:
+ * CascaderDataNode.value must be unique in the whole data tree.
+ */
+export interface CascaderDataNode<T extends string | number> {
+    label: string;
+    value: T | Array<CascaderDataNode<T>>;
+    disabled?: boolean;
+}
+export interface BaseProps<T extends string | number> {
+    data: CascaderDataNode<T>[];
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+export interface Props<T extends string | number> extends BaseProps<T>, ControlledFormValue<T[]> {
+}
+export declare class MultipleCascader<T extends string | number> extends React.PureComponent<Props<T>> {
+    static displayName: string;
+    static nonLeafPrefix: string;
+    getAntValue: () => (string | number)[][];
+    getAntDataSource: () => DefaultOptionType[];
+    onChange: (antValue: (string | number)[][]) => void;
+    render(): JSX.Element;
+}

package/core/MultipleCascader/index.js

@@ -0,0 +1,151 @@
+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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import AntCascader from "antd/lib/cascader";
+import { classNames } from "../../util/ClassNames";
+import "antd/lib/cascader/style";
+import "./index.less";
+var MultipleCascader = /** @class */ (function (_super) {
+    __extends(MultipleCascader, _super);
+    function MultipleCascader() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getAntValue = function () {
+            var data = _this.getAntDataSource();
+            var value = _this.props.value;
+            var getCascaderValues = function (data, value) {
+                var e_1, _a;
+                try {
+                    for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
+                        var item = data_1_1.value;
+                        if (item.value === value) {
+                            return [item.value];
+                        }
+                        else if (item.children) {
+                            var result = __spreadArray([item.value], __read(getCascaderValues(item.children, value)), false);
+                            if (result.includes(value)) {
+                                return result;
+                            }
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (data_1_1 && !data_1_1.done && (_a = data_1.return)) _a.call(data_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return [];
+            };
+            return value.map(function (_) { return getCascaderValues(data, _); });
+        };
+        _this.getAntDataSource = function () {
+            var getAntChildren = function (list) {
+                return list.map(function (node, index) { return ({
+                    label: node.label,
+                    disabled: node.disabled,
+                    value: Array.isArray(node.value) ? MultipleCascader.nonLeafPrefix + "".concat(index, "_") + node.label : node.value,
+                    children: Array.isArray(node.value) && node.value.length > 0 ? getAntChildren(node.value) : undefined,
+                }); });
+            };
+            return getAntChildren(_this.props.data);
+        };
+        _this.onChange = function (antValue) {
+            var data = _this.getAntDataSource();
+            var lastNodes = antValue.map(function (_) { return _[_.length - 1]; });
+            var branches = lastNodes.filter(function (_) { return "".concat(_).startsWith(MultipleCascader.nonLeafPrefix); });
+            var leaves = lastNodes.filter(function (_) { return !"".concat(_).startsWith(MultipleCascader.nonLeafPrefix); });
+            var recursion = function (data) {
+                if (data.children) {
+                    return data.children.flatMap(recursion);
+                }
+                return [data.value];
+            };
+            var getLeafValue = function (data, value) {
+                var e_2, _a;
+                try {
+                    for (var data_2 = __values(data), data_2_1 = data_2.next(); !data_2_1.done; data_2_1 = data_2.next()) {
+                        var item = data_2_1.value;
+                        if (item.value === value) {
+                            return recursion(item);
+                        }
+                        else if (item.children) {
+                            var result = getLeafValue(item.children, value);
+                            if (result.length) {
+                                return result;
+                            }
+                        }
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (data_2_1 && !data_2_1.done && (_a = data_2.return)) _a.call(data_2);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+                return [];
+            };
+            _this.props.onChange(__spreadArray(__spreadArray([], __read(leaves), false), __read(branches.flatMap(function (_) { return getLeafValue(data, _); })), false));
+        };
+        return _this;
+    }
+    MultipleCascader.prototype.render = function () {
+        var _a = this.props, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, disabled = _a.disabled, style = _a.style, className = _a.className;
+        return (React.createElement(AntCascader, { multiple: true, className: classNames("g-multiple-cascader", className), dropdownClassName: "g-multiple-cascader-popup", style: style, value: this.getAntValue(), onChange: this.onChange, options: this.getAntDataSource(), placeholder: placeholder, disabled: disabled, expandTrigger: "hover", allowClear: true, maxTagCount: "responsive" }));
+    };
+    MultipleCascader.displayName = "MultipleCascader";
+    MultipleCascader.nonLeafPrefix = "@@NON_LEAF_";
+    return MultipleCascader;
+}(React.PureComponent));
+export { MultipleCascader };
+//# sourceMappingURL=index.js.map

package/core/MultipleCascader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/MultipleCascader/index.tsx"],"names":[],"mappings":"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"}

package/core/MultipleEnumSelect.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ControlledFormValue } from "../internal/type";
+interface Props<Enum extends string | number> extends ControlledFormValue<Enum[]> {
+    list: Enum[];
+    translator?: (enumValue: Enum) => string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+export declare class MultipleEnumSelect<Enum extends string | number> extends React.PureComponent<Props<Enum>> {
+    static displayName: string;
+    getSelectOptions: () => {
+        value: Enum;
+        label: string;
+    }[];
+    render(): JSX.Element;
+}
+export {};

package/core/MultipleEnumSelect.js

@@ -0,0 +1,40 @@
+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 __());
+    };
+})();
+import React from "react";
+import { Select } from "./Select";
+var MultipleEnumSelect = /** @class */ (function (_super) {
+    __extends(MultipleEnumSelect, _super);
+    function MultipleEnumSelect() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getSelectOptions = function () {
+            var _a = _this.props, list = _a.list, translator = _a.translator;
+            return list.map(function (value) { return ({
+                value: value,
+                label: translator ? translator(value) : value.toString(),
+            }); });
+        };
+        return _this;
+    }
+    MultipleEnumSelect.prototype.render = function () {
+        var _a = this.props, disabled = _a.disabled, value = _a.value, onChange = _a.onChange, style = _a.style;
+        // antd: using options prop will get better perf than jsx definition
+        return React.createElement(Select, { mode: "multiple", value: value, onChange: onChange, disabled: disabled, style: style, options: this.getSelectOptions(), optionFilterProp: "label" });
+    };
+    MultipleEnumSelect.displayName = "MultipleEnumSelect";
+    return MultipleEnumSelect;
+}(React.PureComponent));
+export { MultipleEnumSelect };
+//# sourceMappingURL=MultipleEnumSelect.js.map

package/core/MultipleEnumSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleEnumSelect.js","sourceRoot":"","sources":["../../src/core/MultipleEnumSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAUhC;IAAsE,sCAAgC;IAAtG;QAAA,qEAgBC;QAbG,sBAAgB,GAAG;YACT,IAAA,KAAqB,KAAI,CAAC,KAAK,EAA9B,IAAI,UAAA,EAAE,UAAU,gBAAc,CAAC;YACtC,OAAO,IAAI,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;gBACtB,KAAK,OAAA;gBACL,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE;aAC3D,CAAC,EAHuB,CAGvB,CAAC,CAAC;QACR,CAAC,CAAC;;IAON,CAAC;IALG,mCAAM,GAAN;QACU,IAAA,KAAqC,IAAI,CAAC,KAAK,EAA9C,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAc,CAAC;QACtD,oEAAoE;QACpE,OAAO,oBAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,gBAAgB,EAAC,OAAO,GAAG,CAAC;IACrK,CAAC;IAdM,8BAAW,GAAG,oBAAoB,CAAC;IAe9C,yBAAC;CAAA,AAhBD,CAAsE,KAAK,CAAC,aAAa,GAgBxF;SAhBY,kBAAkB"}

package/core/MultipleSelector/TablePopover.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ControlledFormValue, StringKey } from "../../internal/type";
+import type { TableColumns } from "../Table";
+interface Props<RowType extends object> extends ControlledFormValue<RowType[]> {
+    dataSource: RowType[];
+    columns: TableColumns<RowType>;
+    rowKey: StringKey<RowType> | ((record: RowType) => string);
+    scrollY: number;
+    children?: (table: React.ReactElement) => React.ReactElement;
+    onFirstRender?: () => void;
+    selectionDisabled?: boolean;
+}
+export declare class TablePopover<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName: string;
+    componentDidMount(): void;
+    rowKey: (item: RowType) => string;
+    onChange: (newSelectedKeys: string[]) => void;
+    render(): JSX.Element;
+}
+export {};

package/core/MultipleSelector/TablePopover.js

@@ -0,0 +1,95 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import { Table } from "../Table";
+var TablePopover = /** @class */ (function (_super) {
+    __extends(TablePopover, _super);
+    function TablePopover() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rowKey = function (item) {
+            var rowKey = _this.props.rowKey;
+            return typeof rowKey === "function" ? rowKey(item) : item[rowKey];
+        };
+        _this.onChange = function (newSelectedKeys) {
+            var _a = _this.props, value = _a.value, dataSource = _a.dataSource, onChange = _a.onChange;
+            var prevSelectedKeys = value.map(_this.rowKey);
+            var newSelectedItems = newSelectedKeys
+                .filter(function (_) { return !prevSelectedKeys.includes(_); })
+                // By Ant Design, Parameter `newSelectedKeys` must exist in current data source
+                .map(function (key) { return dataSource.find(function (_) { return _this.rowKey(_) === key; }); });
+            if (newSelectedItems.length > 0) {
+                // Select
+                onChange(__spreadArray(__spreadArray([], __read(value), false), __read(newSelectedItems), false));
+            }
+            else {
+                // Deselect
+                var dataSourceKeys_1 = dataSource.map(_this.rowKey);
+                var deletedItems_1 = value.filter(function (_) {
+                    var key = _this.rowKey(_);
+                    return !newSelectedKeys.includes(key) && dataSourceKeys_1.includes(key);
+                });
+                var withoutDeletedItems = value.filter(function (_) { return !deletedItems_1.includes(_); });
+                onChange(withoutDeletedItems);
+            }
+        };
+        return _this;
+    }
+    TablePopover.prototype.componentDidMount = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onFirstRender) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    TablePopover.prototype.render = function () {
+        var _a = this.props, dataSource = _a.dataSource, rowKey = _a.rowKey, columns = _a.columns, children = _a.children, selectionDisabled = _a.selectionDisabled, scrollY = _a.scrollY, value = _a.value;
+        var selectedRowKeys = value.map(this.rowKey);
+        var rowSelection = selectionDisabled
+            ? undefined
+            : {
+                selectedRowKeys: selectedRowKeys,
+                onChange: this.onChange,
+            };
+        var table = React.createElement(Table, { rowSelection: rowSelection, size: "small", dataSource: dataSource, columns: columns, rowKey: rowKey, scrollY: scrollY, scrollX: "none" });
+        return React.createElement("div", { className: "g-multiple-selector-table-popover" }, children ? children(table) : table);
+    };
+    TablePopover.displayName = "TablePopover";
+    return TablePopover;
+}(React.PureComponent));
+export { TablePopover };
+//# sourceMappingURL=TablePopover.js.map

package/core/MultipleSelector/TablePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePopover.js","sourceRoot":"","sources":["../../../src/core/MultipleSelector/TablePopover.tsx"],"names":[],"mappings":"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"}

package/core/MultipleSelector/index.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { TableColumns } from "../Table";
+import type { TooltipPlacement } from "../Tooltip";
+import type { ControlledFormValue, StringKey } from "../../internal/type";
+export interface Props<RowType extends object> extends ControlledFormValue<RowType[]> {
+    dataSource: RowType[];
+    rowKey: StringKey<RowType> | ((record: RowType, index?: number) => string);
+    tableColumns: TableColumns<RowType>;
+    /**
+     * If string key, it will render each value as a closable tag with key as label.
+     * If function returning string[] (must be same length with values), it will render as closable tags.
+     * If function returning React Element, it will render the element itself.
+     * If undefined, it will render nothing.
+     */
+    renderTags?: StringKey<RowType> | ((values: RowType[]) => React.ReactElement | string[]);
+    renderPopover?: (table: React.ReactElement) => React.ReactElement;
+    renderButtonText?: string | ((selectedCount: number) => string);
+    popoverPlacement?: TooltipPlacement;
+    popoverClassName?: string;
+    popoverStyle?: React.CSSProperties;
+    onPopoverFirstRender?: () => void;
+    disabled?: "button" | "table";
+    scrollY?: number;
+}
+export declare class MultipleSelector<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName: string;
+    buttonText: () => string;
+    onClose: (index: number) => void;
+    renderSelectedAsTags: (labels: string[]) => JSX.Element;
+    renderSelectedItems: () => JSX.Element | undefined;
+    renderPopover: () => JSX.Element;
+    render(): JSX.Element;
+}

package/core/MultipleSelector/index.js

@@ -0,0 +1,103 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import { Popover } from "../Popover";
+import { Button } from "../Button";
+import { Tags } from "../Tags";
+import { i18n } from "../../internal/i18n/core";
+import { TextUtil } from "../../internal/TextUtil";
+import { TablePopover } from "./TablePopover";
+var MultipleSelector = /** @class */ (function (_super) {
+    __extends(MultipleSelector, _super);
+    function MultipleSelector() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.buttonText = function () {
+            var _a = _this.props, value = _a.value, renderButtonText = _a.renderButtonText;
+            var t = i18n();
+            var length = value.length;
+            if (renderButtonText) {
+                return typeof renderButtonText === "string" ? renderButtonText : renderButtonText(length);
+            }
+            else {
+                return value.length === 0 ? t.select : TextUtil.interpolate(t.edit, value.length.toString());
+            }
+        };
+        _this.onClose = function (index) {
+            var _a = _this.props, value = _a.value, onChange = _a.onChange;
+            var newValue = __spreadArray([], __read(value), false);
+            newValue.splice(index, 1);
+            onChange(newValue);
+        };
+        _this.renderSelectedAsTags = function (labels) {
+            var disabled = _this.props.disabled;
+            return (React.createElement("div", { className: "g-multiple-selector-selected-tags" },
+                React.createElement(Tags, { maxWidth: 600, color: "blue", items: labels, onClose: disabled ? undefined : _this.onClose })));
+        };
+        _this.renderSelectedItems = function () {
+            var _a = _this.props, value = _a.value, renderTags = _a.renderTags;
+            if (renderTags) {
+                if (typeof renderTags === "function") {
+                    var renderedResult = renderTags(value);
+                    return Array.isArray(renderedResult) ? _this.renderSelectedAsTags(renderedResult) : renderedResult;
+                }
+                else {
+                    return _this.renderSelectedAsTags(value.map(function (_) { return _[renderTags]; }));
+                }
+            }
+        };
+        _this.renderPopover = function () {
+            var _a = _this.props, renderPopover = _a.renderPopover, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, onPopoverFirstRender = _a.onPopoverFirstRender, dataSource = _a.dataSource, tableColumns = _a.tableColumns, rowKey = _a.rowKey, scrollY = _a.scrollY;
+            return (React.createElement(TablePopover, { dataSource: dataSource, columns: tableColumns, rowKey: rowKey, value: value, onChange: onChange, onFirstRender: onPopoverFirstRender, selectionDisabled: disabled === "table", scrollY: scrollY || 500 }, renderPopover));
+        };
+        return _this;
+    }
+    MultipleSelector.prototype.render = function () {
+        var _a = this.props, popoverPlacement = _a.popoverPlacement, disabled = _a.disabled, popoverClassName = _a.popoverClassName, popoverStyle = _a.popoverStyle;
+        return (React.createElement("div", { className: "g-multiple-selector" },
+            this.renderSelectedItems(),
+            React.createElement(Popover, { placement: popoverPlacement || "bottomLeft", trigger: "click", content: this.renderPopover(), overlayClassName: popoverClassName, overlayStyle: popoverStyle },
+                React.createElement(Button, { color: "wire-frame", disabled: disabled === "button" }, this.buttonText()))));
+    };
+    MultipleSelector.displayName = "MultipleSelector";
+    return MultipleSelector;
+}(React.PureComponent));
+export { MultipleSelector };
+//# sourceMappingURL=index.js.map

package/core/MultipleSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/MultipleSelector/index.tsx"],"names":[],"mappings":"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"}

package/core/MutableTable/index.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import type { TableColumns } from "../Table";
+import type { PickOptional } from "../../internal/type";
+import "./index.less";
+/**
+ * A MutableTable is a table supporting add/minus rows.
+ * The table should contain at least 1 row.
+ * If props.nextRow is undefined, the (+) button should be disabled.
+ *
+ * Attention:
+ * dataSource must not be empty array.
+ */
+export interface SequenceColumnConfig {
+    title: string;
+    renderer: (index: number) => string;
+    width: number;
+    align: "left" | "center" | "right";
+}
+export interface Props<RowType extends object> {
+    dataSource: RowType[];
+    columns: TableColumns<RowType>;
+    onChange?: (values: RowType[]) => void;
+    onRowCountChange?: (type: "add-row" | "remove-row") => void;
+    nextRow?: RowType | true;
+    fixedRowCount?: number;
+    shouldRenderIfUpdate?: any;
+    sequenceColumn?: Partial<SequenceColumnConfig> | "default";
+    scrollX?: "max-content" | "none" | number;
+    scrollY?: number;
+    bordered?: boolean;
+    disabled?: boolean;
+}
+export declare class MutableTable<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName: string;
+    static defaultProps: PickOptional<Props<any>>;
+    private readonly ref;
+    private readonly defaultSequenceColumn;
+    constructor(props: Props<RowType>);
+    componentDidUpdate(prevProps: Props<RowType>): void;
+    getColumns: () => TableColumns<RowType>;
+    onDeleteRow: (index: number) => void;
+    onAddRow: (nextRow: RowType | true) => void;
+    render(): JSX.Element;
+}