@toptal/picasso-calendar 2.0.1 → 3.0.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/dist-package/src/Calendar/Calendar.d.ts.map +1 -1
- package/dist-package/src/Calendar/Calendar.js +9 -13
- package/dist-package/src/Calendar/Calendar.js.map +1 -1
- package/dist-package/src/CalendarContainer/CalendarContainer.d.ts.map +1 -1
- package/dist-package/src/CalendarContainer/CalendarContainer.js +2 -11
- package/dist-package/src/CalendarContainer/CalendarContainer.js.map +1 -1
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.d.ts.map +1 -1
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js +4 -8
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js.map +1 -1
- package/dist-package/src/CalendarDay/CalendarDay.d.ts.map +1 -1
- package/dist-package/src/CalendarDay/CalendarDay.js +31 -15
- package/dist-package/src/CalendarDay/CalendarDay.js.map +1 -1
- package/dist-package/src/CalendarDay/types.d.ts +11 -0
- package/dist-package/src/CalendarDay/types.d.ts.map +1 -0
- package/dist-package/src/CalendarDay/types.js +2 -0
- package/dist-package/src/CalendarDay/types.js.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-background-color-class.d.ts +3 -0
- package/dist-package/src/CalendarDay/utils/get-background-color-class.d.ts.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-background-color-class.js +14 -0
- package/dist-package/src/CalendarDay/utils/get-background-color-class.js.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-border-classes.d.ts +3 -0
- package/dist-package/src/CalendarDay/utils/get-border-classes.d.ts.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-border-classes.js +14 -0
- package/dist-package/src/CalendarDay/utils/get-border-classes.js.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.d.ts +3 -0
- package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.d.ts.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.js +29 -0
- package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.js.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-text-color-class.d.ts +3 -0
- package/dist-package/src/CalendarDay/utils/get-text-color-class.d.ts.map +1 -0
- package/dist-package/src/CalendarDay/utils/get-text-color-class.js +17 -0
- package/dist-package/src/CalendarDay/utils/get-text-color-class.js.map +1 -0
- package/dist-package/src/CalendarIndicators/CalendarIndicators.d.ts.map +1 -1
- package/dist-package/src/CalendarIndicators/CalendarIndicators.js +4 -12
- package/dist-package/src/CalendarIndicators/CalendarIndicators.js.map +1 -1
- package/package.json +2 -3
- package/src/Calendar/Calendar.tsx +10 -15
- package/src/Calendar/__snapshots__/test.tsx.snap +101 -101
- package/src/CalendarContainer/CalendarContainer.tsx +6 -13
- package/src/CalendarDateSelector/CalendarDateSelector.tsx +4 -11
- package/src/CalendarDay/CalendarDay.tsx +46 -17
- package/src/CalendarDay/types.ts +10 -0
- package/src/CalendarDay/utils/get-background-color-class.ts +26 -0
- package/src/CalendarDay/utils/get-border-classes.test.ts +54 -0
- package/src/CalendarDay/utils/get-border-classes.ts +20 -0
- package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.test.ts +72 -0
- package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.ts +44 -0
- package/src/CalendarDay/utils/get-text-color-class.ts +30 -0
- package/src/CalendarIndicators/CalendarIndicators.tsx +9 -16
- package/dist-package/src/Calendar/styles.d.ts +0 -4
- package/dist-package/src/Calendar/styles.d.ts.map +0 -1
- package/dist-package/src/Calendar/styles.js +0 -64
- package/dist-package/src/Calendar/styles.js.map +0 -1
- package/dist-package/src/CalendarContainer/styles.d.ts +0 -4
- package/dist-package/src/CalendarContainer/styles.d.ts.map +0 -1
- package/dist-package/src/CalendarContainer/styles.js +0 -22
- package/dist-package/src/CalendarContainer/styles.js.map +0 -1
- package/dist-package/src/CalendarDay/styles.d.ts +0 -4
- package/dist-package/src/CalendarDay/styles.d.ts.map +0 -1
- package/dist-package/src/CalendarDay/styles.js +0 -94
- package/dist-package/src/CalendarDay/styles.js.map +0 -1
- package/dist-package/src/CalendarIndicators/styles.d.ts +0 -4
- package/dist-package/src/CalendarIndicators/styles.d.ts.map +0 -1
- package/dist-package/src/CalendarIndicators/styles.js +0 -28
- package/dist-package/src/CalendarIndicators/styles.js.map +0 -1
- package/src/Calendar/styles.ts +0 -66
- package/src/CalendarContainer/styles.ts +0 -24
- package/src/CalendarDay/styles.ts +0 -100
- package/src/CalendarIndicators/styles.ts +0 -30
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAWvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,SAAS,EACV,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,oBAAY,oBAAoB,GAAG,CAAC,GAAG,CAAC,CAAA;AAExC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnE,6CAA6C;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC9C,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAC1D,wCAAwC;IACxC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,mGAAmG;IACnG,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAA;IACvC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAA;IACxC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC,oGAAoG;IACpG,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAYD,eAAO,MAAM,QAAQ,8EA8LnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
|
|
@@ -10,25 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef, useCallback, useEffect, useMemo, useState, } from 'react';
|
|
13
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
14
13
|
import { DayPicker } from 'react-day-picker';
|
|
15
14
|
import isWeekend from 'date-fns/isWeekend';
|
|
16
15
|
import { format, isEqual } from 'date-fns';
|
|
17
16
|
import { useBreakpoint } from '@toptal/picasso-provider';
|
|
18
|
-
import styles from './styles';
|
|
19
17
|
import { CalendarDay } from '../CalendarDay';
|
|
20
18
|
import { CalendarMonthHeader } from '../CalendarMonthHeader';
|
|
21
19
|
import CalendarContext from '../CalendarContext';
|
|
22
20
|
import { CalendarContainer } from '../CalendarContainer';
|
|
23
21
|
import { CalendarDateSelector } from '../CalendarDateSelector';
|
|
24
|
-
const useStyles = makeStyles(styles, { name: 'PicassoCalendar' });
|
|
25
22
|
const getDefaultNavigationMonth = (value, rangeModeIsEnabled) => value
|
|
26
23
|
? rangeModeIsEnabled
|
|
27
24
|
? value[0]
|
|
28
25
|
: value
|
|
29
26
|
: undefined;
|
|
30
27
|
export const Calendar = forwardRef(function Calendar(props, ref) {
|
|
31
|
-
const classes = useStyles();
|
|
32
28
|
const { range = false, activeMonth, value, onChange, minDate, maxDate, disabledIntervals, indicatedIntervals, renderDay, renderMonthHeader, weekStartsOn = 1, hasFooter = false, renderRoot, numberOfMonths = 1, dropdownNavigation = false } = props, rest = __rest(props, ["range", "activeMonth", "value", "onChange", "minDate", "maxDate", "disabledIntervals", "indicatedIntervals", "renderDay", "renderMonthHeader", "weekStartsOn", "hasFooter", "renderRoot", "numberOfMonths", "dropdownNavigation"]);
|
|
33
29
|
const [navigationMonth, setNavigationMonth] = useState(getDefaultNavigationMonth(value, range));
|
|
34
30
|
useEffect(() => {
|
|
@@ -111,15 +107,15 @@ export const Calendar = forwardRef(function Calendar(props, ref) {
|
|
|
111
107
|
Day: CalendarDay,
|
|
112
108
|
Dropdown: CalendarDateSelector,
|
|
113
109
|
}, classNames: {
|
|
114
|
-
months: shouldRenderMultipleMonths ?
|
|
115
|
-
caption_dropdowns:
|
|
116
|
-
head:
|
|
117
|
-
table:
|
|
118
|
-
head_row:
|
|
119
|
-
head_cell:
|
|
120
|
-
row:
|
|
121
|
-
cell:
|
|
122
|
-
vhidden:
|
|
110
|
+
months: shouldRenderMultipleMonths ? 'flex gap-6' : undefined,
|
|
111
|
+
caption_dropdowns: 'flex gap-4 pb-4',
|
|
112
|
+
head: 'block',
|
|
113
|
+
table: 'flex flex-col border-spacing-0',
|
|
114
|
+
head_row: 'flex text-center uppercase text-xxs pt-[3px] pb-[11px] text-gray-600',
|
|
115
|
+
head_cell: 'p-0 basis-[15%] w-40 font-regular',
|
|
116
|
+
row: 'flex',
|
|
117
|
+
cell: 'p-0 basis-[15%]',
|
|
118
|
+
vhidden: 'hidden',
|
|
123
119
|
},
|
|
124
120
|
// Keeping the legacy classname as it is heavily used as a locator in tests
|
|
125
121
|
className: 'calendar-month' })))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarContainer.d.ts","sourceRoot":"","sources":["../../../src/CalendarContainer/CalendarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarContainer.d.ts","sourceRoot":"","sources":["../../../src/CalendarContainer/CalendarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,oBAAY,UAAU,GAAG,CAAC,IAAI,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;AAEtE,QAAA,MAAM,iBAAiB,yCAIpB,sBAAsB,gBAgBxB,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import styles from './styles';
|
|
2
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
5
3
|
import { useCalendar } from '../CalendarContext';
|
|
6
|
-
const useStyles = makeStyles(styles, {
|
|
7
|
-
name: 'PicassoCalendarContainer',
|
|
8
|
-
});
|
|
9
4
|
const CalendarContainer = ({ children, hasFooter, isFlexible, }) => {
|
|
10
|
-
const classes = useStyles();
|
|
11
5
|
const { renderRoot } = useCalendar();
|
|
12
|
-
return renderRoot ? (React.createElement(React.Fragment, null, renderRoot({ hasFooter, children }))) : (React.createElement("div", { className:
|
|
13
|
-
[classes.hasFooter]: hasFooter,
|
|
14
|
-
[classes.flexible]: isFlexible,
|
|
15
|
-
}) }, children));
|
|
6
|
+
return renderRoot ? (React.createElement(React.Fragment, null, renderRoot({ hasFooter, children }))) : (React.createElement("div", { className: twJoin('p-6 text-graphite-800 flex flex-col basis-[20.5rem] shadow-5 bg-white', hasFooter ? 'rounded-t-sm rounded-b-none' : 'rounded-sm', !isFlexible && 'max-w-[20.5rem]') }, children));
|
|
16
7
|
};
|
|
17
8
|
export default CalendarContainer;
|
|
18
9
|
//# sourceMappingURL=CalendarContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarContainer.js","sourceRoot":"","sources":["../../../src/CalendarContainer/CalendarContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarContainer.js","sourceRoot":"","sources":["../../../src/CalendarContainer/CalendarContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GACa,EAAE,EAAE;IAC3B,MAAM,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAA;IAEpC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,0CAAG,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAI,CAC3C,CAAC,CAAC,CAAC,CACF,6BACE,SAAS,EAAE,MAAM,CACf,uEAAuE,EACvE,SAAS,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,YAAY,EACxD,CAAC,UAAU,IAAI,iBAAiB,CACjC,IAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDateSelector.d.ts","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarDateSelector.d.ts","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAKrD,QAAA,MAAM,oBAAoB,qEAMvB,aAAa,gBAiCf,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -2,16 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import { Typography } from '@toptal/picasso-typography';
|
|
3
3
|
import { Container } from '@toptal/picasso-container';
|
|
4
4
|
import { ArrowDropDown16 } from '@toptal/picasso-icons';
|
|
5
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
6
|
-
import styles from '../Calendar/styles';
|
|
7
|
-
const useStyles = makeStyles(styles, { name: 'PicassoCalendar' });
|
|
8
5
|
const CalendarDateSelector = ({ children, caption, onChange, value, 'aria-label': ariaLabel, }) => {
|
|
9
|
-
|
|
10
|
-
return (React.createElement("label", { "aria-label": ariaLabel, htmlFor: `month${caption}`, className: classes.dropdown_label },
|
|
6
|
+
return (React.createElement("label", { "aria-label": ariaLabel, htmlFor: `month${caption}`, className: 'flex relative items-center' },
|
|
11
7
|
React.createElement(Typography, { variant: 'heading', size: 'medium', color: 'black', weight: 'semibold' }, caption),
|
|
12
|
-
React.createElement(Container, { className:
|
|
13
|
-
React.createElement(ArrowDropDown16, { className:
|
|
14
|
-
React.createElement("select", { name: `month${caption}`, className:
|
|
8
|
+
React.createElement(Container, { className: 'w-6 h-6', flex: true, justifyContent: 'center', alignItems: 'center' },
|
|
9
|
+
React.createElement(ArrowDropDown16, { className: 'pointer-events-none', color: 'darkGrey' })),
|
|
10
|
+
React.createElement("select", { name: `month${caption}`, className: 'absolute opacity-0 text-md font-normal cursor-pointer', value: value, onChange: onChange }, children)));
|
|
15
11
|
};
|
|
16
12
|
export default CalendarDateSelector;
|
|
17
13
|
//# sourceMappingURL=CalendarDateSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDateSelector.js","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarDateSelector.js","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,GACT,EAAE,EAAE;IAClB,OAAO,CACL,6CACc,SAAS,EACrB,OAAO,EAAE,QAAQ,OAAO,EAAE,EAC1B,SAAS,EAAC,4BAA4B;QAEtC,oBAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,UAAU,IAEhB,OAAO,CACG;QACb,oBAAC,SAAS,IACR,SAAS,EAAC,SAAS,EACnB,IAAI,QACJ,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ;YAEnB,oBAAC,eAAe,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAC,UAAU,GAAG,CAC1D;QACZ,gCACE,IAAI,EAAE,QAAQ,OAAO,EAAE,EACvB,SAAS,EAAC,uDAAuD,EACjE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF,CACH,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../src/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../src/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAchD,OAAO,KAAK,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,aAAa,CAAA;AAM7D,oBAAY,SAAS,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAA;AAY3D;;GAEG;AACH,QAAA,MAAM,WAAW,aAAc,QAAQ,KAAG,WAwHzC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import React, { useRef } from 'react';
|
|
1
|
+
import React, { useMemo, useRef } from 'react';
|
|
2
2
|
import { useDayRender } from 'react-day-picker';
|
|
3
|
-
import
|
|
4
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
5
4
|
import { isToday as isTodayDateFns, endOfMonth, format, isAfter, isBefore, startOfMonth, } from 'date-fns';
|
|
6
|
-
import styles from './styles';
|
|
7
5
|
import { CalendarIndicators } from '../CalendarIndicators';
|
|
8
6
|
import { useCalendar } from '../CalendarContext';
|
|
7
|
+
import { getTextColorClass } from './utils/get-text-color-class';
|
|
8
|
+
import { getBackgroundColorClass } from './utils/get-background-color-class';
|
|
9
|
+
import { getBorderClasses } from './utils/get-border-classes';
|
|
10
|
+
import { getHoverAndFocusEffectsClasses } from './utils/get-hover-and-focus-effects-classes';
|
|
9
11
|
const getDayFormatted = (date) => format(date, 'd');
|
|
10
12
|
const getISODate = (date) => format(date, 'yyyy-MM-dd');
|
|
11
13
|
const checkIfBelongsToPreviousMonth = (date, currentMonth) => isBefore(date, startOfMonth(currentMonth));
|
|
12
14
|
const checkIfBelongsToNextMonth = (date, currentMonth) => isAfter(date, endOfMonth(currentMonth));
|
|
13
|
-
const useStyles = makeStyles(styles, { name: 'PicassoCalendar' });
|
|
14
15
|
/**
|
|
15
16
|
* The content of a day cell
|
|
16
17
|
*/
|
|
@@ -22,16 +23,31 @@ const CalendarDay = (dayProps) => {
|
|
|
22
23
|
const { selected: isSelected = false, disabled: isDisabled = false, indicated: isIndicated = false, outside: isOutside = false, weekend: isWeekend = false, temporaryRangeMiddle: isTemporaryRangeMiddle = false, temporaryRangeEnd: isTemporaryRangeEnd = false, range_start: isRangeStart = false, range_middle: isRangeMiddle = false, range_end: isRangeEnd = false, } = activeModifiers;
|
|
23
24
|
const isToday = isTodayDateFns(date);
|
|
24
25
|
const isoDate = getISODate(date);
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
const stateDependentClasses = useMemo(() => {
|
|
27
|
+
const currentComponentState = {
|
|
28
|
+
isSelected,
|
|
29
|
+
isDisabled,
|
|
30
|
+
isWeekend,
|
|
31
|
+
isToday,
|
|
32
|
+
isOutside,
|
|
33
|
+
isRangeStart,
|
|
34
|
+
isRangeMiddle: isRangeMiddle || isTemporaryRangeMiddle,
|
|
35
|
+
isRangeEnd: isRangeEnd || isTemporaryRangeEnd,
|
|
36
|
+
};
|
|
37
|
+
return twJoin(getTextColorClass(currentComponentState), getBackgroundColorClass(currentComponentState), getBorderClasses(currentComponentState), getHoverAndFocusEffectsClasses(currentComponentState), isDisabled ? 'cursor-default' : 'cursor-pointer');
|
|
38
|
+
}, [
|
|
39
|
+
isSelected,
|
|
40
|
+
isDisabled,
|
|
41
|
+
isWeekend,
|
|
42
|
+
isToday,
|
|
43
|
+
isOutside,
|
|
44
|
+
isRangeStart,
|
|
45
|
+
isRangeMiddle,
|
|
46
|
+
isRangeEnd,
|
|
47
|
+
isTemporaryRangeMiddle,
|
|
48
|
+
isTemporaryRangeEnd,
|
|
49
|
+
]);
|
|
50
|
+
const defaultComponent = (React.createElement("button", { ref: buttonRef, type: 'button', "data-testid": `day-button-${isSelected ? 'selected' : getDayFormatted(date)}`, "data-calendar-day": isoDate, tabIndex: isDisabled ? -1 : undefined, className: twJoin('h-10 w-10 min-w-10', 'm-0 p-0', 'text-[0.75rem]', 'flex items-center justify-center vertical-align-middle relative', 'user-select-none', 'outline-none', stateDependentClasses), onClick: isDisabled ? undefined : event => { var _a; return (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonProps, event); }, onMouseEnter: event => {
|
|
35
51
|
var _a;
|
|
36
52
|
onDayMouseEnter === null || onDayMouseEnter === void 0 ? void 0 : onDayMouseEnter(date);
|
|
37
53
|
(_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(buttonProps, event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["../../../src/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["../../../src/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare type DayState = {
|
|
2
|
+
isSelected: boolean;
|
|
3
|
+
isDisabled: boolean;
|
|
4
|
+
isWeekend: boolean;
|
|
5
|
+
isToday: boolean;
|
|
6
|
+
isOutside: boolean;
|
|
7
|
+
isRangeStart: boolean;
|
|
8
|
+
isRangeMiddle: boolean;
|
|
9
|
+
isRangeEnd: boolean;
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/CalendarDay/types.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ,GAAG;IACrB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/CalendarDay/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-background-color-class.d.ts","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-background-color-class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,eAAO,MAAM,uBAAuB,UAAW,QAAQ,+DAuBtD,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const getBackgroundColorClass = (state) => {
|
|
2
|
+
const { isSelected, isRangeEnd, isDisabled, isWeekend, isRangeMiddle, isRangeStart, } = state;
|
|
3
|
+
if (isRangeMiddle) {
|
|
4
|
+
return 'bg-blue-100';
|
|
5
|
+
}
|
|
6
|
+
if (isSelected || isRangeStart || isRangeEnd) {
|
|
7
|
+
return 'bg-blue-500';
|
|
8
|
+
}
|
|
9
|
+
if ((isDisabled && isWeekend) || isWeekend) {
|
|
10
|
+
return 'bg-gray-100';
|
|
11
|
+
}
|
|
12
|
+
return 'bg-white';
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=get-background-color-class.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-background-color-class.js","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-background-color-class.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAe,EAAE,EAAE;IACzD,MAAM,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,GAAG,KAAK,CAAA;IAET,IAAI,aAAa,EAAE;QACjB,OAAO,aAAa,CAAA;KACrB;IAED,IAAI,UAAU,IAAI,YAAY,IAAI,UAAU,EAAE;QAC5C,OAAO,aAAa,CAAA;KACrB;IAED,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,IAAI,SAAS,EAAE;QAC1C,OAAO,aAAa,CAAA;KACrB;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-border-classes.d.ts","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-border-classes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,eAAO,MAAM,gBAAgB,UAAW,QAAQ,oHAiB/C,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const getBorderClasses = (state) => {
|
|
2
|
+
const { isSelected, isWeekend, isRangeStart, isRangeEnd, isRangeMiddle } = state;
|
|
3
|
+
if (isRangeMiddle) {
|
|
4
|
+
return 'border-none rounded-none';
|
|
5
|
+
}
|
|
6
|
+
if (isRangeEnd || isRangeStart || isSelected) {
|
|
7
|
+
return 'border-none rounded-sm';
|
|
8
|
+
}
|
|
9
|
+
if (isWeekend) {
|
|
10
|
+
return 'border-solid border-[0.25rem] border-white rounded-md';
|
|
11
|
+
}
|
|
12
|
+
return 'border-none rounded-none';
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=get-border-classes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-border-classes.js","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-border-classes.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAe,EAAE,EAAE;IAClD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,GACtE,KAAK,CAAA;IAEP,IAAI,aAAa,EAAE;QACjB,OAAO,0BAA0B,CAAA;KAClC;IAED,IAAI,UAAU,IAAI,YAAY,IAAI,UAAU,EAAE;QAC5C,OAAO,wBAAwB,CAAA;KAChC;IAED,IAAI,SAAS,EAAE;QACb,OAAO,uDAAuD,CAAA;KAC/D;IAED,OAAO,0BAA0B,CAAA;AACnC,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-hover-and-focus-effects-classes.d.ts","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-hover-and-focus-effects-classes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,eAAO,MAAM,8BAA8B,UAAW,QAAQ,kBAyC7D,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export const getHoverAndFocusEffectsClasses = (state) => {
|
|
2
|
+
const { isSelected, isWeekend, isDisabled, isOutside, isRangeEnd, isRangeMiddle, } = state;
|
|
3
|
+
if (isDisabled || isSelected) {
|
|
4
|
+
return '';
|
|
5
|
+
}
|
|
6
|
+
if (isRangeEnd) {
|
|
7
|
+
return [
|
|
8
|
+
'[&]:hover:text-white [&]:focus:text-white',
|
|
9
|
+
'[&]:hover:bg-blue-500 [&]:focus:bg-blue-500',
|
|
10
|
+
];
|
|
11
|
+
}
|
|
12
|
+
const defaultTextColor = isOutside
|
|
13
|
+
? '[&]:hover:text-gray-600 [&]:focus:text-gray-600'
|
|
14
|
+
: '[&]:hover:text-black [&]:focus:text-black';
|
|
15
|
+
const defaultBackgroundAndBorderStyle = [
|
|
16
|
+
'[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25',
|
|
17
|
+
'[&]:hover:rounded-sm [&]:focus:rounded-sm',
|
|
18
|
+
];
|
|
19
|
+
const defaultStyles = [defaultTextColor, ...defaultBackgroundAndBorderStyle];
|
|
20
|
+
if (isWeekend && !isSelected && !isRangeMiddle) {
|
|
21
|
+
return [
|
|
22
|
+
'[&]:hover:border-none [&]:focus:border-none',
|
|
23
|
+
'[&]:hover:border-white [&]:focus:border-white',
|
|
24
|
+
...defaultStyles,
|
|
25
|
+
];
|
|
26
|
+
}
|
|
27
|
+
return defaultStyles;
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=get-hover-and-focus-effects-classes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-hover-and-focus-effects-classes.js","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-hover-and-focus-effects-classes.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,KAAe,EAAE,EAAE;IAChE,MAAM,EACJ,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,GACd,GAAG,KAAK,CAAA;IAET,IAAI,UAAU,IAAI,UAAU,EAAE;QAC5B,OAAO,EAAE,CAAA;KACV;IAED,IAAI,UAAU,EAAE;QACd,OAAO;YACL,2CAA2C;YAC3C,6CAA6C;SAC9C,CAAA;KACF;IAED,MAAM,gBAAgB,GAAG,SAAS;QAChC,CAAC,CAAC,iDAAiD;QACnD,CAAC,CAAC,2CAA2C,CAAA;IAE/C,MAAM,+BAA+B,GAAG;QACtC,mDAAmD;QACnD,2CAA2C;KAC5C,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,gBAAgB,EAAE,GAAG,+BAA+B,CAAC,CAAA;IAE5E,IAAI,SAAS,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE;QAC9C,OAAO;YACL,6CAA6C;YAC7C,+CAA+C;YAC/C,GAAG,aAAa;SACjB,CAAA;KACF;IAED,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-text-color-class.d.ts","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-text-color-class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC,eAAO,MAAM,iBAAiB,UAAW,QAAQ,oEA2BhD,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const getTextColorClass = (state) => {
|
|
2
|
+
const { isSelected, isOutside, isRangeEnd, isDisabled, isRangeMiddle, isRangeStart, } = state;
|
|
3
|
+
if (isDisabled) {
|
|
4
|
+
return 'text-gray-500';
|
|
5
|
+
}
|
|
6
|
+
if (isOutside) {
|
|
7
|
+
return 'text-gray-600';
|
|
8
|
+
}
|
|
9
|
+
if (isRangeMiddle) {
|
|
10
|
+
return 'text-black';
|
|
11
|
+
}
|
|
12
|
+
if (isSelected || isRangeStart || isRangeEnd) {
|
|
13
|
+
return 'text-white';
|
|
14
|
+
}
|
|
15
|
+
return 'text-black';
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=get-text-color-class.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-text-color-class.js","sourceRoot":"","sources":["../../../../src/CalendarDay/utils/get-text-color-class.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAe,EAAE,EAAE;IACnD,MAAM,EACJ,UAAU,EACV,SAAS,EACT,UAAU,EACV,UAAU,EACV,aAAa,EACb,YAAY,GACb,GAAG,KAAK,CAAA;IAET,IAAI,UAAU,EAAE;QACd,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,SAAS,EAAE;QACb,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,aAAa,EAAE;QACjB,OAAO,YAAY,CAAA;KACpB;IAED,IAAI,UAAU,IAAI,YAAY,IAAI,UAAU,EAAE;QAC5C,OAAO,YAAY,CAAA;KACpB;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarIndicators.d.ts","sourceRoot":"","sources":["../../../src/CalendarIndicators/CalendarIndicators.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"CalendarIndicators.d.ts","sourceRoot":"","sources":["../../../src/CalendarIndicators/CalendarIndicators.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,kBAAkB,0CAI5B,KAAK,uBAoBP,CAAA"}
|
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import styles from './styles';
|
|
5
|
-
const useStyles = makeStyles(styles, {
|
|
6
|
-
name: 'PicassoCalendarIndicators',
|
|
7
|
-
});
|
|
2
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
8
3
|
export const CalendarIndicators = ({ isIndicated, isSelected, isToday, }) => {
|
|
9
|
-
const classes = useStyles();
|
|
10
4
|
if (isToday || isIndicated) {
|
|
11
|
-
return (React.createElement("div", { className:
|
|
12
|
-
isToday && (React.createElement("div", { className:
|
|
13
|
-
|
|
14
|
-
}) })),
|
|
15
|
-
isIndicated && React.createElement("div", { className: classes.indicated })));
|
|
5
|
+
return (React.createElement("div", { className: 'flex flex-row\tjustify-around w-[1.3em] absolute bottom-[0.375rem]' },
|
|
6
|
+
isToday && (React.createElement("div", { className: twJoin('h-1 w-1 rounded-[50%] bg-blue-500', isSelected && 'bg-white') })),
|
|
7
|
+
isIndicated && (React.createElement("div", { className: 'content-[""] h-1 w-1 rounded-[50%] bg-yellow-500' }))));
|
|
16
8
|
}
|
|
17
9
|
return null;
|
|
18
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarIndicators.js","sourceRoot":"","sources":["../../../src/CalendarIndicators/CalendarIndicators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarIndicators.js","sourceRoot":"","sources":["../../../src/CalendarIndicators/CalendarIndicators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAQvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,WAAW,EACX,UAAU,EACV,OAAO,GACD,EAAE,EAAE;IACV,IAAI,OAAO,IAAI,WAAW,EAAE;QAC1B,OAAO,CACL,6BAAK,SAAS,EAAC,oEAAmE;YAC/E,OAAO,IAAI,CACV,6BACE,SAAS,EAAE,MAAM,CACf,mCAAmC,EACnC,UAAU,IAAI,UAAU,CACzB,GACD,CACH;YACA,WAAW,IAAI,CACd,6BAAK,SAAS,EAAC,kDAAkD,GAAG,CACrE,CACG,CACP,CAAA;KACF;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-calendar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Toptal UI components library - Calendar",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
"@toptal/picasso-shared": "15.0.0",
|
|
29
29
|
"@toptal/picasso-typography": "3.0.0",
|
|
30
30
|
"@toptal/picasso-utils": "1.0.3",
|
|
31
|
-
"classnames": "^2.5.1",
|
|
32
31
|
"date-fns": "^2.30.0",
|
|
33
32
|
"react-day-picker": "^8.10.0"
|
|
34
33
|
},
|
|
@@ -37,8 +36,8 @@
|
|
|
37
36
|
"**/styles.js"
|
|
38
37
|
],
|
|
39
38
|
"peerDependencies": {
|
|
40
|
-
"@material-ui/core": "4.12.4",
|
|
41
39
|
"@toptal/picasso-tailwind": ">=2.7",
|
|
40
|
+
"@toptal/picasso-tailwind-merge": "^1.0.1",
|
|
42
41
|
"@toptal/picasso-provider": "*",
|
|
43
42
|
"react": ">=16.12.0 < 19.0.0"
|
|
44
43
|
},
|
|
@@ -5,8 +5,6 @@ import React, {
|
|
|
5
5
|
useMemo,
|
|
6
6
|
useState,
|
|
7
7
|
} from 'react'
|
|
8
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
9
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
10
8
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
11
9
|
import type {
|
|
12
10
|
SelectRangeEventHandler,
|
|
@@ -18,7 +16,6 @@ import isWeekend from 'date-fns/isWeekend'
|
|
|
18
16
|
import { format, isEqual } from 'date-fns'
|
|
19
17
|
import { useBreakpoint } from '@toptal/picasso-provider'
|
|
20
18
|
|
|
21
|
-
import styles from './styles'
|
|
22
19
|
import type { RenderDay } from '../CalendarDay'
|
|
23
20
|
import { CalendarDay } from '../CalendarDay'
|
|
24
21
|
import type { RenderMonthHeader } from '../CalendarMonthHeader'
|
|
@@ -73,8 +70,6 @@ export interface Props
|
|
|
73
70
|
dropdownNavigation?: boolean
|
|
74
71
|
}
|
|
75
72
|
|
|
76
|
-
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
|
|
77
|
-
|
|
78
73
|
const getDefaultNavigationMonth = (
|
|
79
74
|
value: DateOrDateRangeType | undefined,
|
|
80
75
|
rangeModeIsEnabled: boolean
|
|
@@ -89,7 +84,6 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
89
84
|
props,
|
|
90
85
|
ref
|
|
91
86
|
) {
|
|
92
|
-
const classes = useStyles()
|
|
93
87
|
const {
|
|
94
88
|
range = false,
|
|
95
89
|
activeMonth,
|
|
@@ -258,15 +252,16 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
258
252
|
Dropdown: CalendarDateSelector,
|
|
259
253
|
}}
|
|
260
254
|
classNames={{
|
|
261
|
-
months: shouldRenderMultipleMonths ?
|
|
262
|
-
caption_dropdowns:
|
|
263
|
-
head:
|
|
264
|
-
table:
|
|
265
|
-
head_row:
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
255
|
+
months: shouldRenderMultipleMonths ? 'flex gap-6' : undefined,
|
|
256
|
+
caption_dropdowns: 'flex gap-4 pb-4',
|
|
257
|
+
head: 'block',
|
|
258
|
+
table: 'flex flex-col border-spacing-0',
|
|
259
|
+
head_row:
|
|
260
|
+
'flex text-center uppercase text-xxs pt-[3px] pb-[11px] text-gray-600',
|
|
261
|
+
head_cell: 'p-0 basis-[15%] w-40 font-regular',
|
|
262
|
+
row: 'flex',
|
|
263
|
+
cell: 'p-0 basis-[15%]',
|
|
264
|
+
vhidden: 'hidden',
|
|
270
265
|
}}
|
|
271
266
|
// Keeping the legacy classname as it is heavily used as a locator in tests
|
|
272
267
|
className='calendar-month'
|