fix(core): MR-772 calendário do DateRange/DatePicker na largura dos dois campos (#1257)

* fix(core): calendário do daterange na largura dos dois campos (mr-772)

O container do calendário deixa de ser filho da grid (ocupava só a
primeira coluna) e passa a ser posicionado sob a linha dos campos, na
largura inteira e sobreposto ao conteúdo seguinte (drawers/modais não
sofrem reflow). Labels alinhadas ao Input vizinho. Stories para drawer,
modal e linha com Input.

Co-authored-by: Igor Monteiro <igor.monteiro@useblu.com.br>
Co-Authored-By: igor.monteiro <igor.monteiro@useblu.com.br>

* docs(core): story do daterange em container estreito (mr-772)

Co-authored-by: Igor Monteiro <igor.monteiro@useblu.com.br>
Co-Authored-By: igor.monteiro <igor.monteiro@useblu.com.br>

* fix(react): erro por campo no daterange e fecha calendário ao exibir erro (mr-772)

- error/helperText aceitam { from, to } além de boolean/string (compatível)
- calendário fecha quando um erro chega, para a mensagem ficar visível
- DatePicker (data única) mantém boolean/string

Co-authored-by: Igor Monteiro <igor.monteiro@useblu.com.br>
Co-Authored-By: igor.monteiro <igor.monteiro@useblu.com.br>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Igor Monteiro <igor.monteiro@useblu.com.br>

Author: devin-ai-integration[bot]

packages/ocean-core/src/components/_date-picker.scss

@@ -18,7 +18,18 @@ $background-custom: rgba(176, 245, 245, 0.24) 50%,
   width: 100%;
 
   &__calendar-container {
-    position: relative;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    width: 100%;
+    z-index: 1;
+
+    &--inline {
+      position: relative;
+      top: auto;
+      z-index: auto;
+    }
   }
 
   &:active,
@@ -32,10 +43,12 @@ $background-custom: rgba(176, 245, 245, 0.24) 50%,
     display: grid;
     gap: $spacing-inline-xxs;
     grid-template-columns: repeat(2, 1fr);
+    position: relative;
     width: 100%;
   }
 
   &__form-row-datepicker {
+    position: relative;
     width: 100%;
   }
 
@@ -44,12 +57,15 @@ $background-custom: rgba(176, 245, 245, 0.24) 50%,
     margin: 0;
 
     > label {
+      align-items: center;
       color: $color-interface-dark-down;
+      display: flex;
       font-family: $font-family-base;
       font-size: $font-size-xxs;
       font-weight: 400;
       line-height: 15px;
-      margin: 0 0 $spacing-inline-xxs;
+      margin: 0 $spacing-inline-xxxs $spacing-inline-xxs 0;
+      min-height: 22px;
       padding: 0;
       text-transform: none;
     }
@@ -82,22 +98,21 @@ $background-custom: rgba(176, 245, 245, 0.24) 50%,
     border-radius: $border-radius-md;
     box-shadow: $shadow-level-2;
     box-sizing: border-box;
-    margin: 0;
+    left: 0;
+    margin: $spacing-inline-xxxs 0 0;
     padding: 0 0 $spacing-inline-xs;
     position: absolute;
+    right: 0;
     width: 100%;
 
     .rdp-vhidden {
       display: none;
     }
   }
 
-  &_calendar_m1 {
-    top: $spacing-inline-xxxs;
-  }
-
+  &_calendar_m1,
   &_calendar_m2 {
-    top: $spacing-inline-xxxs;
+    top: 0;
   }
 
   &__disabled-tooltip {
@@ -142,12 +157,6 @@ $background-custom: rgba(176, 245, 245, 0.24) 50%,
     }
   }
 
