colibri-ui 0.8.84 → 0.8.87
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/Accordion/Accordion.module.css +4 -0
- package/Accordion/index.js +15 -23
- package/Autocomplete/Autocomplete.js +101 -132
- package/Avatar/Avatar.module.css +6 -0
- package/Avatar/index.js +102 -89
- package/Badge/Badge.module.css +2 -1
- package/Badge/Control/index.js +5 -3
- package/Badge/index.js +16 -16
- package/Button/index.js +23 -20
- package/Button/tokens.js +2 -2
- package/Calendar/Calendar.js +171 -269
- package/Card/Card.js +26 -32
- package/Checkbox/index.js +46 -43
- package/Chip/Chip.module.css +2 -1
- package/Chip/index.js +15 -15
- package/ClickOutside/index.js +10 -13
- package/CodeField/CodeField.js +113 -170
- package/Counter/Counter.module.css +2 -1
- package/Counter/index.js +21 -20
- package/Datepicker/components/DatePicker/index.js +81 -102
- package/Datepicker/index.js +17 -16
- package/DotsLoader/index.js +23 -15
- package/Drawer/Drawer.js +84 -98
- package/Drawer/Drawer.module.css +2 -1
- package/Drawer/index.props.d.ts +2 -0
- package/Dropdown/index.js +55 -68
- package/Dropzone/Dropzone.js +78 -168
- package/Dropzone/Dropzone.module.css +2 -1
- package/Editable/Editable.js +44 -57
- package/Grid/Item/index.js +11 -13
- package/Grid/index.js +15 -21
- package/Icons/ArrowNext.js +7 -8
- package/Icons/Cart.js +7 -8
- package/Icons/Check.js +7 -8
- package/Icons/Chevron.js +7 -8
- package/Icons/Close.js +6 -6
- package/Icons/Copy.js +7 -8
- package/Icons/Cross.js +6 -6
- package/Icons/CrossFill.js +7 -8
- package/Icons/Edit.js +7 -8
- package/Icons/Exit.js +7 -8
- package/Icons/EyeClosed.js +7 -8
- package/Icons/EyeOpen.js +7 -8
- package/Icons/Help.js +6 -6
- package/Icons/Info.js +7 -8
- package/Icons/Minus.js +7 -8
- package/Icons/More.js +7 -8
- package/Icons/Plus.js +7 -8
- package/Icons/Setting.js +7 -8
- package/Icons/Shield.js +7 -8
- package/Icons/Trash.js +7 -8
- package/Icons/User.js +7 -8
- package/Image/Image.module.css +4 -0
- package/Image/index.d.ts +1 -1
- package/Image/index.js +44 -37
- package/Input/index.d.ts +1 -1
- package/Input/index.js +37 -25
- package/Input/index.props.d.ts +1 -1
- package/InputRadio/index.js +32 -24
- package/List/List.js +81 -76
- package/Menu/Menu.module.css +2 -1
- package/Menu/components/MenuItem/index.js +17 -14
- package/Menu/index.js +22 -23
- package/Modal/components/Body/index.js +9 -8
- package/Modal/components/Close/Close.module.css +4 -0
- package/Modal/components/Close/index.js +13 -14
- package/Modal/components/Content/index.js +5 -6
- package/Modal/components/Footer/index.js +5 -3
- package/Modal/components/Header/index.js +13 -12
- package/Modal/components/Title/index.js +10 -9
- package/Modal/context.js +3 -3
- package/Modal/index.js +46 -68
- package/MultiSelect/components/MenuOverlay/index.js +48 -61
- package/MultiSelect/components/MenuOverlayItem/index.js +13 -14
- package/MultiSelect/index.js +72 -100
- package/MultiSelect/index.module.css +2 -1
- package/MultiSelect/utils/index.js +8 -18
- package/NumberInput/NumberInput.js +80 -112
- package/Portal/index.js +6 -10
- package/Progress/Progress.js +45 -58
- package/RadioGroup/Radio.js +29 -32
- package/RadioGroup/index.js +43 -46
- package/Rating/Rating.js +50 -63
- package/Select/components/MenuOverlay/index.js +16 -25
- package/Select/components/MenuOverlayItem/index.js +13 -11
- package/Select/index.js +39 -48
- package/Select/index.module.css +2 -1
- package/Separator/index.js +5 -6
- package/Sheet/Sheet.js +98 -122
- package/Sheet/Sheet.module.css +4 -2
- package/Sheet/index.props.d.ts +2 -0
- package/Skeleton/index.js +25 -30
- package/Slider/Slider.js +83 -119
- package/Status/index.js +17 -18
- package/Switch/Switch.module.css +2 -1
- package/Switch/index.js +22 -15
- package/TabsMenu/Tab/Tab.js +14 -10
- package/TabsMenu/Tab/Tab.module.css +2 -1
- package/TabsMenu/index.js +25 -26
- package/TabsPanels/Panel/index.js +6 -4
- package/TabsPanels/index.js +13 -10
- package/TextArea/index.d.ts +1 -1
- package/TextArea/index.js +30 -19
- package/Theme/breakpoints.js +5 -11
- package/Theme/colors/theme_buenos_aires.js +14 -14
- package/Theme/colors/theme_jaipur.js +14 -14
- package/Theme/global.css +0 -1
- package/Theme/index.js +1 -1
- package/TimeSelect/Label/index.js +11 -13
- package/TimeSelect/helpers.js +23 -42
- package/TimeSelect/index.js +32 -38
- package/Tooltip/index.js +36 -42
- package/Typography/Typography.module.css +1365 -0
- package/Typography/index.js +24 -13
- package/Typography/index.props.d.ts +13 -1
- package/base/BaseInput/index.js +10 -8
- package/base/FormField/index.d.ts +1 -1
- package/base/FormField/index.js +27 -22
- package/base/FormField/index.props.d.ts +4 -0
- package/base/InputRoot/index.js +27 -27
- package/esm/Accordion/Accordion.module.css +4 -0
- package/esm/Accordion/index.js +15 -21
- package/esm/Autocomplete/Autocomplete.js +101 -130
- package/esm/Avatar/Avatar.module.css +6 -0
- package/esm/Avatar/index.js +102 -88
- package/esm/Badge/Badge.module.css +2 -1
- package/esm/Badge/Control/index.js +5 -3
- package/esm/Badge/index.js +16 -15
- package/esm/Button/index.js +23 -19
- package/esm/Button/tokens.js +2 -2
- package/esm/Calendar/Calendar.js +171 -267
- package/esm/Card/Card.js +26 -32
- package/esm/Checkbox/index.js +46 -42
- package/esm/Chip/Chip.module.css +2 -1
- package/esm/Chip/index.js +15 -14
- package/esm/ClickOutside/index.js +10 -13
- package/esm/CodeField/CodeField.js +113 -169
- package/esm/Counter/Counter.module.css +2 -1
- package/esm/Counter/index.js +21 -19
- package/esm/Datepicker/components/DatePicker/index.js +81 -101
- package/esm/Datepicker/index.js +17 -16
- package/esm/DotsLoader/index.js +23 -14
- package/esm/Drawer/Drawer.js +84 -97
- package/esm/Drawer/Drawer.module.css +2 -1
- package/esm/Drawer/index.props.d.ts +2 -0
- package/esm/Dropdown/index.js +55 -66
- package/esm/Dropzone/Dropzone.js +78 -165
- package/esm/Dropzone/Dropzone.module.css +2 -1
- package/esm/Editable/Editable.js +44 -56
- package/esm/Grid/Item/index.js +11 -12
- package/esm/Grid/index.js +15 -21
- package/esm/Icons/ArrowNext.js +7 -8
- package/esm/Icons/Cart.js +7 -8
- package/esm/Icons/Check.js +7 -8
- package/esm/Icons/Chevron.js +7 -8
- package/esm/Icons/Close.js +6 -6
- package/esm/Icons/Copy.js +7 -8
- package/esm/Icons/Cross.js +6 -6
- package/esm/Icons/CrossFill.js +7 -8
- package/esm/Icons/Edit.js +7 -8
- package/esm/Icons/Exit.js +7 -8
- package/esm/Icons/EyeClosed.js +7 -8
- package/esm/Icons/EyeOpen.js +7 -8
- package/esm/Icons/Help.js +6 -6
- package/esm/Icons/Info.js +7 -8
- package/esm/Icons/Minus.js +7 -8
- package/esm/Icons/More.js +7 -8
- package/esm/Icons/Plus.js +7 -8
- package/esm/Icons/Setting.js +7 -8
- package/esm/Icons/Shield.js +7 -8
- package/esm/Icons/Trash.js +7 -8
- package/esm/Icons/User.js +7 -8
- package/esm/Image/Image.module.css +4 -0
- package/esm/Image/index.d.ts +1 -1
- package/esm/Image/index.js +44 -36
- package/esm/Input/index.d.ts +1 -1
- package/esm/Input/index.js +38 -26
- package/esm/Input/index.props.d.ts +1 -1
- package/esm/InputRadio/index.js +32 -23
- package/esm/List/List.js +81 -75
- package/esm/Menu/Menu.module.css +2 -1
- package/esm/Menu/components/MenuItem/index.js +17 -13
- package/esm/Menu/index.js +22 -23
- package/esm/Modal/components/Body/index.js +9 -7
- package/esm/Modal/components/Close/Close.module.css +4 -0
- package/esm/Modal/components/Close/index.js +13 -14
- package/esm/Modal/components/Content/index.js +5 -6
- package/esm/Modal/components/Footer/index.js +5 -3
- package/esm/Modal/components/Header/index.js +13 -11
- package/esm/Modal/components/Title/index.js +10 -9
- package/esm/Modal/context.js +3 -3
- package/esm/Modal/index.js +50 -70
- package/esm/MultiSelect/components/MenuOverlay/index.js +48 -60
- package/esm/MultiSelect/components/MenuOverlayItem/index.js +13 -14
- package/esm/MultiSelect/index.js +72 -97
- package/esm/MultiSelect/index.module.css +2 -1
- package/esm/MultiSelect/utils/index.js +8 -14
- package/esm/NumberInput/NumberInput.js +80 -111
- package/esm/Portal/index.js +6 -9
- package/esm/Progress/Progress.js +45 -58
- package/esm/RadioGroup/Radio.js +29 -32
- package/esm/RadioGroup/index.js +43 -45
- package/esm/Rating/Rating.js +50 -63
- package/esm/Select/components/MenuOverlay/index.js +16 -24
- package/esm/Select/components/MenuOverlayItem/index.js +13 -11
- package/esm/Select/index.js +39 -46
- package/esm/Select/index.module.css +2 -1
- package/esm/Separator/index.js +5 -6
- package/esm/Sheet/Sheet.js +98 -120
- package/esm/Sheet/Sheet.module.css +4 -2
- package/esm/Sheet/index.props.d.ts +2 -0
- package/esm/Skeleton/index.js +25 -30
- package/esm/Slider/Slider.js +83 -119
- package/esm/Status/index.js +17 -17
- package/esm/Switch/Switch.module.css +2 -1
- package/esm/Switch/index.js +22 -14
- package/esm/TabsMenu/Tab/Tab.js +14 -9
- package/esm/TabsMenu/Tab/Tab.module.css +2 -1
- package/esm/TabsMenu/index.js +25 -26
- package/esm/TabsPanels/Panel/index.js +6 -4
- package/esm/TabsPanels/index.js +13 -10
- package/esm/TextArea/index.d.ts +1 -1
- package/esm/TextArea/index.js +31 -20
- package/esm/Theme/breakpoints.js +5 -11
- package/esm/Theme/colors/theme_buenos_aires.js +14 -14
- package/esm/Theme/colors/theme_jaipur.js +14 -14
- package/esm/Theme/global.css +0 -1
- package/esm/Theme/index.js +1 -1
- package/esm/TimeSelect/Label/index.js +11 -13
- package/esm/TimeSelect/helpers.js +22 -37
- package/esm/TimeSelect/index.js +32 -38
- package/esm/Tooltip/index.js +36 -41
- package/esm/Typography/Typography.module.css +1365 -0
- package/esm/Typography/index.js +24 -12
- package/esm/Typography/index.props.d.ts +13 -1
- package/esm/base/BaseInput/index.js +10 -8
- package/esm/base/FormField/index.d.ts +1 -1
- package/esm/base/FormField/index.js +27 -21
- package/esm/base/FormField/index.props.d.ts +4 -0
- package/esm/base/InputRoot/index.js +27 -26
- package/esm/helpers/date/index.js +4 -8
- package/esm/hooks/useMediaSizes/index.js +9 -15
- package/esm/hooks/useModalStack/index.js +6 -9
- package/esm/hooks/useOnClickOutside/index.js +6 -6
- package/esm/hooks/useScrollLock/index.js +10 -9
- package/esm/hooks/useTrapFocus/index.js +8 -10
- package/esm/index.d.ts +1 -1
- package/esm/lib/keyboard.js +2 -4
- package/helpers/date/index.js +21 -32
- package/hooks/useMediaSizes/index.js +9 -15
- package/hooks/useModalStack/index.js +6 -9
- package/hooks/useOnClickOutside/index.js +6 -6
- package/hooks/useScrollLock/index.js +10 -9
- package/hooks/useTrapFocus/index.js +8 -10
- package/index.d.ts +1 -1
- package/lib/keyboard.js +2 -4
- package/package.json +5 -1
package/Calendar/Calendar.js
CHANGED
|
@@ -1,218 +1,142 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
4
|
-
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
5
3
|
var tslib = require('tslib');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var index = require('../Button/index.js');
|
|
8
6
|
require('../Icons/index.js');
|
|
9
|
-
var styles = require('./Calendar.module.css');
|
|
10
7
|
var index$1 = require('../Typography/index.js');
|
|
8
|
+
var styles = require('./Calendar.module.css');
|
|
11
9
|
var Chevron = require('../Icons/Chevron.js');
|
|
12
10
|
|
|
13
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
12
|
|
|
15
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
|
|
16
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
17
13
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
18
14
|
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
35
|
-
var addDays = function addDays(date, amount) {
|
|
36
|
-
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
|
|
37
|
-
};
|
|
38
|
-
var dayKey = function dayKey(date) {
|
|
39
|
-
return "".concat(date.getFullYear(), "-").concat(date.getMonth(), "-").concat(date.getDate());
|
|
40
|
-
};
|
|
41
|
-
var alignYearPage = function alignYearPage(year) {
|
|
42
|
-
return year - year % 12;
|
|
43
|
-
};
|
|
44
|
-
var isSameDay = function isSameDay(left, right) {
|
|
45
|
-
return Boolean(left && right && dayKey(left) === dayKey(right));
|
|
46
|
-
};
|
|
47
|
-
var isBefore = function isBefore(left, right) {
|
|
48
|
-
return startOfDay(left).getTime() < startOfDay(right).getTime();
|
|
49
|
-
};
|
|
50
|
-
var isMonthBefore = function isMonthBefore(left, right) {
|
|
51
|
-
return startOfMonth(left).getTime() < startOfMonth(right).getTime();
|
|
52
|
-
};
|
|
53
|
-
var getMonthDays = function getMonthDays(month, weekStartsOn) {
|
|
54
|
-
var first = startOfMonth(month);
|
|
55
|
-
var offset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
56
|
-
var gridStart = addDays(first, -offset);
|
|
16
|
+
const cx = (...classNames) => classNames.filter(Boolean).join(" ");
|
|
17
|
+
const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
18
|
+
const startOfMonth = date => new Date(date.getFullYear(), date.getMonth(), 1);
|
|
19
|
+
const addMonths = (date, amount) => new Date(date.getFullYear(), date.getMonth() + amount, 1);
|
|
20
|
+
const addDays = (date, amount) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
|
|
21
|
+
const dayKey = date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
|
22
|
+
const alignYearPage = year => year - year % 12;
|
|
23
|
+
const isSameDay = (left, right) => Boolean(left && right && dayKey(left) === dayKey(right));
|
|
24
|
+
const isBefore = (left, right) => startOfDay(left).getTime() < startOfDay(right).getTime();
|
|
25
|
+
const isMonthBefore = (left, right) => startOfMonth(left).getTime() < startOfMonth(right).getTime();
|
|
26
|
+
const getMonthDays = (month, weekStartsOn) => {
|
|
27
|
+
const first = startOfMonth(month);
|
|
28
|
+
const offset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
29
|
+
const gridStart = addDays(first, -offset);
|
|
57
30
|
return Array.from({
|
|
58
31
|
length: 42
|
|
59
|
-
},
|
|
60
|
-
return addDays(gridStart, index);
|
|
61
|
-
});
|
|
32
|
+
}, (_, index) => addDays(gridStart, index));
|
|
62
33
|
};
|
|
63
|
-
|
|
34
|
+
const isDateDisabled = (date, minDate, maxDate, disabledDates) => {
|
|
64
35
|
var _a;
|
|
65
36
|
if (minDate && isBefore(date, minDate)) return true;
|
|
66
37
|
if (maxDate && isBefore(maxDate, date)) return true;
|
|
67
38
|
if (typeof disabledDates === "function") return disabledDates(date);
|
|
68
|
-
return (_a = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.some(
|
|
69
|
-
return isSameDay(item, date);
|
|
70
|
-
})) !== null && _a !== void 0 ? _a : false;
|
|
71
|
-
};
|
|
72
|
-
var getButtonSize = function getButtonSize(size) {
|
|
73
|
-
return size === "xl" ? "l" : size;
|
|
39
|
+
return (_a = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.some(item => isSameDay(item, date))) !== null && _a !== void 0 ? _a : false;
|
|
74
40
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}));
|
|
102
|
-
};
|
|
103
|
-
var Calendar = function Calendar(props) {
|
|
41
|
+
const getButtonSize = size => size === "xl" ? "l" : size;
|
|
42
|
+
const NextIcon = props => (/*#__PURE__*/React__default.default.createElement("svg", Object.assign({
|
|
43
|
+
width: "100%",
|
|
44
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
+
fill: "none",
|
|
46
|
+
viewBox: "0 0 24 24",
|
|
47
|
+
strokeWidth: "1.5",
|
|
48
|
+
stroke: "currentColor"
|
|
49
|
+
}, props), /*#__PURE__*/React__default.default.createElement("path", {
|
|
50
|
+
strokeLinecap: "round",
|
|
51
|
+
strokeLinejoin: "round",
|
|
52
|
+
d: "m8.25 4.5 7.5 7.5-7.5 7.5"
|
|
53
|
+
})));
|
|
54
|
+
const PreviousIcon = props => (/*#__PURE__*/React__default.default.createElement("svg", Object.assign({
|
|
55
|
+
width: "100%",
|
|
56
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
57
|
+
fill: "none",
|
|
58
|
+
viewBox: "0 0 24 24",
|
|
59
|
+
strokeWidth: "1.5",
|
|
60
|
+
stroke: "currentColor"
|
|
61
|
+
}, props), /*#__PURE__*/React__default.default.createElement("path", {
|
|
62
|
+
strokeLinecap: "round",
|
|
63
|
+
strokeLinejoin: "round",
|
|
64
|
+
d: "M15.75 19.5 8.25 12l7.5-7.5"
|
|
65
|
+
})));
|
|
66
|
+
const Calendar = props => {
|
|
104
67
|
var _a, _b;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
_props$showOutsideDay = props.showOutsideDays,
|
|
130
|
-
showOutsideDays = _props$showOutsideDay === void 0 ? true : _props$showOutsideDay,
|
|
131
|
-
_props$previousMonthL = props.previousMonthLabel,
|
|
132
|
-
previousMonthLabel = _props$previousMonthL === void 0 ? "Previous month" : _props$previousMonthL,
|
|
133
|
-
_props$nextMonthLabel = props.nextMonthLabel,
|
|
134
|
-
nextMonthLabel = _props$nextMonthLabel === void 0 ? "Next month" : _props$nextMonthLabel,
|
|
135
|
-
_props$yearLabel = props.yearLabel,
|
|
136
|
-
yearLabel = _props$yearLabel === void 0 ? "Year" : _props$yearLabel,
|
|
137
|
-
yearRange = props.yearRange,
|
|
138
|
-
className = props.className,
|
|
68
|
+
const {
|
|
69
|
+
selectionMode = "single",
|
|
70
|
+
value,
|
|
71
|
+
onChange,
|
|
72
|
+
locale = "en-US",
|
|
73
|
+
weekStartsOn = 1,
|
|
74
|
+
monthsToShow = 1,
|
|
75
|
+
size = "m",
|
|
76
|
+
visibleMonth,
|
|
77
|
+
defaultVisibleMonth,
|
|
78
|
+
defaultView = "days",
|
|
79
|
+
onVisibleMonthChange,
|
|
80
|
+
minDate,
|
|
81
|
+
maxDate,
|
|
82
|
+
monthLabel = "Month",
|
|
83
|
+
disabledDates,
|
|
84
|
+
events = [],
|
|
85
|
+
showOutsideDays = true,
|
|
86
|
+
previousMonthLabel = "Previous month",
|
|
87
|
+
nextMonthLabel = "Next month",
|
|
88
|
+
yearLabel = "Year",
|
|
89
|
+
yearRange,
|
|
90
|
+
className
|
|
91
|
+
} = props,
|
|
139
92
|
rest = tslib.__rest(props, ["selectionMode", "value", "onChange", "locale", "weekStartsOn", "monthsToShow", "size", "visibleMonth", "defaultVisibleMonth", "defaultView", "onVisibleMonthChange", "minDate", "maxDate", "monthLabel", "disabledDates", "events", "showOutsideDays", "previousMonthLabel", "nextMonthLabel", "yearLabel", "yearRange", "className"]);
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
setHoveredDate = _useState8[1];
|
|
158
|
-
var _useState9 = React.useState(function () {
|
|
159
|
-
return startOfDay(initialDate !== null && initialDate !== void 0 ? initialDate : new Date());
|
|
160
|
-
}),
|
|
161
|
-
_useState0 = _slicedToArray__default.default(_useState9, 2),
|
|
162
|
-
focusedDate = _useState0[0],
|
|
163
|
-
setFocusedDate = _useState0[1];
|
|
164
|
-
var rootRef = React.useRef(null);
|
|
165
|
-
var currentMonth = startOfMonth(visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : internalMonth);
|
|
166
|
-
var buttonSize = getButtonSize(size);
|
|
167
|
-
var today = React.useMemo(function () {
|
|
168
|
-
return startOfDay(new Date());
|
|
169
|
-
}, []);
|
|
170
|
-
var monthNames = React.useMemo(function () {
|
|
171
|
-
return Array.from({
|
|
172
|
-
length: 12
|
|
173
|
-
}, function (_, monthIndex) {
|
|
174
|
-
return new Intl.DateTimeFormat(locale, {
|
|
175
|
-
month: "long"
|
|
176
|
-
}).format(new Date(2024, monthIndex, 1));
|
|
177
|
-
});
|
|
178
|
-
}, [locale]);
|
|
179
|
-
var yearBounds = React.useMemo(function () {
|
|
93
|
+
const initialDate = Array.isArray(value) ? value[0] : value;
|
|
94
|
+
const initialVisibleMonth = startOfMonth((_a = defaultVisibleMonth !== null && defaultVisibleMonth !== void 0 ? defaultVisibleMonth : initialDate) !== null && _a !== void 0 ? _a : new Date());
|
|
95
|
+
const [internalMonth, setInternalMonth] = React.useState(initialVisibleMonth);
|
|
96
|
+
const [calendarView, setCalendarView] = React.useState(defaultView);
|
|
97
|
+
const [yearPageStart, setYearPageStart] = React.useState(alignYearPage(initialVisibleMonth.getFullYear()));
|
|
98
|
+
const [hoveredDate, setHoveredDate] = React.useState(null);
|
|
99
|
+
const [focusedDate, setFocusedDate] = React.useState(() => startOfDay(initialDate !== null && initialDate !== void 0 ? initialDate : new Date()));
|
|
100
|
+
const rootRef = React.useRef(null);
|
|
101
|
+
const currentMonth = startOfMonth(visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : internalMonth);
|
|
102
|
+
const buttonSize = getButtonSize(size);
|
|
103
|
+
const today = React.useMemo(() => startOfDay(new Date()), []);
|
|
104
|
+
const monthNames = React.useMemo(() => Array.from({
|
|
105
|
+
length: 12
|
|
106
|
+
}, (_, monthIndex) => new Intl.DateTimeFormat(locale, {
|
|
107
|
+
month: "long"
|
|
108
|
+
}).format(new Date(2024, monthIndex, 1))), [locale]);
|
|
109
|
+
const yearBounds = React.useMemo(() => {
|
|
180
110
|
var _a, _b, _c, _d;
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
111
|
+
const currentYear = currentMonth.getFullYear();
|
|
112
|
+
const minYear = (_b = (_a = yearRange === null || yearRange === void 0 ? void 0 : yearRange[0]) !== null && _a !== void 0 ? _a : minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear()) !== null && _b !== void 0 ? _b : currentYear - 50;
|
|
113
|
+
const maxYear = (_d = (_c = yearRange === null || yearRange === void 0 ? void 0 : yearRange[1]) !== null && _c !== void 0 ? _c : maxDate === null || maxDate === void 0 ? void 0 : maxDate.getFullYear()) !== null && _d !== void 0 ? _d : currentYear + 50;
|
|
184
114
|
return {
|
|
185
115
|
max: Math.max(minYear, maxYear),
|
|
186
116
|
min: Math.min(minYear, maxYear)
|
|
187
117
|
};
|
|
188
118
|
}, [currentMonth, maxDate, minDate, yearRange]);
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
}, [yearPageStart]);
|
|
196
|
-
var rangeValue = selectionMode === "range" ? value : [null, null];
|
|
197
|
-
var singleValue = selectionMode === "single" ? value : null;
|
|
198
|
-
var clampMonth = function clampMonth(month) {
|
|
119
|
+
const visibleYears = React.useMemo(() => Array.from({
|
|
120
|
+
length: 12
|
|
121
|
+
}, (_, index) => yearPageStart + index), [yearPageStart]);
|
|
122
|
+
const rangeValue = selectionMode === "range" ? value : [null, null];
|
|
123
|
+
const singleValue = selectionMode === "single" ? value : null;
|
|
124
|
+
const clampMonth = month => {
|
|
199
125
|
if (minDate && isMonthBefore(month, minDate)) return startOfMonth(minDate);
|
|
200
126
|
if (maxDate && isMonthBefore(maxDate, month)) return startOfMonth(maxDate);
|
|
201
127
|
return startOfMonth(month);
|
|
202
128
|
};
|
|
203
|
-
|
|
204
|
-
|
|
129
|
+
const setMonth = nextMonth => {
|
|
130
|
+
const normalized = clampMonth(nextMonth);
|
|
205
131
|
if (visibleMonth === undefined) setInternalMonth(normalized);
|
|
206
132
|
onVisibleMonthChange === null || onVisibleMonthChange === void 0 ? void 0 : onVisibleMonthChange(normalized);
|
|
207
133
|
};
|
|
208
|
-
|
|
209
|
-
|
|
134
|
+
const isVisibleMonthDisabled = (year, monthIndex) => {
|
|
135
|
+
const optionMonth = new Date(year, monthIndex, 1);
|
|
210
136
|
return Boolean(minDate && isMonthBefore(optionMonth, minDate) || maxDate && isMonthBefore(maxDate, optionMonth));
|
|
211
137
|
};
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
};
|
|
215
|
-
var handleHeaderClick = function handleHeaderClick() {
|
|
138
|
+
const isVisibleYearDisabled = year => year < yearBounds.min || year > yearBounds.max;
|
|
139
|
+
const handleHeaderClick = () => {
|
|
216
140
|
if (calendarView === "days") {
|
|
217
141
|
setCalendarView("months");
|
|
218
142
|
return;
|
|
@@ -222,94 +146,84 @@ var Calendar = function Calendar(props) {
|
|
|
222
146
|
setCalendarView("years");
|
|
223
147
|
}
|
|
224
148
|
};
|
|
225
|
-
|
|
149
|
+
const handlePreviousClick = () => {
|
|
226
150
|
if (calendarView === "days") {
|
|
227
151
|
setMonth(addMonths(currentMonth, -1));
|
|
228
152
|
} else if (calendarView === "months") {
|
|
229
153
|
setMonth(addMonths(currentMonth, -12));
|
|
230
154
|
} else {
|
|
231
|
-
setYearPageStart(
|
|
232
|
-
return year - 12;
|
|
233
|
-
});
|
|
155
|
+
setYearPageStart(year => year - 12);
|
|
234
156
|
}
|
|
235
157
|
};
|
|
236
|
-
|
|
158
|
+
const handleNextClick = () => {
|
|
237
159
|
if (calendarView === "days") {
|
|
238
160
|
setMonth(addMonths(currentMonth, 1));
|
|
239
161
|
} else if (calendarView === "months") {
|
|
240
162
|
setMonth(addMonths(currentMonth, 12));
|
|
241
163
|
} else {
|
|
242
|
-
setYearPageStart(
|
|
243
|
-
return year + 12;
|
|
244
|
-
});
|
|
164
|
+
setYearPageStart(year => year + 12);
|
|
245
165
|
}
|
|
246
166
|
};
|
|
247
|
-
|
|
167
|
+
const handleMonthSelect = monthIndex => {
|
|
248
168
|
setMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
|
|
249
169
|
setCalendarView("days");
|
|
250
170
|
};
|
|
251
|
-
|
|
171
|
+
const handleYearSelect = year => {
|
|
252
172
|
setMonth(new Date(year, currentMonth.getMonth(), 1));
|
|
253
173
|
setCalendarView("months");
|
|
254
174
|
};
|
|
255
|
-
|
|
175
|
+
const headerTitle = React.useMemo(() => {
|
|
256
176
|
if (calendarView === "months") return String(currentMonth.getFullYear());
|
|
257
177
|
if (calendarView === "years") {
|
|
258
|
-
return
|
|
178
|
+
return `${yearPageStart}-${yearPageStart + visibleYears.length - 1}`;
|
|
259
179
|
}
|
|
260
180
|
return new Intl.DateTimeFormat(locale, {
|
|
261
181
|
month: "long",
|
|
262
182
|
year: "numeric"
|
|
263
183
|
}).format(currentMonth);
|
|
264
184
|
}, [calendarView, currentMonth, locale, visibleYears.length, yearPageStart]);
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
185
|
+
const isPreviousDisabled = Boolean(calendarView === "days" ? minDate && !isMonthBefore(startOfMonth(minDate), currentMonth) : calendarView === "months" ? yearBounds.min >= currentMonth.getFullYear() : yearPageStart <= yearBounds.min);
|
|
186
|
+
const isNextDisabled = Boolean(calendarView === "days" ? maxDate && !isMonthBefore(addMonths(currentMonth, monthsToShow - 1), startOfMonth(maxDate)) : calendarView === "months" ? yearBounds.max <= currentMonth.getFullYear() : yearPageStart + visibleYears.length - 1 >= yearBounds.max);
|
|
187
|
+
const headerLabel = calendarView === "days" ? monthLabel : yearLabel;
|
|
188
|
+
const canDrillUp = calendarView !== "years";
|
|
189
|
+
const renderPeriodGrid = () => {
|
|
270
190
|
if (calendarView === "months") {
|
|
271
191
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
272
192
|
className: styles__default.default["period-grid"]
|
|
273
|
-
}, monthNames.map(
|
|
274
|
-
|
|
193
|
+
}, monthNames.map((monthName, monthIndex) => {
|
|
194
|
+
const selected = monthIndex === currentMonth.getMonth();
|
|
275
195
|
return /*#__PURE__*/React__default.default.createElement("button", {
|
|
276
196
|
key: monthName,
|
|
277
197
|
type: "button",
|
|
278
198
|
className: cx(styles__default.default["period-button"], selected && styles__default.default["period-button-selected"]),
|
|
279
199
|
disabled: isVisibleMonthDisabled(currentMonth.getFullYear(), monthIndex),
|
|
280
|
-
onClick:
|
|
281
|
-
return handleMonthSelect(monthIndex);
|
|
282
|
-
}
|
|
200
|
+
onClick: () => handleMonthSelect(monthIndex)
|
|
283
201
|
}, monthName);
|
|
284
202
|
}));
|
|
285
203
|
}
|
|
286
204
|
if (calendarView === "years") {
|
|
287
205
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
288
206
|
className: styles__default.default["period-grid"]
|
|
289
|
-
}, visibleYears.map(
|
|
290
|
-
|
|
207
|
+
}, visibleYears.map(year => {
|
|
208
|
+
const selected = year === currentMonth.getFullYear();
|
|
291
209
|
return /*#__PURE__*/React__default.default.createElement("button", {
|
|
292
210
|
key: year,
|
|
293
211
|
type: "button",
|
|
294
212
|
className: cx(styles__default.default["period-button"], selected && styles__default.default["period-button-selected"]),
|
|
295
213
|
disabled: isVisibleYearDisabled(year),
|
|
296
|
-
onClick:
|
|
297
|
-
return handleYearSelect(year);
|
|
298
|
-
}
|
|
214
|
+
onClick: () => handleYearSelect(year)
|
|
299
215
|
}, year);
|
|
300
216
|
}));
|
|
301
217
|
}
|
|
302
218
|
return null;
|
|
303
219
|
};
|
|
304
|
-
|
|
220
|
+
const selectDate = date => {
|
|
305
221
|
if (selectionMode === "single") {
|
|
306
222
|
onChange(date);
|
|
307
223
|
return;
|
|
308
224
|
}
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
end = _rangeValue[1];
|
|
312
|
-
var changeRange = onChange;
|
|
225
|
+
const [start, end] = rangeValue;
|
|
226
|
+
const changeRange = onChange;
|
|
313
227
|
if (!start || end) {
|
|
314
228
|
changeRange([date, null]);
|
|
315
229
|
} else if (isBefore(date, start)) {
|
|
@@ -318,22 +232,22 @@ var Calendar = function Calendar(props) {
|
|
|
318
232
|
changeRange([start, date]);
|
|
319
233
|
}
|
|
320
234
|
};
|
|
321
|
-
|
|
235
|
+
const focusDay = date => {
|
|
322
236
|
setFocusedDate(date);
|
|
323
|
-
|
|
324
|
-
|
|
237
|
+
const firstVisible = currentMonth;
|
|
238
|
+
const lastVisible = addMonths(currentMonth, monthsToShow);
|
|
325
239
|
if (isBefore(date, firstVisible)) {
|
|
326
240
|
setMonth(startOfMonth(date));
|
|
327
241
|
} else if (!isBefore(date, lastVisible)) {
|
|
328
242
|
setMonth(addMonths(startOfMonth(date), 1 - monthsToShow));
|
|
329
243
|
}
|
|
330
|
-
window.requestAnimationFrame(
|
|
244
|
+
window.requestAnimationFrame(() => {
|
|
331
245
|
var _a, _b;
|
|
332
|
-
(_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(
|
|
246
|
+
(_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-day="${dayKey(date)}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
|
|
333
247
|
});
|
|
334
248
|
};
|
|
335
|
-
|
|
336
|
-
|
|
249
|
+
const handleDayKeyDown = (event, date) => {
|
|
250
|
+
const offsets = {
|
|
337
251
|
ArrowLeft: -1,
|
|
338
252
|
ArrowRight: 1,
|
|
339
253
|
ArrowUp: -7,
|
|
@@ -344,19 +258,19 @@ var Calendar = function Calendar(props) {
|
|
|
344
258
|
focusDay(addDays(date, offsets[event.key]));
|
|
345
259
|
} else if (event.key === "Home" || event.key === "End") {
|
|
346
260
|
event.preventDefault();
|
|
347
|
-
|
|
261
|
+
const weekdayOffset = (date.getDay() - weekStartsOn + 7) % 7;
|
|
348
262
|
focusDay(addDays(date, event.key === "Home" ? -weekdayOffset : 6 - weekdayOffset));
|
|
349
263
|
} else if (event.key === "PageUp" || event.key === "PageDown") {
|
|
350
264
|
event.preventDefault();
|
|
351
265
|
focusDay(addMonths(date, event.key === "PageUp" ? -1 : 1));
|
|
352
266
|
}
|
|
353
267
|
};
|
|
354
|
-
|
|
355
|
-
|
|
268
|
+
const weekdayNames = React.useMemo(() => {
|
|
269
|
+
const sunday = new Date(2024, 0, 7);
|
|
356
270
|
return Array.from({
|
|
357
271
|
length: 7
|
|
358
|
-
},
|
|
359
|
-
|
|
272
|
+
}, (_, index) => {
|
|
273
|
+
const day = addDays(sunday, (index + weekStartsOn) % 7);
|
|
360
274
|
return {
|
|
361
275
|
isWeekend: day.getDay() === 0 || day.getDay() === 6,
|
|
362
276
|
name: new Intl.DateTimeFormat(locale, {
|
|
@@ -365,22 +279,22 @@ var Calendar = function Calendar(props) {
|
|
|
365
279
|
};
|
|
366
280
|
});
|
|
367
281
|
}, [locale, weekStartsOn]);
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
events.forEach(
|
|
282
|
+
const eventMap = React.useMemo(() => {
|
|
283
|
+
const map = new Map();
|
|
284
|
+
events.forEach(event => {
|
|
371
285
|
var _a;
|
|
372
|
-
return map.set(dayKey(event.date), [
|
|
286
|
+
return map.set(dayKey(event.date), [...((_a = map.get(dayKey(event.date))) !== null && _a !== void 0 ? _a : []), event]);
|
|
373
287
|
});
|
|
374
288
|
return map;
|
|
375
289
|
}, [events]);
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
290
|
+
const rangePreviewEnd = rangeValue[0] && !rangeValue[1] ? hoveredDate : null;
|
|
291
|
+
const rangeStart = rangeValue[0];
|
|
292
|
+
const rangeEnd = (_b = rangeValue[1]) !== null && _b !== void 0 ? _b : rangePreviewEnd;
|
|
293
|
+
const rangeLower = rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart) ? rangeEnd : rangeStart;
|
|
294
|
+
const rangeUpper = rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart) ? rangeStart : rangeEnd;
|
|
381
295
|
return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
|
|
382
296
|
ref: rootRef,
|
|
383
|
-
className: cx(styles__default.default.root, styles__default.default[size], monthsToShow === 2 && styles__default.default
|
|
297
|
+
className: cx(styles__default.default.root, styles__default.default[size], monthsToShow === 2 && styles__default.default.double, className)
|
|
384
298
|
}), /*#__PURE__*/React__default.default.createElement("div", {
|
|
385
299
|
className: styles__default.default.header
|
|
386
300
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
@@ -431,10 +345,10 @@ var Calendar = function Calendar(props) {
|
|
|
431
345
|
className: cx(styles__default.default.calendars, calendarView !== "days" && styles__default.default.hidden)
|
|
432
346
|
}, Array.from({
|
|
433
347
|
length: monthsToShow
|
|
434
|
-
},
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
348
|
+
}, (_, monthIndex) => {
|
|
349
|
+
const month = addMonths(currentMonth, monthIndex);
|
|
350
|
+
const days = getMonthDays(month, weekStartsOn);
|
|
351
|
+
const heading = new Intl.DateTimeFormat(locale, {
|
|
438
352
|
month: "long",
|
|
439
353
|
year: "numeric"
|
|
440
354
|
}).format(month);
|
|
@@ -448,21 +362,19 @@ var Calendar = function Calendar(props) {
|
|
|
448
362
|
}, heading)), /*#__PURE__*/React__default.default.createElement("div", {
|
|
449
363
|
className: styles__default.default.weekdays,
|
|
450
364
|
"aria-hidden": "true"
|
|
451
|
-
}, weekdayNames.map(
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
}, name.name);
|
|
456
|
-
})), /*#__PURE__*/React__default.default.createElement("div", {
|
|
365
|
+
}, weekdayNames.map(name => (/*#__PURE__*/React__default.default.createElement("span", {
|
|
366
|
+
key: name.name,
|
|
367
|
+
className: cx(name.isWeekend && styles__default.default.weekend)
|
|
368
|
+
}, name.name)))), /*#__PURE__*/React__default.default.createElement("div", {
|
|
457
369
|
className: styles__default.default.days
|
|
458
|
-
}, days.map(
|
|
370
|
+
}, days.map(date => {
|
|
459
371
|
var _a;
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
372
|
+
const outside = date.getMonth() !== month.getMonth();
|
|
373
|
+
const disabled = isDateDisabled(date, minDate, maxDate, disabledDates);
|
|
374
|
+
const selected = isSameDay(singleValue, date) || isSameDay(rangeStart, date) || isSameDay(rangeValue[1], date);
|
|
375
|
+
const inRange = Boolean(rangeLower && rangeUpper && !isBefore(date, rangeLower) && !isBefore(rangeUpper, date));
|
|
376
|
+
const dateEvents = (_a = eventMap.get(dayKey(date))) !== null && _a !== void 0 ? _a : [];
|
|
377
|
+
const dateLabel = new Intl.DateTimeFormat(locale, {
|
|
466
378
|
dateStyle: "full"
|
|
467
379
|
}).format(date);
|
|
468
380
|
return /*#__PURE__*/React__default.default.createElement("button", {
|
|
@@ -474,36 +386,26 @@ var Calendar = function Calendar(props) {
|
|
|
474
386
|
"aria-label": dateLabel,
|
|
475
387
|
"aria-pressed": selected,
|
|
476
388
|
tabIndex: isSameDay(focusedDate, date) ? 0 : -1,
|
|
477
|
-
onClick:
|
|
389
|
+
onClick: () => {
|
|
478
390
|
selectDate(date);
|
|
479
391
|
if (outside) setMonth(startOfMonth(date));
|
|
480
392
|
},
|
|
481
|
-
onFocus:
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
return setHoveredDate(date);
|
|
486
|
-
},
|
|
487
|
-
onMouseLeave: function onMouseLeave() {
|
|
488
|
-
return setHoveredDate(null);
|
|
489
|
-
},
|
|
490
|
-
onKeyDown: function onKeyDown(event) {
|
|
491
|
-
return handleDayKeyDown(event, date);
|
|
492
|
-
}
|
|
393
|
+
onFocus: () => setFocusedDate(date),
|
|
394
|
+
onMouseEnter: () => setHoveredDate(date),
|
|
395
|
+
onMouseLeave: () => setHoveredDate(null),
|
|
396
|
+
onKeyDown: event => handleDayKeyDown(event, date)
|
|
493
397
|
}, /*#__PURE__*/React__default.default.createElement("span", null, outside && !showOutsideDays ? "" : date.getDate()), dateEvents.length > 0 && (/*#__PURE__*/React__default.default.createElement("span", {
|
|
494
398
|
className: styles__default.default.events,
|
|
495
|
-
title: dateEvents.map(
|
|
399
|
+
title: dateEvents.map(item => {
|
|
496
400
|
var _a;
|
|
497
401
|
return String((_a = item.label) !== null && _a !== void 0 ? _a : "");
|
|
498
402
|
}).join(", ")
|
|
499
|
-
}, dateEvents.slice(0, 3).map(
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
});
|
|
506
|
-
}))));
|
|
403
|
+
}, dateEvents.slice(0, 3).map((item, index) => (/*#__PURE__*/React__default.default.createElement("i", {
|
|
404
|
+
key: index,
|
|
405
|
+
style: {
|
|
406
|
+
backgroundColor: item.color
|
|
407
|
+
}
|
|
408
|
+
}))))));
|
|
507
409
|
})));
|
|
508
410
|
}))));
|
|
509
411
|
};
|