@useblu/ocean-react 1.130.0 → 1.132.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.132.0](https://github.com/ocean-ds/ocean-web/compare/v1.131.0...v1.132.0) (2026-03-03)
+
+### Features
+
+- update data picker adding tooltip list ([#1230](https://github.com/ocean-ds/ocean-web/issues/1230)) ([e0d2fc6](https://github.com/ocean-ds/ocean-web/commit/e0d2fc63ad1a3f592db66155276a147a77bca3b1))
+
+# [1.131.0](https://github.com/ocean-ds/ocean-web/compare/v1.130.0...v1.131.0) (2026-03-03)
+
+### Features
+
+- update data picker ([#1229](https://github.com/ocean-ds/ocean-web/issues/1229)) ([ac6c26c](https://github.com/ocean-ds/ocean-web/commit/ac6c26cd1199f556c0bc3d48f94408b8916c09cd))
+
 # [1.130.0](https://github.com/ocean-ds/ocean-web/compare/v1.129.0...v1.130.0) (2026-02-12)
 
 ### Features

package/Date/DatePicker.d.ts

@@ -3,6 +3,9 @@ declare const DatePickerSingle: React.ForwardRefExoticComponent<{
     label: string | undefined;
     value: string | undefined;
     onSelect: (date: string) => void;
+    disabledDays?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[];
+    disabledDaysMessage?: import("./hooks/useDisabledDaysTooltip").DisabledDaysMessageProp;
+    inline?: boolean;
 } & Omit<import("./types/DateRange.types").DatePickerProps, "onSelect" | "labels" | "values"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePickerSingle;
 //# sourceMappingURL=DatePicker.d.ts.map

package/Date/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/Date/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,QAAA,MAAM,gBAAgB;;;;oIA4GrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/Date/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,QAAA,MAAM,gBAAgB;;;;;;;oIA0IrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/Date/DateRange.d.ts

@@ -5,6 +5,8 @@ declare const DatePickerRange: React.ForwardRefExoticComponent<{
     onSelect: (dates: import("./types/DateRange.types").DatePickerFields) => void;
     editable?: boolean;
     disabled?: boolean;
+    disabledDays?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[];
+    disabledDaysMessage?: import("./hooks/useDisabledDaysTooltip").DisabledDaysMessageProp;
     error?: boolean;
     helperText?: string;
     startsToday?: boolean;

package/Date/DateRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.d.ts","sourceRoot":"","sources":["../../src/Date/DateRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,QAAA,MAAM,eAAe;;;;;;;;;;;kLAgJpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRange.d.ts","sourceRoot":"","sources":["../../src/Date/DateRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,QAAA,MAAM,eAAe;;;;;;;;;;;;;kLAuKpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/Date/components/DisabledDaysTooltip.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TooltipPosition } from '../hooks/useDisabledDaysTooltip';
+export type DisabledDaysTooltipProps = {
+    message: string;
+    show: boolean;
+    position: TooltipPosition;
+    testId?: string;
+};
+declare const DisabledDaysTooltip: React.FC<DisabledDaysTooltipProps>;
+export default DisabledDaysTooltip;
+//# sourceMappingURL=DisabledDaysTooltip.d.ts.map

package/Date/components/DisabledDaysTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledDaysTooltip.d.ts","sourceRoot":"","sources":["../../../src/Date/components/DisabledDaysTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG;IAErC,OAAO,EAAE,MAAM,CAAC;IAEhB,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,EAAE,eAAe,CAAC;IAE1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAsB3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/Date/hooks/useDatePicker.d.ts

@@ -1,3 +1,3 @@
 import { IDatePickerProps, IDatePickerReturn } from '../types/DatePicker.types';
-export default function useDatePickerSingle({ value, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
+export default function useDatePickerSingle({ value, onSelect, startsToday, locale, disabledDaysMessage, }: IDatePickerProps): IDatePickerReturn;
 //# sourceMappingURL=useDatePicker.d.ts.map

package/Date/hooks/useDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDatePicker.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAShF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,GAAG,iBAAiB,CAyHtC"}
+{"version":3,"file":"useDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDatePicker.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAWhF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,mBAAmB,GACpB,EAAE,gBAAgB,GAAG,iBAAiB,CAgItC"}

package/Date/hooks/useDateRange.d.ts

@@ -1,3 +1,3 @@
 import { IDatePickerReturn, IDatePickerProps } from '../types/DateRange.types';
-export default function useDatePicker({ values, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
+export default function useDatePicker({ values, onSelect, startsToday, locale, disabledDaysMessage, }: IDatePickerProps): IDatePickerReturn;
 //# sourceMappingURL=useDateRange.d.ts.map

package/Date/hooks/useDateRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDateRange.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDateRange.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AASlC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,GAAG,iBAAiB,CAiNtC"}
+{"version":3,"file":"useDateRange.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDateRange.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAWlC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,EACN,mBAAmB,GACpB,EAAE,gBAAgB,GAAG,iBAAiB,CAwNtC"}

package/Date/hooks/useDisabledDaysTooltip.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ActiveModifiers } from 'react-day-picker';
+export type DisabledDayMessageEntry = {
+    date: Date;
+    message: string;
+};
+export type DisabledDaysMessageProp = string | DisabledDayMessageEntry[];
+export type TooltipPosition = {
+    top: number;
+    arrowLeft: number;
+} | null;
+interface IUseDisabledDaysTooltipReturn {
+    showDisabledTooltip: boolean;
+    tooltipMessage: string;
+    tooltipPosition: TooltipPosition;
+    createDayClickHandler: (originalHandler: (day: Date) => void) => (day: Date, modifiers: ActiveModifiers) => void;
+    handleCalendarClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare function useDisabledDaysTooltip(disabledDaysMessage?: DisabledDaysMessageProp): IUseDisabledDaysTooltipReturn;
+export default useDisabledDaysTooltip;
+//# sourceMappingURL=useDisabledDaysTooltip.d.ts.map

package/Date/hooks/useDisabledDaysTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisabledDaysTooltip.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDisabledDaysTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,MAAM,uBAAuB,GAAG;IAEpC,IAAI,EAAE,IAAI,CAAC;IAEX,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAOF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,uBAAuB,EAAE,CAAC;AAEzE,MAAM,MAAM,eAAe,GAAG;IAE5B,GAAG,EAAE,MAAM,CAAC;IAEZ,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC;AAET,UAAU,6BAA6B;IACrC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,CACrB,eAAe,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,KACjC,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACxE;AAED,wBAAgB,sBAAsB,CACpC,mBAAmB,CAAC,EAAE,uBAAuB,GAC5C,6BAA6B,CA6F/B;AAED,eAAe,sBAAsB,CAAC"}

package/Date/types/DatePicker.types.d.ts

@@ -1,27 +1,34 @@
 import * as DateFns from 'date-fns';
-import { ClassNames, DateFormatter } from 'react-day-picker';
+import { ClassNames, DateFormatter, Matcher } from 'react-day-picker';
 import { DatePickerProps } from './DateRange.types';
+import { DisabledDaysMessageProp, TooltipPosition } from '../hooks/useDisabledDaysTooltip';
 export type DatePickerSingleProps = {
     label: string | undefined;
     value: string | undefined;
     onSelect: (date: string) => void;
+    disabledDays?: Matcher | Matcher[];
+    disabledDaysMessage?: DisabledDaysMessageProp;
+    inline?: boolean;
 } & Omit<DatePickerProps, 'labels' | 'values' | 'onSelect'>;
-export type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale'>;
+export type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale' | 'disabledDays' | 'disabledDaysMessage'>;
 export type IDatePickerReturn = {
     input1Ref: React.Ref<HTMLInputElement>;
     input2Ref: React.Ref<HTMLInputElement>;
     showDayPicker: boolean;
     selectedDay: Date;
-    CustomStyles: ClassNames;
+    CustomStyles: (inline: boolean) => ClassNames;
     localeOption: DateFns.Locale;
     currentField: string;
     inputPlaceholder: string;
-    handleDayClick: (day: Date) => void;
     inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
     createHandleToggleClick: (fieldId: string) => void;
-    disabledDays: (day: Date) => boolean;
     formatDay: DateFormatter;
     handleCloseByOutside: () => void;
     currentMonthToDisplay: Date | undefined;
+    showDisabledTooltip: boolean;
+    tooltipMessage: string;
+    tooltipPosition: TooltipPosition;
+    handleCalendarClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    handleDayClickWithModifiers: (day: Date, modifiers: import('react-day-picker').ActiveModifiers) => void;
 };
 //# sourceMappingURL=DatePicker.types.d.ts.map

package/Date/types/DatePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.types.d.ts","sourceRoot":"","sources":["../../../src/Date/types/DatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACrB,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CAChD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,UAAU,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvE,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,OAAO,CAAC;IACrC,SAAS,EAAE,aAAa,CAAC;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,qBAAqB,EAAE,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"DatePicker.types.d.ts","sourceRoot":"","sources":["../../../src/Date/types/DatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,uBAAuB,EACvB,eAAe,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAKnC,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACnB,OAAO,GACP,UAAU,GACV,aAAa,GACb,QAAQ,GACR,cAAc,GACd,qBAAqB,CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvE,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,SAAS,EAAE,aAAa,CAAC;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,qBAAqB,EAAE,IAAI,GAAG,SAAS,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,eAAe,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvE,2BAA2B,EAAE,CAC3B,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,OAAO,kBAAkB,EAAE,eAAe,KAClD,IAAI,CAAC;CACX,CAAC"}

package/Date/types/DateRange.types.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import * as DateFns from 'date-fns';
 import { Locale } from 'date-fns';
-import { DateRange, ClassNames, DateFormatter } from 'react-day-picker';
+import { DateRange, ClassNames, DateFormatter, Matcher } from 'react-day-picker';
+import { DisabledDaysMessageProp, TooltipPosition } from '../hooks/useDisabledDaysTooltip';
 export type DatePickerFields = {
     from: string;
     to: string;
@@ -12,13 +13,15 @@ export type DatePickerProps = {
     onSelect: (dates: DatePickerFields) => void;
     editable?: boolean;
     disabled?: boolean;
+    disabledDays?: Matcher | Matcher[];
+    disabledDaysMessage?: DisabledDaysMessageProp;
     error?: boolean;
     helperText?: string;
     startsToday?: boolean;
     locale?: Locale;
     className?: string;
 } & React.ComponentPropsWithoutRef<'div'>;
-export type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale'>;
+export type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale' | 'disabledDaysMessage'>;
 export type IDatePickerReturn = {
     input1Ref: React.Ref<HTMLInputElement>;
     input2Ref: React.Ref<HTMLInputElement>;
@@ -32,9 +35,13 @@ export type IDatePickerReturn = {
     inputPlaceholder: string;
     handleDayMouseEnter: (day: Date) => void;
     handleDayClick: (day: Date) => void;
+    handleDayClickWithModifiers: (day: Date, modifiers: import('react-day-picker').ActiveModifiers) => void;
+    showDisabledTooltip: boolean;
+    tooltipMessage: string;
+    tooltipPosition: TooltipPosition;
+    handleCalendarClick: (event: React.MouseEvent<HTMLDivElement>) => void;
     inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
     createHandleToggleClick: (fieldId: string) => void;
-    disabledDays: (day: Date) => boolean;
     formatDay: DateFormatter;
     handleCloseByOutside: () => void;
     handleDisplayMonth: (displayMonth: Date) => Date;

package/Date/types/DateRange.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.types.d.ts","sourceRoot":"","sources":["../../../src/Date/types/DateRange.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAI5B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAM1B,MAAM,EAAE,gBAAgB,CAAC;IAMzB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAM5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,UAAU,CAAC,EAAE,MAAM,CAAC;IAMpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAMtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,eAAe,EACf,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CACjD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,YAAY,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvE,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,OAAO,CAAC;IACrC,SAAS,EAAE,aAAa,CAAC;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACjD,qBAAqB,EAAE,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"DateRange.types.d.ts","sourceRoot":"","sources":["../../../src/Date/types/DateRange.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAO,EACR,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,uBAAuB,EACvB,eAAe,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAI5B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAM1B,MAAM,EAAE,gBAAgB,CAAC;IAMzB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAM5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAOnC,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAM9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,UAAU,CAAC,EAAE,MAAM,CAAC;IAMpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAMtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,eAAe,EACf,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,qBAAqB,CACzE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,YAAY,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,2BAA2B,EAAE,CAC3B,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,OAAO,kBAAkB,EAAE,eAAe,KAClD,IAAI,CAAC;IACV,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,eAAe,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvE,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,SAAS,EAAE,aAAa,CAAC;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACjD,qBAAqB,EAAE,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/Date/utils/testHelpers.d.ts

@@ -0,0 +1,20 @@
+import { Matcher } from 'react-day-picker';
+export declare function clickDisabledDay(): void;
+export declare function openCalendar(inputTestId?: string): void;
+export declare function expectTooltipToAppear(message: string, timeout?: number): Promise<void>;
+export declare function expectTooltipNotToAppear(): void;
+export declare function expectTooltipNotToAppearAsync(): Promise<void>;
+export declare const commonDisabledDaysProps: {
+    disabledDays: Matcher[];
+    disabledDaysMessage: string;
+};
+export declare function getFirstDisabledDate(): Date;
+export declare const LIST_DISABLED_MESSAGE = "Feriado municipal";
+export declare function makeDisabledDaysListProps(): {
+    disabledDays: Matcher[];
+    disabledDaysMessage: {
+        date: Date;
+        message: string;
+    }[];
+};
+//# sourceMappingURL=testHelpers.d.ts.map

package/Date/utils/testHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testHelpers.d.ts","sourceRoot":"","sources":["../../../src/Date/utils/testHelpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAK3C,wBAAgB,gBAAgB,IAAI,IAAI,CAavC;AAKD,wBAAgB,YAAY,CAAC,WAAW,SAAuB,GAAG,IAAI,CAIrE;AAKD,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,OAAO,SAAO,GACb,OAAO,CAAC,IAAI,CAAC,CASf;AAKD,wBAAgB,wBAAwB,IAAI,IAAI,CAI/C;AAKD,wBAAsB,6BAA6B,IAAI,OAAO,CAAC,IAAI,CAAC,CAMnE;AAED,eAAO,MAAM,uBAAuB;kBACQ,OAAO,EAAE;;CAEpD,CAAC;AAEF,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C;AAGD,eAAO,MAAM,qBAAqB,sBAAsB,CAAC;AAEzD,wBAAgB,yBAAyB,IAAI;IAC3C,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,mBAAmB,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxD,CAOA"}

package/index.es.js

@@ -34590,8 +34590,72 @@ 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 _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 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 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) {
+                lastDisabledClickRef.current = day;
+                return;
+            }
+            lastDisabledClickRef.current = null;
+            setShowDisabledTooltip(false);
+            setTooltipPosition(null);
+            originalHandler(day);
+        };
+    }, []);
+    e.useEffect(function () { return function () {
+        if (tooltipTimerRef.current)
+            clearTimeout(tooltipTimerRef.current);
+    }; }, []);
+    return {
+        showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        createDayClickHandler: createDayClickHandler,
+        handleCalendarClick: handleCalendarClick,
+    };
+}
+
 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 &&
@@ -34602,11 +34666,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, tooltipMessage = _f.tooltipMessage, tooltipPosition = _f.tooltipPosition, createDayClickHandler = _f.createDayClickHandler, handleCalendarClick = _f.handleCalendarClick;
     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);
@@ -34620,14 +34681,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);
     };
@@ -34652,8 +34710,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',
@@ -34669,9 +34729,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,
@@ -34681,13 +34745,16 @@ 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,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
+        handleDayClickWithModifiers: handleDayClickWithModifiers,
     };
 }
 
@@ -34721,34 +34788,49 @@ var DatePickerHeader = function (_a) {
             e.createElement(re, { size: 20 }))));
 };
 
