willba-component-library 0.4.1 → 0.4.3

package/lib/index.d.ts

@@ -129,6 +129,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
     setToggleCalendar: (val: boolean) => void;
 }
 
-declare function FilterCalendar(props: FilterCalendarTypes): React.JSX.Element;
+declare const FilterCalendar: (props: FilterCalendarTypes) => React.JSX.Element;
 
 export { Button, FilterBar, FilterBarTypes, FilterCalendar, FilterCalendarTypes };

package/lib/index.esm.js

@@ -512,8 +512,13 @@ var useCloseFilterSection = function (_a) {
     var filterSectionRef = useRef(null);
     useEffect(function () {
         var handleClickOutside = function (event) {
-            if (filterSectionRef.current &&
-                !filterSectionRef.current.contains(event.target)) {
+            if (!filterSectionRef.current)
+                return;
+            // composedPath() walks through Shadow DOM boundaries; event.target is
+            // retargeted to the shadow host when crossing them, which would falsely
+            // report clicks inside the panel as "outside".
+            var path = event.composedPath();
+            if (!path.includes(filterSectionRef.current)) {
                 handleSelectedFilter(false);
             }
         };
@@ -3068,21 +3073,17 @@ var fiCommon = {
 	errors: errors
 };
 
+var DEFAULT_LANGUAGE = 'fi';
 var resources = {
     en: { filterBar: enFilterBar, common: enCommon },
     fi: { filterBar: fiFilterBar, common: fiCommon },
 };
-var readLocaleFromUrl = function () {
-    if (typeof window === 'undefined')
-        return null;
-    return new URLSearchParams(window.location.search).get('locale');
-};
 var createI18nInstance = function (language) {
     var instance$1 = instance.createInstance();
     instance$1.use(initReactI18next).init({
         resources: resources,
-        lng: language || readLocaleFromUrl() || 'fi',
-        fallbackLng: 'fi',
+        lng: language || DEFAULT_LANGUAGE,
+        fallbackLng: DEFAULT_LANGUAGE,
         interpolation: { escapeValue: false },
     });
     return instance$1;
@@ -3090,7 +3091,7 @@ var createI18nInstance = function (language) {
 
 var I18nProvider = function (_a) {
     var language = _a.language, children = _a.children;
-    var i18n = useMemo(function () { return createI18nInstance(language); }, []);
+    var i18n = useMemo(function () { return createI18nInstance(language); }, [language]);
     return React__default.createElement(I18nextProvider, { i18n: i18n }, children);
 };
 
@@ -11877,25 +11878,38 @@ var checkForContinuousSelection = function (_a) {
     });
 };
 
+// Returns the nearest queryable root for an element. Inside a Shadow DOM this
+// returns the ShadowRoot (so `querySelector` searches inside the shadow tree);
+// otherwise returns `document`. Both support `querySelector`/`querySelectorAll`.
+var getQueryRoot = function (el) {
+    var root = el === null || el === void 0 ? void 0 : el.getRootNode();
+    if (root instanceof ShadowRoot)
+        return root;
+    return document;
+};
+
 var useCalendarTooltips = function (_a) {
-    var showFeedback = _a.showFeedback;
+    var showFeedback = _a.showFeedback, rootRef = _a.rootRef;
     return useEffect(function () {
         if (typeof document === 'undefined' || !showFeedback)
             return;
+        // Use the calendar's own DOM root (ShadowRoot or Document) so queries
+        // resolve correctly when the component is mounted inside Shadow DOM.
+        var root = getQueryRoot(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
         // Children
-        var calendarTooltip = document.querySelector('.will-calendar-tooltip');
-        var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
-        var calendarTooltipOverlappingDate = document.querySelector('.will-calendar-tooltip-overlapping-date');
-        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
-        var calendarTooltipCheckInOnly = document.querySelector('.will-calendar-tooltip-check-in-only');
-        var calendarTooltipCheckOutOnly = document.querySelector('.will-calendar-tooltip-check-out-only');
+        var calendarTooltip = root.querySelector('.will-calendar-tooltip');
+        var calendarTooltipCheckOut = root.querySelector('.will-calendar-tooltip-check-out');
+        var calendarTooltipOverlappingDate = root.querySelector('.will-calendar-tooltip-overlapping-date');
+        var loadingSpinner = root.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
+        var calendarTooltipCheckInOnly = root.querySelector('.will-calendar-tooltip-check-in-only');
+        var calendarTooltipCheckOutOnly = root.querySelector('.will-calendar-tooltip-check-out-only');
         // Parents
-        var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
-        var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
-        var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
-        var calendarOverlappingDate = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
-        var calendarCheckInOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-in-only)');
-        var calendarCheckOutOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-out-only)');
+        var calendarButtons = root.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
+        var calendarButtonsCheckOut = root.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
+        var calendarMonthContainer = root.querySelector('.will-filter-bar-calendar .rdp-months');
+        var calendarOverlappingDate = root.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
+        var calendarCheckInOnly = root.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-in-only)');
+        var calendarCheckOutOnly = root.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-out-only)');
         // Append children to parents
         var tooltipClonesCheckIn = [];
         var tooltipClonesCheckOut = [];
@@ -11955,11 +11969,12 @@ var useCalendarTooltips = function (_a) {
 };
 
 var useCalendarLoadingSpinner = function (_a) {
-    var loadingData = _a.loadingData;
+    var loadingData = _a.loadingData, rootRef = _a.rootRef;
     return useEffect(function () {
         if (typeof document === 'undefined')
             return;
-        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
+        var root = getQueryRoot(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
+        var loadingSpinner = root.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
         if (loadingData) {
             if (loadingSpinner)
                 loadingSpinner.style.display = 'flex';
@@ -12058,10 +12073,12 @@ var Calendar = forwardRef(function (_a, ref) {
     // Handle tooltip
     useCalendarTooltips({
         showFeedback: showFeedback,
+        rootRef: calendarContainerRef,
     });
     // Handle loading spinner
     useCalendarLoadingSpinner({
         loadingData: loadingData,
+        rootRef: calendarContainerRef,
     });
     // Handle the date selection and availability for selection logic.
     var handleOnSelect = function (range) {
@@ -12606,11 +12623,9 @@ var renderCalendarErrorMessage = function (_a) {
 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\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 var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\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-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\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 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: 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        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        max-width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\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(props) {
-    return (React__default.createElement(I18nProvider, { language: props.language },
-        React__default.createElement(FilterCalendarInner, __assign$2({}, props))));
-}
-function FilterCalendarInner(_a) {
+var FilterCalendar = function (props) { return (React__default.createElement(I18nProvider, { language: props.language },
+    React__default.createElement(FilterCalendarInner, __assign$2({}, props)))); };
+var FilterCalendarInner = function (_a) {
     var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, outerDisableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection, outerRangeContext = _a.rangeContext;
     var themePalette = useTheme({ palette: palette });
     // Translations
@@ -12638,7 +12653,7 @@ function FilterCalendarInner(_a) {
             React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
         React__default.createElement("div", { className: "will-calendar-footer" },
             React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
-}
+};
 
 export { Button$1 as Button, FilterBar, FilterCalendar };
 //# sourceMappingURL=index.esm.js.map