willba-component-library 0.4.0 → 0.4.2

package/lib/index.js

@@ -532,8 +532,13 @@ var useCloseFilterSection = function (_a) {
     var filterSectionRef = React.useRef(null);
     React.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);
             }
         };
@@ -11897,25 +11902,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 React.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 = [];
@@ -11975,11 +11993,12 @@ var useCalendarTooltips = function (_a) {
 };
 
 var useCalendarLoadingSpinner = function (_a) {
-    var loadingData = _a.loadingData;
+    var loadingData = _a.loadingData, rootRef = _a.rootRef;
     return React.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';
@@ -12078,10 +12097,12 @@ var Calendar = React.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) {