@useblu/ocean-react 1.129.0 → 1.131.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Badge/Badge.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
2
  export type BadgeProps = {
3
3
  variation?: 'tiny' | 'small' | 'medium';
4
- color?: 'brand' | 'complementary' | 'alert' | 'neutral';
4
+ color?: 'brand' | 'complementary' | 'alert' | 'neutral' | 'highlight';
5
5
  count?: number;
6
6
  } & React.ComponentPropsWithoutRef<'div'>;
7
7
  declare const Badge: React.ForwardRefExoticComponent<{
8
8
  variation?: "tiny" | "small" | "medium";
9
- color?: "brand" | "complementary" | "alert" | "neutral";
9
+ color?: "brand" | "complementary" | "alert" | "neutral" | "highlight";
10
10
  count?: number;
11
11
  } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
12
12
  export default Badge;
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAKvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAIxC,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;IAIxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,KAAK;gBAXG,MAAM,GAAG,OAAO,GAAG,QAAQ;YAI/B,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS;YAI/C,MAAM;kLAuCf,CAAC;AAIF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAKvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAIxC,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAItE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,KAAK;gBAXG,MAAM,GAAG,OAAO,GAAG,QAAQ;YAI/B,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW;YAI7D,MAAM;kLAuCf,CAAC;AAIF,eAAe,KAAK,CAAC"}
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.131.0](https://github.com/ocean-ds/ocean-web/compare/v1.130.0...v1.131.0) (2026-03-03)
7
+
8
+ ### Features
9
+
10
+ - update data picker ([#1229](https://github.com/ocean-ds/ocean-web/issues/1229)) ([ac6c26c](https://github.com/ocean-ds/ocean-web/commit/ac6c26cd1199f556c0bc3d48f94408b8916c09cd))
11
+
12
+ # [1.130.0](https://github.com/ocean-ds/ocean-web/compare/v1.129.0...v1.130.0) (2026-02-12)
13
+
14
+ ### Features
15
+
16
+ - add action badge color on cardgroup ([#1226](https://github.com/ocean-ds/ocean-web/issues/1226)) ([527aaa4](https://github.com/ocean-ds/ocean-web/commit/527aaa494be3914d60b3046c63b0763f88909cc2))
17
+
6
18
  # [1.129.0](https://github.com/ocean-ds/ocean-web/compare/v1.128.1...v1.129.0) (2026-02-05)
7
19
 
8
20
  ### Features
@@ -1,8 +1,10 @@
1
+ type BadgeColor = 'brand' | 'complementary' | 'alert' | 'neutral' | 'highlight';
1
2
  interface IActionButtonProps {
2
3
  actionLabel?: string;
3
4
  actionCount?: number;
4
5
  actionClick?: () => void;
6
+ actionBadgeColor?: BadgeColor;
5
7
  }
6
- declare const ActionButton: ({ actionLabel, actionCount, actionClick, }: IActionButtonProps) => JSX.Element;
8
+ declare const ActionButton: ({ actionLabel, actionCount, actionClick, actionBadgeColor, }: IActionButtonProps) => JSX.Element;
7
9
  export default ActionButton;
8
10
  //# sourceMappingURL=ActionButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/CardGroup/ActionButton.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,YAAY,GAAI,4CAInB,kBAAkB,KAAG,GAAG,CAAC,OAsB3B,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/CardGroup/ActionButton.tsx"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG,OAAO,GAAG,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AAEhF,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,UAAU,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,8DAKnB,kBAAkB,KAAG,GAAG,CAAC,OAuB3B,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TagProps } from '../Tag/Tag';
3
+ export type CardGroupActionBadgeColor = 'brand' | 'complementary' | 'alert' | 'neutral' | 'highlight';
3
4
  export interface ICardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
4
5
  title?: string;
5
6
  subtitle?: string;
@@ -9,6 +10,7 @@ export interface ICardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
9
10
  actionLabel?: string;
10
11
  actionCount?: number;
11
12
  actionClick?: () => void;
13
+ actionBadgeColor?: CardGroupActionBadgeColor;
12
14
  children?: React.ReactNode;
13
15
  }
14
16
  declare const CardGroup: React.ForwardRefExoticComponent<ICardGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"CardGroup.d.ts","sourceRoot":"","sources":["../../src/CardGroup/CardGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,wFAqCd,CAAC;AAIF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"CardGroup.d.ts","sourceRoot":"","sources":["../../src/CardGroup/CardGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GACjC,OAAO,GACP,eAAe,GACf,OAAO,GACP,SAAS,GACT,WAAW,CAAC;AAEhB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,wFAuCd,CAAC;AAIF,eAAe,SAAS,CAAC"}
@@ -3,6 +3,9 @@ declare const DatePickerSingle: React.ForwardRefExoticComponent<{
3
3
  label: string | undefined;
4
4
  value: string | undefined;
5
5
  onSelect: (date: string) => void;
6
+ disabledDays?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[];
7
+ disabledDaysMessage?: string;
8
+ inline?: boolean;
6
9
  } & Omit<import("./types/DateRange.types").DatePickerProps, "onSelect" | "labels" | "values"> & React.RefAttributes<HTMLDivElement>>;
7
10
  export default DatePickerSingle;
8
11
  //# sourceMappingURL=DatePicker.d.ts.map
@@ -1 +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"}
1
+ {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/Date/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,QAAA,MAAM,gBAAgB;;;;;;;oIAmIrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
@@ -5,6 +5,8 @@ declare const DatePickerRange: React.ForwardRefExoticComponent<{
5
5
  onSelect: (dates: import("./types/DateRange.types").DatePickerFields) => void;
6
6
  editable?: boolean;
7
7
  disabled?: boolean;
8
+ disabledDays?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[];
9
+ disabledDaysMessage?: string;
8
10
  error?: boolean;
9
11
  helperText?: string;
10
12
  startsToday?: boolean;
@@ -1 +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"}
1
+ {"version":3,"file":"DateRange.d.ts","sourceRoot":"","sources":["../../src/Date/DateRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,QAAA,MAAM,eAAe;;;;;;;;;;;;;kLAgKpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export type DisabledDaysTooltipProps = {
3
+ message: string;
4
+ show: boolean;
5
+ testId?: string;
6
+ };
7
+ declare const DisabledDaysTooltip: React.FC<DisabledDaysTooltipProps>;
8
+ export default DisabledDaysTooltip;
9
+ //# sourceMappingURL=DisabledDaysTooltip.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DisabledDaysTooltip.d.ts","sourceRoot":"","sources":["../../../src/Date/components/DisabledDaysTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,wBAAwB,GAAG;IAErC,OAAO,EAAE,MAAM,CAAC;IAEhB,IAAI,EAAE,OAAO,CAAC;IAEd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAKF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgB3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { IDatePickerProps, IDatePickerReturn } from '../types/DatePicker.types';
2
- export default function useDatePickerSingle({ value, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
2
+ export default function useDatePickerSingle({ value, onSelect, startsToday, locale, disabledDaysMessage, }: IDatePickerProps): IDatePickerReturn;
3
3
  //# sourceMappingURL=useDatePicker.d.ts.map
@@ -1 +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"}
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;AAWhF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,mBAAmB,GACpB,EAAE,gBAAgB,GAAG,iBAAiB,CAwHtC"}
@@ -1,3 +1,3 @@
1
1
  import { IDatePickerReturn, IDatePickerProps } from '../types/DateRange.types';
2
- export default function useDatePicker({ values, onSelect, startsToday, locale, }: IDatePickerProps): IDatePickerReturn;
2
+ export default function useDatePicker({ values, onSelect, startsToday, locale, disabledDaysMessage, }: IDatePickerProps): IDatePickerReturn;
3
3
  //# sourceMappingURL=useDateRange.d.ts.map
@@ -1 +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"}
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;AAWlC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,EACN,mBAAmB,GACpB,EAAE,gBAAgB,GAAG,iBAAiB,CAgNtC"}
@@ -0,0 +1,8 @@
1
+ import { ActiveModifiers } from 'react-day-picker';
2
+ interface IUseDisabledDaysTooltipReturn {
3
+ showDisabledTooltip: boolean;
4
+ createDayClickHandler: (originalHandler: (day: Date) => void) => (day: Date, modifiers: ActiveModifiers) => void;
5
+ }
6
+ export declare function useDisabledDaysTooltip(disabledDaysMessage?: string): IUseDisabledDaysTooltipReturn;
7
+ export default useDisabledDaysTooltip;
8
+ //# sourceMappingURL=useDisabledDaysTooltip.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDisabledDaysTooltip.d.ts","sourceRoot":"","sources":["../../../src/Date/hooks/useDisabledDaysTooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,6BAA6B;IACrC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,CACrB,eAAe,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,KACjC,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,sBAAsB,CACpC,mBAAmB,CAAC,EAAE,MAAM,GAC3B,6BAA6B,CA6C/B;AAED,eAAe,sBAAsB,CAAC"}
@@ -1,27 +1,30 @@
1
1
  import * as DateFns from 'date-fns';
2
- import { ClassNames, DateFormatter } from 'react-day-picker';
2
+ import { ActiveModifiers, ClassNames, DateFormatter, Matcher } from 'react-day-picker';
3
3
  import { DatePickerProps } from './DateRange.types';
4
4
  export type DatePickerSingleProps = {
5
5
  label: string | undefined;
6
6
  value: string | undefined;
7
7
  onSelect: (date: string) => void;
8
+ disabledDays?: Matcher | Matcher[];
9
+ disabledDaysMessage?: string;
10
+ inline?: boolean;
8
11
  } & Omit<DatePickerProps, 'labels' | 'values' | 'onSelect'>;
9
- export type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale'>;
12
+ export type IDatePickerProps = Pick<DatePickerSingleProps, 'value' | 'onSelect' | 'startsToday' | 'locale' | 'disabledDays' | 'disabledDaysMessage'>;
10
13
  export type IDatePickerReturn = {
11
14
  input1Ref: React.Ref<HTMLInputElement>;
12
15
  input2Ref: React.Ref<HTMLInputElement>;
13
16
  showDayPicker: boolean;
14
17
  selectedDay: Date;
15
- CustomStyles: ClassNames;
18
+ CustomStyles: (inline: boolean) => ClassNames;
16
19
  localeOption: DateFns.Locale;
17
20
  currentField: string;
18
21
  inputPlaceholder: string;
19
- handleDayClick: (day: Date) => void;
20
22
  inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
21
23
  createHandleToggleClick: (fieldId: string) => void;
22
- disabledDays: (day: Date) => boolean;
23
24
  formatDay: DateFormatter;
24
25
  handleCloseByOutside: () => void;
25
26
  currentMonthToDisplay: Date | undefined;
27
+ showDisabledTooltip: boolean;
28
+ handleDayClickWithModifiers: (day: Date, modifiers: ActiveModifiers) => void;
26
29
  };
27
30
  //# sourceMappingURL=DatePicker.types.d.ts.map
@@ -1 +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"}
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,EACL,eAAe,EACf,UAAU,EACV,aAAa,EACb,OAAO,EACR,MAAM,kBAAkB,CAAC;AAC1B,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;IACjC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,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,2BAA2B,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;CAC9E,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import * as DateFns from 'date-fns';
3
3
  import { Locale } from 'date-fns';
4
- import { DateRange, ClassNames, DateFormatter } from 'react-day-picker';
4
+ import { DateRange, ClassNames, DateFormatter, Matcher, ActiveModifiers } from 'react-day-picker';
5
5
  export type DatePickerFields = {
6
6
  from: string;
7
7
  to: string;
@@ -12,13 +12,15 @@ export type DatePickerProps = {
12
12
  onSelect: (dates: DatePickerFields) => void;
13
13
  editable?: boolean;
14
14
  disabled?: boolean;
15
+ disabledDays?: Matcher | Matcher[];
16
+ disabledDaysMessage?: string;
15
17
  error?: boolean;
16
18
  helperText?: string;
17
19
  startsToday?: boolean;
18
20
  locale?: Locale;
19
21
  className?: string;
20
22
  } & React.ComponentPropsWithoutRef<'div'>;
21
- export type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale'>;
23
+ export type IDatePickerProps = Pick<DatePickerProps, 'values' | 'onSelect' | 'startsToday' | 'locale' | 'disabledDaysMessage'>;
22
24
  export type IDatePickerReturn = {
23
25
  input1Ref: React.Ref<HTMLInputElement>;
24
26
  input2Ref: React.Ref<HTMLInputElement>;
@@ -32,9 +34,10 @@ export type IDatePickerReturn = {
32
34
  inputPlaceholder: string;
33
35
  handleDayMouseEnter: (day: Date) => void;
34
36
  handleDayClick: (day: Date) => void;
37
+ handleDayClickWithModifiers: (day: Date, modifiers: ActiveModifiers) => void;
38
+ showDisabledTooltip: boolean;
35
39
  inputChange: ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
36
40
  createHandleToggleClick: (fieldId: string) => void;
37
- disabledDays: (day: Date) => boolean;
38
41
  formatDay: DateFormatter;
39
42
  handleCloseByOutside: () => void;
40
43
  handleDisplayMonth: (displayMonth: Date) => Date;
@@ -1 +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"}
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,EACL,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAO,EACP,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAE1B,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;IAMnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAM7B,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,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,mBAAmB,EAAE,OAAO,CAAC;IAC7B,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"}
@@ -0,0 +1,11 @@
1
+ import { Matcher } from 'react-day-picker';
2
+ export declare function clickDisabledDay(): void;
3
+ export declare function openCalendar(inputTestId?: string): void;
4
+ export declare function expectTooltipToAppear(message: string, timeout?: number): Promise<void>;
5
+ export declare function expectTooltipNotToAppear(): void;
6
+ export declare function expectTooltipNotToAppearAsync(): Promise<void>;
7
+ export declare const commonDisabledDaysProps: {
8
+ disabledDays: Matcher[];
9
+ disabledDaysMessage: string;
10
+ };
11
+ //# sourceMappingURL=testHelpers.d.ts.map
@@ -0,0 +1 @@
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;AAKD,eAAO,MAAM,uBAAuB;kBACQ,OAAO,EAAE;;CAEpD,CAAC"}
package/index.es.js CHANGED
@@ -503,22 +503,23 @@ var Header = function (_a) {
503
503
  };
504
504
 
505
505
  var ActionButton = function (_a) {
506
- var actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick;
506
+ var actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, actionBadgeColor = _a.actionBadgeColor;
507
+ var badgeColor = actionBadgeColor !== null && actionBadgeColor !== void 0 ? actionBadgeColor : (actionCount === 0 ? 'neutral' : 'alert');
507
508
  return (e.createElement(e.Fragment, null,
508
509
  e.createElement("hr", { className: "ods-divider" }),
509
510
  e.createElement("button", { onClick: actionClick, type: "button", className: "ods-card-group__action", "aria-label": actionLabel },
510
511
  e.createElement("span", { className: "ods-card-group__action--label" }, actionLabel),
511
512
  e.createElement("div", { className: "ods-card-group__action--right" },
512
- actionCount !== undefined && (e.createElement(Badge, { variation: "medium", color: actionCount === 0 ? 'neutral' : 'alert', count: actionCount })),
513
+ actionCount !== undefined && (e.createElement(Badge, { variation: "medium", color: badgeColor, count: actionCount })),
513
514
  e.createElement(re, { size: 20 })))));
514
515
  };
515
516
 
516
517
  var CardGroup = forwardRef(function (_a, ref) {
517
- var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "count", "tag", "children", "variant"]);
518
+ var title = _a.title, subtitle = _a.subtitle, actionLabel = _a.actionLabel, actionCount = _a.actionCount, actionClick = _a.actionClick, actionBadgeColor = _a.actionBadgeColor, count = _a.count, tag = _a.tag, children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'minimal' : _b, rest = __rest$1(_a, ["title", "subtitle", "actionLabel", "actionCount", "actionClick", "actionBadgeColor", "count", "tag", "children", "variant"]);
518
519
  return (e.createElement("div", __assign$1({ ref: ref }, rest, { "data-testid": "card-group", className: classNames('ods-card-group', "ods-card-group--".concat(variant)) }),
519
520
  (title || subtitle) && (e.createElement(Header, { title: title, subtitle: subtitle, count: count, tag: tag })),
520
521
  children && variant !== 'header' && e.createElement("div", null, children),
521
- actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick }))));
522
+ actionLabel && variant !== 'header' && (e.createElement(ActionButton, { actionLabel: actionLabel, actionCount: actionCount, actionClick: actionClick, actionBadgeColor: actionBadgeColor }))));
522
523
  });
523
524
  CardGroup.displayName = 'CardGroup';
524
525
 
@@ -34589,8 +34590,42 @@ var getInputPlaceholder = function (localeOption) {
34589
34590
  return localeOption.code === 'pt-BR' ? 'dd/mm/aaaa' : 'mm/dd/yyyy';
34590
34591
  };
34591
34592
 
34593
+ function useDisabledDaysTooltip(disabledDaysMessage) {
34594
+ var _a = e.useState(false), showDisabledTooltip = _a[0], setShowDisabledTooltip = _a[1];
34595
+ var tooltipTimerRef = e.useRef(null);
34596
+ var handleDisabledDayClick = e.useCallback(function () {
34597
+ if (disabledDaysMessage) {
34598
+ if (tooltipTimerRef.current)
34599
+ clearTimeout(tooltipTimerRef.current);
34600
+ setShowDisabledTooltip(true);
34601
+ tooltipTimerRef.current = setTimeout(function () { return setShowDisabledTooltip(false); }, 4000);
34602
+ }
34603
+ }, [disabledDaysMessage]);
34604
+ var handleEnabledDayClick = e.useCallback(function () {
34605
+ setShowDisabledTooltip(false);
34606
+ }, []);
34607
+ var createDayClickHandler = e.useCallback(function (originalHandler) {
34608
+ return function (day, modifiers) {
34609
+ if (modifiers.disabled) {
34610
+ handleDisabledDayClick();
34611
+ return;
34612
+ }
34613
+ handleEnabledDayClick();
34614
+ originalHandler(day);
34615
+ };
34616
+ }, [handleDisabledDayClick, handleEnabledDayClick]);
34617
+ e.useEffect(function () { return function () {
34618
+ if (tooltipTimerRef.current)
34619
+ clearTimeout(tooltipTimerRef.current);
34620
+ }; }, []);
34621
+ return {
34622
+ showDisabledTooltip: showDisabledTooltip,
34623
+ createDayClickHandler: createDayClickHandler,
34624
+ };
34625
+ }
34626
+
34592
34627
  function useDatePickerSingle(_a) {
34593
- var value = _a.value, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale;
34628
+ var value = _a.value, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage;
34594
34629
  var localeOption = locale || ptBr;
34595
34630
  var localeDateFormat = localeOption &&
34596
34631
  localeOption.formatLong &&
@@ -34601,11 +34636,8 @@ function useDatePickerSingle(_a) {
34601
34636
  var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
34602
34637
  var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
34603
34638
  var _e = e.useState(''), datePickerCache = _e[0], setDatePickerCache = _e[1];
34639
+ var _f = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _f.showDisabledTooltip, createDayClickHandler = _f.createDayClickHandler;
34604
34640
  var fromDate = parse$1(value || '', localeDateFormat, new Date());
34605
- e.useEffect(function () {
34606
- if (value === '')
34607
- setCurrentField('');
34608
- }, [value]);
34609
34641
  var updateState = function (updateData, updateCache) {
34610
34642
  onSelect(updateData);
34611
34643
  return updateCache && setDatePickerCache(updateData);
@@ -34619,14 +34651,11 @@ function useDatePickerSingle(_a) {
34619
34651
  setShowDayPicker(false);
34620
34652
  }
34621
34653
  };
34654
+ var handleDayClickWithModifiers = createDayClickHandler(handleDayClick);
34622
34655
  var createHandleToggleClick = function (fieldId) {
34623
34656
  setShowDayPicker(!showDayPicker);
34624
34657
  setCurrentField(fieldId);
34625
34658
  };
34626
- var disabledDays = function (day) {
34627
- var startToday = handleValidateStartsToday(startsToday, day);
34628
- return startToday;
34629
- };
34630
34659
  var closeCalendarDelay = function () {
34631
34660
  setTimeout(function () { return setShowDayPicker(false); }, 500);
34632
34661
  };
@@ -34651,8 +34680,10 @@ function useDatePickerSingle(_a) {
34651
34680
  var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
34652
34681
  setCurrentMonthToDisplay(parsedDate);
34653
34682
  };
34654
- var CustomStyles = {
34655
- root: 'ods-date__calendar ods-date_calendar_m1',
34683
+ var CustomStyles = function (inline) { return ({
34684
+ root: inline
34685
+ ? 'ods-date__inline-calendar'
34686
+ : 'ods-date__calendar ods-date_calendar_m1',
34656
34687
  caption: 'ods-date__caption',
34657
34688
  nav_button: 'ods-date__navButtons',
34658
34689
  nav_button_previous: 'ods-date__navButtonPrev-datepicker',
@@ -34668,9 +34699,13 @@ function useDatePickerSingle(_a) {
34668
34699
  day_today: 'ods-date__today',
34669
34700
  day_selected: 'ods-date__selected-datepicker',
34670
34701
  day_disabled: 'ods-date__disabled',
34671
- };
34702
+ }); };
34672
34703
  var selectedDay = fromDate;
34673
34704
  var inputPlaceholder = getInputPlaceholder(localeOption);
34705
+ e.useEffect(function () {
34706
+ if (value === '')
34707
+ setCurrentField('');
34708
+ }, [value]);
34674
34709
  return {
34675
34710
  input1Ref: input1Ref,
34676
34711
  input2Ref: input2Ref,
@@ -34680,13 +34715,13 @@ function useDatePickerSingle(_a) {
34680
34715
  localeOption: localeOption,
34681
34716
  currentField: currentField,
34682
34717
  inputPlaceholder: inputPlaceholder,
34683
- handleDayClick: handleDayClick,
34684
34718
  inputChange: inputChange,
34685
34719
  createHandleToggleClick: createHandleToggleClick,
34686
- disabledDays: disabledDays,
34687
34720
  formatDay: formatDay,
34688
34721
  handleCloseByOutside: handleCloseByOutside,
34689
34722
  currentMonthToDisplay: currentMonthToDisplay,
34723
+ showDisabledTooltip: showDisabledTooltip,
34724
+ handleDayClickWithModifiers: handleDayClickWithModifiers,
34690
34725
  };
34691
34726
  }
34692
34727
 
@@ -34720,34 +34755,48 @@ var DatePickerHeader = function (_a) {
34720
34755
  e.createElement(re, { size: 20 }))));
34721
34756
  };
34722
34757
 
34758
+ var DisabledDaysTooltip = function (_a) {
34759
+ var message = _a.message, show = _a.show, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
34760
+ if (!show)
34761
+ return null;
34762
+ return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId }, message));
34763
+ };
34764
+
34723
34765
  var DatePickerSingle = e.forwardRef(function (_a, ref) {
34724
- 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"]);
34725
- 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;
34766
+ 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"]);
34767
+ var _c = useDatePickerSingle({
34768
+ value: value,
34769
+ onSelect: onSelect,
34770
+ startsToday: startsToday,
34771
+ locale: locale,
34772
+ disabledDaysMessage: disabledDaysMessage,
34773
+ }), input1Ref = _c.input1Ref, showDayPicker = _c.showDayPicker, selectedDay = _c.selectedDay, CustomStyles = _c.CustomStyles, localeOption = _c.localeOption, currentField = _c.currentField, inputPlaceholder = _c.inputPlaceholder, inputChange = _c.inputChange, createHandleToggleClick = _c.createHandleToggleClick, formatDay = _c.formatDay, handleCloseByOutside = _c.handleCloseByOutside, currentMonthToDisplay = _c.currentMonthToDisplay, showDisabledTooltip = _c.showDisabledTooltip, handleDayClickWithModifiers = _c.handleDayClickWithModifiers;
34774
+ var calendarOpen = inline || showDayPicker;
34775
+ var CaptionWithTooltip = function (_a) {
34776
+ var displayMonth = _a.displayMonth;
34777
+ return (e.createElement(e.Fragment, null,
34778
+ DatePickerHeader({ displayMonth: displayMonth, locale: localeOption, mode: 'single' }),
34779
+ disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
34780
+ };
34726
34781
  return (e.createElement("div", null,
34727
- showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
34782
+ calendarOpen && !inline && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
34728
34783
  e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
34729
34784
  e.createElement("div", { className: "ods-date__form-row-datepicker" },
34730
- e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
34785
+ !inline && (e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
34731
34786
  label && e.createElement("label", { htmlFor: "start-date" }, label),
34732
34787
  e.createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
34733
34788
  'date-field-focussed': currentField === 'start-date',
34734
- }), 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 })),
34735
- !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
34736
- 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: {
34737
- Caption: function (_a) {
34738
- var displayMonth = _a.displayMonth;
34739
- return DatePickerHeader({
34740
- displayMonth: displayMonth,
34741
- locale: localeOption,
34742
- mode: 'single',
34743
- });
34744
- },
34789
+ }), 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 }))),
34790
+ inline && label && (e.createElement("div", { className: "ods-date__inline-label" }, label)),
34791
+ !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar" },
34792
+ 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: {
34793
+ Caption: CaptionWithTooltip,
34745
34794
  } })))))));
