wini-web-components 1.3.0 → 1.3.2

package/dist/component/calendar/calendar.d.ts

@@ -11,6 +11,7 @@ export declare enum CalendarType {
     DATETIME = 3
 }
 interface CalendarProps {
+    id?: string;
     value?: Date;
     min?: Date;
     max?: Date;

package/dist/component/calendar/calendar.js

@@ -290,7 +290,7 @@ var Calendar = /** @class */ (function (_super) {
     };
     Calendar.prototype.render = function () {
         var _this = this;
-        return react_1.default.createElement("div", { className: "row calendar-container ".concat(this.props.className), style: this.props.style },
+        return react_1.default.createElement("div", { id: this.props.id, className: "row calendar-container ".concat(this.props.className), style: this.props.style },
             this.props.showSidebar ? react_1.default.createElement("div", { className: "calendar-sidebar-options col" },
                 react_1.default.createElement("button", { type: "button", onClick: function () { }, className: "label-4 calendar-sidebar-option-buttton" }, "Yesterday"),
                 react_1.default.createElement("button", { type: "button", className: "label-4 calendar-sidebar-option-buttton" }, "Last week"),

package/dist/component/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
 import './checkbox.css';
 interface CheckboxProps {
+    id?: string;
     onChange?: (value: boolean) => void;
     value?: boolean;
     checkColor?: string;

package/dist/component/checkbox/checkbox.js

@@ -64,7 +64,7 @@ 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, "is-null-value": "".concat(this.state.value == undefined), onClick: this.props.onClick },
+        return react_1.default.createElement("label", { id: this.props.id, className: "checkbox-container row", style: convertStyle, "is-null-value": "".concat(this.state.value == undefined), onClick: this.props.onClick },
             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;

package/dist/component/date-picker/date-picker.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import './date-picker.css';
 import { CalendarType } from '../../index';
 interface DatePickerProps {
+    id?: string;
     value?: string;
     min?: Date;
     max?: Date;

package/dist/component/date-picker/date-picker.js

@@ -214,7 +214,7 @@ var DatePicker = /** @class */ (function (_super) {
             default:
                 break;
         }
-        return react_1.default.createElement("label", { className: "date-picker-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(this.props.disabled ? 'disabled' : '', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
+        return react_1.default.createElement("div", { id: this.props.id, className: "date-picker-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(this.props.disabled ? 'disabled' : '', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
             react_1.default.createElement("div", { className: 'input-field-value row', style: { height: '4rem' } },
                 react_1.default.createElement("input", { autoComplete: 'off', value: (_e = this.state.value) !== null && _e !== void 0 ? _e : '', onChange: function (ev) { return _this.setState(__assign(__assign({}, _this.state), { value: ev.target.value })); }, placeholder: this.props.placeholder, maxLength: maxLength, onBlur: function (ev) {
                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;

package/dist/component/import-file/import-file.d.ts

@@ -10,6 +10,7 @@ interface ImportFileState {
 }
 type ChangeFileFunction = (a?: File) => void;
 interface ImportFileProps {
+    id?: string;
     status?: ComponentStatus;
     value?: File | ObjWithKnownKeys;
     buttonOnly?: boolean;

package/dist/component/import-file/import-file.js

@@ -70,7 +70,7 @@ var ImportFile = /** @class */ (function (_super) {
         if (this.props.maxSize) {
             sizeTitle = this.props.maxSize > Math.pow(1024, 3) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 3)), "TB") : this.props.maxSize > Math.pow(1024, 2) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 2)), "GB") : this.props.maxSize > 1024 ? "".concat(Math.round(this.props.maxSize / 1024), "MB") : "".concat(this.props.maxSize, "KB");
         }
-        return react_1.default.createElement("div", { className: "import-file-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'row', " ").concat(this.props.buttonOnly ? 'button-only' : ''), style: this.state.preview ? this.props.style : __assign({ cursor: 'pointer' }, this.props.style), onClick: function () {
+        return react_1.default.createElement("div", { id: this.props.id, className: "import-file-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'row', " ").concat(this.props.buttonOnly ? 'button-only' : ''), style: this.state.preview ? this.props.style : __assign({ cursor: 'pointer' }, this.props.style), onClick: function () {
                 if (!_this.state.preview && !_this.props.buttonOnly)
                     _this.showFilePicker();
             } },

package/dist/component/infinite-scroll/infinite-scroll.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
 interface InfiniteScrollProps {
+    id?: string;
     className?: string;
     style?: CSSProperties;
     handleScroll?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => Promise<any> | null;

package/dist/component/infinite-scroll/infinite-scroll.js

@@ -79,7 +79,7 @@ var InfiniteScroll = /** @class */ (function (_super) {
     InfiniteScroll.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        return react_1.default.createElement("div", { onScroll: function (ev) { return __awaiter(_this, void 0, void 0, function () {
+        return react_1.default.createElement("div", { id: this.props.id, onScroll: function (ev) { return __awaiter(_this, void 0, void 0, function () {
                 var scrollElement;
                 return __generator(this, function (_a) {
                     switch (_a.label) {

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

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import './input-multi-select.css';
 import { OptionsItem } from '../select1/select1';
 interface SelectMultipleProps {
+    id?: string;
     value?: Array<string | number>;
     options: Required<Array<OptionsItem>>;
     onChange?: (value?: Array<string | number>) => void;
@@ -13,6 +14,7 @@ interface SelectMultipleProps {
     style?: CSSProperties;
     handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
     showClearValueButton?: boolean;
+    popupClassName?: string;
 }
 interface SelectMultipleState {
     value: Array<string | number>;

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

@@ -256,8 +256,8 @@ var SelectMultiple = /** @class */ (function (_super) {
     };
     SelectMultiple.prototype.render = function () {
         var _this = this;
-        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, _c, _d, _e, _f, _g, _h, _j;
+        return react_1.default.createElement("div", { id: this.props.id, 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() }));
@@ -282,7 +282,7 @@ var SelectMultiple = /** @class */ (function (_super) {
                 } },
                 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 : {
+                react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select-multi-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
                         top: this.state.offset.y + this.state.offset.height + 2 + 'px',
                         left: this.state.offset.x + 'px',
                         width: this.state.offset.width,
@@ -307,8 +307,8 @@ var SelectMultiple = /** @class */ (function (_super) {
                             }, 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' },
-                        ((_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));
+                        ((_g = this.state.search) !== null && _g !== void 0 ? _g : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
+                        (((_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));
     };
     return SelectMultiple;
 }(react_1.default.Component));

package/dist/component/pagination/pagination.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from "react";
 import './pagination.css';
-export declare function Pagination({ currentPage, itemPerPage, totalItem, onChangePage, hiddenPageSize, hiddenTotal, style }: {
+export declare function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hiddenPageSize, hiddenTotal, style }: {
+    id?: string;
     currentPage: number;
     itemPerPage: number;
     totalItem: number;

package/dist/component/pagination/pagination.js

@@ -9,13 +9,13 @@ var react_paginate_1 = __importDefault(require("react-paginate"));
 require("./pagination.css");
 var index_1 = require("../../index");
 function Pagination(_a) {
-    var currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hiddenPageSize, hiddenPageSize = _b === void 0 ? false : _b, _c = _a.hiddenTotal, hiddenTotal = _c === void 0 ? false : _c, style = _a.style;
+    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hiddenPageSize, hiddenPageSize = _b === void 0 ? false : _b, _c = _a.hiddenTotal, hiddenTotal = _c === void 0 ? false : _c, style = _a.style;
     if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
         onChangePage(1, itemPerPage);
         return react_1.default.createElement("div", null);
     }
     if (totalItem > 0) {
-        return (react_1.default.createElement("div", { className: "row custom-pagination", style: style },
+        return (react_1.default.createElement("div", { id: id, className: "row custom-pagination", style: style },
             hiddenTotal ? null : react_1.default.createElement(index_1.Text, { className: "regular2" },
                 "Hi\u1EC3n th\u1ECB ",
                 itemPerPage * (currentPage - 1) + 1,
@@ -40,7 +40,7 @@ function Pagination(_a) {
                     }, renderOnZeroPageCount: null }))));
     }
     else {
-        return (react_1.default.createElement("div", null));
+        return (react_1.default.createElement("div", { id: id }));
     }
 }
 exports.Pagination = Pagination;

package/dist/component/progress-bar/progress-bar.d.ts

@@ -2,7 +2,8 @@ import { CSSProperties, ReactNode } from 'react';
 import './progress-bar.css';
 import React from 'react';
 import { ComponentStatus } from '../../index';
-export declare function ProgressBar({ status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
+export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
+    id?: string;
     percent: number;
     titleText?: string;
     title?: ReactNode;

package/dist/component/progress-bar/progress-bar.js

@@ -22,9 +22,9 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var index_1 = require("../../index");
 function ProgressBar(_a) {
-    var _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--background)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
+    var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--background)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
     var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
-    return react_2.default.createElement("div", { className: "progress-bar-container col", style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
+    return react_2.default.createElement("div", { id: id, className: "progress-bar-container col", style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
         (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title row" },
             react_2.default.createElement("div", { className: "heading-text" }, titleText),
             react_2.default.createElement("button", { type: "button", className: "suffix-action", onClick: function () { setOpenDetails(!openDetails); } },

package/dist/component/progress-circle/progress-circle.d.ts

@@ -1,7 +1,8 @@
 import { CSSProperties } from 'react';
 import './progress-circle.css';
 import React from 'react';
-export declare function ProgressCircle({ percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
+export declare function ProgressCircle({ id, percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
+    id?: string;
     /** value:  0 - 100 (%)*/
     percent?: number;
     style?: CSSProperties;

package/dist/component/progress-circle/progress-circle.js

@@ -18,11 +18,11 @@ exports.ProgressCircle = void 0;
 require("./progress-circle.css");
 var react_1 = __importDefault(require("react"));
 function ProgressCircle(_a) {
-    var percent = _a.percent, style = _a.style, fillColor = _a.fillColor, percentColor = _a.percentColor, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, textStyle = _a.textStyle;
+    var id = _a.id, percent = _a.percent, style = _a.style, fillColor = _a.fillColor, percentColor = _a.percentColor, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, textStyle = _a.textStyle;
     var radius = 30 - (strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 4);
     var diameter = Math.PI * 2 * radius;
     var strokeOffset = (1 - ((percent !== null && percent !== void 0 ? percent : 0) / 100)) * diameter;
-    return react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: 60, height: 60 }, (style !== null && style !== void 0 ? style : {})) },
+    return react_1.default.createElement("svg", { id: id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: 60, height: 60 }, (style !== null && style !== void 0 ? style : {})) },
         react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: strokeColor !== null && strokeColor !== void 0 ? strokeColor : "#E6EAF0", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', } }),
         react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: fillColor !== null && fillColor !== void 0 ? fillColor : "none", stroke: percentColor !== null && percentColor !== void 0 ? percentColor : "var(--infor-color)", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
         react_1.default.createElement("text", { x: "50%", y: "50%", fill: "#00204D", dy: ".3em", textAnchor: "middle", fontSize: 16, fontWeight: '600', style: textStyle }, percent !== null && percent !== void 0 ? percent : 0,

package/dist/component/radio-button/radio-button.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import './radio-button.css';
 import { UseFormRegister } from 'react-hook-form';
 interface RadioButtonProps {
+    id?: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     value?: string | number | readonly string[];
     disabled?: boolean;

package/dist/component/radio-button/radio-button.js

@@ -53,7 +53,7 @@ var RadioButton = /** @class */ (function (_super) {
             delete this.props.style.maxHeight;
             convertStyle = __assign(__assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { className: "radio-btn-container row ".concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
+        return react_1.default.createElement("label", { id: this.props.id, className: "radio-btn-container row ".concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
             this.props.register ?
                 react_1.default.createElement("input", __assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
                 react_1.default.createElement("input", { type: "radio", name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultChecked, disabled: this.props.disabled, onChange: this.props.onChange }),

package/dist/component/rating/rating.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from "react";
 import './rating.css';
 interface RatingProps {
+    id?: string;
     /**
     value: 0-5
     */

package/dist/component/rating/rating.js

@@ -44,7 +44,7 @@ var Rating = /** @class */ (function (_super) {
     Rating.prototype.render = function () {
         var _this = this;
         var _a;
-        return react_1.default.createElement("div", { className: "row rating-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ''), style: this.props.style }, Array.from({ length: 5 }).map(function (_, i) {
+        return react_1.default.createElement("div", { id: this.props.id, className: "row rating-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ''), style: this.props.style }, Array.from({ length: 5 }).map(function (_, i) {
             var _a, _b, _c, _d, _e;
             var uniqueId = 'rating-star-grad-0';
             var stopValue = 0;

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

@@ -8,6 +8,7 @@ export interface OptionsItem {
     disabled?: boolean;
 }
 interface Select1Props {
+    id?: string;
     value?: string | number;
     options: Required<Array<OptionsItem>>;
     onChange?: (v?: OptionsItem) => void;
@@ -20,6 +21,7 @@ interface Select1Props {
     handleSearch?: (e: string) => Promise<Array<OptionsItem>>;
     showClearValueButton?: boolean;
     readOnly?: boolean;
+    popupClassName?: string;
 }
 interface Select1State {
     value?: string | number;

package/dist/component/select1/select1.js

@@ -271,9 +271,9 @@ var Select1 = /** @class */ (function (_super) {
     };
     Select1.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var _value = this.state.options.find(function (e) { return e.id === _this.state.value; });
-        return react_1.default.createElement("div", { ref: this.containerRef, className: "select1-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 () {
+        return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, className: "select1-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, _c;
                 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() }));
@@ -293,14 +293,14 @@ var Select1 = /** @class */ (function (_super) {
                 } },
                 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: 'select1-popup col', style: (_e = this.state.style) !== null && _e !== void 0 ? _e : {
+                react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select1-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
                         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) { 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", { className: 'col select-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));
+                        ((_g = this.state.search) !== null && _g !== void 0 ? _g : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),
+                        (((_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));
     };
     return Select1;
 }(react_1.default.Component));

package/dist/component/slider/slider.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, ReactNode } from 'react';
 import './slider.css';
 interface SliderProps {
+    id?: string;
     children?: Array<ReactNode>;
     autoPlay?: boolean;
     /** default: 2000ms */

package/dist/component/switch/switch.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
 import './switch.css';
 interface SwitchProps {
+    id?: string;
     onChange?: (value: boolean) => void;
     value?: boolean;
     disabled?: boolean;

package/dist/component/switch/switch.js

@@ -67,7 +67,7 @@ var Switch = /** @class */ (function (_super) {
             delete this.props.style.maxHeight;
             convertStyle = __assign(__assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { className: "switch-container row ".concat((_e = this.props.className) !== null && _e !== void 0 ? _e : ''), style: convertStyle },
+        return react_1.default.createElement("label", { id: this.props.id, className: "switch-container row ".concat((_e = this.props.className) !== null && _e !== void 0 ? _e : ''), style: convertStyle },
             react_1.default.createElement("input", { type: "checkbox", checked: this.state.value, name: this.props.name, disabled: this.props.disabled, onChange: function () {
                     var newValue = !_this.state.value;
                     _this.setState({ value: newValue });

package/dist/component/table/table.d.ts

@@ -6,6 +6,7 @@ export declare enum CellAlignItems {
     end = "end"
 }
 type TbCellProps = {
+    id?: string;
     fixed?: boolean;
     children?: ReactNode;
     className?: string;
@@ -17,6 +18,7 @@ export declare class TbCell extends React.Component<TbCellProps> {
     render(): React.ReactNode;
 }
 interface TbRowProps {
+    id?: string;
     children?: Array<TbCell>;
     className?: string;
     style?: CSSProperties;
@@ -29,6 +31,7 @@ export declare class TbHeader extends React.Component<TbRowProps> {
     render(): React.JSX.Element;
 }
 interface TbBodyProps {
+    id?: string;
     children?: Array<TbRow>;
     className?: string;
     style?: CSSProperties;
@@ -37,6 +40,7 @@ export declare class TbBody extends React.Component<TbBodyProps> {
     render(): React.ReactNode;
 }
 interface TableProps {
+    id?: string;
     children?: Array<TbBody | TbHeader>;
     className?: string;
     style?: CSSProperties;

package/dist/component/table/table.js

@@ -45,7 +45,7 @@ var TbCell = /** @class */ (function (_super) {
     }
     TbCell.prototype.render = function () {
         var _a, _b;
-        return react_1.default.createElement("td", { onClick: this.props.onClick, style: this.props.style, "align-cell": (_a = this.props.align) !== null && _a !== void 0 ? _a : CellAlignItems.start, className: "tb-cell ".concat((_b = this.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(this.props.fixed ? 'tb-cell-fixed' : '') }, this.props.children);
+        return react_1.default.createElement("td", { id: this.props.id, onClick: this.props.onClick, style: this.props.style, "align-cell": (_a = this.props.align) !== null && _a !== void 0 ? _a : CellAlignItems.start, className: "tb-cell ".concat((_b = this.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(this.props.fixed ? 'tb-cell-fixed' : '') }, this.props.children);
     };
     return TbCell;
 }(react_1.default.Component));
@@ -58,7 +58,7 @@ var TbRow = /** @class */ (function (_super) {
     TbRow.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        return react_1.default.createElement("tr", { style: this.props.style, className: "tb-row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ""), onClick: this.props.onClick }, ((_b = this.props.children) !== null && _b !== void 0 ? _b : []).map(function (e, i) {
+        return react_1.default.createElement("tr", { id: this.props.id, style: this.props.style, className: "tb-row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : ""), onClick: this.props.onClick }, ((_b = this.props.children) !== null && _b !== void 0 ? _b : []).map(function (e, i) {
             var _a, _b;
             var ox = 0;
             if (_this.props.children && i > 0 && i < (_this.props.children.length - 1)) {
@@ -68,7 +68,7 @@ var TbRow = /** @class */ (function (_super) {
                     return wValue ? typeof wValue === 'number' ? "".concat(wValue, "px") : wValue : '60px';
                 }).join(" + "), ")");
             }
-            return react_1.default.createElement(TbCell, { key: "tb-cell-".concat(i), align: e.props.align, children: e.props.children, fixed: e.props.fixed, onClick: e.props.onClick, style: e.props.fixed ? (_this.props.children && i === _this.props.children.length - 1) ? __assign({ right: 0 }, ((_a = e.props.style) !== null && _a !== void 0 ? _a : {})) : __assign({ left: ox }, ((_b = e.props.style) !== null && _b !== void 0 ? _b : {})) : e.props.style, className: e.props.className });
+            return react_1.default.createElement(TbCell, { id: e.props.id, key: "tb-cell-".concat(i), align: e.props.align, children: e.props.children, fixed: e.props.fixed, onClick: e.props.onClick, style: e.props.fixed ? (_this.props.children && i === _this.props.children.length - 1) ? __assign({ right: 0 }, ((_a = e.props.style) !== null && _a !== void 0 ? _a : {})) : __assign({ left: ox }, ((_b = e.props.style) !== null && _b !== void 0 ? _b : {})) : e.props.style, className: e.props.className });
         }));
     };
     return TbRow;
@@ -89,7 +89,7 @@ var TbHeader = /** @class */ (function (_super) {
                 if (_this.props.children && i > 0 && i < (_this.props.children.length - 1)) {
                     ox = "calc(".concat(_this.props.children.slice(0, i).map(function (tb) { var _a; return ((_a = tb.props.style) === null || _a === void 0 ? void 0 : _a.width) ? typeof tb.props.style.width === 'number' ? "".concat(tb.props.style.width, "px") : tb.props.style.width : '60px'; }).join(" + "), ")");
                 }
-                return react_1.default.createElement(TbCell, { key: "tb-cell-".concat(i), align: e.props.align, children: e.props.children, onClick: e.props.onClick, fixed: e.props.fixed, style: e.props.fixed ? (_this.props.children && i === _this.props.children.length - 1) ? __assign({ right: 0 }, ((_a = e.props.style) !== null && _a !== void 0 ? _a : {})) : __assign({ left: ox }, ((_b = e.props.style) !== null && _b !== void 0 ? _b : {})) : e.props.style, className: e.props.className });
+                return react_1.default.createElement(TbCell, { id: e.props.id, key: "tb-cell-".concat(i), align: e.props.align, children: e.props.children, onClick: e.props.onClick, fixed: e.props.fixed, style: e.props.fixed ? (_this.props.children && i === _this.props.children.length - 1) ? __assign({ right: 0 }, ((_a = e.props.style) !== null && _a !== void 0 ? _a : {})) : __assign({ left: ox }, ((_b = e.props.style) !== null && _b !== void 0 ? _b : {})) : e.props.style, className: e.props.className });
             })));
     };
     return TbHeader;
@@ -101,7 +101,7 @@ var TbBody = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     TbBody.prototype.render = function () {
-        return react_1.default.createElement("tbody", null, this.props.children);
+        return react_1.default.createElement("tbody", { id: this.props.id }, this.props.children);
     };
     return TbBody;
 }(react_1.default.Component));
@@ -112,7 +112,7 @@ var Table = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Table.prototype.render = function () {
-        return react_1.default.createElement("table", { className: "custom-table ".concat(this.props.className), style: this.props.style }, this.props.children);
+        return react_1.default.createElement("table", { id: this.props.id, className: "custom-table ".concat(this.props.className), style: this.props.style }, this.props.children);
     };
     return Table;
 }(react_1.default.Component));

package/dist/component/text/text.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, ReactNode } from 'react';
 import './text.css';
 interface TextProps {
+    id?: string;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;

package/dist/component/text/text.js

@@ -43,7 +43,7 @@ var Text = /** @class */ (function (_super) {
         if (this.props.maxLine) {
             convertStyle = __assign(__assign({}, convertStyle), { '--max-line': this.props.maxLine });
         }
-        return react_1.default.createElement("div", { onMouseOver: this.props.onHover, onClick: this.props.onClick, className: "comp-text ".concat(this.props.onClick ? 'type-button' : '', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : ''), style: convertStyle }, this.props.children);
+        return react_1.default.createElement("div", { id: this.props.id, onMouseOver: this.props.onHover, onClick: this.props.onClick, className: "comp-text ".concat(this.props.onClick ? 'type-button' : '', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : ''), style: convertStyle }, this.props.children);
     };
     return Text;
 }(react_1.default.Component));

package/dist/component/text-area/text-area.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from "react";
 import './text-area.css';
 import { UseFormRegister } from "react-hook-form";
 interface TextAreaProps {
+    id?: string;
     value?: string;
     maxLength?: number;
     defaultValue?: string;

package/dist/component/text-area/text-area.js

@@ -39,7 +39,7 @@ var TextArea = /** @class */ (function (_super) {
     }
     TextArea.prototype.render = function () {
         var _a, _b, _c, _d;
-        return react_1.default.createElement("div", { className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } }, this.props.register ?
+        return react_1.default.createElement("div", { id: this.props.id, className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } }, this.props.register ?
             react_1.default.createElement("textarea", __assign({ autoFocus: this.props.autoFocus }, this.props.register, { maxLength: this.props.maxLength, name: this.props.name, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("textarea", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }));
     };
     return TextArea;

package/dist/component/text-field/text-field.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties, ReactNode } from "react";
 import './text-field.css';
 import { UseFormRegister } from "react-hook-form";
 interface TextFieldProps {
+    id?: string;
     value?: string;
     maxLength?: number;
     defaultValue?: string;

package/dist/component/text-field/text-field.js

@@ -39,7 +39,7 @@ var TextField = /** @class */ (function (_super) {
     }
     TextField.prototype.render = function () {
         var _a, _b, _c, _d, _e, _f;
-        return react_1.default.createElement("div", { className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
+        return react_1.default.createElement("div", { id: this.props.id, className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "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' } },
             this.props.prefix,
             this.props.register ?
                 react_1.default.createElement("input", __assign({}, this.props.register, { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("input", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_f = this.props.type) !== null && _f !== void 0 ? _f : 'text', defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }),