josenanodev-react-components-library 0.0.15 → 0.0.17

package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.css

@@ -0,0 +1,229 @@
+.parallel-selection-list {
+  display: grid;
+  grid-template-areas:
+    "lef rig"
+    "but but";
+  height: 100%;
+  grid-template-rows: calc(100% - 80px) 80px;
+  grid-template-columns: 50% 50%;
+}
+
+.parallel-selection-list .div-left-list {
+  grid-area: lef;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  height: 100%;
+}
+
+.parallel-selection-list .div-right-list {
+  grid-area: rig;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  height: 100%;
+}
+
+.parallel-selection-list .div-action-buttons {
+  grid-area: but;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.parallel-selection-list .list-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: dimgray;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.parallel-selection-list .div-search-bar {
+  width: 100%;
+  border: 1px solid rgb(185, 185, 185);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  padding: 6px;
+  height: 30px;
+  box-sizing: border-box;
+  color: dimgray;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.parallel-selection-list .div-search-bar input {
+  border: none;
+  padding-left: 10px;
+  width: 100%;
+}
+
+.parallel-selection-list .div-search-bar input:focus {
+  outline: none;
+}
+
+.parallel-selection-list .list-container {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  box-sizing: border-box;
+  border: 1px solid rgb(169, 169, 169);
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-top: none;
+  height: calc(100% - 60px);
+}
+
+.parallel-selection-list .list-container .apply-all-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 30px;
+  border: none;
+  background-color: transparent;
+  color: dimgray;
+  font-weight: 700;
+  border-bottom: 1px solid rgb(169, 169, 169);
+  box-sizing: border-box;
+  padding: 5px 0;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list .list-container .apply-all-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.parallel-selection-list .list-container .apply-all-button:hover {
+  background-color: rgb(238, 238, 238);
+}
+
+.parallel-selection-list .list-container .scrollable-section {
+  overflow-y: auto;
+  height: calc(100% - 30px);
+}
+
+.parallel-selection-list .list-container .scrollable-section .resizable-div-for-scroll {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgb(169, 169, 169);
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .div-custom-component-wrapper {
+  position: relative;
+  height: 100%;
+  width: calc(100% - 50px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .visible-default-name {
+  box-sizing: border-box;
+  padding: 17px 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: dimgray;
+  height: 50px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: calc(100% - 50px);
+  text-align: start;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .apply-to-one-button {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  background-color: transparent;
+  border: none;
+  border-radius: 15px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .apply-to-one-button:hover {
+  background-color: rgb(238, 238, 238);
+}
+
+.parallel-selection-list .div-action-buttons button {
+  box-sizing: border-box;
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: solid 2px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list .div-action-buttons .cancel-button {
+  border-color: dimgray;
+  color: dimgray;
+}
+
+.parallel-selection-list .div-action-buttons .cancel-button:hover {
+  background-color: dimgray;
+  color: white;
+}
+
+.parallel-selection-list .div-action-buttons .apply-button {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.parallel-selection-list .div-action-buttons .apply-button:hover {
+  background-color: var(--primary-color);
+  color: white;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./ParallelSelectionList.css";
+import { ParallelSelectionListPropsTypes } from "./types";
+declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
+export default ParallelSelectionList;

package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+require("./ParallelSelectionList.css");
+//Icons
+const bs_1 = require("react-icons/bs");
+//Hooks
+const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
+const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
+    //Refs
+    const leftListRef = (0, react_2.useRef)(null);
+    const rightListRef = (0, react_2.useRef)(null);
+    //useState
+    const [selectedDatumsIds, setSelectedDatumsIds] = (0, react_2.useState)(preSelectedDatumsIds);
+    const [filteredLeftList, setFilteredLeftList] = (0, react_2.useState)([]);
+    const [filteredRightList, setFilteredRightList] = (0, react_2.useState)([]);
+    const [leftListFirstVisibleElementIndex, setLeftListFirstVisibleElementIndex] = (0, react_2.useState)(0);
+    const [leftListLastVisibleElementIndex, setLeftListLastVisibleElementIndex] = (0, react_2.useState)(0);
+    const [rightListFirstVisibleElementIndex, setRightListFirstVisibleElementIndex] = (0, react_2.useState)(0);
+    const [rightListLastVisibleElementIndex, setRightListLastVisibleElementIndex] = (0, react_2.useState)(0);
+    const [leftListSearchValue, setLeftListSearchValue] = (0, react_2.useState)("");
+    const [rightListSearchValue, setRightListSearchValue] = (0, react_2.useState)("");
+    //hooks
+    const [leftListWidth, leftListHeight] = (0, useResizeObserver_1.default)(leftListRef);
+    const [rightListWidth, rightListHeight] = (0, useResizeObserver_1.default)(rightListRef);
+    //Functions
+    const addToSelectedDatumsIds = (datumIdsArray) => {
+        const selectedDatumsIdsClone = [...selectedDatumsIds];
+        datumIdsArray.forEach((datumId) => {
+            if (!selectedDatumsIds.includes(datumId)) {
+                selectedDatumsIdsClone.push(datumId);
+            }
+        });
+        setSelectedDatumsIds(selectedDatumsIdsClone);
+    };
+    const removeFromSelectedDatumsIds = (datumIdsArray) => {
+        const selectedDatumsIdsClone = [...selectedDatumsIds];
+        datumIdsArray.forEach((datumId) => {
+            if (selectedDatumsIds.includes(datumId)) {
+                selectedDatumsIdsClone.splice(selectedDatumsIdsClone.indexOf(datumId), 1);
+            }
+        });
+        setSelectedDatumsIds(selectedDatumsIdsClone);
+    };
+    //useEffects
+    (0, react_2.useEffect)(() => {
+        let dataListClone = [...dataList];
+        dataListClone = dataListClone.filter((datum) => !selectedDatumsIds.includes(datum._id));
+        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(leftListSearchValue.toLowerCase()));
+        setFilteredLeftList(dataListClone);
+    }, [leftListSearchValue, dataList, selectedDatumsIds]);
+    (0, react_2.useEffect)(() => {
+        let dataListClone = [...dataList];
+        dataListClone = dataListClone.filter((datum) => selectedDatumsIds.includes(datum._id));
+        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(rightListSearchValue.toLowerCase()));
+        setFilteredRightList(dataListClone);
+    }, [rightListSearchValue, dataList, selectedDatumsIds]);
+    (0, react_2.useEffect)(() => {
+        if (leftListRef.current && leftListRef.current.clientHeight !== 0) {
+            setLeftListLastVisibleElementIndex(leftListFirstVisibleElementIndex +
+                Math.floor(leftListRef.current.clientHeight / listElementsHeight) +
+                2);
+        }
+        else {
+            setLeftListLastVisibleElementIndex(filteredLeftList.length);
+        }
+    }, [
+        leftListHeight,
+        leftListWidth,
+        leftListFirstVisibleElementIndex,
+        listElementsHeight,
+        filteredLeftList.length
+    ]);
+    (0, react_2.useEffect)(() => {
+        if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
+            setRightListLastVisibleElementIndex(rightListFirstVisibleElementIndex +
+                Math.floor(rightListRef.current.clientHeight / listElementsHeight) +
+                2);
+        }
+        else {
+            setRightListLastVisibleElementIndex(filteredRightList.length);
+        }
+    }, [
+        rightListHeight,
+        rightListWidth,
+        rightListFirstVisibleElementIndex,
+        listElementsHeight,
+        filteredRightList.length
+    ]);
+    return (react_1.default.createElement("div", { className: "parallel-selection-list" },
+        react_1.default.createElement("div", { className: "div-left-list" },
+            react_1.default.createElement("p", { className: "list-title" }, leftListTitle),
+            searchBarsVisible && (react_1.default.createElement("div", { className: "div-search-bar" },
+                react_1.default.createElement(bs_1.BsSearch, null),
+                react_1.default.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
+            react_1.default.createElement("div", { className: "list-container" },
+                react_1.default.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
+                    react_1.default.createElement(bs_1.BsChevronDoubleRight, null)),
+                react_1.default.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
+                    react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
+                            paddingTop: leftListFirstVisibleElementIndex * listElementsHeight,
+                            height: filteredLeftList.length * listElementsHeight,
+                        } }, filteredLeftList
+                        .slice(leftListFirstVisibleElementIndex, leftListLastVisibleElementIndex)
+                        .map((datum) => (react_1.default.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
+                        datum.customComponent ? (react_1.default.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (react_1.default.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName)),
+                        react_1.default.createElement("button", { className: "apply-to-one-button", onClick: () => addToSelectedDatumsIds([datum._id]) },
+                            react_1.default.createElement(bs_1.BsChevronRight, null))))))))),
+        react_1.default.createElement("div", { className: "div-right-list" },
+            react_1.default.createElement("p", { className: "list-title" }, rightListTitle),
+            searchBarsVisible && (react_1.default.createElement("div", { className: "div-search-bar" },
+                react_1.default.createElement(bs_1.BsSearch, null),
+                react_1.default.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
+            react_1.default.createElement("div", { className: "list-container" },
+                react_1.default.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
+                    react_1.default.createElement(bs_1.BsChevronDoubleLeft, null)),
+                react_1.default.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
+                    react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
+                            paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
+                            height: filteredRightList.length * listElementsHeight,
+                        } }, filteredRightList
+                        .slice(rightListFirstVisibleElementIndex, rightListLastVisibleElementIndex)
+                        .map((datum) => (react_1.default.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
+                        react_1.default.createElement("button", { className: "apply-to-one-button", onClick: () => removeFromSelectedDatumsIds([datum._id]) },
+                            react_1.default.createElement(bs_1.BsChevronLeft, null)),
+                        datum.customComponent ? (react_1.default.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (react_1.default.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName))))))))),
+        react_1.default.createElement("div", { className: "div-action-buttons" },
+            react_1.default.createElement("button", { className: "cancel-button", onClick: () => cancelAction() }, cancelButtonText ? cancelButtonText : "Cancel"),
+            react_1.default.createElement("button", { className: "apply-button", onClick: () => applyAction(selectedDatumsIds) }, applyButonText ? applyButonText : "Apply"))));
+};
+exports.default = ParallelSelectionList;

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

