@useblu/ocean-react 1.50.0 → 1.52.1

package/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { MergeElementProps } from '../_util/type';
 export declare type ButtonProps<P extends React.ElementType = 'button'> = {
     component?: P;
 } & MergeElementProps<P, {
-    variant?: 'primary' | 'primaryCritical' | 'secondary' | 'text' | 'textCritical' | 'inverse';
+    variant?: 'primary' | 'primaryCritical' | 'secondary' | 'secondaryCritical' | 'text' | 'textCritical' | 'textTertiary' | 'textTertiaryCritical' | 'inverse';
     size?: 'sm' | 'md' | 'lg';
     blocked?: boolean;
     loading?: boolean;

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,oBAAY,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAKhE,SAAS,CAAC,EAAE,CAAC,CAAC;CACf,GAAG,iBAAiB,CACnB,CAAC,EACD;IAKE,OAAO,CAAC,EACJ,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,MAAM,GACN,cAAc,GACd,SAAS,CAAC;IAKd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAK1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF,iBAAS,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACxD,EACE,QAAQ,EACR,SAAS,EACT,IAAW,EACX,OAAmB,EACnB,OAAe,EACf,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,sEA4BlC;AAED,QAAA,MAAM,MAAM,mBAA+D,CAAC;AAE5E,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,oBAAY,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAKhE,SAAS,CAAC,EAAE,CAAC,CAAC;CACf,GAAG,iBAAiB,CACnB,CAAC,EACD;IAKE,OAAO,CAAC,EACJ,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,mBAAmB,GACnB,MAAM,GACN,cAAc,GACd,cAAc,GACd,sBAAsB,GACtB,SAAS,CAAC;IAKd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAK1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF,iBAAS,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACxD,EACE,QAAQ,EACR,SAAS,EACT,IAAW,EACX,OAAmB,EACnB,OAAe,EACf,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,sEA4BlC;AAED,QAAA,MAAM,MAAM,mBAA+D,CAAC;AAE5E,eAAe,MAAM,CAAC"}

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.52.1](https://github.com/ocean-ds/ocean-web/compare/v1.52.0...v1.52.1) (2024-01-22)
+
+### Bug Fixes
+
+- adjusts on Date component ([#1088](https://github.com/ocean-ds/ocean-web/issues/1088)) ([23bd270](https://github.com/ocean-ds/ocean-web/commit/23bd2701aa16e976ee88ac05f02cfb08929fb932))
+
+# [1.52.0](https://github.com/ocean-ds/ocean-web/compare/v1.51.0...v1.52.0) (2023-11-14)
+
+### Features
+
+- create button variants ([#1086](https://github.com/ocean-ds/ocean-web/issues/1086)) ([92551ad](https://github.com/ocean-ds/ocean-web/commit/92551ad2c1cc94cd7910d10a62dad0e1e63ac2ce))
+
 # [1.50.0](https://github.com/ocean-ds/ocean-web/compare/v1.49.0...v1.50.0) (2023-09-27)
 
 ### Features

package/Date/DateHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateHeader.d.ts","sourceRoot":"","sources":["../../src/Date/DateHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAU,MAAM,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAK/D,aAAK,MAAM,GAAG,YAAY,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,CAAC;AAE3E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwCtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DateHeader.d.ts","sourceRoot":"","sources":["../../src/Date/DateHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAU,MAAM,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAK/D,aAAK,MAAM,GAAG,YAAY,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,CAAC;AAE3E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAuDtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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;;;;oIA2GrB,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;AAa1B,QAAA,MAAM,gBAAgB;;;;oIA6GrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

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;;;;;;;;;;;kLA4IpB,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;AAa1B,QAAA,MAAM,eAAe;;;;;;;;;;;kLAkJpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/Date/hooks/useDatePicker.d.ts

@@ -1,24 +1,3 @@
-import React from 'react';
-import * as DateFns from 'date-fns';
-import { ClassNames, DateFormatter } from 'react-day-picker';
-import { DatePickerSingleProps } from '../types/DatePicker.types';
-declare type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale'>;
-declare type IDatePickerReturn = {
-    input1Ref: React.Ref<HTMLInputElement>;
-    input2Ref: React.Ref<HTMLInputElement>;
-    showDayPicker: boolean;
-    selectedDay: Date;
-    CustomStyles: 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;
-};
+import { IDatePickerProps, IDatePickerReturn } from '../types/DatePicker.types';
 export default function useDatePickerSingle({ value, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
-export {};
 //# 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAIpC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,aAAK,gBAAgB,GAAG,IAAI,CAC1B,qBAAqB,EACrB,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CAChD,CAAC;AAEF,aAAK,iBAAiB,GAAG;IACvB,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;CAClC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,GAAG,iBAAiB,CA+GtC"}
+{"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"}

package/Date/hooks/useDateRange.d.ts

@@ -1,27 +1,3 @@
-import React from 'react';
-import * as DateFns from 'date-fns';
-import { DateRange, ClassNames, DateFormatter } from 'react-day-picker';
-import { DatePickerProps } from '../types/DateRange.types';
-declare type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale'>;
-declare type IDatePickerReturn = {
-    input1Ref: React.Ref<HTMLInputElement>;
-    input2Ref: React.Ref<HTMLInputElement>;
-    showDayPicker: boolean;
-    fromDate: Date;
-    toDate: Date;
-    selectedDays: DateRange;
-    CustomStyles: ClassNames;
-    localeOption: DateFns.Locale;
-    currentField: string;
-    inputPlaceholder: string;
-    handleDayMouseEnter: (day: Date) => void;
-    handleDayClick: (day: Date) => void;
-    inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
-    createHandleToggleClick: (fieldId: string) => void;
-    disabledDays: (day: Date) => boolean;
-    formatDay: DateFormatter;
-    handleCloseByOutside: () => void;
-};
+import { IDatePickerReturn, IDatePickerProps } from '../types/DateRange.types';
 export default function useDatePicker({ values, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
-export {};
 //# 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAIpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAoB,MAAM,0BAA0B,CAAC;AAS7E,aAAK,gBAAgB,GAAG,IAAI,CAC1B,eAAe,EACf,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CACjD,CAAC;AAEF,aAAK,iBAAiB,GAAG;IACvB,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;CAClC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,GAAG,iBAAiB,CAmKtC"}
+{"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"}

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

@@ -1,7 +1,28 @@
+/// <reference types="react" />
+import * as DateFns from 'date-fns';
+import { ClassNames, DateFormatter } from 'react-day-picker';
 import { DatePickerProps } from './DateRange.types';
 export declare type DatePickerSingleProps = {
     label: string | undefined;
     value: string | undefined;
     onSelect: (date: string) => void;
 } & Omit<DatePickerProps, 'labels' | 'values' | 'onSelect'>;
+export declare type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale'>;
+export declare type IDatePickerReturn = {
+    input1Ref: React.Ref<HTMLInputElement>;
+    input2Ref: React.Ref<HTMLInputElement>;
+    showDayPicker: boolean;
+    selectedDay: Date;
+    CustomStyles: 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;
+};
 //# 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,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,oBAAY,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"}
+{"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,oBAAY,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,oBAAY,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACrB,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CAChD,CAAC;AAEF,oBAAY,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"}

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

@@ -1,5 +1,7 @@
 import React from 'react';
+import * as DateFns from 'date-fns';
 import { Locale } from 'date-fns';
+import { DateRange, ClassNames, DateFormatter } from 'react-day-picker';
 export declare type DatePickerFields = {
     from: string;
     to: string;
@@ -16,4 +18,26 @@ export declare type DatePickerProps = {
     locale?: Locale;
     className?: string;
 } & React.ComponentPropsWithoutRef<'div'>;
+export declare type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale'>;
+export declare type IDatePickerReturn = {
+    input1Ref: React.Ref<HTMLInputElement>;
+    input2Ref: React.Ref<HTMLInputElement>;
+    showDayPicker: boolean;
+    fromDate: Date;
+    toDate: Date;
+    selectedDays: DateRange;
+    CustomStyles: ClassNames;
+    localeOption: DateFns.Locale;
+    currentField: string;
+    inputPlaceholder: string;
+    handleDayMouseEnter: (day: Date) => void;
+    handleDayClick: (day: Date) => void;
+    inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
+    createHandleToggleClick: (fieldId: string) => void;
+    disabledDays: (day: Date) => boolean;
+    formatDay: DateFormatter;
+    handleCloseByOutside: () => void;
+    handleDisplayMonth: (displayMonth: Date) => Date;
+    currentMonthToDisplay: Date | undefined;
+};
 //# sourceMappingURL=DateRange.types.d.ts.map

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;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,oBAAY,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"}
+{"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,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,oBAAY,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,oBAAY,gBAAgB,GAAG,IAAI,CACjC,eAAe,EACf,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,CACjD,CAAC;AAEF,oBAAY,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"}

package/index.es.js

@@ -33973,7 +33973,8 @@ function useDatePickerSingle(_a) {
     var input2Ref = e.useRef(null);
     var _b = e.useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
     var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
-    var _d = e.useState(''), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
+    var _e = e.useState(''), datePickerCache = _e[0], setDatePickerCache = _e[1];
     var fromDate = parse$1(value || '', localeDateFormat, new Date());
     e.useEffect(function () {
         if (value === '')
@@ -33986,6 +33987,7 @@ function useDatePickerSingle(_a) {
     var handleDayClick = function (day) {
         if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
             var formattedDay = format(day, localeDateFormat);
+            updateCurrentMonth(formattedDay);
             updateState(formattedDay, true);
             setCurrentField('');
             setShowDayPicker(false);
@@ -34019,6 +34021,10 @@ function useDatePickerSingle(_a) {
                 updateState(datePickerCache);
         }
     };
+    var updateCurrentMonth = function (date) {
+        var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
+        setCurrentMonthToDisplay(parsedDate);
+    };
     var CustomStyles = {
         root: 'ods-date__calendar ods-date_calendar_m1',
         caption: 'ods-date__caption',
@@ -34053,30 +34059,44 @@ function useDatePickerSingle(_a) {
         createHandleToggleClick: createHandleToggleClick,
         disabledDays: disabledDays,
         formatDay: formatDay,
-        handleCloseByOutside: handleCloseByOutside
+        handleCloseByOutside: handleCloseByOutside,
+        currentMonthToDisplay: currentMonthToDisplay
     };
 }
 
 var DatePickerHeader = function (_a) {
     var displayMonth = _a.displayMonth, locale = _a.locale, _b = _a.mode, mode = _b === void 0 ? 'range' : _b;
     var _c = useNavigation(), goToMonth = _c.goToMonth, nextMonth = _c.nextMonth, previousMonth = _c.previousMonth;
+    var _d = useState(displayMonth), selectedMonth = _d[0], setSelectedMonth = _d[1];
+    var handlePreviousMonthClick = function () {
+        if (previousMonth) {
+            goToMonth(previousMonth);
+            setSelectedMonth(previousMonth);
+        }
+    };
+    var handleNextMonthClick = function () {
+        if (nextMonth) {
+            goToMonth(nextMonth);
+            setSelectedMonth(nextMonth);
+        }
+    };
     return (e.createElement("div", { className: "ods-date__caption" },
         e.createElement(IconButton, { type: "button", "data-testid": "calendar-left-arrow", size: "sm", className: classNames('ods-date__navButtons', {
                 'ods-date__navButtonPrev': mode === 'range',
                 'ods-date__navButtonPrev-datepicker': mode === 'single'
-            }), disabled: !previousMonth, onClick: function () { return previousMonth && goToMonth(previousMonth); } },
+            }), disabled: !previousMonth, onClick: handlePreviousMonthClick },
             e.createElement($, { size: 20 })),
-        e.createElement("h2", { "data-testid": "calendar-caption-month" }, format(displayMonth, 'MMMM yyyy', { locale: locale })),
+        e.createElement("h2", { "data-testid": "calendar-caption-month" }, format(selectedMonth, 'MMMM yyyy', { locale: locale })),
         e.createElement(IconButton, { type: "button", "data-testid": "calendar-right-arrow", size: "sm", className: classNames('ods-date__navButtons', {
                 'ods-date__navButtonNext': mode === 'range',
                 'ods-date__navButtonNext-datepicker': mode === 'single'
-            }), disabled: !nextMonth, onClick: function () { return nextMonth && goToMonth(nextMonth); } },
+            }), disabled: !nextMonth, onClick: handleNextMonthClick },
             e.createElement(ee, { size: 20 }))));
 };
 
 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;
+    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;
     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),
@@ -34088,7 +34108,7 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
                         }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && 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, components: {
+                    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({
@@ -34111,7 +34131,9 @@ function useDatePicker(_a) {
     var input2Ref = e.useRef(null);
     var _b = e.useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
     var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
-    var _d = e.useState({ from: '', to: '' }), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    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 fromDate = parse$1(values.from, localeDateFormat, new Date());
     var toDate = parse$1(values.to, localeDateFormat, new Date());
     e.useEffect(function () {
@@ -34133,6 +34155,7 @@ function useDatePicker(_a) {
         if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
             var formattedDay = format(day, localeDateFormat);
             if (currentField === 'start-date') {
+                updateCurrentMonth(formattedDay);
                 if (day > toDate) {
                     updateState({ from: formattedDay, to: '' }, true);
                 }
@@ -34154,7 +34177,36 @@ function useDatePicker(_a) {
             }
         }
     };
+    var updateCurrentMonth = function (date) {
+        var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
+        setCurrentMonthToDisplay(parsedDate);
+    };
+    var isValidDate = function (date) {
+        return date instanceof Date && !Number.isNaN(date.getTime());
+    };
+    var getSelectedDate = function () {
+        return firstInputClicked ? selectedDays.from : selectedDays.to;
+    };
+    var handleDisplayMonth = function (displayMonth) {
+        var selectedDate = getSelectedDate();
+        var monthToShowOnHeader = isValidDate(selectedDate)
+            ? selectedDate
+            : undefined;
+        return monthToShowOnHeader || displayMonth;
+    };
     var createHandleToggleClick = function (fieldId) {
+        var isValidStartDate = fieldId === 'start-date' && isValidDate(selectedDays.from);
+        var isValidEndDate = fieldId === 'end-date' && isValidDate(selectedDays.to);
+        var updateValuesAndInputClicked = function (date, isFirstInputClicked) {
+            updateCurrentMonth(date);
+            setFirstInputClicked(isFirstInputClicked);
+        };
+        if (isValidStartDate) {
+            updateValuesAndInputClicked(values.from, true);
+        }
+        else if (isValidEndDate) {
+            updateValuesAndInputClicked(values.to, false);
+        }
         setShowDayPicker(!showDayPicker);
         setCurrentField(fieldId);
     };
@@ -34239,13 +34291,15 @@ function useDatePicker(_a) {
         createHandleToggleClick: createHandleToggleClick,
         disabledDays: disabledDays,
         formatDay: formatDay,
-        handleCloseByOutside: handleCloseByOutside
+        handleCloseByOutside: handleCloseByOutside,
+        handleDisplayMonth: handleDisplayMonth,
+        currentMonthToDisplay: currentMonthToDisplay
     };
 }
 
 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, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside;
+    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;
     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),
@@ -34263,10 +34317,10 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
                         }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && 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, components: {
+                    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: {
                             Caption: function (_a) {
                                 var displayMonth = _a.displayMonth;
-                                return DatePickerHeader({ displayMonth: displayMonth, locale: localeOption });
+                                return (e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
                             }
                         } })))))));
 });