wini-web-components 2.4.6 → 2.4.8

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

@@ -115,6 +115,7 @@ var checkbox_1 = require("../checkbox/checkbox");
 var text_1 = require("../text/text");
 var winicon_1 = require("../wini-icon/winicon");
 var react_i18next_1 = require("react-i18next");
+var popup_1 = require("../popup/popup");
 ;
 var TSelectMultiple = /** @class */ (function (_super) {
     __extends(TSelectMultiple, _super);
@@ -122,6 +123,7 @@ var TSelectMultiple = /** @class */ (function (_super) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this.containerRef = (0, react_1.createRef)();
+        _this.inputRef = (0, react_1.createRef)();
         _this.state = {
             value: (_a = props.value) !== null && _a !== void 0 ? _a : [],
             options: props.options,
@@ -279,11 +281,9 @@ var TSelectMultiple = /** @class */ (function (_super) {
                         react_1.default.createElement(text_1.Text, { style: { color: "var(--neutral-text-title-color)", fontSize: '1.2rem', lineHeight: '1.4rem' } }, optionItem === null || optionItem === void 0 ? void 0 : optionItem.name),
                         react_1.default.createElement(winicon_1.Winicon, { src: "outline/user interface/e-remove", size: '1.2rem' }));
                 }),
-                (!this.state.value.length || this.state.isOpen) && react_1.default.createElement("input", { autoFocus: this.state.value.length > 0, onChange: this.search, placeholder: this.state.value.length ? undefined : this.props.placeholder, onBlur: function (ev) {
-                        if (_this.state.onSelect)
+                (!this.state.value.length || this.state.isOpen) && react_1.default.createElement("input", { ref: this.inputRef, autoFocus: this.state.value.length > 0, onChange: this.search, placeholder: this.state.value.length ? undefined : this.props.placeholder, onBlur: function (ev) {
+                        if (_this.state.isOpen)
                             ev.target.focus();
-                        else
-                            _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
                     } })),
             this.props.showClearValueButton && this.state.value.length ? react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.4rem' }, onClick: function (ev) {
                     ev.stopPropagation();
@@ -296,12 +296,15 @@ var TSelectMultiple = /** @class */ (function (_super) {
                 }, className: 'row' },
                 react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: '1.2rem' })),
             this.state.isOpen &&
-                react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(input_multi_select_module_css_1.default['select-multi-popup'], " select-multi-popup col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
+                react_dom_1.default.createPortal(react_1.default.createElement(popup_1.PopupOverlay, { className: "".concat(input_multi_select_module_css_1.default['select-multi-popup'], " 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,
-                    }, 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 () {
+                    }, onClose: function (ev) {
+                        if (ev.target !== _this.inputRef.current)
+                            _this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
+                    } },
+                    react_1.default.createElement("div", { style: { padding: '1.2rem 1.6rem', width: '100%', borderBottom: "var(--neutral-main-border)" } }, (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; }); });

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

@@ -11,7 +11,7 @@ interface PopupState {
     hideButtonClose?: boolean;
 }
 export declare const showPopup: (props: {
-    ref: React.MutableRefObject<Popup | undefined>;
+    ref: React.RefObject<Popup | undefined>;
     heading?: ReactNode;
     content?: ReactNode;
     body?: ReactNode;
@@ -20,7 +20,7 @@ export declare const showPopup: (props: {
     style?: CSSProperties;
     hideButtonClose?: boolean;
 }) => void;
-export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
+export declare const closePopup: (ref: React.RefObject<Popup>) => void;
 export declare class Popup extends React.Component<Object, PopupState> {
     private ref;
     constructor(props: Object | Readonly<Object>);
@@ -30,4 +30,11 @@ export declare class Popup extends React.Component<Object, PopupState> {
     componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>): void;
     render(): React.JSX.Element;
 }
+export declare function PopupOverlay({ children, onClose, className, style, onOpen }: {
+    children?: ReactNode;
+    className?: string;
+    onClose?: (ev: MouseEvent) => void;
+    style?: CSSProperties;
+    onOpen?: (ev: HTMLDivElement) => void;
+}): React.JSX.Element;
 export {};

package/dist/component/popup/popup.js

@@ -63,6 +63,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = exports.closePopup = exports.showPopup = void 0;
+exports.PopupOverlay = PopupOverlay;
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 require("./popup.css");
@@ -122,10 +123,7 @@ var Popup = /** @class */ (function (_super) {
         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 },
+            react_dom_1.default.createPortal(react_1.default.createElement(PopupOverlay, { className: this.state.clickOverlayClosePopup ? 'hidden-overlay' : '', onClose: this.state.clickOverlayClosePopup ? function () { _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,
@@ -136,3 +134,24 @@ var Popup = /** @class */ (function (_super) {
     return Popup;
 }(react_1.default.Component));
 exports.Popup = Popup;
+function PopupOverlay(_a) {
+    var children = _a.children, onClose = _a.onClose, className = _a.className, style = _a.style, onOpen = _a.onOpen;
+    var overlayRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (overlayRef.current && onClose) {
+            var onClickDropDown_1 = function (ev) {
+                if (ev.target !== overlayRef.current && !overlayRef.current.contains(ev.target))
+                    onClose(ev);
+            };
+            window.document.body.addEventListener("mousedown", onClickDropDown_1);
+            return function () {
+                window.document.body.removeEventListener("mousedown", onClickDropDown_1);
+            };
+        }
+    }, [overlayRef]);
+    (0, react_1.useEffect)(function () {
+        if (overlayRef.current && onOpen)
+            onOpen(overlayRef.current);
+    }, [overlayRef, onOpen]);
+    return react_1.default.createElement("div", { ref: overlayRef, className: "popup-overlay ".concat(className !== null && className !== void 0 ? className : ""), style: style }, children);
+}

package/dist/component/select1/select1.js

@@ -105,6 +105,7 @@ var react_dom_1 = __importDefault(require("react-dom"));
 var winicon_1 = require("../wini-icon/winicon");
 var text_1 = require("../text/text");
 var react_i18next_1 = require("react-i18next");
+var popup_1 = require("../popup/popup");
 ;
 var TSelect1 = /** @class */ (function (_super) {
     __extends(TSelect1, _super);
@@ -269,25 +270,23 @@ var TSelect1 = /** @class */ (function (_super) {
                 }
             } },
             this.props.prefix,
-            (!_value || typeof _value.name === "string" || typeof _value.name === "number") ? react_1.default.createElement("input", { ref: this.inputRef, readOnly: this.props.readOnly, onChange: this.search, placeholder: this.props.placeholder, onKeyDown: this.onKeyDown, onBlur: function (ev) {
+            (!_value || typeof _value.name === "string" || typeof _value.name === "number") ? react_1.default.createElement("input", { ref: this.inputRef, readOnly: this.props.readOnly, onChange: this.search, placeholder: this.props.placeholder, onBlur: function (ev) {
                     if (_this.state.onSelect && !_this.props.readOnly)
                         ev.target.focus();
-                    else if (!_this.state.onSelect)
-                        _this.setState(__assign(__assign({}, _this.state), { isOpen: false, onSelect: null }));
                 } }) : _value.name, (_e = this.props.suffix) !== null && _e !== void 0 ? _e : react_1.default.createElement("div", { ref: function (iconRef) {
                 if ((iconRef === null || iconRef === void 0 ? void 0 : iconRef.parentElement) && iconRef.parentElement.getBoundingClientRect().width < 88)
                     iconRef.style.display = "none";
             }, className: 'row' },
             react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: "1.2rem" })),
             this.state.isOpen &&
-                react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: function (popupRef) {
-                        if (popupRef && _this.props.onOpenOptions)
-                            _this.props.onOpenOptions(popupRef);
-                    }, className: "".concat(select1_module_css_1.default['select1-popup'], " select1-popup col ").concat((_f = this.props.popupClassName) !== null && _f !== void 0 ? _f : ""), style: (_g = this.state.style) !== null && _g !== void 0 ? _g : {
+                react_dom_1.default.createPortal(react_1.default.createElement(popup_1.PopupOverlay, { onOpen: this.props.onOpenOptions, className: "".concat(select1_module_css_1.default['select1-popup'], " select1-popup col ").concat((_f = this.props.popupClassName) !== null && _f !== void 0 ? _f : ""), style: (_g = this.state.style) !== null && _g !== void 0 ? _g : {
                         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 })); } },
+                    }, onClose: function (ev) {
+                        if (ev.target !== _this.inputRef.current)
+                            _this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
+                    } },
                     react_1.default.createElement("div", { className: "col ".concat(select1_module_css_1.default['select-body']), onScroll: this.props.handleLoadmore ? function (ev) {
                             if (_this.props.handleLoadmore) {
                                 var scrollElement = ev.target;

package/dist/component/slider/slider.js

@@ -60,6 +60,8 @@ var CustomSlider = /** @class */ (function (_super) {
             page: 0
         };
         _this.autoPlay = _this.autoPlay.bind(_this);
+        _this.nextPage = _this.nextPage.bind(_this);
+        _this.previousPage = _this.previousPage.bind(_this);
         return _this;
     }
     CustomSlider.prototype.componentDidMount = function () {