josenanodev-react-components-library 1.0.4 → 1.0.6

package/dist/esm/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.js

@@ -1,272 +0,0 @@
-import React, { useRef, useEffect, useReducer } from "react";
-import styles from "./CalendarScrollableSection.module.scss";
-import dayOfTheWeekStartingOnMonday from "../../../utils/dayOfTheWeekStartingOnMonday";
-import numberOfWeeksInAMonth from "../../../utils/numberOfWeeksInAMonth";
-import jsToSqlDate from "../../../utils/jsToSqlDate";
-import useIntersectionObserver from "../../../hooks/useIntersectionObserver";
-const reducer = (state, action) => {
-    const isAValidDateChange = (year, month) => {
-        const referenceDate = new Date(year, month, 1);
-        const minimumMonthDate = new Date(state.minimumDate.getFullYear(), state.minimumDate.getMonth(), 1);
-        const maximumMonthDate = new Date(state.maximumDate.getFullYear(), state.maximumDate.getMonth() + 1, 0);
-        const isReferenceDateLowerThanMinimumMonthDate = referenceDate.valueOf() < minimumMonthDate.valueOf();
-        const isReferenceDateHigherThanMaximumMonthDate = referenceDate.valueOf() > maximumMonthDate.valueOf();
-        if (isReferenceDateLowerThanMinimumMonthDate ||
-            isReferenceDateHigherThanMaximumMonthDate) {
-            return false;
-        }
-        return true;
-    };
-    const actionsDictionary = {
-        setMonth: () => {
-            if (isAValidDateChange(state.year, action.value)) {
-                return Object.assign(Object.assign({}, state), { month: action.value });
-            }
-            else {
-                return Object.assign({}, state);
-            }
-        },
-        setYear: () => {
-            if (isAValidDateChange(action.value, state.month)) {
-                return Object.assign(Object.assign({}, state), { year: action.value });
-            }
-            else {
-                return Object.assign({}, state);
-            }
-        },
-        setMinimumDate: () => {
-            return Object.assign(Object.assign({}, state), { minimumDate: new Date(action.value) });
-        },
-        setMaximumdate: () => {
-            return Object.assign(Object.assign({}, state), { maximumDate: new Date(action.value) });
-        },
-        changeByMonthOffset: () => {
-            const referenceDate = new Date(state.year, state.month + action.value, 1);
-            if (isAValidDateChange(state.year, state.month + action.value)) {
-                return Object.assign(Object.assign({}, state), { year: referenceDate.getFullYear(), month: referenceDate.getMonth() });
-            }
-            else {
-                return Object.assign({}, state);
-            }
-        },
-    };
-    const newState = actionsDictionary[action.type]();
-    if (newState) {
-        return newState;
-    }
-    else {
-        return Object.assign({}, state);
-    }
-};
-const CalendarScrollableSection = ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates = [], minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), }) => {
-    const [state, dispatch] = useReducer(reducer, {
-        month: month,
-        year: year,
-        minimumDate: minimumDate,
-        maximumDate: maximumDate,
-    });
-    const monthsContainerRef = useRef(null);
-    const firstMonthRef = useRef(null);
-    const secondMonthRef = useRef(null);
-    const fourthMonthRef = useRef(null);
-    const fifthMonthRef = useRef(null);
-    const isFirstMonthVisible = useIntersectionObserver(firstMonthRef, {
-        rootMargin: "0px",
-        threshold: 1.0,
-    });
-    const isSecondMonthVisible = useIntersectionObserver(secondMonthRef, {
-        rootMargin: "0px",
-        threshold: 1.0,
-    });
-    const isFourthMonthVisible = useIntersectionObserver(fourthMonthRef, {
-        rootMargin: "0px",
-        threshold: 1.0,
-    });
-    const isFifthMonthVisible = useIntersectionObserver(fifthMonthRef, {
-        rootMargin: "0px",
-        threshold: 1.0,
-    });
-    const isDateSelectable = (date) => {
-        // * If date is not found in custom dates or selectable preoperty is set to true, it returns true
-        const isNotSelectable = customDates.some((customDate) => {
-            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && !customDate.selectable);
-        });
-        return !isNotSelectable;
-    };
-    const dayCellClassName = (date) => {
-        let className = styles["day-cell"];
-        const isCrosssed = customDates.some((customDate) => {
-            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && customDate.crossed);
-        });
-        if (isCrosssed) {
-            className += ` ${styles["crossed"]}`;
-        }
-        return className;
-    };
-    const dateClassName = (date) => {
-        let className = styles["day"];
-        const isToday = jsToSqlDate(date) === jsToSqlDate(new Date());
-        if (isToday) {
-            className += ` ${styles["today"]}`;
-        }
-        if (date.getMonth() === state.month) {
-            className += ` ${styles["in-month"]}`;
-        }
-        else {
-            className += ` ${styles["not-in-month"]}`;
-        }
-        const isDateSelected = dates.some((includedDate) => includedDate.valueOf() === date.valueOf());
-        const isDateInRange = (mode === "range" || mode === "booking") &&
-            dates.length === 2 &&
-            dates[0].valueOf() < date.valueOf() &&
-            date.valueOf() < dates[1].valueOf();
-        if (isDateSelected || isDateInRange) {
-            className += ` ${styles["selected"]}`;
-        }
-        if (mode === "booking") {
-            const isCheckInDate = dates.length === 2 && date.valueOf() === dates[0].valueOf();
-            if (isCheckInDate) {
-                className += ` ${styles["check-in"]}`;
-            }
-            const isCheckOutDate = dates.length === 2 && date.valueOf() === dates[1].valueOf();
-            if (isCheckOutDate) {
-                className += ` ${styles["check-out"]}`;
-            }
-        }
-        if (isDateSelectable(date)) {
-            className += ` ${styles["selectable"]}`;
-        }
-        else {
-            className += ` ${styles["not-selectable"]}`;
-        }
-        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
-        if (isOutOfSelection) {
-            className += ` ${styles["out-of-selection"]}`;
-        }
-        return className;
-    };
-    const handleDateSelection = (date) => {
-        // custom side effects
-        customDates.forEach((customDate) => {
-            if (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) &&
-                customDate.clickSideEffect) {
-                customDate.clickSideEffect(date);
-            }
-        });
-        const isSelectable = isDateSelectable(date);
-        if (!isSelectable) {
-            return;
-        }
-        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
-        if (isOutOfSelection) {
-            return;
-        }
-        let datesClone = [...dates];
-        if (mode === "single") {
-            datesClone = [date];
-        }
-        if (mode === "multiple") {
-            if (dates.some((includedDate) => includedDate.valueOf() === date.valueOf())) {
-                datesClone = dates.filter((includedDate) => includedDate.valueOf() !== date.valueOf());
-            }
-            else {
-                datesClone = [...dates, date];
-            }
-        }
-        if (mode === "range") {
-            if (dates.length === 0) {
-                datesClone = [date];
-            }
-            else if (dates.length === 1) {
-                if (dates[0].valueOf() < date.valueOf()) {
-                    datesClone = [...dates, date];
-                }
-                else {
-                    datesClone = [date, dates[0]];
-                }
-            }
-            else {
-                datesClone = [];
-            }
-        }
-        if (mode === "booking") {
-            if (dates.length === 0) {
-                datesClone = [date];
-            }
-            else if (dates[0].valueOf() === date.valueOf()) {
-                datesClone = [];
-            }
-            else if (dates.length === 1) {
-                if (dates[0].valueOf() < date.valueOf()) {
-                    datesClone = [...dates, date];
-                }
-                else {
-                    datesClone = [date, dates[0]];
-                }
-            }
-            else {
-                datesClone = [];
-            }
-        }
-        onSelectedDatesChange(datesClone);
-    };
-    const customColorStyleObject = (date) => {
-        const customDate = customDates.find((customDate) => customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()));
-        if (customDate) {
-            return {
-                backgroundColor: customDate.color,
-            };
-        }
-        else {
-            return undefined;
-        }
-    };
-    useEffect(() => {
-        if (monthsContainerRef.current) {
-            monthsContainerRef.current.scrollTop = 416;
-        }
-    }, []);
-    useEffect(() => {
-        onFocusedMonth(state.month, state.year);
-    }, [state.year, state.month, onFocusedMonth]);
-    useEffect(() => {
-        if (isSecondMonthVisible || isFirstMonthVisible) {
-            dispatch({ type: "changeByMonthOffset", value: -1 });
-        }
-    }, [isFirstMonthVisible, isSecondMonthVisible]);
-    useEffect(() => {
-        if (isFourthMonthVisible || isFifthMonthVisible) {
-            dispatch({ type: "changeByMonthOffset", value: 1 });
-        }
-    }, [isFourthMonthVisible, isFifthMonthVisible]);
-    return (React.createElement("section", { ref: monthsContainerRef, className: styles["calendar-scrollable-section"] }, Array(5)
-        .fill(0)
-        .map((_, gridIndex) => {
-        const monthOffset = gridIndex - 2;
-        const referenceDate = new Date(state.year, state.month + monthOffset, 1);
-        const lastDayOfTheMonth = new Date(state.year, state.month + monthOffset + 1, 0);
-        const isLastDayOfTheMonthSunday = lastDayOfTheMonth.getDay() === 0;
-        let numberOfWeeksInMonth = numberOfWeeksInAMonth(referenceDate);
-        if (!isLastDayOfTheMonthSunday) {
-            numberOfWeeksInMonth = numberOfWeeksInMonth - 1;
-        }
-        const firstDayInMonthDayOfWeek = dayOfTheWeekStartingOnMonday(referenceDate);
-        return (React.createElement("div", { ref: [firstMonthRef, secondMonthRef, null, fourthMonthRef, fifthMonthRef][gridIndex], className: styles["days-grid"], key: `grid:${jsToSqlDate(referenceDate)}}` }, Array(numberOfWeeksInMonth)
-            .fill(0)
-            .map((_, rowIndex) => (React.createElement("div", { className: styles["days-row"], key: `grid:${jsToSqlDate(referenceDate)}-row:${rowIndex}` }, Array(7)
-            .fill(0)
-            .map((_, columnIndex) => {
-            const numberOfMonth = state.month + monthOffset;
-            const numberOfDay = rowIndex * 7 + columnIndex + 1 - firstDayInMonthDayOfWeek;
-            const date = new Date(state.year, numberOfMonth, numberOfDay);
-            return (React.createElement("div", { className: dayCellClassName(date), key: jsToSqlDate(date), onClick: () => handleDateSelection(date) },
-                React.createElement("div", { className: styles["cross-line"] }),
-                React.createElement("div", { className: dateClassName(date) },
-                    React.createElement("div", { className: styles["background"] },
-                        React.createElement("div", { className: styles["first-half"], style: customColorStyleObject(date) }),
-                        React.createElement("div", { className: styles["second-half"], style: customColorStyleObject(date) })),
-                    React.createElement("p", null, date.getDate()))));
-        }))))));
-    })));
-};
-export default CalendarScrollableSection;

