@primer/components 0.0.0-202192719508 → 0.0.0-2021927232856

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 (70) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/dist/browser.esm.js +53 -49
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +50 -46
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +5 -1
  8. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  9. package/lib/Autocomplete/Autocomplete.d.ts +2 -4
  10. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -4
  11. package/lib/SelectMenu/SelectMenu.d.ts +2 -4
  12. package/lib/TextInputWithTokens.d.ts +6 -4
  13. package/lib/TextInputWithTokens.js +102 -29
  14. package/lib/Token/Token.js +13 -2
  15. package/lib/Token/TokenBase.js +0 -4
  16. package/lib/Token/_RemoveTokenButton.js +15 -2
  17. package/lib/_TextInputWrapper.js +1 -1
  18. package/lib/theme-preval.js +2 -2
  19. package/lib/utils/testing.d.ts +1 -1
  20. package/lib-esm/ActionList/Item.d.ts +6 -0
  21. package/lib-esm/ActionList/Item.js +5 -1
  22. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  23. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -4
  24. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -4
  25. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -4
  26. package/lib-esm/TextInputWithTokens.d.ts +6 -4
  27. package/lib-esm/TextInputWithTokens.js +101 -30
  28. package/lib-esm/Token/Token.js +13 -2
  29. package/lib-esm/Token/TokenBase.js +0 -4
  30. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  31. package/lib-esm/_TextInputWrapper.js +1 -1
  32. package/lib-esm/theme-preval.js +2 -2
  33. package/lib-esm/utils/testing.d.ts +1 -1
  34. package/package.json +14 -14
  35. package/lib/DatePicker/DatePicker.d.ts +0 -48
  36. package/lib/DatePicker/DatePicker.js +0 -104
  37. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  38. package/lib/DatePicker/DatePickerAnchor.js +0 -182
  39. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  40. package/lib/DatePicker/DatePickerOverlay.js +0 -48
  41. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  42. package/lib/DatePicker/DatePickerPanel.js +0 -126
  43. package/lib/DatePicker/Day.d.ts +0 -14
  44. package/lib/DatePicker/Day.js +0 -190
  45. package/lib/DatePicker/Month.d.ts +0 -9
  46. package/lib/DatePicker/Month.js +0 -120
  47. package/lib/DatePicker/index.d.ts +0 -2
  48. package/lib/DatePicker/index.js +0 -13
  49. package/lib/DatePicker/useDatePicker.d.ts +0 -88
  50. package/lib/DatePicker/useDatePicker.js +0 -421
  51. package/lib/hooks/useDebounce.d.ts +0 -2
  52. package/lib/hooks/useDebounce.js +0 -24
  53. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  54. package/lib-esm/DatePicker/DatePicker.js +0 -87
  55. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  56. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -155
  57. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  58. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -29
  59. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  60. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  61. package/lib-esm/DatePicker/Day.d.ts +0 -14
  62. package/lib-esm/DatePicker/Day.js +0 -167
  63. package/lib-esm/DatePicker/Month.d.ts +0 -9
  64. package/lib-esm/DatePicker/Month.js +0 -96
  65. package/lib-esm/DatePicker/index.d.ts +0 -2
  66. package/lib-esm/DatePicker/index.js +0 -1
  67. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -88
  68. package/lib-esm/DatePicker/useDatePicker.js +0 -391
  69. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  70. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,120 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Month = void 0;