-  @media (max-width: 321px) {
-    &_calendar_m2 {
-      top: 150px;
-    }
-  }
-
   &__caption {
     align-items: center;
     color: $color-interface-dark-deep;

packages/ocean-react/src/Date/DatePicker.tsx

@@ -117,7 +117,9 @@ const DatePickerSingle = React.forwardRef<
             {!disabled && calendarOpen && (
               <div
                 data-testid="datepicker-calendar"
-                className="ods-date__calendar-container"
+                className={classNames('ods-date__calendar-container', {
+                  'ods-date__calendar-container--inline': inline,
+                })}
                 role="presentation"
                 onClick={handleCalendarClick}
               >

packages/ocean-react/src/Date/DateRange.tsx

@@ -58,8 +58,19 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerProps>(
       startsToday,
       locale,
       disabledDaysMessage,
+      error,
     });
 
+    const fieldError = (field: 'from' | 'to'): boolean =>
+      !disabled && (typeof error === 'object' ? !!error[field] : !!error);
+
+    const fieldHelperText = (field: 'from' | 'to'): string | undefined => {
+      if (disabled || showDayPicker) return undefined;
+      const text =
+        typeof helperText === 'object' ? helperText[field] : helperText;
+      return text || undefined;
+    };
+
     return (
       <div>
         {showDayPicker && (
@@ -95,11 +106,9 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerProps>(
                 autoComplete="off"
                 readOnly={!editable}
                 disabled={disabled}
-                error={!disabled && error}
+                error={fieldError('from')}
                 inputMode="numeric"
-                helperText={
-                  (!disabled && !showDayPicker && helperText) || undefined
-                }
+                helperText={fieldHelperText('from')}
                 maxLength={10}
               />
             </div>
@@ -128,11 +137,9 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerProps>(
                 autoComplete="off"
                 readOnly={!editable}
                 disabled={disabled}
-                error={!disabled && error}
+                error={fieldError('to')}
                 inputMode="numeric"
-                helperText={
-                  (!disabled && !showDayPicker && helperText) || undefined
-                }
+                helperText={fieldHelperText('to')}
                 maxLength={10}
               />
             </div>

packages/ocean-react/src/Date/__tests__/DateRange.test.tsx

@@ -882,3 +882,52 @@ test('tooltip does not appear when clicked date has no entry in disabledDaysMess
     screen.queryByTestId('datepicker-disabled-tooltip')
   ).not.toBeInTheDocument();
 });
+
+test('shows error and helper text only on the field passed per field', () => {
+  render(
+    <DatePicker
+      labels={{ from: 'first-label', to: 'second-label' }}
+      values={{ from: '31/02/2026', to: '09/09/2026' }}
+      onSelect={jest.fn()}
+      editable
+      error={{ from: true }}
+      helperText={{ from: 'Essa data não existe' }}
+    />
+  );
+
+  expect(screen.getByText('Essa data não existe')).toBeInTheDocument();
+  expect(
+    screen.getByTestId('datepicker-input-1').closest('.ods-input')
+  ).toHaveClass('ods-input--error');
+  expect(
+    screen.getByTestId('datepicker-input-2').closest('.ods-input')
+  ).not.toHaveClass('ods-input--error');
+});
+
+test('closes the calendar when an error arrives so the message is visible', () => {
+  const { rerender } = render(
+    <DatePicker
+      labels={{ from: 'first-label', to: 'second-label' }}
+      values={{ from: '31/02/2026', to: '' }}
+      onSelect={jest.fn()}
+      editable
+    />
+  );
+
+  fireEvent.click(screen.getByTestId('datepicker-input-1'));
+  expect(screen.getByTestId('datepicker-calendar')).toBeInTheDocument();
+
+  rerender(
+    <DatePicker
+      labels={{ from: 'first-label', to: 'second-label' }}
+      values={{ from: '31/02/2026', to: '' }}
+      onSelect={jest.fn()}
+      editable
+      error={{ from: true }}
+      helperText={{ from: 'Essa data não existe' }}
+    />
+  );
+
+  expect(screen.queryByTestId('datepicker-calendar')).not.toBeInTheDocument();
+  expect(screen.getByText('Essa data não existe')).toBeInTheDocument();
+});

packages/ocean-react/src/Date/hooks/useDateRange.ts

@@ -25,6 +25,7 @@ export default function useDatePicker({
   startsToday,
   locale,
   disabledDaysMessage,
+  error,
 }: IDatePickerProps): IDatePickerReturn {
   const localeOption = locale || ptBr;
   const localeDateFormat =
@@ -169,6 +170,16 @@ export default function useDatePicker({
     }
   };
 
+  const hasError =
+    typeof error === 'object' ? !!(error.from || error.to) : !!error;
+
+  React.useEffect(() => {
+    if (hasError) {
+      setShowDayPicker(false);
+      setCurrentField('');
+    }
+  }, [hasError]);
+
   const handleCloseByOutside = () => {
     if (showDayPicker) {
       setShowDayPicker(false);

packages/ocean-react/src/Date/stories/DateRange.stories.tsx

@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { ptBR, enUS } from 'date-fns/locale';
 import DateRange from '../DateRange';
+import Drawer from '../../Drawer';
+import Modal from '../../Modal';
+import Input from '../../Input';
 import type { DatePickerFields } from '../types/DateRange.types';
 import {
   createDateDecorator,
@@ -110,6 +113,17 @@ export const States: Story = {
         />
       </div>
 
+      <div>
+        <h4>Com erro em um só campo</h4>
+        <DateRangeWrapper
+          labels={{ from: 'Data inicial', to: 'Data final' }}
+          values={{ from: '31/02/2026', to: '09/09/2026' }}
+          editable
+          error={{ from: true }}
+          helperText={{ from: 'Essa data não existe. Confira o dia e o mês.' }}
+        />
+      </div>
+
       <div>
         <h4>Desabilitado</h4>
         <DateRangeWrapper
@@ -232,3 +246,56 @@ export const Localization: Story = {
     </div>
   ),
 };
+
+const contentBelow = (
+  <div style={{ marginTop: 16 }}>
+    <h4>Seção seguinte</h4>
+    <p>Este conteúdo não deve se mover quando o calendário abre.</p>
+  </div>
+);
+
+export const InsideDrawer: Story = {
+  parameters: noControlsParameters,
+  render: () => (
+    <Drawer open size="small" overlayClose={() => undefined}>
+      <div style={{ padding: 16 }}>
+        <DateRangeWrapper labels={{ from: 'De', to: 'Até' }} />
+        {contentBelow}
+      </div>
+    </Drawer>
+  ),
+};
+
+export const InsideModal: Story = {
+  parameters: noControlsParameters,
+  render: () => (
+    <Modal isOpen onRequestClose={() => undefined}>
+      <div style={{ width: 400 }}>
+        <DateRangeWrapper labels={{ from: 'Data inicial', to: 'Data final' }} />
+        {contentBelow}
+      </div>
+    </Modal>
+  ),
+};
+
+export const NarrowContainer: Story = {
+  parameters: noControlsParameters,
+  render: () => (
+    <div style={{ width: 320 }}>
+      <DateRangeWrapper labels={{ from: 'De', to: 'Até' }} />
+      {contentBelow}
+    </div>
+  ),
+};
+
+export const InlineWithInput: Story = {
+  parameters: noControlsParameters,
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
+      <div style={{ width: 240 }}>
+        <Input label="Nome do cliente" placeholder="Buscar" />
+      </div>
+      <DateRangeWrapper labels={{ from: 'De', to: 'Até' }} />
+    </div>
+  ),
+};

packages/ocean-react/src/Date/types/DatePicker.types.ts

@@ -18,7 +18,12 @@ export type DatePickerSingleProps = {
    */
   disabledDaysMessage?: DisabledDaysMessageProp;
   inline?: boolean;
-} & Omit<DatePickerProps, 'labels' | 'values' | 'onSelect'>;
+  error?: boolean;
+  helperText?: string;
+} & Omit<
+  DatePickerProps,
+  'labels' | 'values' | 'onSelect' | 'error' | 'helperText'
+>;
 
 export type IDatePickerProps = Pick<
   DatePickerSingleProps,

packages/ocean-react/src/Date/types/DateRange.types.ts

@@ -17,6 +17,12 @@ export type DatePickerFields = {
   to: string;
 };
 
+/**
+ * Estado por campo (from/to). Um booleano/string único vale para os dois.
+ */
+export type DateFieldFlags = { from?: boolean; to?: boolean };
+export type DateFieldTexts = { from?: string; to?: string };
+
 export type DatePickerProps = {
   /**
    * Determines names of inputs (from/to)
@@ -61,16 +67,18 @@ export type DatePickerProps = {
   disabledDaysMessage?: DisabledDaysMessageProp;
 
   /**
-   * Determines error os inputs
+   * Determines error on the inputs. A boolean applies to both fields;
+   * `{ from, to }` marks only the field(s) with an invalid date.
    * @default false
    */
-  error?: boolean;
+  error?: boolean | DateFieldFlags;
 
   /**
-   * Determines error message
+   * Determines error message. A string applies to both fields;
+   * `{ from, to }` shows a message under a specific field.
    * @default null
    */
-  helperText?: string;
+  helperText?: string | DateFieldTexts;
 
   /**
    * Determines if date seleting starts today
@@ -93,7 +101,12 @@ export type DatePickerProps = {
 
 export type IDatePickerProps = Pick<
   DatePickerProps,
-  'values' | 'onSelect' | 'startsToday' | 'locale' | 'disabledDaysMessage'
+  | 'values'
+  | 'onSelect'
+  | 'startsToday'
+  | 'locale'
+  | 'disabledDaysMessage'
+  | 'error'
 >;
 
 export type IDatePickerReturn = {