josenanodev-react-components-library 0.0.10 → 0.0.12

package/dist/cjs/components/Modal/Modal.css

@@ -0,0 +1,43 @@
+#modal,
+#close-modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-name: modal;
+  animation-duration: 500ms;
+}
+
+#close-modal {
+  animation-name: close-modal;
+  animation-duration: 500ms;
+}
+
+@keyframes modal {
+  from {
+    backdrop-filter: none;
+    opacity: 0;
+  }
+  to {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+}
+
+@keyframes close-modal {
+  from {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+  to {
+    backdrop-filter: none;
+    opacity: 0;
+    display: none;
+  }
+}

package/dist/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./Modal.css";
+import { ModalPropsType } from "./types";
+declare const Modal: ({ children, parentElement, visibility, forced, onOpen, onClose, transitionTime, }: ModalPropsType) => JSX.Element;
+export default Modal;

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,82 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+require("./Modal.css");
+//Hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+const Modal = ({ children, parentElement, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+    //Refs
+    const modalRef = (0, react_1.useRef)(null);
+    //Estados
+    const [visible, setVisible] = (0, react_1.useState)(visibility);
+    //Hooks
+    (0, useOutsideClick_1.default)(modalRef, () => {
+        if (modalRef.current !== null && !forced) {
+            modalRef.current.className = "close-modal";
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    });
+    //UseEffect
+    (0, react_1.useEffect)(() => {
+        if (visibility) {
+            setVisible(true);
+            if (onOpen)
+                onOpen();
+        }
+        else if (!visibility) {
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    }, [visibility, transitionTime, onOpen, onClose]);
+    //Render
+    if (visible) {
+        return react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: modalRef, className: visibility ? "modal" : "close-modal", style: { animationDuration: `${transitionTime}ms` }, onClick: (event) => {
+                if (event.target.id === "modal" && !forced) {
+                    event.target.id = "close-modal";
+                    setTimeout(() => {
+                        setVisible(false);
+                        if (onClose)
+                            onClose();
+                    }, transitionTime - 50);
+                }
+            } }, children), parentElement);
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+};
+exports.default = Modal;

package/dist/cjs/components/Modal/types.d.ts

@@ -0,0 +1,9 @@
+export interface ModalPropsType {
+  children: JSX.Element;
+  parentElement: HTMLElement;
+  visibility: boolean;
+  forced?: boolean;
+  onOpen?: Function;
+  onClose?: Function;
+  transitionTime?: number;
+}

package/dist/cjs/components/PopUp/PopUp.css

@@ -0,0 +1,15 @@
+.pop-up {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(235, 235, 235);
+  border-style: solid;
+  border-width: 0px 1px 1px;
+  box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
+  padding: 0px;
+  position: relative;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.pop-up.pop-up-hidden {
+  display: none;
+}

package/dist/cjs/components/PopUp/PopUp.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./PopUp.css";
+import { PopUpProps } from "./types";
+declare const PopUp: ({ open, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle, aditionalClass, }: PopUpProps) => JSX.Element;
+export default PopUp;

package/dist/cjs/components/PopUp/PopUp.js

@@ -0,0 +1,50 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+require("./PopUp.css");
+const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, }) => {
+    //Refs
+    const popUpRef = (0, react_1.useRef)(null);
+    //Hooks
+    (0, useOutsideClick_1.default)(popUpRef, () => {
+        if (outBoundClickClosesPopUp) {
+            setOpenState(false);
+            if (closeAction)
+                closeAction();
+        }
+    });
+    //Estados
+    const [openState, setOpenState] = (0, react_1.useState)(open);
+    //useState
+    return (react_1.default.createElement("div", { ref: popUpRef, className: "pop-up" +
+            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
+            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
+};
+exports.default = PopUp;

package/dist/cjs/components/PopUp/types.d.ts

@@ -0,0 +1,8 @@
+export interface PopUpProps {
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesPopUp?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+  aditionalClass: string;
+}

package/dist/cjs/components/SearchBar/SearchBar.css

@@ -0,0 +1,35 @@
+.search-bar .div-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(185, 185, 185);
+  box-sizing: border-box;
+  margin: 2px 10px;
+  padding: 5px 0px;
+  border-radius: 6px;
+}
+
+.search-bar .div-search-bar input {
+  width: 100%;
+  border: none;
+}
+
+.search-bar .div-search-bar input:focus {
+  border: none;
+  outline: none;
+}
+
+.search-bar .div-search-bar svg {
+  width: 36px;
+  padding: 0px 10px;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones {
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
+  cursor: not-allowed;
+  color: rgb(184, 184, 184);
+}

package/dist/cjs/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./SearchBar.css";
+import { SearchBarPropsType } from "./types";
+declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => JSX.Element;
+export default SearchBar;

package/dist/cjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,67 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+require("./SearchBar.css");
+//Icons
+const bs_1 = require("react-icons/bs");
+const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
+    //Estados
+    const [searchValue, setSearchValue] = (0, react_1.useState)(initialValue);
+    const [cachedSearchValue, setCachedSearchValue] = (0, react_1.useState)(initialValue);
+    //useEffect
+    (0, react_1.useEffect)(() => {
+        if (searchValue !== cachedSearchValue) {
+            if (searchValue !== "") {
+                actionOnAlteringText(searchValue);
+            }
+            else if (searchValue === "") {
+                actionOnEmptyText();
+            }
+            setCachedSearchValue(searchValue);
+        }
+    }, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
+    return (react_1.default.createElement("form", { className: "search-bar", onSubmit: (e) => {
+            e.preventDefault();
+            let searchElement = e.target.elements.namedItem("search-bar-name");
+            if (searchElement !== null)
+                actionOnEnter(searchElement.value);
+        } },
+        react_1.default.createElement("div", { className: "div-search-bar" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(bs_1.BsSearch, null)),
+            react_1.default.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                    if (e.target.value)
+                        actionOnAlteringText();
+                    if (!e.target.value)
+                        actionOnEmptyText();
+                }, value: searchValue }),
+            optionsButtonVisible && (react_1.default.createElement("div", { className: disabled
+                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
+                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
+                react_1.default.createElement(bs_1.BsSliders, null))))));
+};
+exports.default = SearchBar;

package/dist/cjs/components/SearchBar/types.d.ts

@@ -0,0 +1,10 @@
+export interface SearchBarPropsType {
+  actionOnEnter?: function;
+  actionOnAlteringText?: function;
+  actionOnEmptyText?: function;
+  optionsButtonVisible: boolean;
+  actionOnClickOptionsButton?: function;
+  placeholder: string;
+  initialValue?: string;
+  disabled?: boolean;
+}

package/dist/cjs/components/SideBar/SideBar.d.ts

@@ -4,5 +4,5 @@ import { SideBarPropsType } from "./types";
 /**
  * NOTE: Parent Node must have position: relative, to work correctly with the side bar
  */
-declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, }: SideBarPropsType) => JSX.Element;
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
 export default SideBar;