7
-
8
- var _dateFns = require("date-fns");
9
-
10
- var _react = _interopRequireWildcard(require("react"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _Box = _interopRequireDefault(require("../Box"));
15
-
16
- var _Text = _interopRequireDefault(require("../Text"));
17
-
18
- var _constants = require("../constants");
19
-
20
- var _Day = require("./Day");
21
-
22
- var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
23
-
24
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
-
28
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
-
30
- const weekdayEnum = {
31
- Sunday: 0,
32
- Monday: 1,
33
- Tuesday: 2,
34
- Wednesday: 3,
35
- Thursday: 4,
36
- Friday: 5,
37
- Saturday: 6
38
- };
39
- const MonthComponent = (0, _styledComponents.default)(_Box.default).withConfig({
40
- displayName: "Month__MonthComponent",
41
- componentId: "l6j7o0-0"
42
- })(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
43
- const MonthTitle = (0, _styledComponents.default)(_Text.default).withConfig({
44
- displayName: "Month__MonthTitle",
45
- componentId: "l6j7o0-1"
46
- })(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
47
- const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
48
- displayName: "Month__WeekdayHeader",
49
- componentId: "l6j7o0-2"
50
- })(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
51
-
52
- const Month = ({
53
- month,
54
- year
55
- }) => {
56
- const {
57
- configuration
58
- } = (0, _useDatePicker.default)();
59
- const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
60
- const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
61
- const weekdayHeaders = (0, _react.useMemo)(() => {
62
- var _configuration$weekSt;
63
-
64
- const now = new Date(year, month);
65
- const weekOptions = {
66
- weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
67
- };
68
- return (0, _dateFns.eachDayOfInterval)({
69
- start: (0, _dateFns.startOfWeek)(now, weekOptions),
70
- end: (0, _dateFns.endOfWeek)(now, weekOptions)
71
- }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
72
- key: `weekday-${d}-header`
73
- }, (0, _dateFns.format)(d, 'EEEEEE')));
74
- }, [configuration.weekStartsOn, month, year]);
75
-
76
- const dayAction = date => {
77
- setSelectedDay(date);
78
- };
79
-
80
- const dayComponents = (0, _react.useMemo)(() => {
81
- var _configuration$weekSt2, _configuration$weekSt3;
82
-
83
- const components = [];
84
- const firstDay = new Date(year, month, 1);
85
- const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
86
-
87
- for (let i = 0; i < preBlanks; i++) {
88
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
89
- key: `month-pre-blank-${i}`
90
- }));
91
- }
92
-
93
- for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
94
- const date = new Date(year, month, i);
95
- components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
96
- key: `day-component-${date.toString()}`,
97
- date: date,
98
- selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
99
- onAction: dayAction
100
- }));
101
- }
102
-
103
- const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
104
- const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
105
-
106
- for (let i = 6; i > postBlanks; i--) {
107
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
108
- key: `month-post-blank-${i}`
109
- }));
110
- }
111
-
112
- return components;
113
- }, [configuration.weekStartsOn, month, selectedDay, year]);
114
- return /*#__PURE__*/_react.default.createElement(MonthComponent, {
115
- role: "grid"
116
- }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
117
- };
118
-
119
- exports.Month = Month;
120
- Month.displayName = "Month";
@@ -1,2 +0,0 @@
1
- export { DatePicker } from './DatePicker';
2
- export type { DatePickerProps } from './DatePicker';
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "DatePicker", {
7
- enumerable: true,
8
- get: function () {
9
- return _DatePicker.DatePicker;
10
- }
11
- });
12
-
13
- var _DatePicker = require("./DatePicker");
@@ -1,88 +0,0 @@
1
- import React from 'react';
2
- export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
3
- export declare type DateFormat = 'short' | 'long' | string;
4
- export declare type SelectionVariant = 'single' | 'multi' | 'range';
5
- export interface DatePickerConfiguration {
6
- anchorVariant?: AnchorVariant;
7
- blockedDates?: Array<Date>;
8
- confirmation?: boolean;
9
- confirmUnsavedClose?: boolean;
10
- dateFormat?: DateFormat;
11
- disableWeekends?: boolean;
12
- iconPlacement?: 'start' | 'end' | 'none';
13
- maxDate?: Date | null;
14
- maxSelections?: number;
15
- maxRange?: number;
16
- minDate?: Date | null;
17
- placeholder?: string;
18
- rangeIncrement?: number;
19
- selection?: SelectionVariant;
20
- view?: '1-month' | '2-month';
21
- weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
22
- }
23
- export declare type RangeSelection = {
24
- from: Date;
25
- to: Date | null;
26
- };
27
- export declare type StringRangeSelection = {
28
- from: string;
29
- to: string;
30
- };
31
- export interface DatePickerContext {
32
- disabled?: boolean;
33
- configuration: DatePickerConfiguration;
34
- currentViewingDate: Date;
35
- goToMonth: (date: Date) => void;
36
- hoverRange?: RangeSelection | null;
37
- selection?: Selection;
38
- softSelection?: Partial<RangeSelection> | null;
39
- selectionActive?: boolean;
40
- formattedDate: string;
41
- nextMonth: () => void;
42
- onClose: () => void;
43
- onDateInput: (updatedSelection: Selection) => void;
44
- onDayFocus: (date: Date) => void;
45
- onSelection: (date: Date) => void;
46
- previousMonth: () => void;
47
- revertValue: () => void;
48
- saveValue: (selection?: Selection) => void;
49
- }
50
- export declare type Selection = Date | Array<Date> | RangeSelection | null;
51
- export declare type StringSelection = string | Array<string> | {
52
- to: string;
53
- from: string;
54
- } | null;
55
- export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
56
- declare const useDatePicker: (date?: Date | undefined) => {
57
- blocked: boolean | undefined;
58
- disabled: boolean;
59
- selected: DaySelection;
60
- today: boolean;
61
- configuration: DatePickerConfiguration;
62
- currentViewingDate: Date;
63
- goToMonth: (date: Date) => void;
64
- hoverRange?: RangeSelection | null | undefined;
65
- selection?: Selection | undefined;
66
- softSelection?: Partial<RangeSelection> | null | undefined;
67
- selectionActive?: boolean | undefined;
68
- formattedDate: string;
69
- nextMonth: () => void;
70
- onClose: () => void;
71
- onDateInput: (updatedSelection: Selection) => void;
72
- onDayFocus: (date: Date) => void;
73
- onSelection: (date: Date) => void;
74
- previousMonth: () => void;
75
- revertValue: () => void;
76
- saveValue: (selection?: Selection | undefined) => void;
77
- };
78
- export default useDatePicker;
79
- export interface DatePickerProviderProps {
80
- closePicker?: () => void;
81
- configuration?: DatePickerConfiguration;
82
- value?: Selection | StringSelection;
83
- }
84
- export declare function isSingleSelection(selection: Selection): selection is Date;
85
- export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
86
- export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
87
- export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
88
- export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;
@@ -1,421 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.isSingleSelection = isSingleSelection;
7
- exports.isMultiSelection = isMultiSelection;
8
- exports.isRangeSelection = isRangeSelection;
9
- exports.isStringRangeSelection = isStringRangeSelection;
10
- exports.DatePickerProvider = exports.default = void 0;
11
-
12
- var _octiconsReact = require("@primer/octicons-react");
13
-
14
- var _dateFns = require("date-fns");
15
-
16
- var _deepmerge = _interopRequireDefault(require("deepmerge"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _2 = require("..");
21
-
22
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
-
24
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
-
26
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
-
28
- const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
29
-
30
- const useDatePicker = date => {
31
- const value = (0, _react.useContext)(DatePickerContext);
32
- const [selected, setSelected] = (0, _react.useState)(false);
33
- const today = date ? (0, _dateFns.isToday)(date) : false;
34
-
35
- if (!value) {
36
- throw new Error('useDatePicker must be used inside a DatePickerProvider');
37
- }
38
-
39
- (0, _react.useEffect)(() => {
40
- if (date) {
41
- if (value.hoverRange) {
42
- if (isRangeSelection(value.hoverRange)) {
43
- if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
44
- setSelected('start');
45
- } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
46
- setSelected('end');
47
- } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
48
- setSelected('middle');
49
- } else {
50
- setSelected(false);
51
- }
52
- }
53
- } else if (value.selection) {
54
- if (isMultiSelection(value.selection)) {
55
- setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
56
- } else if (isRangeSelection(value.selection)) {
57
- if ((0, _dateFns.isEqual)(date, value.selection.from)) {
58
- setSelected('start');
59
- } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
60
- setSelected('end');
61
- } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
62
- setSelected('middle');
63
- } else {
64
- setSelected(false);
65
- }
66
- } else {
67
- setSelected((0, _dateFns.isEqual)(date, value.selection));
68
- }
69
- }
70
- }
71
- }, [date, value.hoverRange, value.selection, today]);
72
- let blocked,
73
- disabled = false;
74
-
75
- if (date) {
76
- // Determine if date is blocked out
77
- if (value.configuration.blockedDates) {
78
- blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
79
- } // Determine if date is disabled
80
-
81
-
82
- if (value.configuration.minDate || value.configuration.maxDate || value.configuration.disableWeekends) {
83
- disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false) || (value.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
84
- }
85
- }
86
-
87
- return { ...value,
88
- blocked,
89
- disabled,
90
- selected,
91
- today
92
- };
93
- };
94
-
95
- var _default = useDatePicker;
96
- exports.default = _default;
97
-
98
- function isSingleSelection(selection) {
99
- return selection instanceof Date;
100
- }
101
-
102
- function isMultiSelection(selection) {
103
- return Array.isArray(selection);
104
- }
105
-
106
- function isRangeSelection(selection) {
107
- return !!selection.from;
108
- }
109
-
110
- function isStringRangeSelection(selection) {
111
- return !!selection.from;
112
- }
113
-
114
- function parseSelection(selection, variant) {
115
- if (!selection) return;
116
-
117
- if (variant === 'multi') {
118
- if (isMultiSelection(selection)) {
119
- const parsedSelection = [];
120
-
121
- for (const d of selection) {
122
- parsedSelection.push(new Date(new Date(d).toDateString()));
123
- }
124
-
125
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
126
- } else if (selection instanceof Date) {
127
- return [new Date(new Date(selection).toDateString())];
128
- } else if (isRangeSelection(selection)) {
129
- const parsedSelection = [];
130
- parsedSelection.push(new Date(new Date(selection.from).toDateString()));
131
-
132
- if (selection.to) {
133
- parsedSelection.push(new Date(new Date(selection.to).toDateString()));
134
- }
135
-
136
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
137
- }
138
- } else if (variant === 'range') {
139
- if (isRangeSelection(selection)) {
140
- return {
141
- from: new Date(new Date(selection.from).toDateString()),
142
- to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
143
- };
144
- } else if (isMultiSelection(selection)) {
145
- return {
146
- from: new Date(new Date(selection[0]).toDateString()),
147
- to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
148
- };
149
- } else if (selection instanceof Date) {
150
- return {
151
- from: new Date(new Date(selection).toDateString()),
152
- to: null
153
- };
154
- }
155
- } else {
156
- if (selection instanceof Date) {
157
- return new Date(new Date(selection).toDateString());
158
- } else if (isMultiSelection(selection)) {
159
- return new Date(new Date(selection[0]).toDateString());
160
- } else if (isRangeSelection(selection)) {
161
- return new Date(new Date(selection.from).toDateString());
162
- } else {
163
- return;
164
- }
165
- }
166
- }
167
-
168
- const defaultConfiguration = {
169
- anchorVariant: 'button',
170
- confirmation: false,
171
- confirmUnsavedClose: false,
172
- disableWeekends: false,
173
- iconPlacement: 'start',
174
- placeholder: 'Select a Date...',
175
- selection: 'single',
176
- view: '2-month',
177
- weekStartsOn: 'Sunday'
178
- };
179
-
180
- const DatePickerProvider = ({
181
- configuration: externalConfig = {},
182
- children,
183
- closePicker,
184
- value
185
- }) => {
186
- const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
187
- const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
188
- const [isDirty, setIsDirty] = (0, _react.useState)(false);
189
- const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
190
- const [hoverRange, setHoverRange] = (0, _react.useState)(null);
191
- const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
192
- const confirm = (0, _2.useConfirm)();
193
- (0, _react.useEffect)(() => {
194
- setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
195
- setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
196
- // eslint-disable-next-line react-hooks/exhaustive-deps
197
- }, [configuration.selection, externalConfig]);
198
- const goToMonth = (0, _react.useCallback)(date => {
199
- setCurrentViewingDate(new Date(new Date(date).toDateString()));
200
- }, []);
201
- const nextMonth = (0, _react.useCallback)(() => {
202
- setCurrentViewingDate((0, _dateFns.addMonths)(currentViewingDate, 1));
203
- }, [currentViewingDate]);
204
- const previousMonth = (0, _react.useCallback)(() => {
205
- setCurrentViewingDate((0, _dateFns.subMonths)(currentViewingDate, 1));
206
- }, [currentViewingDate]);
207
- const getFormattedDate = (0, _react.useMemo)(() => {
208
- if (!selection) {
209
- return configuration.placeholder;
210
- }
211
-
212
- let template = 'MMM d';
213
-
214
- if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
215
- switch (configuration.dateFormat) {
216
- case 'short':
217
- template = 'MMM d';
218
- break;
219
-
220
- case 'long':
221
- template = 'MMM d, yyyy';
222
- break;
223
-
224
- default:
225
- template = configuration.dateFormat;
226
- break;
227
- }
228
- } else {
229
- template = 'MM/dd/yyyy';
230
- }
231
-
232
- switch (configuration.selection) {
233
- case 'single':
234
- {
235
- if (selection instanceof Date) {
236
- return (0, _dateFns.format)(selection, template);
237
- } else if (Array.isArray(selection)) {
238
- return (0, _dateFns.format)(selection[0], template);
239
- } else if (isRangeSelection(selection)) {
240
- return (0, _dateFns.format)(selection.from, template);
241
- } else {
242
- return 'Invalid Selection';
243
- }
244
- }
245
-
246
- case 'multi':
247
- {
248
- if (Array.isArray(selection)) {
249
- if (selection.length > 3) return `${selection.length} Selected`;
250
- const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
251
- return formatted;
252
- } else if (selection instanceof Date) {
253
- return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
254
- } else if (isRangeSelection(selection)) {
255
- return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
256
- } else {
257
- return 'Invalid Selection';
258
- }
259
- }
260
-
261
- case 'range':
262
- {
263
- if (isRangeSelection(selection)) {
264
- return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
265
- } else if (selection instanceof Date) {
266
- return Object.entries({
267
- from: selection,
268
- to: null
269
- }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
270
- } else if (Array.isArray(selection)) {
271
- return Object.entries({
272
- from: selection[0],
273
- to: selection[1]
274
- }) // to date can still be null
275
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
276
- .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
277
- } else {
278
- return 'Invalid Selection';
279
- }
280
- }
281
-
282
- default:
283
- {
284
- return 'Invalid Configuration';
285
- }
286
- }
287
- }, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
288
- const saveValue = (0, _react.useCallback)(updatedSelection => {
289
- setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
290
- setIsDirty(false);
291
- closePicker === null || closePicker === void 0 ? void 0 : closePicker();
292
- }, [closePicker, selection]);
293
- const revertValue = (0, _react.useCallback)(() => {
294
- setSelection(previousSelection);
295
- setIsDirty(false);
296
- }, [previousSelection]);
297
- const handleClose = (0, _react.useCallback)(async () => {
298
- if (configuration.confirmUnsavedClose) {
299
- if (isDirty) {
300
- const result = await confirm({
301
- title: 'Save Changes?',
302
- content: 'You have unsaved changes, would you like to save them?',
303
- confirmButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null), /*#__PURE__*/_react.default.createElement(_2.Text, {
304
- sx: {
305
- ml: 1
306
- }
307
- }, "Save")),
308
- cancelButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TrashIcon, null), /*#__PURE__*/_react.default.createElement(_2.Text, {
309
- sx: {
310
- ml: 1
311
- }
312
- }, "Discard"))
313
- });
314
-
315
- if (result) {
316
- saveValue();
317
- } else {
318
- revertValue();
319
- }
320
- }
321
- } else if (isDirty) revertValue();
322
- }, [configuration.confirmUnsavedClose, confirm, isDirty, revertValue, saveValue]);
323
- const inputHandler = (0, _react.useCallback)(updatedSelection => {
324
- // validate date falls within range
325
- setSelection(updatedSelection);
326
- }, []);
327
- const selectionHandler = (0, _react.useCallback)(date => {
328
- setIsDirty(true);
329
-
330
- if (configuration.selection === 'multi') {
331
- const selections = [...selection];
332
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
333
-
334
- if (existingIndex > -1) {
335
- selections.splice(existingIndex, 1);
336
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
337
- } else {
338
- if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
339
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
340
- }
341
- } else if (configuration.selection === 'range') {
342
- if (selection && isRangeSelection(selection) && !selection.to) {
343
- const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
344
- from: date,
345
- to: selection.from
346
- } : {
347
- from: selection.from,
348
- to: date
349
- };
350
- setSelection(updatedSelection);
351
- setHoverRange(null);
352
-
353
- if (!configuration.confirmation) {
354
- saveValue(updatedSelection);
355
- }
356
- } else {
357
- setHoverRange({
358
- from: date,
359
- to: date
360
- });
361
- setSelection({
362
- from: date,
363
- to: null
364
- });
365
- }
366
- } else {
367
- setSelection(date);
368
-
369
- if (!configuration.confirmation) {
370
- saveValue(date);
371
- }
372
- }
373
- }, [configuration.confirmation, configuration.maxSelections, configuration.selection, saveValue, selection]);
374
- const focusHnadler = (0, _react.useCallback)(date => {
375
- if (!selection) return;
376
- const {
377
- minDate,
378
- maxDate,
379
- selection: configSelection
380
- } = configuration;
381
-
382
- if (configSelection === 'range' && isRangeSelection(selection) && hoverRange) {
383
- let hoverDate = date;
384
- if (minDate) hoverDate = (0, _dateFns.isBefore)(date, minDate) ? minDate : hoverDate;
385
- if (maxDate) hoverDate = (0, _dateFns.isAfter)(date, maxDate) ? maxDate : hoverDate;
386
- setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
387
- from: hoverDate,
388
- to: selection.from
389
- } : {
390
- from: selection.from,
391
- to: hoverDate
392
- });
393
- }
394
- }, [configuration, hoverRange, selection]);
395
- const datePickerCtx = (0, _react.useMemo)(() => {
396
- return {
397
- configuration,
398
- currentViewingDate,
399
- disabled: false,
400
- formattedDate: getFormattedDate,
401
- goToMonth,
402
- hoverRange,
403
- nextMonth,
404
- onClose: handleClose,
405
- onDateInput: inputHandler,
406
- onDayFocus: focusHnadler,
407
- onSelection: selectionHandler,
408
- previousMonth,
409
- revertValue,
410
- saveValue,
411
- selectionActive: false,
412
- selection
413
- };
414
- }, [configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
415
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
416
- value: datePickerCtx
417
- }, children);
418
- };
419
-
420
- exports.DatePickerProvider = DatePickerProvider;
421
- DatePickerProvider.displayName = "DatePickerProvider";
@@ -1,2 +0,0 @@
1
- declare function useDebounce<T>(value: T, delay: number): T;
2
- export default useDebounce;
@@ -1,24 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = require("react");
9
-
10
- function useDebounce(value, delay) {
11
- const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
12
- (0, _react.useEffect)(() => {
13
- const handler = setTimeout(() => {
14
- setDebouncedValue(value);
15
- }, delay);
16
- return () => {
17
- clearTimeout(handler);
18
- };
19
- }, [value, delay]);
20
- return debouncedValue;
21
- }
22
-
23
- var _default = useDebounce;
24
- exports.default = _default;