wini-web-components 2.2.7 → 2.3.1

package/dist/component/pagination/pagination.js

@@ -1,82 +1,93 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-var react_1 = __importStar(require("react"));
-var react_paginate_1 = __importDefault(require("react-paginate"));
-var pagination_module_css_1 = __importDefault(require("./pagination.module.css"));
-var select1_1 = require("../select1/select1");
-var text_1 = require("../text/text");
-var text_field_1 = require("../text-field/text-field");
-var winicon_1 = require("../wini-icon/winicon");
-function Pagination(_a) {
-    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hidePageSize, hidePageSize = _b === void 0 ? false : _b, _c = _a.hideGoToPage, hideGoToPage = _c === void 0 ? false : _c, style = _a.style;
-    var goToPageRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        if (goToPageRef.current) {
-            var _inputPage = goToPageRef.current.getInput();
-            if (_inputPage)
-                _inputPage.value = currentPage.toString();
-        }
-    }, [currentPage]);
-    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);
-    }
-    else if (totalItem > 0) {
-        return react_1.default.createElement("div", { id: id, className: "".concat(pagination_module_css_1.default['custom-pagination'], " row"), style: style },
-            hidePageSize ? null : react_1.default.createElement("div", { className: "row", style: { gap: '0.8rem' } },
-                react_1.default.createElement(select1_1.Select1, { readOnly: true, placeholder: itemPerPage.toString(), options: [10, 20, 50, 80, 100, 150, 200].map(function (item, _) { return { id: item, name: item }; }), style: { borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }, onChange: function (ev) {
-                        onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
-                    } }),
-                react_1.default.createElement(text_1.Text, { className: "body-3" },
-                    "of ",
-                    totalItem,
-                    " items")),
-            react_1.default.createElement("div", { style: { flex: 1 } }),
-            react_1.default.createElement(react_paginate_1.default, { onPageChange: function (ev) {
-                    onChangePage(ev.selected + 1, itemPerPage);
-                }, forcePage: currentPage - 1, breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: "".concat(pagination_module_css_1.default['pagination'], " row"), pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: function (pageIndex) {
-                    return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
-                }, renderOnZeroPageCount: null }),
-            hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 } }),
-                react_1.default.createElement(text_1.Text, { className: "label-3" }, "Go to page"),
-                react_1.default.createElement(text_field_1.TextField, { ref: goToPageRef, style: { width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }, className: "body-3", type: "number", onBlur: function (ev) {
-                        var _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
-                        if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
-                            onChangePage(_tmp, itemPerPage);
-                        }
-                        else
-                            ev.target.value = "";
-                    } })));
-    }
-    else
-        return react_1.default.createElement("div", { id: id });
-}
-exports.Pagination = Pagination;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+var react_1 = __importStar(require("react"));
+var react_paginate_1 = __importDefault(require("react-paginate"));
+var pagination_module_css_1 = __importDefault(require("./pagination.module.css"));
+var select1_1 = require("../select1/select1");
+var text_1 = require("../text/text");
+var text_field_1 = require("../text-field/text-field");
+var winicon_1 = require("../wini-icon/winicon");
+var react_i18next_1 = require("react-i18next");
+function Pagination(_a) {
+    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hidePageSize, hidePageSize = _b === void 0 ? false : _b, _c = _a.hideGoToPage, hideGoToPage = _c === void 0 ? false : _c, style = _a.style;
+    var goToPageRef = (0, react_1.useRef)(null);
+    var t = (0, react_i18next_1.useTranslation)().t;
+    (0, react_1.useEffect)(function () {
+        if (goToPageRef.current) {
+            var _inputPage = goToPageRef.current.getInput();
+            if (_inputPage)
+                _inputPage.value = currentPage.toString();
+        }
+    }, [currentPage]);
+    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);
+    }
+    else if (totalItem > 0) {
+        return react_1.default.createElement("div", { id: id, className: "".concat(pagination_module_css_1.default['custom-pagination'], " row"), style: style },
+            hidePageSize ? null : react_1.default.createElement("div", { className: "row", style: { gap: '0.8rem' } },
+                react_1.default.createElement(select1_1.Select1, { readOnly: true, placeholder: itemPerPage.toString(), options: [10, 20, 50, 80, 100, 150, 200].map(function (item, _) { return { id: item, name: item }; }), style: { borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }, onChange: function (ev) {
+                        onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
+                    } }),
+                react_1.default.createElement(text_1.Text, { className: "body-3" }, t("ofItems", { totalItem: totalItem }))),
+            react_1.default.createElement("div", { style: { flex: 1 } }),
+            react_1.default.createElement(react_paginate_1.default, { onPageChange: function (ev) {
+                    onChangePage(ev.selected + 1, itemPerPage);
+                }, forcePage: currentPage - 1, breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: "".concat(pagination_module_css_1.default['pagination'], " row"), pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: function (pageIndex) {
+                    return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
+                }, renderOnZeroPageCount: null }),
+            hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 } }),
+                react_1.default.createElement(text_1.Text, { className: "label-3" },
+                    t("go"),
+                    " ",
+                    t("page").toLowerCase()),
+                react_1.default.createElement(text_field_1.TextField, { ref: goToPageRef, style: { width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }, className: "body-3", type: "number", onBlur: function (ev) {
+                        var _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
+                        if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
+                            onChangePage(_tmp, itemPerPage);
+                        }
+                        else
+                            ev.target.value = "";
+                    } })));
+    }
+    else
+        return react_1.default.createElement("div", { id: id });
+}