package/dist/cjs/components/SideBar/SideBar.js

@@ -36,7 +36,7 @@ const bs_1 = require("react-icons/bs");
 /**
  * NOTE: Parent Node must have position: relative, to work correctly with the side bar
  */
-const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, }) => {
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
     //Refs
     const sideBarRef = (0, react_1.useRef)(null);
     //Hooks
@@ -52,13 +52,11 @@ const SideBar = ({ side, open = false, children, closeAction, outBoundClickClose
     });
     //useState
     const [openState, setOpenState] = (0, react_1.useState)(open);
-    return (react_1.default.createElement("div", { ref: sideBarRef, className: "side-bar", style: {
-            [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+    return (react_1.default.createElement("div", { ref: sideBarRef, className: "side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
                 ? `calc(100% - ${elementWidth}px)`
                 : closeAction
                     ? "100%"
-                    : `calc(100% - 30px)`,
-        } },
+                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
         react_1.default.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
                 if (closeAction) {
                     closeAction();

package/dist/cjs/components/SideBar/types.d.ts

@@ -4,4 +4,5 @@ export interface SideBarPropsType {
   open: boolean;
   closeAction?: Function;
   outBoundClickClosesSideBar?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
 }

package/dist/cjs/index.d.ts

@@ -1,3 +1,7 @@
 import Multicalendar from "./components/Multicalendar/Multicalendar";
+import SideBar from "./components/SideBar/SideBar";
+import SearchBar from "./components/SearchBar/SearchBar";
+import Modal from "./components/Modal/Modal";
+import PopUp from "./components/PopUp/PopUp";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };

package/dist/cjs/index.js

@@ -3,8 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
+exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
 const Multicalendar_1 = __importDefault(require("./components/Multicalendar/Multicalendar"));
 exports.Multicalendar = Multicalendar_1.default;
+const SideBar_1 = __importDefault(require("./components/SideBar/SideBar"));
+exports.SideBar = SideBar_1.default;
+const SearchBar_1 = __importDefault(require("./components/SearchBar/SearchBar"));
+exports.SearchBar = SearchBar_1.default;
+const Modal_1 = __importDefault(require("./components/Modal/Modal"));
+exports.Modal = Modal_1.default;
+const PopUp_1 = __importDefault(require("./components/PopUp/PopUp"));
+exports.PopUp = PopUp_1.default;
 const MulticalendarStatesAndSettings_1 = require("./Services/MulticalendarStatesAndSettings");
 Object.defineProperty(exports, "setMulticalendarYScrollPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarYScrollPosition; } });

package/dist/esm/components/Modal/Modal.css

@@ -0,0 +1,43 @@
+#modal,
+#close-modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-name: modal;
+  animation-duration: 500ms;
+}
+
+#close-modal {
+  animation-name: close-modal;
+  animation-duration: 500ms;
+}
+
+@keyframes modal {
+  from {
+    backdrop-filter: none;
+    opacity: 0;
+  }
+  to {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+}
+
+@keyframes close-modal {
+  from {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+  to {
+    backdrop-filter: none;
+    opacity: 0;
+    display: none;
+  }
+}

package/dist/esm/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./Modal.css";
+import { ModalPropsType } from "./types";
+declare const Modal: ({ children, parentElement, visibility, forced, onOpen, onClose, transitionTime, }: ModalPropsType) => JSX.Element;
+export default Modal;

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import "./Modal.css";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+const Modal = ({ children, parentElement, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+    //Refs
+    const modalRef = useRef(null);
+    //Estados
+    const [visible, setVisible] = useState(visibility);
+    //Hooks
+    useOutsideClick(modalRef, () => {
+        if (modalRef.current !== null && !forced) {
+            modalRef.current.className = "close-modal";
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    });
+    //UseEffect
+    useEffect(() => {
+        if (visibility) {
+            setVisible(true);
+            if (onOpen)
+                onOpen();
+        }
+        else if (!visibility) {
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    }, [visibility, transitionTime, onOpen, onClose]);
+    //Render
+    if (visible) {
+        return ReactDOM.createPortal(React.createElement("div", { ref: modalRef, className: visibility ? "modal" : "close-modal", style: { animationDuration: `${transitionTime}ms` }, onClick: (event) => {
+                if (event.target.id === "modal" && !forced) {
+                    event.target.id = "close-modal";
+                    setTimeout(() => {
+                        setVisible(false);
+                        if (onClose)
+                            onClose();
+                    }, transitionTime - 50);
+                }
+            } }, children), parentElement);
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+export default Modal;

package/dist/esm/components/Modal/types.d.ts

@@ -0,0 +1,9 @@
+export interface ModalPropsType {
+  children: JSX.Element;
+  parentElement: HTMLElement;
+  visibility: boolean;
+  forced?: boolean;
+  onOpen?: Function;
+  onClose?: Function;
+  transitionTime?: number;
+}

package/dist/esm/components/PopUp/PopUp.css

@@ -0,0 +1,15 @@
+.pop-up {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(235, 235, 235);
+  border-style: solid;
+  border-width: 0px 1px 1px;
+  box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
+  padding: 0px;
+  position: relative;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.pop-up.pop-up-hidden {
+  display: none;
+}

package/dist/esm/components/PopUp/PopUp.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./PopUp.css";
+import { PopUpProps } from "./types";
+declare const PopUp: ({ open, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle, aditionalClass, }: PopUpProps) => JSX.Element;
+export default PopUp;

package/dist/esm/components/PopUp/PopUp.js

@@ -0,0 +1,22 @@
+import React, { useState, useRef } from "react";
+import useOutsideClick from "../../hooks/useOutsideClick";
+import "./PopUp.css";
+const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, }) => {
+    //Refs
+    const popUpRef = useRef(null);
+    //Hooks
+    useOutsideClick(popUpRef, () => {
+        if (outBoundClickClosesPopUp) {
+            setOpenState(false);
+            if (closeAction)
+                closeAction();
+        }
+    });
+    //Estados
+    const [openState, setOpenState] = useState(open);
+    //useState
+    return (React.createElement("div", { ref: popUpRef, className: "pop-up" +
+            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
+            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
+};
+export default PopUp;

package/dist/esm/components/PopUp/types.d.ts

@@ -0,0 +1,8 @@
+export interface PopUpProps {
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesPopUp?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+  aditionalClass: string;
+}

package/dist/esm/components/SearchBar/SearchBar.css

@@ -0,0 +1,35 @@
+.search-bar .div-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(185, 185, 185);
+  box-sizing: border-box;
+  margin: 2px 10px;
+  padding: 5px 0px;
+  border-radius: 6px;
+}
+
+.search-bar .div-search-bar input {
+  width: 100%;
+  border: none;
+}
+
+.search-bar .div-search-bar input:focus {
+  border: none;
+  outline: none;
+}
+
+.search-bar .div-search-bar svg {
+  width: 36px;
+  padding: 0px 10px;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones {
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
+  cursor: not-allowed;
+  color: rgb(184, 184, 184);
+}

package/dist/esm/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./SearchBar.css";
+import { SearchBarPropsType } from "./types";
+declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => JSX.Element;
+export default SearchBar;

package/dist/esm/components/SearchBar/SearchBar.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import "./SearchBar.css";
+//Icons
+import { BsSearch, BsSliders } from "react-icons/bs";
+const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
+    //Estados
+    const [searchValue, setSearchValue] = useState(initialValue);
+    const [cachedSearchValue, setCachedSearchValue] = useState(initialValue);
+    //useEffect
+    useEffect(() => {
+        if (searchValue !== cachedSearchValue) {
+            if (searchValue !== "") {
+                actionOnAlteringText(searchValue);
+            }
+            else if (searchValue === "") {
+                actionOnEmptyText();
+            }
+            setCachedSearchValue(searchValue);
+        }
+    }, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
+    return (React.createElement("form", { className: "search-bar", onSubmit: (e) => {
+            e.preventDefault();
+            let searchElement = e.target.elements.namedItem("search-bar-name");
+            if (searchElement !== null)
+                actionOnEnter(searchElement.value);
+        } },
+        React.createElement("div", { className: "div-search-bar" },
+            React.createElement("div", null,
+                React.createElement(BsSearch, null)),
+            React.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                    if (e.target.value)
+                        actionOnAlteringText();
+                    if (!e.target.value)
+                        actionOnEmptyText();
+                }, value: searchValue }),
+            optionsButtonVisible && (React.createElement("div", { className: disabled
+                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
+                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
+                React.createElement(BsSliders, null))))));
+};
+export default SearchBar;

package/dist/esm/components/SearchBar/types.d.ts

@@ -0,0 +1,10 @@
+export interface SearchBarPropsType {
+  actionOnEnter?: function;
+  actionOnAlteringText?: function;
+  actionOnEmptyText?: function;
+  optionsButtonVisible: boolean;
+  actionOnClickOptionsButton?: function;
+  placeholder: string;
+  initialValue?: string;
+  disabled?: boolean;
+}

package/dist/esm/components/SideBar/SideBar.d.ts

@@ -4,5 +4,5 @@ import { SideBarPropsType } from "./types";
 /**
  * NOTE: Parent Node must have position: relative, to work correctly with the side bar
  */
-declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, }: SideBarPropsType) => JSX.Element;
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
 export default SideBar;

package/dist/esm/components/SideBar/SideBar.js

@@ -8,7 +8,7 @@ import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
 /**
  * NOTE: Parent Node must have position: relative, to work correctly with the side bar
  */
-const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, }) => {
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
     //Refs
     const sideBarRef = useRef(null);
     //Hooks
@@ -24,13 +24,11 @@ const SideBar = ({ side, open = false, children, closeAction, outBoundClickClose
     });
     //useState
     const [openState, setOpenState] = useState(open);
-    return (React.createElement("div", { ref: sideBarRef, className: "side-bar", style: {
-            [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+    return (React.createElement("div", { ref: sideBarRef, className: "side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
                 ? `calc(100% - ${elementWidth}px)`
                 : closeAction
                     ? "100%"
-                    : `calc(100% - 30px)`,
-        } },
+                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
         React.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
                 if (closeAction) {
                     closeAction();

package/dist/esm/components/SideBar/types.d.ts

@@ -4,4 +4,5 @@ export interface SideBarPropsType {
   open: boolean;
   closeAction?: Function;
   outBoundClickClosesSideBar?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
 }

package/dist/esm/index.d.ts

@@ -1,3 +1,7 @@
 import Multicalendar from "./components/Multicalendar/Multicalendar";
+import SideBar from "./components/SideBar/SideBar";
+import SearchBar from "./components/SearchBar/SearchBar";
+import Modal from "./components/Modal/Modal";
+import PopUp from "./components/PopUp/PopUp";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };

package/dist/esm/index.js

@@ -1,3 +1,7 @@
 import Multicalendar from "./components/Multicalendar/Multicalendar";
+import SideBar from "./components/SideBar/SideBar";
+import SearchBar from "./components/SearchBar/SearchBar";
+import Modal from "./components/Modal/Modal";
+import PopUp from "./components/PopUp/PopUp";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "josenanodev-react-components-library",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": "Jose Carlos Cardenas Martinez",
   "description": "Libreria de componentes React personales",
   "license": "MIT",