willba-component-library 0.3.6 → 0.3.7

package/README.md

@@ -86,10 +86,18 @@ function App() {
       ]}
       locations={{
         multiSelect: false,
+        disabled: false,
         data: [
           {
-            id: '1',
-            label: { en: 'Helsinki', fi: 'Helsinki' },
+            id: 1,
+            label: [
+              { content: 'Helsinki', locale: 'en' },
+              { content: 'Helsinki', locale: 'fi' },
+            ],
+            description: [
+              { content: 'Capital of Finland', locale: 'en' },
+              { content: 'Suomen pääkaupunki', locale: 'fi' },
+            ],
             imageUrl: 'https://example.com/helsinki.jpg',
           },
         ],
@@ -183,10 +191,18 @@ ReactDOM.render(<App />, document.querySelector('#app'))
       ],
       locations: {
         multiSelect: false,
+        disabled: false,
         data: [
           {
-            id: '1',
-            label: { en: 'Helsinki', fi: 'Helsinki' },
+            id: 1,
+            label: [
+              { content: 'Helsinki', locale: 'en' },
+              { content: 'Helsinki', locale: 'fi' },
+            ],
+            description: [
+              { content: 'Capital of Finland', locale: 'en' },
+              { content: 'Suomen pääkaupunki', locale: 'fi' },
+            ],
             imageUrl: 'https://example.com/helsinki.jpg',
           },
         ],
@@ -208,4 +224,4 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 | 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: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]`                                                |
-| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, data: Location[] }` where Location = `{ id: string, label: { en: string, fi: string }, description?: { en: string, fi: string }, imageUrl?: string }`. `multiSelect` enables multi-selection, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, data: [{ id: '1', label: { en: 'Helsinki', fi: 'Helsinki' }, description: { en: 'Capital', fi: 'Pääkaupunki' }, imageUrl: 'https://example.com/helsinki.jpg' }] }` |
+| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: LocaleTranslation, description?: LocaleTranslation, imageUrl?: string }` and LocaleTranslation = `Array<{ content: string, locale: string }>`. `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: [{ content: 'Helsinki', locale: 'en' }, { content: 'Helsinki', locale: 'fi' }], description: [{ content: 'Capital', locale: 'en' }, { content: 'Pääkaupunki', locale: 'fi' }], imageUrl: 'https://example.com/helsinki.jpg' }] }` |

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DateRange } from 'react-day-picker';
 import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes';
 type Props = {
@@ -11,5 +12,5 @@ type Props = {
     language?: string;
     filtersRef?: React.RefObject<HTMLDivElement>;
 };
-export declare const Dates: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Dates: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-import * as React$1 from 'react';
+import * as React from 'react';
 import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
 
 /******************************************************************************
@@ -8916,8 +8916,8 @@ function canUseDOM() {
  * @param deps
  */
 var useIsomorphicLayoutEffect = canUseDOM()
-    ? React$1.useLayoutEffect
-    : React$1.useEffect;
+    ? React.useLayoutEffect
+    : React.useEffect;
 var serverHandoffComplete = false;
 var id = 0;
 function genId() {
@@ -8930,7 +8930,7 @@ function useId(providedId) {
     // If this instance isn't part of the initial render, we don't have to do the
     // double render/patch-up dance. We can just generate the ID and return it.
     var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
-    var _b = React$1.useState(initialId), id = _b[0], setId = _b[1];
+    var _b = React.useState(initialId), id = _b[0], setId = _b[1];
     useIsomorphicLayoutEffect(function () {
         if (id === null) {
             // Patch the ID after render. We do this in `useLayoutEffect` to avoid any
@@ -8941,7 +8941,7 @@ function useId(providedId) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         if (serverHandoffComplete === false) {
             // Flag all future uses of `useId` to skip the update dance. This is in
             // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
@@ -12066,10 +12066,10 @@ styleInject(css_248z$1);
 
 var Dates = forwardRef(function (_a, ref) {
     var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
-    return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
-        React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-        React.createElement("div", { className: "will-dates-filter-container" },
-            React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
+    return (React__default.createElement("div", { className: "will-filter-bar-dates", ref: ref },
+        React__default.createElement(FilterSectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-dates-filter-container" },
+            React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
 });
 Dates.displayName = 'Dates';
 
@@ -12154,7 +12154,7 @@ function FilterBar(_a) {
                     }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
             React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
         selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
-            selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-calendar-filter" },
+            selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-dates-filter" },
                 React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
             selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
                 React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),