package/dist/component/popup/popup.d.ts

@@ -1,33 +1,33 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import './popup.css';
-interface PopupState {
-    readonly open?: boolean;
-    heading?: ReactNode;
-    body?: ReactNode;
-    content?: ReactNode;
-    footer?: ReactNode;
-    clickOverlayClosePopup?: boolean;
-    style?: CSSProperties;
-    hideButtonClose?: boolean;
-}
-export declare const showPopup: (props: {
-    ref: React.MutableRefObject<Popup | undefined>;
-    heading?: ReactNode;
-    content?: ReactNode;
-    body?: ReactNode;
-    footer?: ReactNode;
-    clickOverlayClosePopup?: boolean;
-    style?: CSSProperties;
-    hideButtonClose?: boolean;
-}) => void;
-export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
-export declare class Popup extends React.Component<Object, PopupState> {
-    private ref;
-    constructor(props: Object | Readonly<Object>);
-    state: Readonly<PopupState>;
-    onOpen(data: PopupState): void;
-    onClose(): void;
-    componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>): void;
-    render(): React.JSX.Element;
-}
-export {};
+import React, { CSSProperties, ReactNode } from 'react';
+import './popup.css';
+interface PopupState {
+    readonly open?: boolean;
+    heading?: ReactNode;
+    body?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    clickOverlayClosePopup?: boolean;
+    style?: CSSProperties;
+    hideButtonClose?: boolean;
+}
+export declare const showPopup: (props: {
+    ref: React.MutableRefObject<Popup | undefined>;
+    heading?: ReactNode;
+    content?: ReactNode;
+    body?: ReactNode;
+    footer?: ReactNode;
+    clickOverlayClosePopup?: boolean;
+    style?: CSSProperties;
+    hideButtonClose?: boolean;
+}) => void;
+export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
+export declare class Popup extends React.Component<Object, PopupState> {
+    private ref;
+    constructor(props: Object | Readonly<Object>);
+    state: Readonly<PopupState>;
+    onOpen(data: PopupState): void;
+    onClose(): void;
+    componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>): void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/component/popup/popup.js

