willba-component-library 0.2.11 → 0.2.12

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, }: 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/index.d.ts

@@ -83,12 +83,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, }: FilterCalendarTypes): React.JSX.Element;
 
-export { Button, FilterBar, FilterCalendar, Tab };
+export { Button, FilterBar, FilterCalendar, FilterCalendarTypes, Tab };

package/lib/index.esm.js

@@ -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;
     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,