34746
34795
  });
34747
34796
  DatePickerSingle.displayName = 'DatePickerSingle';
34748
34797
 
34749
34798
  function useDatePicker(_a) {
34750
- var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale;
34799
+ var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale = _a.locale, disabledDaysMessage = _a.disabledDaysMessage;
34751
34800
  var localeOption = locale || ptBr;
34752
34801
  var localeDateFormat = localeOption &&
34753
34802
  localeOption.formatLong &&
@@ -34759,12 +34808,9 @@ function useDatePicker(_a) {
34759
34808
  var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
34760
34809
  var _e = e.useState({ from: '', to: '' }), datePickerCache = _e[0], setDatePickerCache = _e[1];
34761
34810
  var _f = e.useState(false), firstInputClicked = _f[0], setFirstInputClicked = _f[1];
34811
+ var _g = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _g.showDisabledTooltip, createDayClickHandler = _g.createDayClickHandler;
34762
34812
  var fromDate = parse$1(values.from, localeDateFormat, new Date());
34763
34813
  var toDate = parse$1(values.to, localeDateFormat, new Date());
34764
- e.useEffect(function () {
34765
- if (values.from === '')
34766
- setCurrentField('');
34767
- }, [values.from]);
34768
34814
  var updateState = function (updateData, updateCache) {
34769
34815
  onSelect(updateData);
34770
34816
  return updateCache && setDatePickerCache(updateData);
@@ -34802,6 +34848,7 @@ function useDatePicker(_a) {
34802
34848
  }
34803
34849
  }
34804
34850
  };
34851
+ var handleDayClickWithModifiers = createDayClickHandler(handleDayClick);
34805
34852
  var updateCurrentMonth = function (date) {
34806
34853
  var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
34807
34854
  setCurrentMonthToDisplay(parsedDate);
@@ -34835,10 +34882,6 @@ function useDatePicker(_a) {
34835
34882
  setShowDayPicker(!showDayPicker);
34836
34883
  setCurrentField(fieldId);
34837
34884
  };
34838
- var disabledDays = function (day) {
34839
- var startToday = handleValidateStartsToday(startsToday, day);
34840
- return startToday || (currentField === 'end-date' && day < fromDate);
34841
- };
34842
34885
  var closeCalendarDelay = function () {
34843
34886
  setTimeout(function () { return setShowDayPicker(false); }, 500);
34844
34887
  };
@@ -34899,6 +34942,10 @@ function useDatePicker(_a) {
34899
34942
  to: toDate,
34900
34943
  };
34901
34944
  var inputPlaceholder = getInputPlaceholder(localeOption);
34945
+ e.useEffect(function () {
34946
+ if (values.from === '')
34947
+ setCurrentField('');
34948
+ }, [values.from]);
34902
34949
  return {
34903
34950
  input1Ref: input1Ref,
34904
34951
  input2Ref: input2Ref,
@@ -34912,9 +34959,10 @@ function useDatePicker(_a) {
34912
34959
  inputPlaceholder: inputPlaceholder,
34913
34960
  handleDayMouseEnter: handleDayMouseEnter,
34914
34961
  handleDayClick: handleDayClick,
34962
+ handleDayClickWithModifiers: handleDayClickWithModifiers,
34963
+ showDisabledTooltip: showDisabledTooltip,
34915
34964
  inputChange: inputChange,
34916
34965
  createHandleToggleClick: createHandleToggleClick,
34917
- disabledDays: disabledDays,
34918
34966
  formatDay: formatDay,
34919
34967
  handleCloseByOutside: handleCloseByOutside,
34920
34968
  handleDisplayMonth: handleDisplayMonth,
@@ -34923,8 +34971,14 @@ function useDatePicker(_a) {
34923
34971
  }
34924
34972
 
34925
34973
  var DatePickerRange = e.forwardRef(function (_a, ref) {
34926
- 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"]);
34927
- 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;
34974
+ 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"]);
34975
+ var _b = useDatePicker({
34976
+ values: values,
34977
+ onSelect: onSelect,
34978
+ startsToday: startsToday,
34979
+ locale: locale,
34980
+ disabledDaysMessage: disabledDaysMessage,
34981
+ }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClickWithModifiers = _b.handleDayClickWithModifiers, showDisabledTooltip = _b.showDisabledTooltip, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
34928
34982
  return (e.createElement("div", null,
34929
34983
  showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
34930
34984
  e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
@@ -34940,10 +34994,12 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
34940
34994
  'date-field-focussed': currentField === 'end-date',
34941
34995
  }), 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 })),
34942
34996
  !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
34943
- 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: {
34997
+ 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: {
34944
34998
  Caption: function (_a) {
34945
34999
  var displayMonth = _a.displayMonth;
34946
- return (e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
35000
+ return (e.createElement(e.Fragment, null,
35001
+ e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }),
35002
+ disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
34947
35003
  },
34948
35004
  } })))))));
34949
35005
  });