willba-component-library 0.2.11 → 0.2.13

package/README.md

@@ -153,5 +153,5 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 | palette        | `{}`       | The palette defines the primary and secondary colors of the filter bar. Override the colors using the following format: { primary: string, secondary: string }. For example: { primary: '#2a5a44', secondary: '#2a5a44' }                                                                |
 | calendarOffset | `{}`       | Disable dates on the calendar starting from today either forward or backward using the following format: { rooms: number, events: number }. For example: { rooms: 7, events: -1 }                                                                                                        |
 | fullWidth      | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                         |
-| mode           | `"string"` | pecify the color theme for the filter bar tabs as either light or dark using the following format: "light"                                                                                                                                                                               |
+| mode           | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: "light"                                                                                                                                                                              |
 | tabs           | `[{}]`     | Manage the filter bar tabs using the following format: [{path: string, default: boolean, order: number, label: { en: string, fi: string }}]. For example: [{ path: '/rooms', default: true, order: 2, label: { en: "Name en", fi: "Name fi" }}]                                          |

package/lib/components/FilterCalendar/FilterCalendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import '../../themes/Default.css';
-import { FilterCalendarType } from './FilterCalendarTypes';
+import { FilterCalendarTypes } from './FilterCalendarTypes';
 import './FilterCalendar.css';
-export default function FilterCalendar({ calendarOffset, language, palette, openCalendar, onSubmit, calendarOffsetGroup, }: FilterCalendarType): React.JSX.Element;
+export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;

package/lib/components/FilterCalendar/FilterCalendarTypes.d.ts

@@ -1,8 +1,9 @@
 import { DateRange } from 'react-day-picker';
 import { Palette } from '../../themes/useTheme';
 import { CalendarTypes } from '../../core/components/calendar/CalendarTypes';
-export interface FilterCalendarType extends Partial<CalendarTypes> {
+export interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;
-    openCalendar?: boolean;
     onSubmit: (val: DateRange) => void;
+    toggleCalendar: boolean;
+    setToggleCalendar: (val: boolean) => void;
 }

package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts

@@ -2,13 +2,12 @@
 import { DateRange } from 'react-day-picker';
 type Props = {
     onSubmit: (val: any) => void;
+    setToggleCalendar: (val: boolean) => void;
 };
-export declare const useFilterCalendar: ({ onSubmit }: Props) => {
+export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar }: Props) => {
     handleSubmit: () => void;
     handleClearDates: () => void;
-    setToggleCalendar: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
     calendarRange: DateRange | undefined;
-    toggleCalendar: boolean;
 };
 export {};

package/lib/core/components/calendar/CalendarTypes.d.ts

@@ -12,4 +12,5 @@ export type CalendarTypes = {
         from: Date;
         to: Date;
     }[];
+    requestDates?: (val: Date) => void;
 };

package/lib/index.d.ts

@@ -46,6 +46,7 @@ type CalendarTypes = {
         from: Date;
         to: Date;
     }[];
+    requestDates?: (val: Date) => void;
 };
 
 type FilterBarProps = {
@@ -83,12 +84,13 @@ type Tab = {
 
 declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, calendarOffset, mode, tabs, }: FilterBarProps): React.JSX.Element;
 
-interface FilterCalendarType extends Partial<CalendarTypes> {
+interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;
-    openCalendar?: boolean;
     onSubmit: (val: DateRange) => void;
+    toggleCalendar: boolean;
+    setToggleCalendar: (val: boolean) => void;
 }
 
-declare function FilterCalendar({ calendarOffset, language, palette, openCalendar, onSubmit, calendarOffsetGroup, }: FilterCalendarType): React.JSX.Element;
+declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, calendarOffsetGroup, toggleCalendar, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;
 
-export { Button, FilterBar, FilterCalendar, Tab };
+export { Button, FilterBar, FilterCalendar, FilterCalendarTypes, Tab };

package/lib/index.esm.js

@@ -10769,7 +10769,7 @@ styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
-    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup;
+    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup, requestDates = _a.requestDates;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     useEffect(function () {
         if (!calendarRange)
@@ -10792,7 +10792,7 @@ var Calendar = forwardRef(function (_a, ref) {
                     today: 'my-today',
                 }, modifiersStyles: {
                     disabled: { opacity: '0.2' },
-                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today }))));
+                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today, onMonthChange: function (val) { return (requestDates ? requestDates(val) : null); } }))));
 });
 
 var parseDates = function (_a) {
@@ -11179,10 +11179,10 @@ var AGE_CATEGORIES_FALLBACK = [
 var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 
 var useFilterCalendar = function (_a) {
-    var onSubmit = _a.onSubmit;
+    var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar;
     var _b = __read(useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
-    var _c = __read(useState(false), 2), toggleCalendar = _c[0], setToggleCalendar = _c[1];
     var handleSubmit = function () {
+        setToggleCalendar(false);
         return onSubmit(calendarRange);
     };
     var handleClearDates = function () {
@@ -11191,29 +11191,23 @@ var useFilterCalendar = function (_a) {
     return {
         handleSubmit: handleSubmit,
         handleClearDates: handleClearDates,
-        setToggleCalendar: setToggleCalendar,
         setCalendarRange: setCalendarRange,
         calendarRange: calendarRange,
-        toggleCalendar: toggleCalendar,
     };
 };
 
-var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid grey;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid grey;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        margin-bottom: 20px;\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n     }\n  }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
+var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid grey;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid grey;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        margin-bottom: 20px;\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n     }\n  }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
 styleInject(css_248z);
 
 function FilterCalendar(_a) {
-    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, openCalendar = _a.openCalendar, onSubmit = _a.onSubmit, calendarOffsetGroup = _a.calendarOffsetGroup;
+    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, calendarOffsetGroup = _a.calendarOffsetGroup, toggleCalendar = _a.toggleCalendar, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
     var t = useTranslation().t;
-    var _b = useFilterCalendar({ onSubmit: onSubmit }), handleSubmit = _b.handleSubmit, setToggleCalendar = _b.setToggleCalendar, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, toggleCalendar = _b.toggleCalendar, calendarRange = _b.calendarRange;
+    var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange;
     // Display component after fully loaded
     useAwaitRender();
-    useEffect(function () {
-        if (openCalendar)
-            setToggleCalendar(true);
-    }, [openCalendar]);
     // Handle close filter section
     var filtersRef = useCloseFilterSection({
         handleSelectedFilter: setToggleCalendar,
@@ -11224,7 +11218,7 @@ function FilterCalendar(_a) {
             React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
             React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
         React__default__default.createElement("div", { className: "will-calendar-main" },
-            React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, calendarOffsetGroup: calendarOffsetGroup })),
+            React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, calendarOffsetGroup: calendarOffsetGroup, requestDates: requestDates })),
         React__default__default.createElement("div", { className: "will-calendar-footer" },
             React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
                 React__default__default.createElement("div", null,