+var DisabledDaysTooltip = function (_a) {
+    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, 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) {
-    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, 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' })));
+    };
     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", 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';
 
 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 &&
@@ -34760,12 +34842,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, 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());
-    e.useEffect(function () {
-        if (values.from === '')
-            setCurrentField('');
-    }, [values.from]);
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
         return updateCache && setDatePickerCache(updateData);
@@ -34803,6 +34882,7 @@ function useDatePicker(_a) {
             }
         }
     };
+    var handleDayClickWithModifiers = createDayClickHandler(handleDayClick);
     var updateCurrentMonth = function (date) {
         var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
         setCurrentMonthToDisplay(parsedDate);
@@ -34836,10 +34916,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);
     };
@@ -34900,6 +34976,10 @@ function useDatePicker(_a) {
         to: toDate,
     };
     var inputPlaceholder = getInputPlaceholder(localeOption);
+    e.useEffect(function () {
+        if (values.from === '')
+            setCurrentField('');
+    }, [values.from]);
     return {
         input1Ref: input1Ref,
         input2Ref: input2Ref,
@@ -34913,9 +34993,13 @@ function useDatePicker(_a) {
         inputPlaceholder: inputPlaceholder,
         handleDayMouseEnter: handleDayMouseEnter,
         handleDayClick: handleDayClick,
+        handleDayClickWithModifiers: handleDayClickWithModifiers,
+        showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
-        disabledDays: disabledDays,
         formatDay: formatDay,
         handleCloseByOutside: handleCloseByOutside,
         handleDisplayMonth: handleDisplayMonth,
@@ -34924,8 +35008,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, 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),
@@ -34940,13 +35030,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" },
-                    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: {
+                !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(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
                             },
-                        } })))))));
+                        } }),
+                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: tooltipMessage, show: showDisabledTooltip, position: tooltipPosition }))))))));
 });
 DatePickerRange.displayName = 'DatePickerRange';