@@ -0,0 +1,19 @@
+export interface ParallelSelectionListPropsTypes {
+  dataList: ListDatumType[];
+  applyAction: (dataListId: ListDatumType["_id"][]) => Fuction;
+  cancelAction: Function;
+  leftListTitle?: string;
+  rightListTitle?: string;
+  searchBarsVisible?: boolean;
+  applyButonText?: string;
+  cancelButtonText?: string;
+  preSelectedDatumsIds?: ListDatumType["_id"][];
+  listElementsHeight?: number;
+}
+
+export type ListDatumType = {
+  _id: string;
+  searchValue: string;
+  visibleDefaultName: string;
+  customComponent?: JSX.Element;
+};

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

@@ -5,7 +5,7 @@
   border-width: 0px 1px 1px;
   box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
   padding: 0px;
-  position: relative;
+  position: absolute;
   overflow: auto;
   box-sizing: border-box;
 }

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

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

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

@@ -27,9 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (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, }) => {
+//hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, activationButtonRef, }) => {
     //Refs
     const popUpRef = (0, react_1.useRef)(null);
     //Hooks
@@ -39,12 +40,11 @@ const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp,
             if (closeAction)
                 closeAction();
         }
-    });
-    //Estados
-    const [openState, setOpenState] = (0, react_1.useState)(open);
+    }, activationButtonRef ? [activationButtonRef] : []);
     //useState
