@drivy/cobalt 0.36.0 → 0.37.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.
Files changed (26) hide show
  1. package/cjs/tokens/theme.js +8 -2
  2. package/cjs/tokens/theme.js.map +1 -1
  3. package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js +29 -11
  4. package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js.map +1 -1
  5. package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js +21 -17
  6. package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js.map +1 -1
  7. package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js +155 -39
  8. package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js.map +1 -1
  9. package/components/Calendar/CalendarRangePicker/DayTooltip.js +23 -0
  10. package/components/Calendar/CalendarRangePicker/DayTooltip.js.map +1 -0
  11. package/components/Calendar/utils.js +6 -4
  12. package/components/Calendar/utils.js.map +1 -1
  13. package/package.json +2 -2
  14. package/styles/components/Calendar/CalendarRangePicker/index.scss +156 -186
  15. package/styles/core/_colors-map.scss +8 -2
  16. package/styles/core/default-theme.scss +6 -0
  17. package/styles/core/theme.scss +12 -0
  18. package/tokens/theme.js +8 -2
  19. package/tokens/theme.js.map +1 -1
  20. package/types/components/Calendar/CalendarRangePicker/CalendarRangePicker.d.ts +22 -5
  21. package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.d.ts +8 -8
  22. package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.d.ts +9 -4
  23. package/types/components/Calendar/CalendarRangePicker/DayTooltip.d.ts +21 -0
  24. package/types/components/Calendar/utils.d.ts +2 -2
  25. package/types/tokens/index.d.ts +6 -0
  26. package/utilities.css +30 -0
@@ -1,22 +1,22 @@
1
1
  import React from "react";
2
- type Props = {
2
+ type CalendarRangePickerDayPropsType = {
3
3
  date: Date;
4
4
  isEditingStartDate: boolean;
5
5
  isEditingEndDate: boolean;
6
6
  isToday?: boolean;
7
- isFirstDayOfMonth?: boolean;
8
- isLastDayOfMonth?: boolean;
9
7
  isStartDay?: boolean;
10
8
  isEndDay?: boolean;
11
- selected?: boolean;
9
+ isSelected?: boolean;
10
+ isInvalid?: boolean;
11
+ isDisabled?: boolean;
12
12
  isRange?: boolean;
13
- invalid?: boolean;
14
- disabled?: boolean;
15
- subdued?: boolean;
13
+ isActive?: boolean;
14
+ hasNotification?: boolean;
15
+ tooltipMessage?: string;
16
16
  onSelect: (date: Date) => void;
17
17
  onMouseEnter: (date: Date, disabled: boolean) => void;
18
18
  onMouseLeave?: (date: Date) => void;
19
19
  };
20
- declare function CalendarRangePickerDay({ date, isToday, isFirstDayOfMonth, isLastDayOfMonth, isStartDay, isEndDay, isRange, selected, subdued, disabled, invalid, onSelect, onMouseEnter, onMouseLeave, }: Props): React.JSX.Element;
20
+ declare function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelected, isDisabled, isInvalid, isRange, isActive, hasNotification, tooltipMessage, onSelect, onMouseEnter, onMouseLeave, }: CalendarRangePickerDayPropsType): React.JSX.Element;
21
21
  declare const MemoizedComponent: React.MemoExoticComponent<typeof CalendarRangePickerDay>;
22
22
  export { MemoizedComponent as CalendarRangePickerDay };
@@ -1,17 +1,22 @@
1
1
  import React from "react";
2
- type Props = {
2
+ import { CalendarRangePickerPropsType, DayStatusInterface, RangeConstraintsInterface } from "./CalendarRangePicker";
3
+ type CalendarRangePickerMonthPropsType = {
3
4
  date: Date;
4
5
  startDate?: Date;
5
6
  endDate?: Date;
6
7
  onSelectDate: (date: Date, isOutOfRange?: boolean) => void;
7
- onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void;
8
+ onChangeDate: (date: Date, status: DayStatusInterface) => void;
8
9
  onLeaveDate?: (date: Date) => void;
9
10
  isEditingStartDate?: boolean;
10
11
  isEditingEndDate?: boolean;
11
- rangeLimit?: number;
12
12
  firstAvailableDate: Date;
13
13
  lastAvailableDate?: Date;
14
+ isDayDisabledFn?: CalendarRangePickerPropsType["isDayDisabledFn"];
15
+ hasDayNotificationFn?: CalendarRangePickerPropsType["hasDayNotificationFn"];
16
+ isDayInvalidForSelectionFn?: CalendarRangePickerPropsType["isDayInvalidForSelectionFn"];
17
+ rangeConstraints?: RangeConstraintsInterface;
18
+ isSundayFirstDayOfWeek?: boolean;
14
19
  locale: any;
15
20
  };
16
- export declare function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate, isEditingEndDate, rangeLimit, firstAvailableDate, lastAvailableDate, locale, }: Props): React.JSX.Element;
21
+ export declare function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate, isEditingEndDate, firstAvailableDate, lastAvailableDate, isDayDisabledFn, isDayInvalidForSelectionFn, hasDayNotificationFn, rangeConstraints, isSundayFirstDayOfWeek, locale, }: CalendarRangePickerMonthPropsType): React.JSX.Element;
17
22
  export {};
