@useblu/ocean-react 1.129.0 → 1.131.0

package/index.js

@@ -505,22 +505,23 @@ var Header = function (_a) {
 };
 
 var ActionButton = function (_a) {
-    var actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick;
+    var actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, actionBadgeColor = _a.actionBadgeColor;
+    var badgeColor = actionBadgeColor !== null && actionBadgeColor !== void 0 ? actionBadgeColor : (actionCount === 0 ? 'neutral' : 'alert');
     return (e.createElement(e.Fragment, null,
         e.createElement("hr", { className: "ods-divider" }),
         e.createElement("button", { onClick: actionClick, type: "button", className: "ods-card-group__action", "aria-label": actionLabel },
             e.createElement("span", { className: "ods-card-group__action--label" }, actionLabel),
             e.createElement("div", { className: "ods-card-group__action--right" },
-                actionCount !== undefined && (e.createElement(Badge, { variation: "medium", color: actionCount === 0 ? 'neutral' : 'alert', count: actionCount })),
+                actionCount !== undefined && (e.createElement(Badge, { variation: "medium", color: badgeColor, count: actionCount })),
                 e.createElement(re, { size: 20 })))));
 };
 
 var CardGroup = e.forwardRef(function (_a, ref) {
-    var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "count", "tag", "children", "variant"]);
+    var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, actionBadgeColor = _a.actionBadgeColor, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "actionBadgeColor", "count", "tag", "children", "variant"]);
     return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-group", className: classNames('ods-card-group', "ods-card-group--".concat(variant)) }),
         (title || subtitle) && (e.createElement(Header, { title: title, subtitle: subtitle, count: count, tag: tag })),
         children && variant !== 'header' && e.createElement("div", null, children),
-        actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick }))));
+        actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick, actionBadgeColor: actionBadgeColor }))));
 });
 CardGroup.displayName = 'CardGroup';
 
@@ -34591,8 +34592,42 @@ var getInputPlaceholder = function (localeOption) {
     return localeOption.code === 'pt-BR' ? 'dd/mm/aaaa' : 'mm/dd/yyyy';
 };
 
+function useDisabledDaysTooltip(disabledDaysMessage) {
+    var _a = e.useState(false), showDisabledTooltip = _a[0], setShowDisabledTooltip = _a[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);
+        }
+    }, [disabledDaysMessage]);
+    var handleEnabledDayClick = e.useCallback(function () {
+        setShowDisabledTooltip(false);
+    }, []);
+    var createDayClickHandler = e.useCallback(function (originalHandler) {
+        return function (day, modifiers) {
+            if (modifiers.disabled) {
+                handleDisabledDayClick();
+                return;
+            }
+            handleEnabledDayClick();
+            originalHandler(day);
+        };
+    }, [handleDisabledDayClick, handleEnabledDayClick]);
+    e.useEffect(function () { return function () {
+        if (tooltipTimerRef.current)
+            clearTimeout(tooltipTimerRef.current);
+    }; }, []);
+    return {
+        showDisabledTooltip: showDisabledTooltip,
+        createDayClickHandler: createDayClickHandler,
+    };
+}
+
 function useDatePickerSingle(_a) {
-    var value = _a.value, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale;
+    var value = _a.value, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage;
     var localeOption = locale || ptBr;
     var localeDateFormat = localeOption &&
         localeOption.formatLong &&
@@ -34603,11 +34638,8 @@ 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 fromDate = parse$1(value || '', localeDateFormat, new Date());
-    e.useEffect(function () {
-        if (value === '')
-            setCurrentField('');
-    }, [value]);
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
         return updateCache && setDatePickerCache(updateData);
@@ -34621,14 +34653,11 @@ function useDatePickerSingle(_a) {
             setShowDayPicker(false);
         }
     };
+    var handleDayClickWithModifiers = createDayClickHandler(handleDayClick);
     var createHandleToggleClick = function (fieldId) {
         setShowDayPicker(!showDayPicker);
         setCurrentField(fieldId);
     };
-    var disabledDays = function (day) {
-        var startToday = handleValidateStartsToday(startsToday, day);
-        return startToday;
-    };
     var closeCalendarDelay = function () {
         setTimeout(function () { return setShowDayPicker(false); }, 500);
     };
@@ -34653,8 +34682,10 @@ function useDatePickerSingle(_a) {
         var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
         setCurrentMonthToDisplay(parsedDate);
     };
-    var CustomStyles = {
-        root: 'ods-date__calendar ods-date_calendar_m1',
+    var CustomStyles = function (inline) { return ({
+        root: inline
+            ? 'ods-date__inline-calendar'
+            : 'ods-date__calendar ods-date_calendar_m1',
         caption: 'ods-date__caption',
         nav_button: 'ods-date__navButtons',
         nav_button_previous: 'ods-date__navButtonPrev-datepicker',
@@ -34670,9 +34701,13 @@ function useDatePickerSingle(_a) {
         day_today: 'ods-date__today',
         day_selected: 'ods-date__selected-datepicker',
         day_disabled: 'ods-date__disabled',
-    };
+    }); };
     var selectedDay = fromDate;
     var inputPlaceholder = getInputPlaceholder(localeOption);
+    e.useEffect(function () {
+        if (value === '')
+            setCurrentField('');
+    }, [value]);
     return {
         input1Ref: input1Ref,
         input2Ref: input2Ref,
@@ -34682,13 +34717,13 @@ function useDatePickerSingle(_a) {
         localeOption: localeOption,
         currentField: currentField,
         inputPlaceholder: inputPlaceholder,
-        handleDayClick: handleDayClick,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
-        disabledDays: disabledDays,
         formatDay: formatDay,
         handleCloseByOutside: handleCloseByOutside,
         currentMonthToDisplay: currentMonthToDisplay,
+        showDisabledTooltip: showDisabledTooltip,
+        handleDayClickWithModifiers: handleDayClickWithModifiers,
     };
 }
 
@@ -34722,34 +34757,48 @@ var DatePickerHeader = function (_a) {
             e.createElement(re, { size: 20 }))));
 };
 