+    const [openState, setOpenState] = (0, react_1.useState)(open);
     return (react_1.default.createElement("div", { ref: popUpRef, className: "pop-up" +
             ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
-            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
+            (aditionalClass ? " " + aditionalClass : ""), style: open ? aditionalInlineStyle : {} }, children));
 };
 exports.default = PopUp;

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

@@ -1,8 +1,9 @@
-export interface PopUpProps {
+export interface PopUpPropsType {
   children: JSX.Element | JSX.Element[];
   open: boolean;
   closeAction?: Function;
   outBoundClickClosesPopUp?: boolean;
   aditionalInlineStyle?: React.CSSProperties;
-  aditionalClass: string;
+  aditionalClass?: string;
+  activationButtonRef?: React.MutableRefObject<HTMLElement | null>;
 }

package/dist/cjs/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,39 @@
+.progress-bar {
+  height: 40px;
+  width: 100%;
+  position: relative;
+  opacity: 0.9;
+  backdrop-filter: blur(10px);
+}
+
+.progress-bar .fillable-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: dimgray;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.progress-bar .fillable-body .filler {
+  height: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s;
+  border-radius: 100px;
+}
+
+.progress-bar .fillable-body p {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./ProgressBar.css";
+import { ProgressBarPropsType } from "./types";
+declare const ProgressBar: ({ totalSize, currentValue, color, }: ProgressBarPropsType) => JSX.Element;
+export default ProgressBar;

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,56 @@
+"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("./ProgressBar.css");
+const ProgressBar = ({ totalSize, currentValue, color = "var(--secondary-color)", }) => {
+    var _a;
+    //useRef
+    const fillableBodyRef = (0, react_1.useRef)(null);
+    //useStates
+    const [currentPercentage, setCurrentPercentage] = (0, react_1.useState)(totalSize !== 0 ? currentValue / totalSize : 0);
+    const [barWidth, setBarWidth] = (0, react_1.useState)(0);
+    //useEffects
+    (0, react_1.useEffect)(() => {
+        if (totalSize !== 0) {
+            setCurrentPercentage(currentValue / totalSize);
+        }
+        else {
+            setCurrentPercentage(0);
+        }
+    }, [totalSize, currentValue]);
+    (0, react_1.useEffect)(() => {
+        if (fillableBodyRef.current !== null) {
+            setBarWidth(fillableBodyRef.current.clientWidth);
+        }
+    }, [(_a = fillableBodyRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
+    return (react_1.default.createElement("div", { className: "progress-bar" },
+        react_1.default.createElement("div", { ref: fillableBodyRef, className: "fillable-body" },
+            react_1.default.createElement("div", { className: "filler", style: { width: barWidth * currentPercentage, backgroundColor: color } }),
+            react_1.default.createElement("p", null,
+                (currentPercentage * 100).toFixed(0),
+                "%"))));
+};
+exports.default = ProgressBar;

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

@@ -0,0 +1,7 @@
+import { languageType } from "../../../assets/languages/types";
+
+export interface ProgressBarPropsType {
+  totalSize: number;
+  currentValue: number;
+  color?: string,
+}

package/dist/cjs/hooks/useOutsideClick.d.ts

@@ -2,5 +2,5 @@
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
 export default useOutsideClick;

package/dist/cjs/hooks/useOutsideClick.js

@@ -4,13 +4,15 @@ const react_1 = require("react");
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-function useOutsideClick(elementRef, onOutsideClickAction) {
+function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
     (0, react_1.useEffect)(() => {
         /**
          * Alert if clicked on outside of element
          */
         function handleClickOutside(event) {
-            if (elementRef.current && !elementRef.current.contains(event.target)) {
+            if (elementRef.current &&
+                !elementRef.current.contains(event.target) &&
+                elementsRefsExceptions.every((elementRefException) => elementRefException.current !== event.target)) {
                 onOutsideClickAction();
             }
         }
@@ -20,6 +22,6 @@ function useOutsideClick(elementRef, onOutsideClickAction) {
             // Unbind the event listener on clean up
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [elementRef, onOutsideClickAction]);
+    }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
 }
 exports.default = useOutsideClick;

package/dist/cjs/index.d.ts

@@ -3,5 +3,7 @@ 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 ProgressBar from "./components/ProgressBar/ProgressBar";
+import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSelectionList";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList };

package/dist/cjs/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
+exports.ParallelSelectionList = exports.ProgressBar = 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"));
@@ -14,5 +14,9 @@ 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 ProgressBar_1 = __importDefault(require("./components/ProgressBar/ProgressBar"));
+exports.ProgressBar = ProgressBar_1.default;
+const ParallelSelectionList_1 = __importDefault(require("./components/ParallelSelectionList/ParallelSelectionList"));
+exports.ParallelSelectionList = ParallelSelectionList_1.default;
 const MulticalendarStatesAndSettings_1 = require("./Services/MulticalendarStatesAndSettings");
 Object.defineProperty(exports, "setMulticalendarYScrollPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarYScrollPosition; } });

package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.css

@@ -0,0 +1,229 @@
+.parallel-selection-list {
+  display: grid;
+  grid-template-areas:
+    "lef rig"
+    "but but";
+  height: 100%;
+  grid-template-rows: calc(100% - 80px) 80px;
+  grid-template-columns: 50% 50%;
+}
+
+.parallel-selection-list .div-left-list {
+  grid-area: lef;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  height: 100%;
+}
+
+.parallel-selection-list .div-right-list {
+  grid-area: rig;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  height: 100%;
+}
+
+.parallel-selection-list .div-action-buttons {
+  grid-area: but;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.parallel-selection-list .list-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: dimgray;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.parallel-selection-list .div-search-bar {
+  width: 100%;
+  border: 1px solid rgb(185, 185, 185);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  padding: 6px;
+  height: 30px;
+  box-sizing: border-box;
+  color: dimgray;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.parallel-selection-list .div-search-bar input {
+  border: none;
+  padding-left: 10px;
+  width: 100%;
+}
+
+.parallel-selection-list .div-search-bar input:focus {
+  outline: none;
+}
+
+.parallel-selection-list .list-container {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  box-sizing: border-box;
+  border: 1px solid rgb(169, 169, 169);
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-top: none;
+  height: calc(100% - 60px);
+}
+
+.parallel-selection-list .list-container .apply-all-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 30px;
+  border: none;
+  background-color: transparent;
+  color: dimgray;
+  font-weight: 700;
+  border-bottom: 1px solid rgb(169, 169, 169);
+  box-sizing: border-box;
+  padding: 5px 0;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list .list-container .apply-all-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.parallel-selection-list .list-container .apply-all-button:hover {
+  background-color: rgb(238, 238, 238);
+}
+
+.parallel-selection-list .list-container .scrollable-section {
+  overflow-y: auto;
+  height: calc(100% - 30px);
+}
+
+.parallel-selection-list .list-container .scrollable-section .resizable-div-for-scroll {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgb(169, 169, 169);
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .div-custom-component-wrapper {
+  position: relative;
+  height: 100%;
+  width: calc(100% - 50px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .visible-default-name {
+  box-sizing: border-box;
+  padding: 17px 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: dimgray;
+  height: 50px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: calc(100% - 50px);
+  text-align: start;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .apply-to-one-button {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  background-color: transparent;
+  border: none;
+  border-radius: 15px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list
+  .list-container
+  .scrollable-section
+  .resizable-div-for-scroll
+  .div-datum-wrapper
+  .apply-to-one-button:hover {
+  background-color: rgb(238, 238, 238);
+}
+
+.parallel-selection-list .div-action-buttons button {
+  box-sizing: border-box;
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: solid 2px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.parallel-selection-list .div-action-buttons .cancel-button {
+  border-color: dimgray;
+  color: dimgray;
+}
+
+.parallel-selection-list .div-action-buttons .cancel-button:hover {
+  background-color: dimgray;
+  color: white;
+}
+
+.parallel-selection-list .div-action-buttons .apply-button {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.parallel-selection-list .div-action-buttons .apply-button:hover {
+  background-color: var(--primary-color);
+  color: white;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./ParallelSelectionList.css";
+import { ParallelSelectionListPropsTypes } from "./types";
+declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
+export default ParallelSelectionList;

package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js

@@ -0,0 +1,130 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+import "./ParallelSelectionList.css";
+//Icons
+import { BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight, BsSearch, } from "react-icons/bs";
+//Hooks
+import useResizeObserver from "../../hooks/useResizeObserver";
+const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
+    //Refs
+    const leftListRef = useRef(null);
+    const rightListRef = useRef(null);
+    //useState
+    const [selectedDatumsIds, setSelectedDatumsIds] = useState(preSelectedDatumsIds);
+    const [filteredLeftList, setFilteredLeftList] = useState([]);
+    const [filteredRightList, setFilteredRightList] = useState([]);
+    const [leftListFirstVisibleElementIndex, setLeftListFirstVisibleElementIndex] = useState(0);
+    const [leftListLastVisibleElementIndex, setLeftListLastVisibleElementIndex] = useState(0);
+    const [rightListFirstVisibleElementIndex, setRightListFirstVisibleElementIndex] = useState(0);
+    const [rightListLastVisibleElementIndex, setRightListLastVisibleElementIndex] = useState(0);
+    const [leftListSearchValue, setLeftListSearchValue] = useState("");
+    const [rightListSearchValue, setRightListSearchValue] = useState("");
+    //hooks
+    const [leftListWidth, leftListHeight] = useResizeObserver(leftListRef);
+    const [rightListWidth, rightListHeight] = useResizeObserver(rightListRef);
+    //Functions
+    const addToSelectedDatumsIds = (datumIdsArray) => {
+        const selectedDatumsIdsClone = [...selectedDatumsIds];
+        datumIdsArray.forEach((datumId) => {
+            if (!selectedDatumsIds.includes(datumId)) {
+                selectedDatumsIdsClone.push(datumId);
+            }
+        });
+        setSelectedDatumsIds(selectedDatumsIdsClone);
+    };
+    const removeFromSelectedDatumsIds = (datumIdsArray) => {
+        const selectedDatumsIdsClone = [...selectedDatumsIds];
+        datumIdsArray.forEach((datumId) => {
+            if (selectedDatumsIds.includes(datumId)) {
+                selectedDatumsIdsClone.splice(selectedDatumsIdsClone.indexOf(datumId), 1);
+            }
+        });
+        setSelectedDatumsIds(selectedDatumsIdsClone);
+    };
+    //useEffects
+    useEffect(() => {
+        let dataListClone = [...dataList];
+        dataListClone = dataListClone.filter((datum) => !selectedDatumsIds.includes(datum._id));
+        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(leftListSearchValue.toLowerCase()));
+        setFilteredLeftList(dataListClone);
+    }, [leftListSearchValue, dataList, selectedDatumsIds]);
+    useEffect(() => {
+        let dataListClone = [...dataList];
+        dataListClone = dataListClone.filter((datum) => selectedDatumsIds.includes(datum._id));
+        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(rightListSearchValue.toLowerCase()));
+        setFilteredRightList(dataListClone);
+    }, [rightListSearchValue, dataList, selectedDatumsIds]);
+    useEffect(() => {
+        if (leftListRef.current && leftListRef.current.clientHeight !== 0) {
+            setLeftListLastVisibleElementIndex(leftListFirstVisibleElementIndex +
+                Math.floor(leftListRef.current.clientHeight / listElementsHeight) +
+                2);
+        }
+        else {
+            setLeftListLastVisibleElementIndex(filteredLeftList.length);
+        }
+    }, [
+        leftListHeight,
+        leftListWidth,
+        leftListFirstVisibleElementIndex,
+        listElementsHeight,
+        filteredLeftList.length
+    ]);
+    useEffect(() => {
+        if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
+            setRightListLastVisibleElementIndex(rightListFirstVisibleElementIndex +
+                Math.floor(rightListRef.current.clientHeight / listElementsHeight) +
+                2);
+        }
+        else {
+            setRightListLastVisibleElementIndex(filteredRightList.length);
+        }
+    }, [
+        rightListHeight,
+        rightListWidth,
+        rightListFirstVisibleElementIndex,
+        listElementsHeight,
+        filteredRightList.length
+    ]);
+    return (React.createElement("div", { className: "parallel-selection-list" },
+        React.createElement("div", { className: "div-left-list" },
+            React.createElement("p", { className: "list-title" }, leftListTitle),
+            searchBarsVisible && (React.createElement("div", { className: "div-search-bar" },
+                React.createElement(BsSearch, null),
+                React.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
+            React.createElement("div", { className: "list-container" },
+                React.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
+                    React.createElement(BsChevronDoubleRight, null)),
+                React.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
+                    React.createElement("div", { className: "resizable-div-for-scroll", style: {
+                            paddingTop: leftListFirstVisibleElementIndex * listElementsHeight,
+                            height: filteredLeftList.length * listElementsHeight,
+                        } }, filteredLeftList
+                        .slice(leftListFirstVisibleElementIndex, leftListLastVisibleElementIndex)
+                        .map((datum) => (React.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
+                        datum.customComponent ? (React.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (React.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName)),
+                        React.createElement("button", { className: "apply-to-one-button", onClick: () => addToSelectedDatumsIds([datum._id]) },
+                            React.createElement(BsChevronRight, null))))))))),
+        React.createElement("div", { className: "div-right-list" },
+            React.createElement("p", { className: "list-title" }, rightListTitle),
+            searchBarsVisible && (React.createElement("div", { className: "div-search-bar" },
+                React.createElement(BsSearch, null),
+                React.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
+            React.createElement("div", { className: "list-container" },
+                React.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
+                    React.createElement(BsChevronDoubleLeft, null)),
+                React.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
+                    React.createElement("div", { className: "resizable-div-for-scroll", style: {
+                            paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
+                            height: filteredRightList.length * listElementsHeight,
+                        } }, filteredRightList
+                        .slice(rightListFirstVisibleElementIndex, rightListLastVisibleElementIndex)
+                        .map((datum) => (React.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
+                        React.createElement("button", { className: "apply-to-one-button", onClick: () => removeFromSelectedDatumsIds([datum._id]) },
+                            React.createElement(BsChevronLeft, null)),
+                        datum.customComponent ? (React.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (React.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName))))))))),
+        React.createElement("div", { className: "div-action-buttons" },
+            React.createElement("button", { className: "cancel-button", onClick: () => cancelAction() }, cancelButtonText ? cancelButtonText : "Cancel"),
+            React.createElement("button", { className: "apply-button", onClick: () => applyAction(selectedDatumsIds) }, applyButonText ? applyButonText : "Apply"))));
+};
+export default ParallelSelectionList;

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

@@ -0,0 +1,19 @@
+export interface ParallelSelectionListPropsTypes {
+  dataList: ListDatumType[];
+  applyAction: (dataListId: ListDatumType["_id"][]) => Fuction;
+  cancelAction: Function;
+  leftListTitle?: string;
+  rightListTitle?: string;
+  searchBarsVisible?: boolean;
+  applyButonText?: string;
+  cancelButtonText?: string;
+  preSelectedDatumsIds?: ListDatumType["_id"][];
+  listElementsHeight?: number;
+}
+
+export type ListDatumType = {
+  _id: string;
+  searchValue: string;
+  visibleDefaultName: string;
+  customComponent?: JSX.Element;
+};

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

@@ -5,7 +5,7 @@
   border-width: 0px 1px 1px;
   box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
   padding: 0px;
-  position: relative;
+  position: absolute;
   overflow: auto;
   box-sizing: border-box;
 }

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

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

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

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

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

@@ -1,8 +1,9 @@
-export interface PopUpProps {
+export interface PopUpPropsType {
   children: JSX.Element | JSX.Element[];
   open: boolean;
   closeAction?: Function;
   outBoundClickClosesPopUp?: boolean;
   aditionalInlineStyle?: React.CSSProperties;
-  aditionalClass: string;
+  aditionalClass?: string;
+  activationButtonRef?: React.MutableRefObject<HTMLElement | null>;
 }

package/dist/esm/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,39 @@
+.progress-bar {
+  height: 40px;
+  width: 100%;
+  position: relative;
+  opacity: 0.9;
+  backdrop-filter: blur(10px);
+}
+
+.progress-bar .fillable-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: dimgray;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.progress-bar .fillable-body .filler {
+  height: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s;
+  border-radius: 100px;
+}
+
+.progress-bar .fillable-body p {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./ProgressBar.css";
+import { ProgressBarPropsType } from "./types";
+declare const ProgressBar: ({ totalSize, currentValue, color, }: ProgressBarPropsType) => JSX.Element;
+export default ProgressBar;

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState, useRef } from "react";
+import "./ProgressBar.css";
+const ProgressBar = ({ totalSize, currentValue, color = "var(--secondary-color)", }) => {
+    var _a;
+    //useRef
+    const fillableBodyRef = useRef(null);
+    //useStates
+    const [currentPercentage, setCurrentPercentage] = useState(totalSize !== 0 ? currentValue / totalSize : 0);
+    const [barWidth, setBarWidth] = useState(0);
+    //useEffects
+    useEffect(() => {
+        if (totalSize !== 0) {
+            setCurrentPercentage(currentValue / totalSize);
+        }
+        else {
+            setCurrentPercentage(0);
+        }
+    }, [totalSize, currentValue]);
+    useEffect(() => {
+        if (fillableBodyRef.current !== null) {
+            setBarWidth(fillableBodyRef.current.clientWidth);
+        }
+    }, [(_a = fillableBodyRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
+    return (React.createElement("div", { className: "progress-bar" },
+        React.createElement("div", { ref: fillableBodyRef, className: "fillable-body" },
+            React.createElement("div", { className: "filler", style: { width: barWidth * currentPercentage, backgroundColor: color } }),
+            React.createElement("p", null,
+                (currentPercentage * 100).toFixed(0),
+                "%"))));
+};
+export default ProgressBar;

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

@@ -0,0 +1,7 @@
+import { languageType } from "../../../assets/languages/types";
+
+export interface ProgressBarPropsType {
+  totalSize: number;
+  currentValue: number;
+  color?: string,
+}

package/dist/esm/hooks/useOutsideClick.d.ts

@@ -2,5 +2,5 @@
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
 export default useOutsideClick;

package/dist/esm/hooks/useOutsideClick.js

@@ -2,13 +2,15 @@ import { useEffect } from "react";
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-function useOutsideClick(elementRef, onOutsideClickAction) {
+function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
     useEffect(() => {
         /**
          * Alert if clicked on outside of element
          */
         function handleClickOutside(event) {
-            if (elementRef.current && !elementRef.current.contains(event.target)) {
+            if (elementRef.current &&
+                !elementRef.current.contains(event.target) &&
+                elementsRefsExceptions.every((elementRefException) => elementRefException.current !== event.target)) {
                 onOutsideClickAction();
             }
         }
@@ -18,6 +20,6 @@ function useOutsideClick(elementRef, onOutsideClickAction) {
             // Unbind the event listener on clean up
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [elementRef, onOutsideClickAction]);
+    }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
 }
 export default useOutsideClick;

package/dist/esm/index.d.ts

@@ -3,5 +3,7 @@ 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 ProgressBar from "./components/ProgressBar/ProgressBar";
+import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSelectionList";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList };

package/dist/esm/index.js

@@ -3,5 +3,7 @@ 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 ProgressBar from "./components/ProgressBar/ProgressBar";
+import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSelectionList";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "josenanodev-react-components-library",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "author": {
     "name": "Jose Carlos Cardenas Martinez"
   },