@@ -0,0 +1,21 @@
1
+ import React from "react";
2
+ import { TippyProps } from "@tippyjs/react";
3
+ declare const DayTooltip: {
4
+ (props: TippyProps): React.JSX.Element;
5
+ defaultProps: {
6
+ animation: string;
7
+ arrow: boolean;
8
+ interactive: boolean;
9
+ interactiveBorder: number;
10
+ placement: string;
11
+ theme: string;
12
+ delay: number[];
13
+ duration: number[];
14
+ maxWidth: number;
15
+ offset: number[];
16
+ sticky: boolean;
17
+ plugins: import("tippy.js").Sticky[];
18
+ appendTo: HTMLElement;
19
+ };
20
+ };
21
+ export default DayTooltip;
@@ -1,2 +1,2 @@
1
- export declare const getWeekDays: () => Date[];
2
- export declare const getMonthDaysByWeeks: (monthDate: Date) => Date[][];
1
+ export declare const getWeekDays: (isSundayFirstDayOfWeek?: boolean) => Date[];
2
+ export declare const getMonthDaysByWeeks: (monthDate: Date, isSundayFirstDayOfWeek?: boolean) => Date[][];
@@ -531,6 +531,10 @@ export declare const theme: {
531
531
  driver: string;
532
532
  owner: string;
533
533
  inversed: string;
534
+ disabled: string;
535
+ onAccent: string;
536
+ onError: string;
537
+ onSuccess: string;
534
538
  };
535
539
  buttonBackground: {
536
540
  selected: string;
@@ -682,6 +686,8 @@ export declare const theme: {
682
686
  errorAlt: string;
683
687
  success: string;
684
688
  successAlt: string;
689
+ onAccent: string;
690
+ onError: string;
685
691
  };
686
692
  fill: {
687
693
  base: string;
package/utilities.css CHANGED
@@ -161,6 +161,10 @@
161
161
  --c-text-driver: var(--c-navy-700);
162
162
  --c-text-owner: var(--c-white);
163
163
  --c-text-inversed: var(--c-white);
164
+ --c-text-disabled: var(--c-navy-200);
165
+ --c-text-onAccent: var(--c-white);
166
+ --c-text-onError: var(--c-white);
167
+ --c-text-onSuccess: var(--c-white);
164
168
  --c-buttonBackground-selected: var(--c-purple-100);
165
169
  --c-buttonBackground-destructiveInteractive: var(--c-red-100);
166
170
  --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
@@ -258,6 +262,8 @@
258
262
  --c-stroke-errorAlt: var(--c-red-500);
259
263
  --c-stroke-success: var(--c-green-500);
260
264
  --c-stroke-successAlt: var(--c-green-500);
265
+ --c-stroke-onAccent: var(--c-white);
266
+ --c-stroke-onError: var(--c-white);
261
267
  --c-fill-base: var(--c-navy-500);
262
268
  --c-fill-secondary: var(--c-yellow-500);
263
269
  --c-fill-subdued: var(--c-navy-100);
@@ -5222,6 +5228,14 @@
5222
5228
  border-color: var(--c-stroke-successAlt);
5223
5229
  }
5224
5230
 
5231
+ .c-border-onAccent {
5232
+ border-color: var(--c-stroke-onAccent);
5233
+ }
5234
+
5235
+ .c-border-onError {
5236
+ border-color: var(--c-stroke-onError);
5237
+ }
5238
+
5225
5239
  .c-bg-primary {
5226
5240
  background-color: var(--c-background-primary);
5227
5241
  }
@@ -5514,6 +5528,22 @@
5514
5528
  color: var(--c-text-inversed);
5515
5529
  }
5516
5530
 
5531
+ .c-text-disabled {
5532
+ color: var(--c-text-disabled);
5533
+ }
5534
+
5535
+ .c-text-onAccent {
5536
+ color: var(--c-text-onAccent);
5537
+ }
5538
+
5539
+ .c-text-onError {
5540
+ color: var(--c-text-onError);
5541
+ }
5542
+
5543
+ .c-text-onSuccess {
5544
+ color: var(--c-text-onSuccess);
5545
+ }
5546
+
5517
5547
  @media (min-width: 480px) {
5518
5548
  .xs\:c-sr-only {
5519
5549
  position: absolute;