+var DisabledDaysTooltip = function (_a) {
+    var message = _a.message, show = _a.show, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
+    if (!show)
+        return null;
+    return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId }, message));
+};
+
 var DatePickerSingle = e.forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["label", "value", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "className", "locale"]);
-    var _b = useDatePickerSingle({ value: value, onSelect: onSelect, startsToday: startsToday, locale: locale }), input1Ref = _b.input1Ref, showDayPicker = _b.showDayPicker, selectedDay = _b.selectedDay, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayClick = _b.handleDayClick, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
+    var label = _a.label, value = _a.value, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, _b = _a.inline, inline = _b === void 0 ? false : _b, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, disabledDays = _a.disabledDays, disabledDaysMessage = _a.disabledDaysMessage, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["label", "value", "onSelect", "editable", "disabled", "inline", "error", "helperText", "startsToday", "disabledDays", "disabledDaysMessage", "className", "locale"]);
+    var _c = useDatePickerSingle({
+        value: value,
+        onSelect: onSelect,
+        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;
+    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("div", null,
-        showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
+        calendarOpen && !inline && (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),
             e.createElement("div", { className: "ods-date__form-row-datepicker" },
-                e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
+                !inline && (e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
                     label && e.createElement("label", { htmlFor: "start-date" }, label),
                     e.createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
                             '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 })),
-                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
-                    e.createElement(DayPicker, { mode: "single", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, formatters: { formatDay: formatDay }, selected: selectedDay, disabled: disabledDays, defaultMonth: currentMonthToDisplay, components: {
-                            Caption: function (_a) {
-                                var displayMonth = _a.displayMonth;
-                                return DatePickerHeader({
-                                    displayMonth: displayMonth,
-                                    locale: localeOption,
-                                    mode: 'single',
-                                });
-                            },
+                        }), 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" },
+                    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,
                         } })))))));
 });
 DatePickerSingle.displayName = 'DatePickerSingle';
 
 function useDatePicker(_a) {
-    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale;
+    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage;
     var localeOption = locale || ptBr;
     var localeDateFormat = localeOption &&
         localeOption.formatLong &&
@@ -34761,12 +34810,9 @@ 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 fromDate = parse$1(values.from, localeDateFormat, new Date());
     var toDate = parse$1(values.to, localeDateFormat, new Date());
-    e.useEffect(function () {
-        if (values.from === '')
-            setCurrentField('');
-    }, [values.from]);
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
         return updateCache && setDatePickerCache(updateData);
@@ -34804,6 +34850,7 @@ function useDatePicker(_a) {
             }
         }
     };
+    var handleDayClickWithModifiers = createDayClickHandler(handleDayClick);
     var updateCurrentMonth = function (date) {
         var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
         setCurrentMonthToDisplay(parsedDate);
@@ -34837,10 +34884,6 @@ function useDatePicker(_a) {
         setShowDayPicker(!showDayPicker);
         setCurrentField(fieldId);
     };
-    var disabledDays = function (day) {
-        var startToday = handleValidateStartsToday(startsToday, day);
-        return startToday || (currentField === 'end-date' && day < fromDate);
-    };
     var closeCalendarDelay = function () {
         setTimeout(function () { return setShowDayPicker(false); }, 500);
     };
@@ -34901,6 +34944,10 @@ function useDatePicker(_a) {
         to: toDate,
     };
     var inputPlaceholder = getInputPlaceholder(localeOption);
+    e.useEffect(function () {
+        if (values.from === '')
+            setCurrentField('');
+    }, [values.from]);
     return {
         input1Ref: input1Ref,
         input2Ref: input2Ref,
@@ -34914,9 +34961,10 @@ function useDatePicker(_a) {
         inputPlaceholder: inputPlaceholder,
         handleDayMouseEnter: handleDayMouseEnter,
         handleDayClick: handleDayClick,
+        handleDayClickWithModifiers: handleDayClickWithModifiers,
+        showDisabledTooltip: showDisabledTooltip,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
-        disabledDays: disabledDays,
         formatDay: formatDay,
         handleCloseByOutside: handleCloseByOutside,
         handleDisplayMonth: handleDisplayMonth,
@@ -34925,8 +34973,14 @@ function useDatePicker(_a) {
 }
 
 var DatePickerRange = e.forwardRef(function (_a, ref) {
-    var labels = _a.labels, values = _a.values, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["labels", "values", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "className", "locale"]);
-    var _b = useDatePicker({ values: values, onSelect: onSelect, startsToday: startsToday, locale: locale }), 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, handleDayClick = _b.handleDayClick, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
+    var labels = _a.labels, values = _a.values, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, disabledDays = _a.disabledDays, disabledDaysMessage = _a.disabledDaysMessage, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["labels", "values", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "disabledDays", "disabledDaysMessage", "className", "locale"]);
+    var _b = useDatePicker({
+        values: values,
+        onSelect: onSelect,
+        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;
     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),
@@ -34942,10 +34996,12 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
                             '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" },
-                    e.createElement(DayPicker, { mode: "range", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, onDayMouseEnter: function (day) { return handleDayMouseEnter(day); }, formatters: { formatDay: formatDay }, selected: selectedDays, disabled: disabledDays, defaultMonth: currentMonthToDisplay, components: {
+                    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(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
+                                return (e.createElement(e.Fragment, null,
+                                    e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }),
+                                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
                             },
                         } })))))));
 });