package/dist/esm/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.module.scss

@@ -1,151 +0,0 @@
-@property --angle {
-  sintax: "<angle>";
-  inherits: false;
-  initial-value: 270deg;
-}
-
-@property --color-default {
-  sintax: "<color>";
-  inherits: false;
-  initial-value: white;
-}
-
-@property --color-selected {
-  sintax: "<color>";
-  inherits: false;
-  initial-value: #e3f3e3;
-}
-
-@property --percentage-default {
-  sintax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --percentage-selected {
-  sintax: "<percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-.calendar-scrollable-section {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  overflow-y: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  border-bottom: 1px solid #ebebeb;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .days-grid {
-    width: 100%;
-    .days-row {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      .day-cell {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: calc(100% / 7);
-        aspect-ratio: 1 / 1;
-
-        .day {
-          position: relative;
-          --angle: 270deg;
-          --color-default: #f3f3f3;
-          --color-selected: #b7d4b6;
-          --percentage-default: 100%;
-          --percentage-selected: 0%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: calc(100% - 8px);
-          height: calc(100% - 8px);
-          margin: 0px;
-          border-radius: 1000px;
-          overflow: hidden;
-          user-select: none;
-          transition: all 0.5s ease-in-out;
-          cursor: pointer;
-          p {
-            z-index: 2;
-            margin: 0px;
-          }
-
-          .background {
-            z-index: 1;
-            position: absolute;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            transform: rotate(var(--angle));
-            transition: all 0.5s ease-in-out;
-            .first-half {
-              width: var(--percentage-default);
-              height: 100%;
-              background-color: var(--color-default);
-              transition: all 0.3s ease-in-out;
-            }
-            .second-half {
-              width: var(--percentage-selected);
-              height: 100%;
-              background-color: var(--color-selected);
-              transition: all 0.3s ease-in-out;
-            }
-          }
-          &.today {
-            outline: solid 2px #787878;
-          }
-          &.in-month {
-            color: var(--medium-gray, #787878);
-          }
-          &.not-in-month {
-            opacity: 0.35;
-          }
-          &.selected {
-            --percentage-default: 0%;
-            --percentage-selected: 100%;
-          }
-          &.check-in {
-            --angle: 405deg;
-            --color-default: #f3f3f3;
-            --percentage-default: 50%;
-            --percentage-selected: 50%;
-          }
-          &.check-out {
-            --angle: 225deg;
-            --color-default: #f3f3f3;
-            --percentage-default: 50%;
-            --percentage-selected: 50%;
-          }
-          &.not-selectable {
-            cursor: not-allowed;
-          }
-          &.out-of-selection {
-            opacity: 0.1;
-            cursor: not-allowed;
-          }
-        }
-        .cross-line {
-          z-index: 2;
-          position: absolute;
-          width: 120%;
-          height: 3px;
-          background-color: #bbb;
-          transform: rotate(-45deg);
-          display: none;
-        }
-        &.crossed {
-          .cross-line {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/esm/components/ExportToExcelButton/ExportToExcelButton.css

@@ -1,31 +0,0 @@
-.export-to-excel-button {
-  position: relative;
-  width: 220px;
-  height: 48px;
-  opacity: 1;
-  cursor: pointer;
-  padding: 14px;
-  text-align: center;
-  text-decoration: none;
-  touch-action: manipulation;
-  font-size: 16px;
-  letter-spacing: normal;
-  color: rgb(255, 255, 255);
-  font-weight: 700;
-  border-radius: 4px;
-  border: none;
-  background: green;
-  box-shadow: none;
-  transition: all 0.5s;
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  margin: auto;
-}
-.export-to-excel-button:hover {
-  background: rgb(0, 170, 0);
-}
-
-.export-to-excel-button:disabled {
-  background: rgb(216, 216, 216);
-}

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

@@ -1,5 +0,0 @@
-import React from "react";
-import "./ExportToExcelButton.css";
-import { ExportToExcelButtonPropsType } from "./types";
-declare const ExportToExcelButton: ({ customButtonText, customClass, fileName, headers, data, onAfterExport, disabled, }: ExportToExcelButtonPropsType) => React.JSX.Element;
-export default ExportToExcelButton;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButton.js

@@ -1,17 +0,0 @@
-import React from "react";
-import * as ownFunctions from "./ExportToExcelButtonOwnFunctions";
-import "./ExportToExcelButton.css";
-//Iconos
-import { RiFileExcel2Fill } from "react-icons/ri";
-const ExportToExcelButton = ({ customButtonText = "Export to Excel", customClass, fileName = "untitled", headers, data, onAfterExport, disabled, }) => {
-    return (React.createElement("button", { disabled: disabled, className: customClass ? customClass : "export-to-excel-button", onClick: () => {
-            ownFunctions.downloadExcel(fileName, data, headers);
-            if (onAfterExport !== undefined) {
-                onAfterExport();
-            }
-        } },
-        customButtonText,
-        " ",
-        React.createElement(RiFileExcel2Fill, null)));
-};
-export default ExportToExcelButton;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.d.ts

@@ -1,6 +0,0 @@
-import { DataObjectXlsxType } from "./types";
-export declare function downloadExcel(fileName: string, data: {
-    [key: string]: DataObjectXlsxType[][];
-} | undefined, headers: {
-    [key: string]: DataObjectXlsxType[];
-} | undefined): void;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.js

@@ -1,48 +0,0 @@
-//Librerias de terceros
-import * as XLSX from "xlsx-js-style";
-function styleObjectParser(styleObject) {
-    let restultantStyleObject = {
-        v: styleObject.value,
-        s: {},
-    };
-    if (styleObject.allign)
-        restultantStyleObject.s.alignment = Object.assign({}, styleObject.allign);
-    if (styleObject.fontSize)
-        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { sz: styleObject.fontSize });
-    if (styleObject.fontColor)
-        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { color: { rgb: styleObject.fontColor } });
-    if (styleObject.bold)
-        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { bold: styleObject.bold });
-    if (styleObject.backgroundColor)
-        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { bgColor: { rgb: styleObject.backgroundColor } });
-    if (styleObject.foregroundColor)
-        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { fgColor: { rgb: styleObject.foregroundColor } });
-    if (styleObject.borders)
-        restultantStyleObject.s.border = Object.assign({}, styleObject.borders);
-    return restultantStyleObject;
-}
-export function downloadExcel(fileName, data, headers) {
-    if (data !== undefined) {
-        const workbook = XLSX.utils.book_new();
-        for (const sheetName in data) {
-            if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
-                let dataXlsxJs = [];
-                if (headers !== undefined &&
-                    Object.prototype.hasOwnProperty.call(headers, sheetName)) {
-                    dataXlsxJs = [
-                        headers[sheetName].map((header) => styleObjectParser(header)),
-                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
-                    ];
-                }
-                else {
-                    dataXlsxJs = [
-                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
-                    ];
-                }
-                const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
-                XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
-            }
-        }
-        XLSX.writeFile(workbook, `${fileName}.xlsx`);
-    }
-}

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

@@ -1,44 +0,0 @@
-export interface ExportToExcelButtonPropsType {
-  customButtonText?: string;
-  customClass?: string;
-  fileName?: string;
-  headers?: { [key: string]: DataObjectXlsxType[] };
-  data?: { [key: string]: DataObjectXlsxType[][] };
-  onAfterExport?: Function;
-  disabled?: boolean;
-}
-
-export interface StyleObjectXlsxType {
-  allign?: {
-    vertical: "top" | "center" | "bottom";
-    horizontal: "left" | "center" | "right";
-  };
-  fontSize?: number;
-  fontColor?: string;
-  bold?: boolean;
-  backgroundColor?: string;
-  foregroundColor?: string;
-  borders?: {
-    top?: { style: BorderStyleType; color: string };
-    bottom?: { style: BorderStyleType; color: string };
-    left?: { style: BorderStyleType; color: string };
-    right?: { style: BorderStyleType; color: string };
-  };
-}
-export interface DataObjectXlsxType extends StyleObjectXlsxType {
-  value: string | number;
-}
-
-type BorderStyleType =
-  | "dashDotDot"
-  | "dashDot"
-  | "dashed"
-  | "dotted"
-  | "hair"
-  | "mediumDashDotDot"
-  | "mediumDashDot"
-  | "mediumDashed"
-  | "medium"
-  | "slantDashDot"
-  | "thick"
-  | "thin";

package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -1,109 +0,0 @@
-import React, { useState, useEffect, useRef, Fragment } from "react";
-import styles from "./InputBoxWithConfirmation.module.scss";
-//Hooks
-import useOutsideClick from "../../hooks/useOutsideClick";
-//Icons
-import { BsCheckLg, BsPencil } from "react-icons/bs";
-const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", maxLength, placeholder = "", divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }) => {
-    //Refs
-    const inputRef = useRef(null);
-    const containerRef = useRef(null);
-    //States
-    const [cachedValue, setCachedValue] = useState(defaultValue !== undefined ? String(defaultValue) : "");
-    const [currentValue, setCurrentValue] = useState(defaultValue !== undefined ? String(defaultValue) : "");
-    const [focused, setFocused] = useState(false);
-    //Functions
-    const currentValueValueValidated = () => {
-        if (!currentValue) {
-            return cachedValue;
-        }
-        if (inputType === "number") {
-            let numericValue = Number(currentValue);
-            if (minimumValue !== "" && numericValue < Number(minimumValue)) {
-                numericValue = Number(minimumValue);
-            }
-            else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
-                numericValue = Number(maximumValue);
-            }
-            return String(numericValue);
-        }
-        else {
-            return currentValue;
-        }
-    };
-    const onConfirmActionHandler = () => {
-        setCurrentValue(currentValueValueValidated());
-        if (currentValueValueValidated()) {
-            onConfirmAction(currentValueValueValidated());
-            setCachedValue(currentValueValueValidated());
-        }
-    };
-    //Hooks
-    useOutsideClick(containerRef, () => {
-        if (focused) {
-            if (showConfirmationButton) {
-                setCurrentValue(cachedValue);
-            }
-            else {
-                onConfirmActionHandler();
-            }
-            setFocused(false);
-        }
-    });
-    //Effects
-    useEffect(() => {
-        if (overrideCurrentValue !== undefined) {
-            setCurrentValue(String(overrideCurrentValue));
-            setCachedValue(String(overrideCurrentValue));
-        }
-        else if (overrideCurrentValue === null) {
-            setCurrentValue("");
-            setCachedValue("");
-        }
-    }, [overrideCurrentValue]);
-    return (React.createElement("div", { ref: containerRef, style: divWrapperCustomStyle, className: `${styles["div-wrapper"]} ${focused ? styles["focused"] : ""}` },
-        React.createElement("input", { ref: inputRef, disabled: disabled, className: styles["input-box-with-confirmation"], type: inputType, style: Object.assign({ width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, inputBoxCustomStyle), min: minimumValue, max: maximumValue, maxLength: maxLength, placeholder: placeholder, value: focused ? currentValue : cachedValue, onChange: (event) => {
-                let value = event.target.value;
-                if (maxLength && value.length > maxLength) {
-                    value = value.slice(0, maxLength);
-                }
-                setCurrentValue(value);
-            }, onFocus: (event) => {
-                setCachedValue(event.target.value);
-                setCurrentValue(event.target.value);
-                setFocused(true);
-            }, onKeyDown: (event) => {
-                if (event.key === "Enter") {
-                    onConfirmActionHandler();
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Tab") {
-                    onConfirmActionHandler();
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Escape") {
-                    setCurrentValue(cachedValue);
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-            } }),
-        !disabled && showConfirmationButton && (React.createElement(Fragment, null, focused ? (React.createElement("button", { className: styles["button-for-input-box-with-confirmation"], onClick: () => {
-                onConfirmActionHandler();
-                setFocused(false);
-            } },
-            React.createElement(BsCheckLg, null))) : (React.createElement("button", { className: styles["button-for-input-box-with-confirmation"], onClick: () => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
-            } },
-            React.createElement(BsPencil, null)))))));
-};
-export default InputBoxWithConfirmation;