willba-component-library 0.3.14 → 0.3.16

package/README.md

@@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.10/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.16/lib/index.umd.js"></script>
 
 <script>
   const renderFilterBar = async () => {
@@ -161,14 +161,14 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 ## Props of FilterBar
 
-| Name                 | Value      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| redirectUrl          | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| language             | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| palette              | `{}`       | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| disableCalendarDates | `{}`       | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| mode                 | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label?: string}]`. The label should be pre-localized. For example: `[{ path: '/rooms', default: true, order: 2, label: 'Rooms' }]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: string, description?: string \| null, imageUrl?: string \| null }`. The label and description should be pre-localized. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland', imageUrl: 'https://example.com/helsinki.jpg' }] }`                                                                                                                                                          |
+| Name                 | Value      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| redirectUrl          | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| language             | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| palette              | `{}`       | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }`                                                                                                                                                                                                                                                                                                                                                 |
+| disableCalendarDates | `{}`       | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }`                                                                                                                                                                                                                                                                                                                                                |
+| mode                 | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]`                                                                                                                                                                                                                                                                                           |
+| fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label?: string}]`. The label should be pre-localized. For example: `[{ path: '/rooms', default: true, order: 2, label: 'Rooms' }]`                                                                                                                                                                                                                                                                                                                                              |
+| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: string, description?: string \| null, imageUrl?: string \| null }`. The label and description should be pre-localized. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland', imageUrl: 'https://example.com/helsinki.jpg' }] }` |

package/lib/components/FilterBar/FilterBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../themes/Default.css';
 import { FilterBarTypes } from './FilterBarTypes';
+import '../../themes/Default.css';
 import './FilterBar.css';
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
+export declare const FilterBar: ({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes) => React.JSX.Element;

package/lib/components/FilterBar/components/FilterControls/FilterControls.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './FilterControls.css';
+export declare const FilterControls: () => React.JSX.Element;

package/lib/components/FilterBar/components/FilterPanels/Categories/Categories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Categories.css';
+type Props = {
+    categories: any;
+    setCategories: any;
+};
+export declare const Categories: {
+    ({ categories, setCategories }: Props): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/components/FilterBar/components/FilterPanels/Dates/Dates.d.ts

@@ -0,0 +1,16 @@
+import React, { RefObject } from 'react';
+import { DateRange } from 'react-day-picker';
+import { CalendarTypes } from '../../../../../core/components';
+import './Dates.css';
+type Props = {
+    ref: RefObject<HTMLDivElement>;
+    onClose?: () => void;
+    autoFocus?: boolean;
+    calendarRange: DateRange | undefined;
+    setCalendarRange: (range: DateRange | undefined) => void;
+    disableCalendarDates?: CalendarTypes['disableCalendarDates'];
+    selectedPath?: string;
+    language?: string;
+};
+export declare const Dates: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/components/FilterPanels/FilterPanels.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './FilterPanels.css';
+export declare const FilterPanels: () => false | "" | React.JSX.Element;

package/lib/components/FilterBar/components/FilterPanels/Guests/GuestCount/GuestCount.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { GuestsCountPropsType } from '../../../../FilterBarTypes';
+import './GuestCount.css';
+export declare const GuestCount: FC<GuestsCountPropsType>;

package/lib/components/FilterBar/components/FilterPanels/Guests/Guests.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AgeCategoryCount, AgeCategoryType } from '../../../FilterBarTypes';
+import './Guests.css';
+type Props = {
+    ageCategories?: AgeCategoryType[];
+    updateGuestsCount: (arg1: string, arg2: number) => void;
+    ageCategoryCounts: AgeCategoryCount;
+    autoFocus?: boolean;
+    onClose?: () => void;
+};
+export declare const Guests: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/components/FilterPanels/Locations/Locations.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Location } from '../../../FilterBarTypes';
+import './Locations.css';
+type Props = {
+    locations?: Location[];
+    language?: string;
+    selectedLocations: Location[];
+    setSelectedLocations: (locations: Location[]) => void;
+    autoFocus?: boolean;
+    multiSelect?: boolean;
+    onClose?: () => void;
+};
+export declare const Locations: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/components/FilterPanels/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import './SectionHeader.css';
+type Props = {
+    title: string;
+    action?: ReactNode;
+};
+export declare const SectionHeader: ({ title, action }: Props) => React.JSX.Element;
+export {};

package/lib/components/FilterBar/components/FilterTabs/FilterTabs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './FilterTabs.css';
+export declare const FilterTabs: () => false | React.JSX.Element | undefined;

