josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.module.scss

@@ -0,0 +1,104 @@
+@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-date-picker {
+  font-family: Arial, Helvetica, sans-serif;
+  width: 390px;
+  color: #959595;
+  font-weight: 600;
+  font-style: normal;
+  line-height: normal;
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 16px;
+    svg {
+      margin: 0px 5px;
+    }
+  }
+  .today-button {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    border: solid 2px #787878;
+    border-radius: 6px;
+    padding: 4px 8px;
+    background-color: white;
+    color: #787878;
+    transition: all 0.1s ease-in-out;
+    cursor: pointer;
+    &:hover {
+      background-color: #f3f3f3;
+    }
+    &:active {
+      background-color: #cfcfcf;
+    }
+  }
+  .month-and-year {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+    font-size: 22px;
+    padding: 10px 0px;
+    .month-input {
+      width: fit-content;
+      background-color: transparent;
+      border: transparent;
+      text-align: right;
+      font-size: 18px;
+      color: #959595;
+      cursor: pointer;
+      &:focus {
+        outline: transparent;
+      }
+      option {
+        background-color: white;
+        color: #959595;
+        &:disabled {
+          color: #cfcfcf;
+        }
+      }
+    }
+  }
+  .week-days {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ebebeb;
+    p {
+      width: calc(100% / 7);
+      margin: 0px;
+      text-align: center;
+    }
+  }
+}

package/dist/cjs/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { CalendarDatePickerProps } from "../CalendarDatePicker";
+type CalendarScrollableSectionProps = {
+    dates: Date[];
+    month: number;
+    year: number;
+    mode: CalendarDatePickerProps["mode"];
+    onSelectedDatesChange: CalendarDatePickerProps["onSelectedDatesChange"];
+    onFocusedMonth: (month: number, year: number) => void;
+    customDates: CalendarDatePickerProps["customDates"];
+    minimumDate?: CalendarDatePickerProps["minimumDate"];
+    maximumDate?: CalendarDatePickerProps["maximumDate"];
+};
+declare const CalendarScrollableSection: ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates, minimumDate, maximumDate, }: CalendarScrollableSectionProps) => React.JSX.Element;
+export default CalendarScrollableSection;

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

