@useblu/ocean-react 1.139.0 → 1.139.2

package/index.js

@@ -34908,7 +34908,9 @@ 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", className: "ods-date__calendar-container", role: "presentation", onClick: handleCalendarClick },
+                !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar", className: classNames('ods-date__calendar-container', {
+                        'ods-date__calendar-container--inline': inline,
+                    }), 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,
                         } }),
@@ -34917,7 +34919,7 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
 DatePickerSingle.displayName = 'DatePickerSingle';
 
 function useDatePicker(_a) {
-    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage;
+    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage, error = _a.error;
     var localeOption = locale || ptBr;
     var localeDateFormat = localeOption &&
         localeOption.formatLong &&
@@ -35027,6 +35029,13 @@ function useDatePicker(_a) {
             }
         }
     };
+    var hasError = typeof error === 'object' ? !!(error.from || error.to) : !!error;
+    e.useEffect(function () {
+        if (hasError) {
+            setShowDayPicker(false);
+            setCurrentField('');
+        }
+    }, [hasError]);
     var handleCloseByOutside = function () {
         if (showDayPicker) {
             setShowDayPicker(false);
@@ -35102,7 +35111,17 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
         startsToday: startsToday,
         locale: locale,
         disabledDaysMessage: disabledDaysMessage,
+        error: error,
     }), 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;
+    var fieldError = function (field) {
+        return !disabled && (typeof error === 'object' ? !!error[field] : !!error);
+    };
+    var fieldHelperText = function (field) {
+        if (disabled || showDayPicker)
+            return undefined;
+        var text = typeof helperText === 'object' ? helperText[field] : helperText;
+        return text || undefined;
+    };
     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),
@@ -35111,12 +35130,12 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
                     labels && labels.from && (e.createElement("label", { htmlFor: "start-date" }, labels.from)),
                     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: values.from, 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 })),
+                        }), name: "start-date", value: values.from, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: fieldError('from'), inputMode: "numeric", helperText: fieldHelperText('from'), maxLength: 10 })),
                 e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-second-field-wrapper", onClick: function () { return createHandleToggleClick('end-date'); } },
                     labels && labels.to && (e.createElement("label", { htmlFor: "end-date" }, labels.to)),
                     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 })),
+                        }), 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: fieldError('to'), inputMode: "numeric", helperText: fieldHelperText('to'), maxLength: 10 })),
                 !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) {