package/lib/components/FilterBar/components/ImageCard/ImageCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './ImageCard.css';
+type Props = {
+    title?: string;
+    description?: string | null;
+    imageUrl?: string | null;
+    isSelected: boolean;
+    onClick?: () => void;
+};
+export declare const ImageCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/components/SelectButton/SelectButton.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, MouseEvent } from 'react';
+import './SelectButton.css';
+type Props = {
+    label: string;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    description: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+};
+export declare const SelectButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/components/FilterBar/components/TabButton/TabButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './TabButton.css';
+type Props = {
+    onClick?: () => void;
+    label: string;
+    active?: boolean;
+    mode?: string;
+};
+export declare const TabButton: ({ onClick, label, active, mode }: Props) => React.JSX.Element;
+export {};

package/lib/components/FilterBar/components/index.d.ts

@@ -1,5 +1,6 @@
-export { CloseButton, SelectButton, SubmitButton, TabButton } from './buttons';
-export { Guests } from './guests/Guests';
-export { Divider } from './divider/Divider';
-export { Categories } from './categories/Categories';
-export { Locations } from './locations/Locations';
+export { SelectButton } from './SelectButton/SelectButton';
+export { TabButton } from './TabButton/TabButton';
+export { Divider } from './Divider/Divider';
+export { FilterPanels } from './FilterPanels/FilterPanels';
+export { FilterControls } from './FilterControls/FilterControls';
+export { FilterTabs } from './FilterTabs/FilterTabs';

package/lib/components/FilterBar/hooks/index.d.ts

@@ -1,2 +1,5 @@
-export { useFilterBar } from './useFilterBar';
 export { useScrollInToView } from './useScrollInToView';
+export { useFilterState } from './useFilterState';
+export { useFilterActions } from './useFilterActions';
+export { useFilterUi } from './useFilterUi';
+export { usePanelPosition } from './usePanelPosition';

package/lib/components/FilterBar/hooks/useFilterActions.d.ts

@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DateRange } from 'react-day-picker';
+import { AgeCategoryCount, FilterBarTypes, Locations } from '../FilterBarTypes';
+type Props = {
+    tabs: FilterBarTypes['tabs'];
+    ageCategories: FilterBarTypes['ageCategories'];
+    redirectUrl: FilterBarTypes['redirectUrl'];
+    ageCategoryCounts: AgeCategoryCount;
+    selectedLocations: Locations['data'];
+    calendarRange?: DateRange;
+    selectedPath: string;
+    setSelectedPath: (val: string) => void;
+    setAgeCategoryCounts: Dispatch<SetStateAction<AgeCategoryCount>>;
+    setSelectedFilter: (val: string | boolean) => void;
+    setCalendarRange: (val: DateRange | undefined) => void;
+    onSubmit: FilterBarTypes['onSubmit'];
+    setInnerLoading: (val: boolean) => void;
+};
+export declare const useFilterActions: ({ tabs, calendarRange, ageCategoryCounts, ageCategories, selectedLocations, selectedPath, redirectUrl, setSelectedPath, setAgeCategoryCounts, setSelectedFilter, setCalendarRange, onSubmit, setInnerLoading, }: Props) => {
+    updateGuestsCount: (id: string, newCount: number) => void;
+    handleSelectedFilter: (id: string | boolean) => void;
+    handleSubmit: () => void;
+    handleResetFilters: () => void;
+};
+export {};

package/lib/components/FilterBar/hooks/useFilterState.d.ts

@@ -0,0 +1,22 @@
+import { DateRange } from 'react-day-picker';
+import { AgeCategoryCount, FilterBarTypes } from '../FilterBarTypes';
+type Props = {
+    locations: FilterBarTypes['locations'];
+};
+export declare const useFilterState: ({ locations }: Props) => {
+    selectedPath: string;
+    selectedFilter: string | boolean;
+    calendarRange: DateRange | undefined;
+    innerLoading: boolean;
+    categories: number;
+    ageCategoryCounts: AgeCategoryCount;
+    selectedLocations: import("..").Location[];
+    setSelectedLocations: import("react").Dispatch<import("react").SetStateAction<import("..").Location[]>>;
+    setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
+    setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
+    setCategories: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setSelectedPath: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<string | boolean>>;
+    setInnerLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

package/lib/components/FilterBar/hooks/useFilterUi.d.ts

@@ -0,0 +1,7 @@
+export declare const useFilterUi: (selectedFilter: string | boolean) => {
+    previouslyFocusedButtonRef: import("react").MutableRefObject<HTMLButtonElement | null>;
+    isMobile: boolean;
+    targetFilterBarRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    panelRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    buttonRefs: import("react").MutableRefObject<Record<string, HTMLButtonElement | null>>;
+};

package/lib/components/FilterBar/hooks/usePanelPosition.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, MutableRefObject, RefObject } from 'react';
+type Props = {
+    selectedFilter: string | boolean;
+    panelRef: RefObject<HTMLDivElement | null>;
+    targetFilterBarRef: RefObject<HTMLDivElement | null>;
+    buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>;
+    isMobile: boolean;
+};
+export declare const usePanelPosition: ({ selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile, }: Props) => {
+    localStyles: CSSProperties;
+};
+export {};

