wini-web-components 0.9.6 → 0.9.8

package/dist/component/checkbox/checkbox.js

@@ -50,7 +50,7 @@ var Checkbox = /** @class */ (function (_super) {
     };
     Checkbox.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var convertStyle = {
             width: (_a = this.props.size) !== null && _a !== void 0 ? _a : '2.4rem',
             height: (_b = this.props.size) !== null && _b !== void 0 ? _b : '2.4rem',
@@ -64,16 +64,20 @@ var Checkbox = /** @class */ (function (_super) {
             delete this.props.style.maxHeight;
             convertStyle = __assign(__assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { className: "checkbox-container row", style: convertStyle },
-            react_1.default.createElement("input", { type: "checkbox", checked: this.state.value, disabled: this.props.disabled, onChange: function () {
+        return react_1.default.createElement("label", { className: "checkbox-container row", style: convertStyle, "is-null-value": "".concat(this.state.value == undefined) },
+            react_1.default.createElement("input", { type: "checkbox", checked: this.state.value, disabled: this.props.disabled, onChange: function (ev) {
+                    ev.stopPropagation();
                     var newValue = !_this.state.value;
                     _this.setState({ value: newValue });
                     if (_this.props.onChange)
                         _this.props.onChange(newValue);
                 } }),
-            react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.createElement("path", { d: "M6.72 11.52 L10.8 15.6 L18 7.2", fill: "none", strokeLinecap: "round", stroke: (_c = this.props.checkColor) !== null && _c !== void 0 ? _c : '#ffffff' })));
+            react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.state.value == undefined ?
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.79199 9.95298C4.79199 9.69148 5.00398 9.47949 5.26548 9.47949H14.7352C14.9967 9.47949 15.2087 9.69148 15.2087 9.95298C15.2087 10.2145 14.9967 10.4265 14.7352 10.4265H5.26548C5.00398 10.4265 4.79199 10.2145 4.79199 9.95298Z", fill: (_c = this.props.checkColor) !== null && _c !== void 0 ? _c : '#ffffff' }) :
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.07 6.49317C15.2549 6.67808 15.2549 6.97787 15.07 7.16278L8.91467 13.3181C8.72977 13.503 8.42997 13.503 8.24507 13.3181L4.93067 10.0037C4.74577 9.81878 4.74577 9.51899 4.93067 9.33408C5.11558 9.14917 5.41537 9.14917 5.60028 9.33408L8.57987 12.3137L14.4004 6.49317C14.5853 6.30827 14.8851 6.30827 15.07 6.49317Z", fill: (_d = this.props.checkColor) !== null && _d !== void 0 ? _d : '#ffffff' })));
     };
     return Checkbox;
 }(react_1.default.Component));
 exports.Checkbox = Checkbox;
+react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#366AE2" }));

package/dist/component/input-multi-select/input-multi-select.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 import './input-multi-select.css';
-import { OptionsItem } from '../../index';
+import { OptionsItem } from '../select1/select1';
 interface SelectMultipleProps {
     value?: Array<string | number>;
     options: Required<Array<OptionsItem>>;
@@ -15,6 +15,7 @@ interface SelectMultipleProps {
 }
 interface SelectMultipleState {
     value: Array<string | number>;
+    options: Required<Array<OptionsItem>>;
     offset: DOMRect;
     isOpen: boolean;
     onSelect: any;
@@ -22,9 +23,12 @@ interface SelectMultipleState {
     style?: Object;
 }
 export declare class SelectMultiple extends React.Component<SelectMultipleProps, SelectMultipleState> {
+    private containerRef;
     constructor(props: SelectMultipleProps);
     private onCheck;
     private search;
+    private onClickItem;
+    private renderOptions;
     componentDidUpdate(prevProps: SelectMultipleProps, prevState: SelectMultipleState): void;
     render(): React.JSX.Element;
 }

package/dist/component/input-multi-select/input-multi-select.js

@@ -25,6 +25,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -77,10 +100,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectMultiple = void 0;
 var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 require("./input-multi-select.css");
-var index_1 = require("../../index");
+var checkbox_1 = require("../checkbox/checkbox");
+var text_1 = require("../text/text");
 ;
 var SelectMultiple = /** @class */ (function (_super) {
     __extends(SelectMultiple, _super);
@@ -88,8 +112,10 @@ var SelectMultiple = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         _this = _super.call(this, props) || this;
+        _this.containerRef = (0, react_1.createRef)();
         _this.state = {
             value: (_a = props.value) !== null && _a !== void 0 ? _a : [],
+            options: props.options,
             offset: {
                 x: 0,
                 y: 0,
@@ -108,15 +134,16 @@ var SelectMultiple = /** @class */ (function (_super) {
         };
         _this.onCheck = _this.onCheck.bind(_this);
         _this.search = _this.search.bind(_this);
+        _this.onClickItem = _this.onClickItem.bind(_this);
         return _this;
     }
-    SelectMultiple.prototype.onCheck = function (item) {
+    SelectMultiple.prototype.onCheck = function (value, list) {
         var newValue = [];
-        if (this.state.value.includes(item.id)) {
-            newValue = this.state.value.filter(function (vl) { return vl !== item.id; });
+        if (value) {
+            newValue = __spreadArray(__spreadArray([], this.state.value, true), list.map(function (e) { return e.id; }), true);
         }
         else {
-            newValue = __spreadArray(__spreadArray([], this.state.value, true), [item.id], false);
+            newValue = this.state.value.filter(function (vl) { return list.every(function (e) { return vl !== e.id; }); });
         }
         this.setState(__assign(__assign({}, this.state), { value: newValue }));
         if (this.props.onChange)
@@ -148,82 +175,123 @@ var SelectMultiple = /** @class */ (function (_super) {
             });
         });
     };
-    SelectMultiple.prototype.componentDidUpdate = function (prevProps, prevState) {
+    SelectMultiple.prototype.onClickItem = function (ev, item) {
         var _a, _b;
-        if (prevProps.value !== this.props.value) {
+        ev.stopPropagation();
+        var newValue = this.state.value.filter(function (vl) { return vl !== item; });
+        this.setState(__assign(__assign(__assign({}, this.state), { value: newValue }), (this.state.isOpen ? {} : {
+            isOpen: true,
+            style: undefined,
+            offset: (_b = (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(),
+        })));
+        if (this.props.onChange)
+            this.props.onChange(newValue);
+    };
+    SelectMultiple.prototype.renderOptions = function (item) {
+        var _this = this;
+        var _a, _b;
+        var children = [];
+        if (!item.parentId)
+            children = ((_a = this.state.search) !== null && _a !== void 0 ? _a : this.state.options).filter(function (e) { return e.parentId === item.id; });
+        // 
+        return react_1.default.createElement("div", { key: item.id, className: 'col', style: { width: '100%' } },
+            react_1.default.createElement("div", { className: 'select-tile row', style: { paddingLeft: item.parentId ? '4.4rem' : undefined }, onClick: children.length ? function () {
+                    if (_this.state.search) {
+                        _this.setState(__assign(__assign({}, _this.state), { search: _this.state.search.map(function (e) {
+                                if (e.id === item.id)
+                                    return __assign(__assign({}, e), { isOpen: !item.isOpen });
+                                else
+                                    return e;
+                            }) }));
+                    }
+                    else {
+                        _this.setState(__assign(__assign({}, _this.state), { options: _this.state.options.map(function (e) {
+                                if (e.id === item.id)
+                                    return __assign(__assign({}, e), { isOpen: !item.isOpen });
+                                else
+                                    return e;
+                            }) }));
+                    }
+                } : undefined },
+                ((_b = this.state.search) !== null && _b !== void 0 ? _b : this.state.options).some(function (e) { return e.parentId; }) && react_1.default.createElement("div", { className: 'row', style: { width: '1.4rem', height: '1.4rem' } }, children.length ? react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: item.isOpen ? free_solid_svg_icons_1.faCaretDown : free_solid_svg_icons_1.faCaretRight, style: { fontSize: '1.2rem', color: '#161C2499' } }) : null),
+                react_1.default.createElement(checkbox_1.Checkbox, { value: children.length ? (children.every(function (e) { return _this.state.value.includes(e.id); }) ? true : children.some(function (e) { return _this.state.value.includes(e.id); }) ? undefined : false) : this.state.value.includes(item.id), onChange: function (v) { _this.onCheck(v, __spreadArray([item], children, true)); }, size: '2rem' }),
+                react_1.default.createElement(text_1.Text, { className: 'body-3' }, item.name)),
+            react_1.default.createElement("div", { className: 'col', style: { display: item.isOpen ? "flex" : "none", width: '100%' } }, children.map(function (e) { return _this.renderOptions(e); })));
+    };
+    SelectMultiple.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a, _b, _c, _d, _e;
+        if (prevProps.options !== this.props.options)
+            this.setState(__assign(__assign({}, this.state), { options: this.props.options }));
+        if (prevProps.value !== this.props.value)
             this.setState(__assign(__assign({}, this.state), { value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [] }));
-        }
-        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
+        //
+        if (this.state.isOpen && (prevState.isOpen !== this.state.isOpen || prevState.value.length !== this.state.value.length)) {
             var thisPopupRect = (_b = document.body.querySelector('.select-multi-popup')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (thisPopupRect) {
                 var style = void 0;
-                if (thisPopupRect.right > document.body.offsetWidth) {
+                if (prevState.isOpen !== this.state.isOpen && thisPopupRect.right > document.body.offsetWidth) {
                     style = {
                         top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        width: "".concat(this.state.offset.width, "px"),
                         right: document.body.offsetWidth - this.state.offset.right + 'px'
                     };
                 }
-                if (thisPopupRect.bottom - 12 > document.body.offsetHeight) {
-                    style = style ? __assign(__assign({}, style), { top: undefined, bottom: document.body.offsetHeight - this.state.offset.bottom + 'px' }) : {
-                        left: this.state.offset.x + 'px',
-                        width: "".concat(this.state.offset.width, "px"),
-                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
-                    };
+                var _bottom = thisPopupRect.bottom - 8;
+                var thisContainerRect = (_c = this.containerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                if (thisContainerRect) {
+                    if (prevState.value.length !== this.state.value.length) {
+                        _bottom = thisContainerRect.bottom + 2 + thisPopupRect.height;
+                        style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.bottom + 2, "px") });
+                    }
+                    if (_bottom > document.body.offsetHeight) {
+                        style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.y - 2 - thisPopupRect.height, "px") });
+                    }
                 }
-                if (style)
+                if (style) {
+                    (_d = style.left) !== null && _d !== void 0 ? _d : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
+                    (_e = style.width) !== null && _e !== void 0 ? _e : (style.width = "".concat(this.state.offset.width, "px"));
                     this.setState(__assign(__assign({}, this.state), { style: style }));
+                }
             }
         }
     };
     SelectMultiple.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return react_1.default.createElement("div", { className: "select-multi-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }), this.props.style) : { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }, onClick: function (ev) {
-                var _a;
-                if (!_this.state.isOpen) {
-                    _this.setState(__assign(__assign({}, _this.state), { isOpen: true, style: undefined, offset: ((_a = ev.target.closest('.select-multi-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect() }));
-                }
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return react_1.default.createElement("div", { ref: this.containerRef, className: "select-multi-container row ".concat(this.props.disabled ? 'disabled' : '', " ").concat(((_a = this.props.helperText) === null || _a === void 0 ? void 0 : _a.length) && 'helper-text', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : 'body-3'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: function () {
+                var _a, _b;
+                if (!_this.state.isOpen)
+                    _this.setState(__assign(__assign({}, _this.state), { isOpen: true, style: undefined, offset: (_b = (_a = _this.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() }));
             } },
-            react_1.default.createElement("div", { className: 'row', style: { overflow: 'auto hidden', flex: 1, width: '100%', gap: '0.8rem' } }, ((_d = this.state.value) === null || _d === void 0 ? void 0 : _d.length) ? (this.state.value.map(function (item) {
-                var optionItem = _this.props.options.find(function (e) { return e.id === item; });
-                return react_1.default.createElement("div", { key: item, className: 'selected-item-value row', onClick: function (ev) {
-                        var _a;
-                        ev.stopPropagation();
-                        var newValue = _this.state.value.filter(function (vl) { return vl !== item; });
-                        _this.setState(__assign(__assign({}, _this.state), { value: newValue, isOpen: true, style: undefined, offset: ((_a = ev.target.closest('.select-multi-container')) !== null && _a !== void 0 ? _a : ev.target).getBoundingClientRect() }));
-                        if (_this.props.onChange)
-                            _this.props.onChange(newValue);
-                    } },
-                    react_1.default.createElement("div", { className: 'selected-value-title' }, optionItem === null || optionItem === void 0 ? void 0 : optionItem.name),
-                    react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faClose, style: { color: '#161D24E5', fontSize: '1.2rem' } }));
-            })) : (react_1.default.createElement("div", { className: 'select-multi-placeholder' }, this.props.placeholder))),
-            react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.2rem', color: '#888' } }),
+            react_1.default.createElement("div", { className: 'row', style: { flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' } },
+                this.state.value.map(function (item) {
+                    var optionItem = _this.props.options.find(function (e) { return e.id === item; });
+                    return react_1.default.createElement("div", { key: item, className: 'selected-item-value row', onClick: function (ev) { return _this.onClickItem(ev, item); } },
+                        react_1.default.createElement(text_1.Text, null, optionItem === null || optionItem === void 0 ? void 0 : optionItem.name),
+                        react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faClose, style: { color: '#161D24E5', fontSize: '1.2rem' } }));
+                }),
+                (!this.state.value.length || this.state.isOpen) && react_1.default.createElement("input", { autoFocus: this.state.isOpen, onChange: this.search, placeholder: this.state.value.length ? undefined : this.props.placeholder, onBlur: function (ev) {
+                        if (_this.state.onSelect)
+                            ev.target.focus();
+                        else
+                            _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
+                    } })),
+            react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
+                    ev.stopPropagation();
+                    if (_this.state.value.length)
+                        _this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: [] }));
+                } },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: '#161C24' } })),
             this.state.isOpen &&
                 react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'select-multi-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
                         top: this.state.offset.y + this.state.offset.height + 2 + 'px',
                         left: this.state.offset.x + 'px',
                         width: this.state.offset.width,
-                    }, onMouseOver: function (ev) {
-                        _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target }));
-                    }, onMouseOut: function () {
-                        return _this.setState(__assign(__assign({}, _this.state), { onSelect: null }));
-                    } },
-                    react_1.default.createElement("div", { className: 'row header-search' },
-                        react_1.default.createElement("input", { autoFocus: true, placeholder: 'Tìm kiếm', onChange: this.search, onBlur: function (ev) {
-                                if (_this.state.onSelect) {
-                                    ev.target.focus();
-                                }
-                                else {
-                                    _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
-                                }
-                            } }),
-                        react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faSearch, style: { fontSize: '1.2rem', color: '#161D24D9' } })),
-                    react_1.default.createElement("div", { style: { padding: '1.2rem 1.6rem', width: '100%', borderTop: '1px solid #161D2414', borderBottom: '1px solid #161D2414' } }, (function () {
+                    }, onMouseOver: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { onSelect: ev.target })); }, onMouseOut: function () { return _this.setState(__assign(__assign({}, _this.state), { onSelect: null })); } },
+                    react_1.default.createElement("div", { style: { padding: '1.2rem 1.6rem', width: '100%', borderBottom: '1px solid #161D2414' } }, (function () {
                         var _a, _b;
                         var _list = ((_b = (_a = _this.state.search) !== null && _a !== void 0 ? _a : _this.props.options) !== null && _b !== void 0 ? _b : []);
                         var isSelectedAll = _list.every(function (item) { return _this.state.value.some(function (vl) { return vl === item.id; }); });
-                        return react_1.default.createElement(index_1.Text, { onClick: function () {
+                        return react_1.default.createElement(text_1.Text, { onClick: function () {
                                 var newValue = [];
                                 if (_list.length) {
                                     if (isSelectedAll) {
@@ -236,13 +304,11 @@ var SelectMultiple = /** @class */ (function (_super) {
                                 _this.setState(__assign(__assign({}, _this.state), { value: newValue }));
                                 if (_this.props.onChange)
                                     _this.props.onChange(newValue);
-                            }, className: 'button-text-3', style: { color: _list.length ? 'var(--primary-color)' : '#00204D99', } }, _list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
+                            }, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-color)' : '#00204D99', } }, _list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
                     })()),
                     react_1.default.createElement("div", { className: 'col select-body' },
-                        ((_g = (_f = this.state.search) !== null && _f !== void 0 ? _f : this.props.options) !== null && _g !== void 0 ? _g : []).map(function (item) { return (react_1.default.createElement("div", { key: item.id, className: 'select-tile row' },
-                            react_1.default.createElement(index_1.Checkbox, { value: _this.state.value.some(function (vl) { return vl === item.id; }), onChange: function () { _this.onCheck(item); }, size: '2rem' }),
-                            react_1.default.createElement("div", { className: 'label-3' }, item.name))); }),
-                        (((_h = this.state.search) === null || _h === void 0 ? void 0 : _h.length) === 0 || ((_j = this.props.options) === null || _j === void 0 ? void 0 : _j.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
+                        ((_f = this.state.search) !== null && _f !== void 0 ? _f : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
+                        (((_g = this.state.search) === null || _g === void 0 ? void 0 : _g.length) === 0 || ((_h = this.props.options) === null || _h === void 0 ? void 0 : _h.length) === 0) && (react_1.default.createElement("div", { className: 'no-results-found' }, "No result found")))), document.body));
     };
     return SelectMultiple;
 }(react_1.default.Component));

package/dist/component/select1/select1.d.ts

@@ -1,9 +1,10 @@
 import React, { CSSProperties, ReactNode } from 'react';
 import './select1.css';
 export interface OptionsItem {
-    id: string | number;
+    id: string;
+    parentId?: string;
     name: string | ReactNode;
-    title?: string | ReactNode;
+    title: string | ReactNode;
 }
 interface Select1Props {
     value?: any;

package/dist/component/select1/select1.js

@@ -35,8 +35,6 @@ var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var react_dom_1 = __importDefault(require("react-dom"));
 require("./select1.css");
-;
-;
 var Select1 = /** @class */ (function (_super) {
     __extends(Select1, _super);
     function Select1(props) {