@useblu/ocean-react 1.131.0 → 1.132.0

package/index.js

@@ -34594,35 +34594,65 @@ var getInputPlaceholder = function (localeOption) {
 
 function useDisabledDaysTooltip(disabledDaysMessage) {
     var _a = e.useState(false), showDisabledTooltip = _a[0], setShowDisabledTooltip = _a[1];
+    var _b = e.useState(''), tooltipMessage = _b[0], setTooltipMessage = _b[1];
+    var _c = e.useState(null), tooltipPosition = _c[0], setTooltipPosition = _c[1];
     var tooltipTimerRef = e.useRef(null);
-    var handleDisabledDayClick = e.useCallback(function () {
-        if (disabledDaysMessage) {
-            if (tooltipTimerRef.current)
-                clearTimeout(tooltipTimerRef.current);
-            setShowDisabledTooltip(true);
-            tooltipTimerRef.current = setTimeout(function () { return setShowDisabledTooltip(false); }, 4000);
-        }
+    var lastDisabledClickRef = e.useRef(null);
+    var resolveMessage = e.useCallback(function (day) {
+        var _a;
+        if (!disabledDaysMessage)
+            return '';
+        if (typeof disabledDaysMessage === 'string')
+            return disabledDaysMessage;
+        if (!day)
+            return '';
+        var entry = disabledDaysMessage.find(function (e) { return isSameDay(e.date, day); });
+        return (_a = entry === null || entry === void 0 ? void 0 : entry.message) !== null && _a !== void 0 ? _a : '';
     }, [disabledDaysMessage]);
-    var handleEnabledDayClick = e.useCallback(function () {
-        setShowDisabledTooltip(false);
-    }, []);
+    var handleCalendarClick = e.useCallback(function (event) {
+        if (!disabledDaysMessage)
+            return;
+        var target = event.target;
+        var disabledDay = target.closest('button.ods-date__disabled');
+        if (!disabledDay)
+            return;
+        var message = resolveMessage(lastDisabledClickRef.current);
+        if (!message)
+            return;
+        var container = event.currentTarget;
+        var containerRect = container.getBoundingClientRect();
+        var dayRect = disabledDay.getBoundingClientRect();
+        var arrowLeft = dayRect.left - containerRect.left + dayRect.width / 2;
+        var top = dayRect.top - containerRect.top - 12;
+        if (tooltipTimerRef.current)
+            clearTimeout(tooltipTimerRef.current);
+        setTooltipMessage(message);
+        setTooltipPosition({ top: top, arrowLeft: arrowLeft });
+        setShowDisabledTooltip(true);
+        tooltipTimerRef.current = setTimeout(function () { return setShowDisabledTooltip(false); }, 5000);
+    }, [disabledDaysMessage, resolveMessage]);
     var createDayClickHandler = e.useCallback(function (originalHandler) {
         return function (day, modifiers) {
             if (modifiers.disabled) {
-                handleDisabledDayClick();
+                lastDisabledClickRef.current = day;
                 return;
             }
-            handleEnabledDayClick();
+            lastDisabledClickRef.current = null;
+            setShowDisabledTooltip(false);
+            setTooltipPosition(null);
             originalHandler(day);
         };
-    }, [handleDisabledDayClick, handleEnabledDayClick]);
+    }, []);
     e.useEffect(function () { return function () {
         if (tooltipTimerRef.current)
             clearTimeout(tooltipTimerRef.current);
     }; }, []);
     return {
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
         createDayClickHandler: createDayClickHandler,
+        handleCalendarClick: handleCalendarClick,
     };
 }
 
@@ -34638,7 +34668,7 @@ function useDatePickerSingle(_a) {
     var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
     var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
     var _e = e.useState(''), datePickerCache = _e[0], setDatePickerCache = _e[1];
-    var _f = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _f.showDisabledTooltip, createDayClickHandler = _f.createDayClickHandler;
+    var _f = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _f.showDisabledTooltip, tooltipMessage = _f.tooltipMessage, tooltipPosition = _f.tooltipPosition, createDayClickHandler = _f.createDayClickHandler, handleCalendarClick = _f.handleCalendarClick;
     var fromDate = parse$1(value || '', localeDateFormat, new Date());
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
@@ -34723,6 +34753,9 @@ function useDatePickerSingle(_a) {
         handleCloseByOutside: handleCloseByOutside,
         currentMonthToDisplay: currentMonthToDisplay,
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
         handleDayClickWithModifiers: handleDayClickWithModifiers,
     };
 }
@@ -34758,10 +34791,12 @@ var DatePickerHeader = function (_a) {
 };
 
 var DisabledDaysTooltip = function (_a) {
-    var message = _a.message, show = _a.show, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
-    if (!show)
+    var message = _a.message, show = _a.show, position = _a.position, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
+    if (!show || !position)
         return null;
-    return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId }, message));
+    return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId, style: { top: "".concat(position.top, "px") } },
+        message,
+        e.createElement("div", { className: "ods-date__disabled-tooltip__arrow", style: { left: "".concat(position.arrowLeft, "px") } })));
 };
 
 var DatePickerSingle = e.forwardRef(function (_a, ref) {
@@ -34772,13 +34807,11 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
         startsToday: startsToday,
         locale: locale,
         disabledDaysMessage: disabledDaysMessage,
-    }), input1Ref = _c.input1Ref, showDayPicker = _c.showDayPicker, selectedDay = _c.selectedDay, CustomStyles = _c.CustomStyles, localeOption = _c.localeOption, currentField = _c.currentField, inputPlaceholder = _c.inputPlaceholder, inputChange = _c.inputChange, createHandleToggleClick = _c.createHandleToggleClick, formatDay = _c.formatDay, handleCloseByOutside = _c.handleCloseByOutside, currentMonthToDisplay = _c.currentMonthToDisplay, showDisabledTooltip = _c.showDisabledTooltip, handleDayClickWithModifiers = _c.handleDayClickWithModifiers;
+    }), input1Ref = _c.input1Ref, showDayPicker = _c.showDayPicker, selectedDay = _c.selectedDay, CustomStyles = _c.CustomStyles, localeOption = _c.localeOption, currentField = _c.currentField, inputPlaceholder = _c.inputPlaceholder, inputChange = _c.inputChange, createHandleToggleClick = _c.createHandleToggleClick, formatDay = _c.formatDay, handleCloseByOutside = _c.handleCloseByOutside, currentMonthToDisplay = _c.currentMonthToDisplay, showDisabledTooltip = _c.showDisabledTooltip, tooltipMessage = _c.tooltipMessage, tooltipPosition = _c.tooltipPosition, handleCalendarClick = _c.handleCalendarClick, handleDayClickWithModifiers = _c.handleDayClickWithModifiers;
     var calendarOpen = inline || showDayPicker;
     var CaptionWithTooltip = function (_a) {
         var displayMonth = _a.displayMonth;
-        return (e.createElement(e.Fragment, null,
-            DatePickerHeader({ displayMonth: displayMonth, locale: localeOption, mode: 'single' }),
-            disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
+        return (e.createElement(e.Fragment, null, DatePickerHeader({ displayMonth: displayMonth, locale: localeOption, mode: 'single' })));
     };
     return (e.createElement("div", null,
         calendarOpen && !inline && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
@@ -34790,10 +34823,11 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
                             'date-field-focussed': currentField === 'start-date',
                         }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 }))),
                 inline && label && (e.createElement("div", { className: "ods-date__inline-label" }, label)),