@@ -1,105 +1,138 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popup = exports.closePopup = exports.showPopup = void 0;
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-require("./popup.css");
-var showPopup = function (props) {
-    var _a, _b;
-    (_b = (_a = props.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.onOpen({
-        heading: props.heading,
-        content: props.content,
-        body: props.body,
-        footer: props.footer,
-        clickOverlayClosePopup: props.clickOverlayClosePopup,
-        style: props.style,
-        hideButtonClose: props.hideButtonClose
-    });
-};
-exports.showPopup = showPopup;
-var closePopup = function (ref) {
-    ref.current.onClose();
-};
-exports.closePopup = closePopup;
-var Popup = /** @class */ (function (_super) {
-    __extends(Popup, _super);
-    function Popup(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            open: false,
-        };
-        _this.ref = react_1.default.createRef();
-        return _this;
-    }
-    Popup.prototype.onOpen = function (data) {
-        this.setState(__assign({ open: true }, data));
-    };
-    Popup.prototype.onClose = function () {
-        this.setState({ open: false });
-    };
-    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
-            var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (thisPopupRect) {
-                var style = void 0;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
-                    delete style.left;
-                }
-                if (thisPopupRect.bottom > document.body.offsetHeight) {
-                    style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
-                    delete style.top;
-                }
-                if (style)
-                    this.setState(__assign(__assign({}, this.state), { style: style }));
-            }
-        }
-    };
-    Popup.prototype.render = function () {
-        var _this = this;
-        var _a;
-        return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
-            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "popup-overlay ".concat(this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''), onClick: this.state.clickOverlayClosePopup ? function (ev) {
-                    if (ev.target.classList.contains('popup-overlay'))
-                        _this.onClose();
-                } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
-                this.state.heading,
-                this.state.body,
-                this.state.footer,
-                this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
-                    react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
-                        react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
-    };
-    return Popup;
-}(react_1.default.Component));
-exports.Popup = Popup;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = exports.closePopup = exports.showPopup = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+require("./popup.css");
+var showPopup = function (props) {
+    var _a, _b;
+    (_b = (_a = props.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.onOpen({
+        heading: props.heading,
+        content: props.content,
+        body: props.body,
+        footer: props.footer,
+        clickOverlayClosePopup: props.clickOverlayClosePopup,
+        style: props.style,
+        hideButtonClose: props.hideButtonClose
+    });
+};
+exports.showPopup = showPopup;
+var closePopup = function (ref) {
+    ref.current.onClose();
+};
+exports.closePopup = closePopup;
+var Popup = /** @class */ (function (_super) {
+    __extends(Popup, _super);
+    function Popup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.ref = (0, react_1.createRef)();
+        _this.state = {
+            open: false,
+        };
+        return _this;
+    }
+    Popup.prototype.onOpen = function (data) {
+        this.setState(__assign({ open: true }, data));
+    };
+    Popup.prototype.onClose = function () {
+        this.setState({ open: false });
+    };
+    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
+            var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (thisPopupRect) {
+                var style = void 0;
+                if (thisPopupRect.right > document.body.offsetWidth) {
+                    style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
+                    delete style.left;
+                }
+                if (thisPopupRect.bottom > document.body.offsetHeight) {
+                    style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
+                    delete style.top;
+                }
+                if (style)
+                    this.setState(__assign(__assign({}, this.state), { style: style }));
+            }
+        }
+    };
+    Popup.prototype.render = function () {
+        var _this = this;
+        var _a;
+        return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
+            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "popup-overlay ".concat(this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''), onClick: this.state.clickOverlayClosePopup ? function (ev) {
+                    if (ev.target.classList.contains('popup-overlay'))
+                        _this.onClose();
+                } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
+                this.state.heading,
+                this.state.body,
+                this.state.footer,
+                this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
+                    react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
+                        react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
+    };
+    return Popup;
+}(react_1.default.Component));
+exports.Popup = Popup;

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

@@ -1,16 +1,16 @@
-import { CSSProperties, ReactNode } from 'react';
-import React from 'react';
-import { ComponentStatus } from '../../index';
-export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
-    id?: string;
-    percent: number;
-    titleText?: string;
-    title?: ReactNode;
-    hideTitle: boolean;
-    progressBarOnly: boolean;
-    fullColor: string;
-    percentColor: string;
-    style?: CSSProperties;
-    status: ComponentStatus;
-    progressBarStyle?: CSSProperties;
-}): React.JSX.Element;
+import { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { ComponentStatus } from '../../index';
+export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
+    id?: string;
+    percent: number;
+    titleText?: string;
+    title?: ReactNode;
+    hideTitle: boolean;
+    progressBarOnly: boolean;
+    fullColor: string;
+    percentColor: string;
+    style?: CSSProperties;
+    status: ComponentStatus;
+    progressBarStyle?: CSSProperties;
+}): React.JSX.Element;

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

@@ -1,36 +1,35 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
-var react_1 = require("react");
-var progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
-var react_2 = __importDefault(require("react"));
-var index_1 = require("../../index");
-function ProgressBar(_a) {
-    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(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--primary-main-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", { id: id, className: "col ".concat(progress_bar_module_css_1.default["progress-bar-container"]), 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: "row ".concat(progress_bar_module_css_1.default["progress-bar-title"]) },
-            react_2.default.createElement("div", { className: "heading-8" }, titleText),
-            react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: function () { setOpenDetails(!openDetails); } }))),
-        openDetails ? react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-tile"]) },
-            react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
-            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: "".concat(progress_bar_module_css_1.default["status-icon"]) }, (0, index_1.getStatusIcon)(status)),
-            progressBarOnly ? null : react_2.default.createElement("div", { className: 'label-4' },
-                percent,
-                "/100")) : null);
-}
-exports.ProgressBar = ProgressBar;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = ProgressBar;
+var react_1 = require("react");
+var progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
+var react_2 = __importDefault(require("react"));
+var index_1 = require("../../index");
+function ProgressBar(_a) {
+    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(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--primary-main-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", { id: id, className: "col ".concat(progress_bar_module_css_1.default["progress-bar-container"]), 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: "row ".concat(progress_bar_module_css_1.default["progress-bar-title"]) },
+            react_2.default.createElement("div", { className: "heading-8" }, titleText),
+            react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: function () { setOpenDetails(!openDetails); } }))),
+        openDetails ? react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-tile"]) },
+            react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
+            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: "".concat(progress_bar_module_css_1.default["status-icon"]) }, (0, index_1.getStatusIcon)(status)),
+            progressBarOnly ? null : react_2.default.createElement("div", { className: 'label-4' },
+                percent,
+                "/100")) : null);
+}