@@ -0,0 +1,300 @@
+"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 CalendarScrollableSection_module_scss_1 = __importDefault(require("./CalendarScrollableSection.module.scss"));
+const dayOfTheWeekStartingOnMonday_1 = __importDefault(require("../../../utils/dayOfTheWeekStartingOnMonday"));
+const numberOfWeeksInAMonth_1 = __importDefault(require("../../../utils/numberOfWeeksInAMonth"));
+const jsToSqlDate_1 = __importDefault(require("../../../utils/jsToSqlDate"));
+const useIntersectionObserver_1 = __importDefault(require("../../../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] = (0, react_1.useReducer)(reducer, {
+        month: month,
+        year: year,
+        minimumDate: minimumDate,
+        maximumDate: maximumDate,
+    });
+    const monthsContainerRef = (0, react_1.useRef)(null);
+    const firstMonthRef = (0, react_1.useRef)(null);
+    const secondMonthRef = (0, react_1.useRef)(null);
+    const fourthMonthRef = (0, react_1.useRef)(null);
+    const fifthMonthRef = (0, react_1.useRef)(null);
+    const isFirstMonthVisible = (0, useIntersectionObserver_1.default)(firstMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isSecondMonthVisible = (0, useIntersectionObserver_1.default)(secondMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFourthMonthVisible = (0, useIntersectionObserver_1.default)(fourthMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFifthMonthVisible = (0, useIntersectionObserver_1.default)(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 = CalendarScrollableSection_module_scss_1.default["day-cell"];
+        const isCrosssed = customDates.some((customDate) => {
+            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && customDate.crossed);
+        });
+        if (isCrosssed) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["crossed"]}`;
+        }
+        return className;
+    };
+    const dateClassName = (date) => {
+        let className = CalendarScrollableSection_module_scss_1.default["day"];
+        const isToday = (0, jsToSqlDate_1.default)(date) === (0, jsToSqlDate_1.default)(new Date());
+        if (isToday) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["today"]}`;
+        }
+        if (date.getMonth() === state.month) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["in-month"]}`;
+        }
+        else {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["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 += ` ${CalendarScrollableSection_module_scss_1.default["selected"]}`;
+        }
+        if (mode === "booking") {
+            const isCheckInDate = dates.length === 2 && date.valueOf() === dates[0].valueOf();
+            if (isCheckInDate) {
+                className += ` ${CalendarScrollableSection_module_scss_1.default["check-in"]}`;
+            }
+            const isCheckOutDate = dates.length === 2 && date.valueOf() === dates[1].valueOf();
+            if (isCheckOutDate) {
+                className += ` ${CalendarScrollableSection_module_scss_1.default["check-out"]}`;
+            }
+        }
+        if (isDateSelectable(date)) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["selectable"]}`;
+        }
+        else {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["not-selectable"]}`;
+        }
+        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
+        if (isOutOfSelection) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["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;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (monthsContainerRef.current) {
+            monthsContainerRef.current.scrollTop = 416;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        onFocusedMonth(state.month, state.year);
+    }, [state.year, state.month, onFocusedMonth]);
+    (0, react_1.useEffect)(() => {
+        if (isSecondMonthVisible || isFirstMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: -1 });
+        }
+    }, [isFirstMonthVisible, isSecondMonthVisible]);
+    (0, react_1.useEffect)(() => {
+        if (isFourthMonthVisible || isFifthMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: 1 });
+        }
+    }, [isFourthMonthVisible, isFifthMonthVisible]);
+    return (react_1.default.createElement("section", { ref: monthsContainerRef, className: CalendarScrollableSection_module_scss_1.default["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 = (0, numberOfWeeksInAMonth_1.default)(referenceDate);
+        if (!isLastDayOfTheMonthSunday) {
+            numberOfWeeksInMonth = numberOfWeeksInMonth - 1;
+        }
+        const firstDayInMonthDayOfWeek = (0, dayOfTheWeekStartingOnMonday_1.default)(referenceDate);
+        return (react_1.default.createElement("div", { ref: [firstMonthRef, secondMonthRef, null, fourthMonthRef, fifthMonthRef][gridIndex], className: CalendarScrollableSection_module_scss_1.default["days-grid"], key: `grid:${(0, jsToSqlDate_1.default)(referenceDate)}}` }, Array(numberOfWeeksInMonth)
+            .fill(0)
+            .map((_, rowIndex) => (react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["days-row"], key: `grid:${(0, jsToSqlDate_1.default)(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_1.default.createElement("div", { className: dayCellClassName(date), key: (0, jsToSqlDate_1.default)(date), onClick: () => handleDateSelection(date) },
+                react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["cross-line"] }),
+                react_1.default.createElement("div", { className: dateClassName(date) },
+                    react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["background"] },
+                        react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["first-half"], style: customColorStyleObject(date) }),
+                        react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["second-half"], style: customColorStyleObject(date) })),
+                    react_1.default.createElement("p", null, date.getDate()))));
+        }))))));
+    })));
+};
+exports.default = CalendarScrollableSection;

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

@@ -0,0 +1,151 @@
+@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/cjs/components/ExportToExcelButton/ExportToExcelButton.css

@@ -0,0 +1,31 @@
+.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/cjs/components/ExportToExcelButton/ExportToExcelButton.d.ts

@@ -0,0 +1,5 @@
+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/cjs/components/ExportToExcelButton/ExportToExcelButton.js

@@ -0,0 +1,45 @@
+"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 = __importDefault(require("react"));
+const ownFunctions = __importStar(require("./ExportToExcelButtonOwnFunctions"));
+require("./ExportToExcelButton.css");
+//Iconos
+const ri_1 = require("react-icons/ri");
+const ExportToExcelButton = ({ customButtonText = "Export to Excel", customClass, fileName = "untitled", headers, data, onAfterExport, disabled, }) => {
+    return (react_1.default.createElement("button", { disabled: disabled, className: customClass ? customClass : "export-to-excel-button", onClick: () => {
+            ownFunctions.downloadExcel(fileName, data, headers);
+            if (onAfterExport !== undefined) {
+                onAfterExport();
+            }
+        } },
+        customButtonText,
+        " ",
+        react_1.default.createElement(ri_1.RiFileExcel2Fill, null)));
+};
+exports.default = ExportToExcelButton;

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

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