package/lib/components/FilterBar/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './FilterBar';
+export { FilterBar } from './FilterBar';
 export * from './FilterBarTypes';

package/lib/components/FilterBar/providers/FilterBarProvider.d.ts

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren, RefObject, MutableRefObject } from 'react';
+import { DateRange } from 'react-day-picker';
+import { AgeCategoryCount, Location, FilterBarTypes } from '../FilterBarTypes';
+type FilterBarProviderProps = PropsWithChildren<FilterBarTypes>;
+type FilterBarContextType = FilterBarTypes & {
+    selectedFilter: string | boolean;
+    ageCategoryCounts: AgeCategoryCount;
+    categories: number;
+    calendarRange?: DateRange;
+    selectedPath: string;
+    innerLoading: boolean;
+    selectedLocations: Location[];
+    setSelectedLocations: (val: Location[]) => void;
+    setCalendarRange: (val: DateRange | undefined) => void;
+    setSelectedFilter: (val: string | boolean) => void;
+    setAgeCategoryCounts: (val: AgeCategoryCount) => void;
+    setCategories: (val: number) => void;
+    setSelectedPath: (val: string) => void;
+    handleSelectedFilter: (id: string | boolean) => void;
+    handleSubmit: () => void;
+    updateGuestsCount: (id: string, newCount: number) => void;
+    handleResetFilters: () => void;
+    previouslyFocusedButtonRef: MutableRefObject<HTMLButtonElement | null>;
+    panelRef: MutableRefObject<HTMLDivElement | null>;
+    buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>;
+    isMobile: boolean;
+    targetFilterBarRef: RefObject<HTMLDivElement>;
+};
+export declare const FilterBarProvider: ({ children, language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarProviderProps) => React.JSX.Element;
+export declare const useFilterBar: () => FilterBarContextType;
+export {};

package/lib/components/FilterBar/providers/index.d.ts

@@ -0,0 +1 @@
+export { FilterBarProvider, useFilterBar } from './FilterBarProvider';

package/lib/components/FilterBar/utils/ageCategoriesRules.d.ts

@@ -0,0 +1,7 @@
+import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes';
+type Props = {
+    ageCategoryCounts: AgeCategoryCount;
+    ageCategories?: AgeCategoryType[];
+};
+export declare const ageCategoryRules: ({ ageCategoryCounts, ageCategories, }: Props) => string;
+export {};

package/lib/components/FilterBar/utils/index.d.ts

@@ -1,3 +1,3 @@
 export { parseGuests } from './parseGuests';
 export { parseLocations } from './parseLocations';
-export { calculateDropdownPosition } from './calculateDropdownPosition';
+export { ageCategoryRules } from './ageCategoriesRules';

package/lib/components/FilterBar/utils/parseGuests.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes';
 type Props = {
     ageCategoryCounts: AgeCategoryCount;
-    ageCategories: AgeCategoryType[];
+    ageCategories?: AgeCategoryType[];
     guestLabel: string;
     guestsLabel: string;
     guestsPlaceholder: string;
@@ -13,5 +14,8 @@ type AccType = {
 export declare const parseGuests: ({ guestLabel, guestsLabel, guestsPlaceholder, ageCategoryCounts, ageCategories, }: Props) => {
     content: string;
     data: AccType;
+} | {
+    content: React.JSX.Element;
+    data: AccType;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../themes/Default.css';
 import { FilterCalendarTypes } from './FilterCalendarTypes';
+import '../../themes/Default.css';
 import './FilterCalendar.css';
 export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;

package/lib/core/components/buttons/CloseButton/CloseButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './CloseButton.css';
+interface CloseButtonPropsType {
+    handleClose: () => void;
+}
+export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => React.JSX.Element;
+export {};

package/lib/core/components/buttons/SubmitButton/SubmitButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import './SubmitButton.css';
+type SubmitButtonVariant = 'text' | 'full';
+type Props = {
+    onClick?: () => void;
+    startIcon?: ReactNode;
+    label?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    variant?: SubmitButtonVariant;
+};
+export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => React.JSX.Element;
+export {};

package/lib/core/components/index.d.ts

@@ -1,3 +1,5 @@
-export { SubmitButton } from './buttons/submit-button/SubmitButton';
-export { CloseButton } from './buttons/close-button/CloseButton';
+export { SubmitButton } from './buttons/SubmitButton/SubmitButton';
+export { CloseButton } from './buttons/CloseButton/CloseButton';
 export { Calendar } from './calendar/Calendar';
+export type { CalendarTypes } from './calendar/CalendarTypes';
+export { parseDates } from './calendar/utils';

package/lib/index.d.ts

@@ -120,7 +120,7 @@ type Location = {
     imageUrl?: string | null;
 };
 
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
+declare const FilterBar: ({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes) => React.JSX.Element;
 
 interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;