@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 +2 -2
- package/Badge/Badge.d.ts.map +1 -1
- package/CHANGELOG.md +12 -0
- package/CardGroup/ActionButton.d.ts +3 -1
- package/CardGroup/ActionButton.d.ts.map +1 -1
- package/CardGroup/CardGroup.d.ts +2 -0
- package/CardGroup/CardGroup.d.ts.map +1 -1
- package/Date/DatePicker.d.ts +3 -0
- package/Date/DatePicker.d.ts.map +1 -1
- package/Date/DateRange.d.ts +2 -0
- package/Date/DateRange.d.ts.map +1 -1
- package/Date/components/DisabledDaysTooltip.d.ts +9 -0
- package/Date/components/DisabledDaysTooltip.d.ts.map +1 -0
- package/Date/hooks/useDatePicker.d.ts +1 -1
- package/Date/hooks/useDatePicker.d.ts.map +1 -1
- package/Date/hooks/useDateRange.d.ts +1 -1
- package/Date/hooks/useDateRange.d.ts.map +1 -1
- package/Date/hooks/useDisabledDaysTooltip.d.ts +8 -0
- package/Date/hooks/useDisabledDaysTooltip.d.ts.map +1 -0
- package/Date/types/DatePicker.types.d.ts +8 -5
- package/Date/types/DatePicker.types.d.ts.map +1 -1
- package/Date/types/DateRange.types.d.ts +6 -3
- package/Date/types/DateRange.types.d.ts.map +1 -1
- package/Date/utils/testHelpers.d.ts +11 -0
- package/Date/utils/testHelpers.d.ts.map +1 -0
- package/index.es.js +103 -47
- package/index.es.js.map +1 -1
- package/index.js +103 -47
- package/index.js.map +1 -1
- package/package.json +1 -1
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;
|
package/Badge/Badge.d.ts.map
CHANGED
|
@@ -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;
|
|
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;
|
|
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"}
|
package/CardGroup/CardGroup.d.ts
CHANGED
|
@@ -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,
|
|
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"}
|
package/Date/DatePicker.d.ts
CHANGED
|
@@ -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
|
package/Date/DatePicker.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/Date/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,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"}
|
package/Date/DateRange.d.ts
CHANGED
|
@@ -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;
|
package/Date/DateRange.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRange.d.ts","sourceRoot":"","sources":["../../src/Date/DateRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,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;
|
|
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;
|
|
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,
|
|
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,
|
|
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:
|
|
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:
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
34736
|
-
|
|
34737
|
-
|
|
34738
|
-
|
|
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({
|
|
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:
|
|
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(
|
|
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
|
});
|