-                !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar" },
+                !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar", className: "ods-date__calendar-container", role: "presentation", onClick: handleCalendarClick },
                     e.createElement(DayPicker, { mode: "single", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles(inline), className: className, onDayClick: handleDayClickWithModifiers, formatters: { formatDay: formatDay }, selected: selectedDay, disabled: startsToday ? { before: new Date() } : disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: CaptionWithTooltip,
-                        } })))))));
+                        } }),
+                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: tooltipMessage, show: showDisabledTooltip, position: tooltipPosition }))))))));
 });
 DatePickerSingle.displayName = 'DatePickerSingle';
 
@@ -34810,7 +34844,7 @@ function useDatePicker(_a) {
     var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
     var _e = e.useState({ from: '', to: '' }), datePickerCache = _e[0], setDatePickerCache = _e[1];
     var _f = e.useState(false), firstInputClicked = _f[0], setFirstInputClicked = _f[1];
-    var _g = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _g.showDisabledTooltip, createDayClickHandler = _g.createDayClickHandler;
+    var _g = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _g.showDisabledTooltip, tooltipMessage = _g.tooltipMessage, tooltipPosition = _g.tooltipPosition, createDayClickHandler = _g.createDayClickHandler, handleCalendarClick = _g.handleCalendarClick;
     var fromDate = parse$1(values.from, localeDateFormat, new Date());
     var toDate = parse$1(values.to, localeDateFormat, new Date());
     var updateState = function (updateData, updateCache) {
@@ -34963,6 +34997,9 @@ function useDatePicker(_a) {
         handleDayClick: handleDayClick,
         handleDayClickWithModifiers: handleDayClickWithModifiers,
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
         formatDay: formatDay,
@@ -34980,7 +35017,7 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
         startsToday: startsToday,
         locale: locale,
         disabledDaysMessage: disabledDaysMessage,
-    }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClickWithModifiers = _b.handleDayClickWithModifiers, showDisabledTooltip = _b.showDisabledTooltip, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
+    }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClickWithModifiers = _b.handleDayClickWithModifiers, showDisabledTooltip = _b.showDisabledTooltip, tooltipMessage = _b.tooltipMessage, tooltipPosition = _b.tooltipPosition, handleCalendarClick = _b.handleCalendarClick, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
     return (e.createElement("div", null,
         showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
         e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
@@ -34995,15 +35032,14 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
                     e.createElement(Input, { ref: input2Ref, "data-testid": "datepicker-input-2", id: "end-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'end-date',
                         }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 })),
-                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
+                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar", className: "ods-date__calendar-container", role: "presentation", onClick: handleCalendarClick },
                     e.createElement(DayPicker, { mode: "range", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: handleDayClickWithModifiers, onDayMouseEnter: function (day) { return handleDayMouseEnter(day); }, formatters: { formatDay: formatDay }, selected: selectedDays, disabled: startsToday ? { before: new Date() } : disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
                                 var displayMonth = _a.displayMonth;
-                                return (e.createElement(e.Fragment, null,
-                                    e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }),
-                                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
+                                return (e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
                             },
-                        } })))))));
+                        } }),
+                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: tooltipMessage, show: showDisabledTooltip, position: tooltipPosition }))))))));
 });
 DatePickerRange.displayName = 'DatePickerRange';