@primer/components 0.0.0-202192822657 → 0.0.0-2021929142717

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 (166) hide show
  1. package/CHANGELOG.md +23 -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/ActionList2/Description.d.ts +6 -0
  9. package/lib/ActionList2/Description.js +53 -0
  10. package/lib/ActionList2/Divider.d.ts +5 -0
  11. package/lib/ActionList2/Divider.js +33 -0
  12. package/lib/ActionList2/Group.d.ts +11 -0
  13. package/lib/ActionList2/Group.js +55 -0
  14. package/lib/ActionList2/Header.d.ts +26 -0
  15. package/lib/ActionList2/Header.js +55 -0
  16. package/lib/ActionList2/Item.d.ts +48 -0
  17. package/lib/ActionList2/Item.js +204 -0
  18. package/lib/ActionList2/List.d.ts +26 -0
  19. package/lib/ActionList2/List.js +56 -0
  20. package/lib/ActionList2/Selection.d.ts +5 -0
  21. package/lib/ActionList2/Selection.js +73 -0
  22. package/lib/ActionList2/Visuals.d.ts +11 -0
  23. package/lib/ActionList2/Visuals.js +90 -0
  24. package/lib/ActionList2/hacks.d.ts +30 -0
  25. package/lib/ActionList2/hacks.js +38 -0
  26. package/lib/ActionList2/index.d.ts +28 -0
  27. package/lib/ActionList2/index.js +42 -0
  28. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  29. package/lib/Autocomplete/Autocomplete.d.ts +6 -8
  30. package/lib/Autocomplete/AutocompleteInput.d.ts +6 -8
  31. package/lib/Button/Button.d.ts +4 -4
  32. package/lib/Button/ButtonClose.d.ts +21 -21
  33. package/lib/Button/ButtonDanger.d.ts +4 -4
  34. package/lib/Button/ButtonInvisible.d.ts +4 -4
  35. package/lib/Button/ButtonOutline.d.ts +4 -4
  36. package/lib/Button/ButtonPrimary.d.ts +4 -4
  37. package/lib/CircleOcticon.d.ts +19 -19
  38. package/lib/Dialog.d.ts +21 -21
  39. package/lib/Dropdown.d.ts +82 -82
  40. package/lib/DropdownMenu/DropdownButton.d.ts +23 -23
  41. package/lib/FilterList.d.ts +19 -19
  42. package/lib/Position.d.ts +4 -4
  43. package/lib/SelectMenu/SelectMenu.d.ts +105 -107
  44. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  45. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  46. package/lib/TextInputWithTokens.d.ts +10 -8
  47. package/lib/TextInputWithTokens.js +102 -29
  48. package/lib/Timeline.d.ts +19 -19
  49. package/lib/Token/AvatarToken.d.ts +1 -1
  50. package/lib/Token/IssueLabelToken.d.ts +1 -1
  51. package/lib/Token/Token.d.ts +1 -1
  52. package/lib/Token/Token.js +13 -2
  53. package/lib/Token/TokenBase.js +0 -4
  54. package/lib/Token/_RemoveTokenButton.js +15 -2
  55. package/lib/_TextInputWrapper.js +1 -1
  56. package/lib/experiments.d.ts +1 -0
  57. package/lib/experiments.js +18 -0
  58. package/lib/sx.d.ts +2 -0
  59. package/lib/sx.js +8 -0
  60. package/lib/theme-preval.js +2 -2
  61. package/lib/utils/create-slots.d.ts +17 -0
  62. package/lib/utils/create-slots.js +105 -0
  63. package/lib/utils/testing.d.ts +1 -1
  64. package/lib/utils/use-force-update.d.ts +1 -0
  65. package/lib/utils/use-force-update.js +19 -0
  66. package/lib-esm/ActionList/Item.d.ts +6 -0
  67. package/lib-esm/ActionList/Item.js +5 -1
  68. package/lib-esm/ActionList2/Description.d.ts +6 -0
  69. package/lib-esm/ActionList2/Description.js +37 -0
  70. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  71. package/lib-esm/ActionList2/Divider.js +21 -0
  72. package/lib-esm/ActionList2/Group.d.ts +11 -0
  73. package/lib-esm/ActionList2/Group.js +38 -0
  74. package/lib-esm/ActionList2/Header.d.ts +26 -0
  75. package/lib-esm/ActionList2/Header.js +45 -0
  76. package/lib-esm/ActionList2/Item.d.ts +48 -0
  77. package/lib-esm/ActionList2/Item.js +176 -0
  78. package/lib-esm/ActionList2/List.d.ts +26 -0
  79. package/lib-esm/ActionList2/List.js +38 -0
  80. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  81. package/lib-esm/ActionList2/Selection.js +55 -0
  82. package/lib-esm/ActionList2/Visuals.d.ts +11 -0
  83. package/lib-esm/ActionList2/Visuals.js +68 -0
  84. package/lib-esm/ActionList2/hacks.d.ts +30 -0
  85. package/lib-esm/ActionList2/hacks.js +30 -0
  86. package/lib-esm/ActionList2/index.d.ts +28 -0
  87. package/lib-esm/ActionList2/index.js +29 -0
  88. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  89. package/lib-esm/Autocomplete/Autocomplete.d.ts +6 -8
  90. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +6 -8
  91. package/lib-esm/Button/Button.d.ts +4 -4
  92. package/lib-esm/Button/ButtonClose.d.ts +21 -21
  93. package/lib-esm/Button/ButtonDanger.d.ts +4 -4
  94. package/lib-esm/Button/ButtonInvisible.d.ts +4 -4
  95. package/lib-esm/Button/ButtonOutline.d.ts +4 -4
  96. package/lib-esm/Button/ButtonPrimary.d.ts +4 -4
  97. package/lib-esm/CircleOcticon.d.ts +19 -19
  98. package/lib-esm/Dialog.d.ts +21 -21
  99. package/lib-esm/Dropdown.d.ts +82 -82
  100. package/lib-esm/DropdownMenu/DropdownButton.d.ts +23 -23
  101. package/lib-esm/FilterList.d.ts +19 -19
  102. package/lib-esm/Position.d.ts +4 -4
  103. package/lib-esm/SelectMenu/SelectMenu.d.ts +105 -107
  104. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  105. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  106. package/lib-esm/TextInputWithTokens.d.ts +10 -8
  107. package/lib-esm/TextInputWithTokens.js +101 -30
  108. package/lib-esm/Timeline.d.ts +19 -19
  109. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  110. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  111. package/lib-esm/Token/Token.d.ts +1 -1
  112. package/lib-esm/Token/Token.js +13 -2
  113. package/lib-esm/Token/TokenBase.js +0 -4
  114. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  115. package/lib-esm/_TextInputWrapper.js +1 -1
  116. package/lib-esm/experiments.d.ts +1 -0
  117. package/lib-esm/experiments.js +2 -0
  118. package/lib-esm/sx.d.ts +2 -0
  119. package/lib-esm/sx.js +3 -1
  120. package/lib-esm/theme-preval.js +2 -2
  121. package/lib-esm/utils/create-slots.d.ts +17 -0
  122. package/lib-esm/utils/create-slots.js +84 -0
  123. package/lib-esm/utils/testing.d.ts +1 -1
  124. package/lib-esm/utils/use-force-update.d.ts +1 -0
  125. package/lib-esm/utils/use-force-update.js +6 -0
  126. package/package.json +16 -14
  127. package/lib/DatePicker/DatePicker.d.ts +0 -48
  128. package/lib/DatePicker/DatePicker.js +0 -106
  129. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  130. package/lib/DatePicker/DatePickerAnchor.js +0 -194
  131. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  132. package/lib/DatePicker/DatePickerOverlay.js +0 -48
  133. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  134. package/lib/DatePicker/DatePickerPanel.js +0 -126
  135. package/lib/DatePicker/Day.d.ts +0 -14
  136. package/lib/DatePicker/Day.js +0 -190
  137. package/lib/DatePicker/Month.d.ts +0 -9
  138. package/lib/DatePicker/Month.js +0 -120
  139. package/lib/DatePicker/dateParser.d.ts +0 -11
  140. package/lib/DatePicker/dateParser.js +0 -188
  141. package/lib/DatePicker/index.d.ts +0 -2
  142. package/lib/DatePicker/index.js +0 -13
  143. package/lib/DatePicker/useDatePicker.d.ts +0 -89
  144. package/lib/DatePicker/useDatePicker.js +0 -370
  145. package/lib/hooks/useDebounce.d.ts +0 -2
  146. package/lib/hooks/useDebounce.js +0 -24
  147. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  148. package/lib-esm/DatePicker/DatePicker.js +0 -89
  149. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  150. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -167
  151. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  152. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -29
  153. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  154. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  155. package/lib-esm/DatePicker/Day.d.ts +0 -14
  156. package/lib-esm/DatePicker/Day.js +0 -167
  157. package/lib-esm/DatePicker/Month.d.ts +0 -9
  158. package/lib-esm/DatePicker/Month.js +0 -96
  159. package/lib-esm/DatePicker/dateParser.d.ts +0 -11
  160. package/lib-esm/DatePicker/dateParser.js +0 -174
  161. package/lib-esm/DatePicker/index.d.ts +0 -2
  162. package/lib-esm/DatePicker/index.js +0 -1
  163. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -89
  164. package/lib-esm/DatePicker/useDatePicker.js +0 -339
  165. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  166. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,188 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.formatDate = exports.parseDate = void 0;
7
-
8
- var _dateFns = require("date-fns");
9
-
10
- var _useDatePicker = require("./useDatePicker");
11
-
12
- const INVALID_DATE = 'Invalid Date';
13
- const DATE_REGEX = /(\d{1,2}[-/.]\d{1,2}[-/.]\d{2,4})(?:\s?-\s?)?(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})?/;
14
-
15
- const sanitizeDate = dateString => {
16
- return dateString.replaceAll('.', '/').replaceAll('-', '/');
17
- };
18
-
19
- const parseDate = (dateString, variant = 'single') => {
20
- const dateItems = dateString.matchAll(DATE_REGEX);
21
- const parsedDateItems = []; // Determine Format
22
-
23
- for (const d of dateItems) {
24
- const tempD1 = new Date(sanitizeDate(d[1]));
25
- const tempD2 = d[2] ? new Date(sanitizeDate(d[2])) : null;
26
-
27
- if (tempD2) {
28
- // Range
29
- if (tempD1.toString() !== INVALID_DATE && tempD2.toString() !== INVALID_DATE) {
30
- parsedDateItems.push((0, _dateFns.isBefore)(tempD1, tempD2) ? {
31
- from: tempD1,
32
- to: tempD2
33
- } : {
34
- from: tempD2,
35
- to: tempD1
36
- });
37
- } else if (tempD1.toString() !== INVALID_DATE) {
38
- parsedDateItems.push(tempD1);
39
- } else if (tempD2.toString() !== INVALID_DATE) {
40
- parsedDateItems.push(tempD2);
41
- }
42
- } else {
43
- if (tempD1.toString() !== INVALID_DATE) {
44
- parsedDateItems.push(tempD1);
45
- }
46
- }
47
- }
48
-
49
- if (parsedDateItems.length === 0) {
50
- // No Valid Dates
51
- return [];
52
- } // Cast Format based on variant
53
-
54
-
55
- switch (variant) {
56
- case 'single':
57
- {
58
- return parsedDateItems[0];
59
- }
60
-
61
- case 'multi':
62
- {
63
- // TODO: Cast ranges as individual dates
64
- const expandedParsedItems = [];
65
-
66
- for (const item of parsedDateItems) {
67
- if ((0, _useDatePicker.isRangeSelection)(item)) {
68
- if (item.to) {
69
- expandedParsedItems.push([...(0, _dateFns.eachDayOfInterval)({
70
- start: item.from,
71
- end: item.to
72
- })]);
73
- } else {
74
- expandedParsedItems.push(item.from);
75
- }
76
- } else {
77
- if (item) expandedParsedItems.push([...item]);
78
- }
79
- }
80
-
81
- return expandedParsedItems;
82
- }
83
-
84
- case 'range':
85
- {
86
- // TODO: Filter to only ranges
87
- return parsedDateItems.filter(d => (0, _useDatePicker.isRangeSelection)(d))[0];
88
- }
89
-
90
- default:
91
- {
92
- return parsedDateItems[0];
93
- }
94
- }
95
- };
96
-
97
- exports.parseDate = parseDate;
98
-
99
- const formatDate = ({
100
- selection,
101
- anchorVariant = 'button',
102
- dateFormat = 'short',
103
- placeholder = 'Select a Date',
104
- variant = 'single'
105
- }) => {
106
- if (!selection) {
107
- if (anchorVariant === 'input') return '';
108
- return placeholder;
109
- }
110
-
111
- let template = 'MMM d';
112
-
113
- if (anchorVariant !== 'input' && dateFormat) {
114
- switch (dateFormat) {
115
- case 'short':
116
- template = 'MMM d';
117
- break;
118
-
119
- case 'long':
120
- template = 'MMM d, yyyy';
121
- break;
122
-
123
- default:
124
- template = dateFormat;
125
- break;
126
- }
127
- } else {
128
- template = 'MM/dd/yyyy';
129
- }
130
-
131
- switch (variant) {
132
- case 'single':
133
- {
134
- if (selection instanceof Date) {
135
- return (0, _dateFns.format)(selection, template);
136
- } else if (Array.isArray(selection)) {
137
- return (0, _dateFns.format)(selection[0], template);
138
- } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
139
- return (0, _dateFns.format)(selection.from, template);
140
- } else {
141
- return 'Invalid Selection';
142
- }
143
- }
144
-
145
- case 'multi':
146
- {
147
- if (Array.isArray(selection)) {
148
- if (selection.length > 3) return `${selection.length} Selected`;
149
- const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
150
- return formatted;
151
- } else if (selection instanceof Date) {
152
- return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
153
- } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
154
- return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
155
- } else {
156
- return 'Invalid Selection';
157
- }
158
- }
159
-
160
- case 'range':
161
- {
162
- if ((0, _useDatePicker.isRangeSelection)(selection)) {
163
- return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
164
- } else if (selection instanceof Date) {
165
- return Object.entries({
166
- from: selection,
167
- to: null
168
- }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
169
- } else if (Array.isArray(selection)) {
170
- return Object.entries({
171
- from: selection[0],
172
- to: selection[1]
173
- }) // to date can still be null
174
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
175
- .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
176
- } else {
177
- return 'Invalid Selection';
178
- }
179
- }
180
-
181
- default:
182
- {
183
- return 'Invalid Configuration';
184
- }
185
- }
186
- };
187
-
188
- exports.formatDate = formatDate;
@@ -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,89 +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
- maxRangeSize?: number;
16
- minDate?: Date | null;
17
- placeholder?: string;
18
- rangeIncrement?: number;
19
- showInputPrompt?: boolean;
20
- variant?: SelectionVariant;
21
- view?: '1-month' | '2-month';
22
- weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
23
- }
24
- export declare type RangeSelection = {
25
- from: Date;
26
- to: Date | null;
27
- };
28
- export declare type StringRangeSelection = {
29
- from: string;
30
- to: string;
31
- };
32
- export interface DatePickerContext {
33
- disabled?: boolean;
34
- configuration: DatePickerConfiguration;
35
- currentViewingDate: Date;
36
- goToMonth: (date: Date) => void;
37
- hoverRange?: RangeSelection | null;
38
- selection?: Selection;
39
- softSelection?: Partial<RangeSelection> | null;
40
- selectionActive?: boolean;
41
- formattedDate: string;
42
- nextMonth: () => void;
43
- onClose: () => void;
44
- onDateInput: (updatedSelection: Selection) => void;
45
- onDayFocus: (date: Date) => void;
46
- onSelection: (date: Date) => void;
47
- previousMonth: () => void;
48
- revertValue: () => void;
49
- saveValue: (selection?: Selection) => void;
50
- }
51
- export declare type Selection = Date | Array<Date> | RangeSelection | null;
52
- export declare type StringSelection = string | Array<string> | {
53
- to: string;
54
- from: string;
55
- } | null;
56
- export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
57
- declare const useDatePicker: (date?: Date | undefined) => {
58
- blocked: boolean | undefined;
59
- disabled: boolean;
60
- selected: DaySelection;
61
- today: boolean;
62
- configuration: DatePickerConfiguration;
63
- currentViewingDate: Date;
64
- goToMonth: (date: Date) => void;
65
- hoverRange?: RangeSelection | null | undefined;
66
- selection?: Selection | undefined;
67
- softSelection?: Partial<RangeSelection> | null | undefined;
68
- selectionActive?: boolean | undefined;
69
- formattedDate: string;
70
- nextMonth: () => void;
71
- onClose: () => void;
72
- onDateInput: (updatedSelection: Selection) => void;
73
- onDayFocus: (date: Date) => void;
74
- onSelection: (date: Date) => void;
75
- previousMonth: () => void;
76
- revertValue: () => void;
77
- saveValue: (selection?: Selection | undefined) => void;
78
- };
79
- export default useDatePicker;
80
- export interface DatePickerProviderProps {
81
- closePicker?: () => void;
82
- configuration?: DatePickerConfiguration;
83
- value?: Selection | StringSelection;
84
- }
85
- export declare function isSingleSelection(selection: Selection): selection is Date;
86
- export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
87
- export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
88
- export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
89
- export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;
@@ -1,370 +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 _ = require("..");
21
-
22
- var _dateParser = require("./dateParser");
23
-
24
- 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); }
25
-
26
- 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; }
27
-
28
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
-
30
- const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
31
-
32
- const useDatePicker = date => {
33
- const value = (0, _react.useContext)(DatePickerContext);
34
- const [selected, setSelected] = (0, _react.useState)(false);
35
- const today = date ? (0, _dateFns.isToday)(date) : false;
36
-
37
- if (!value) {
38
- throw new Error('useDatePicker must be used inside a DatePickerProvider');
39
- }
40
-
41
- (0, _react.useEffect)(() => {
42
- if (date) {
43
- if (value.hoverRange) {
44
- if (isRangeSelection(value.hoverRange)) {
45
- if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
46
- setSelected('start');
47
- } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
48
- setSelected('end');
49
- } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
50
- setSelected('middle');
51
- } else {
52
- setSelected(false);
53
- }
54
- }
55
- } else if (value.selection) {
56
- if (isMultiSelection(value.selection)) {
57
- setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
58
- } else if (isRangeSelection(value.selection)) {
59
- if ((0, _dateFns.isEqual)(date, value.selection.from)) {
60
- setSelected('start');
61
- } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
62
- setSelected('end');
63
- } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
64
- setSelected('middle');
65
- } else {
66
- setSelected(false);
67
- }
68
- } else {
69
- setSelected((0, _dateFns.isEqual)(date, value.selection));
70
- }
71
- }
72
- }
73
- }, [date, value.hoverRange, value.selection, today]);
74
- let blocked,
75
- disabled = false;
76
-
77
- if (date) {
78
- // Determine if date is blocked out
79
- if (value.configuration.blockedDates) {
80
- blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
81
- } // Determine if date is disabled
82
-
83
-
84
- if (value.configuration.minDate || value.configuration.maxDate || value.configuration.disableWeekends) {
85
- 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);
86
- }
87
- }
88
-
89
- return { ...value,
90
- blocked,
91
- disabled,
92
- selected,
93
- today
94
- };
95
- };
96
-
97
- var _default = useDatePicker;
98
- exports.default = _default;
99
-
100
- function isSingleSelection(selection) {
101
- return selection instanceof Date;
102
- }
103
-
104
- function isMultiSelection(selection) {
105
- return Array.isArray(selection);
106
- }
107
-
108
- function isRangeSelection(selection) {
109
- return !!selection.from;
110
- }
111
-
112
- function isStringRangeSelection(selection) {
113
- return !!selection.from;
114
- }
115
-
116
- function parseSelection(selection, variant) {
117
- if (!selection) return;
118
-
119
- if (variant === 'multi') {
120
- if (isMultiSelection(selection)) {
121
- const parsedSelection = [];
122
-
123
- for (const d of selection) {
124
- parsedSelection.push(new Date(new Date(d).toDateString()));
125
- }
126
-
127
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
128
- } else if (selection instanceof Date) {
129
- return [new Date(new Date(selection).toDateString())];
130
- } else if (isRangeSelection(selection)) {
131
- const parsedSelection = [];
132
- parsedSelection.push(new Date(new Date(selection.from).toDateString()));
133
-
134
- if (selection.to) {
135
- parsedSelection.push(new Date(new Date(selection.to).toDateString()));
136
- }
137
-
138
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
139
- }
140
- } else if (variant === 'range') {
141
- if (isRangeSelection(selection)) {
142
- return {
143
- from: new Date(new Date(selection.from).toDateString()),
144
- to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
145
- };
146
- } else if (isMultiSelection(selection)) {
147
- return {
148
- from: new Date(new Date(selection[0]).toDateString()),
149
- to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
150
- };
151
- } else if (selection instanceof Date) {
152
- return {
153
- from: new Date(new Date(selection).toDateString()),
154
- to: null
155
- };
156
- }
157
- } else {
158
- if (selection instanceof Date) {
159
- return new Date(new Date(selection).toDateString());
160
- } else if (isMultiSelection(selection)) {
161
- return new Date(new Date(selection[0]).toDateString());
162
- } else if (isRangeSelection(selection)) {
163
- return new Date(new Date(selection.from).toDateString());
164
- } else {
165
- return;
166
- }
167
- }
168
- }
169
-
170
- const defaultConfiguration = {
171
- anchorVariant: 'button',
172
- confirmation: false,
173
- confirmUnsavedClose: false,
174
- disableWeekends: false,
175
- iconPlacement: 'start',
176
- placeholder: 'Select a Date...',
177
- showInputPrompt: false,
178
- variant: 'single',
179
- view: '2-month',
180
- weekStartsOn: 'Sunday'
181
- };
182
-
183
- const DatePickerProvider = ({
184
- configuration: externalConfig = {},
185
- children,
186
- closePicker,
187
- value
188
- }) => {
189
- const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
190
- const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.variant));
191
- const [isDirty, setIsDirty] = (0, _react.useState)(false);
192
- const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.variant));
193
- const [hoverRange, setHoverRange] = (0, _react.useState)(null);
194
- const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
195
- const confirm = (0, _.useConfirm)();
196
- (0, _react.useEffect)(() => {
197
- setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
198
- setSelection(parseSelection(selection, configuration.variant)); // Don't want this to run every time selection gets updated
199
- // eslint-disable-next-line react-hooks/exhaustive-deps
200
- }, [configuration.variant, externalConfig]);
201
- const goToMonth = (0, _react.useCallback)(date => {
202
- setCurrentViewingDate(new Date(new Date(date).toDateString()));
203
- }, []);
204
- const nextMonth = (0, _react.useCallback)(() => {
205
- setCurrentViewingDate((0, _dateFns.addMonths)(currentViewingDate, 1));
206
- }, [currentViewingDate]);
207
- const previousMonth = (0, _react.useCallback)(() => {
208
- setCurrentViewingDate((0, _dateFns.subMonths)(currentViewingDate, 1));
209
- }, [currentViewingDate]);
210
- const getFormattedDate = (0, _react.useMemo)(() => {
211
- const {
212
- anchorVariant,
213
- dateFormat,
214
- placeholder,
215
- variant
216
- } = configuration;
217
- return (0, _dateParser.formatDate)({
218
- selection,
219
- anchorVariant,
220
- dateFormat,
221
- placeholder,
222
- variant
223
- });
224
- }, [configuration, selection]);
225
- const saveValue = (0, _react.useCallback)(updatedSelection => {
226
- setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
227
- setIsDirty(false);
228
- closePicker === null || closePicker === void 0 ? void 0 : closePicker();
229
- }, [closePicker, selection]);
230
- const revertValue = (0, _react.useCallback)(() => {
231
- setSelection(previousSelection);
232
- setIsDirty(false);
233
- }, [previousSelection]);
234
- const handleClose = (0, _react.useCallback)(async () => {
235
- if (configuration.confirmUnsavedClose) {
236
- if (isDirty) {
237
- const result = await confirm({
238
- title: 'Save Changes?',
239
- content: 'You have unsaved changes, would you like to save them?',
240
- confirmButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
241
- sx: {
242
- ml: 1
243
- }
244
- }, "Save")),
245
- cancelButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TrashIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
246
- sx: {
247
- ml: 1
248
- }
249
- }, "Discard"))
250
- });
251
-
252
- if (result) {
253
- saveValue();
254
- } else {
255
- revertValue();
256
- }
257
- }
258
- } else if (isDirty) revertValue();
259
- }, [configuration.confirmUnsavedClose, confirm, isDirty, revertValue, saveValue]);
260
- const inputHandler = (0, _react.useCallback)(updatedSelection => {
261
- // validate date falls within range
262
- setSelection(updatedSelection);
263
- }, []);
264
- const selectionHandler = (0, _react.useCallback)(date => {
265
- setIsDirty(true);
266
-
267
- if (configuration.variant === 'multi') {
268
- const selections = [...selection];
269
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
270
-
271
- if (existingIndex > -1) {
272
- selections.splice(existingIndex, 1);
273
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
274
- } else {
275
- if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
276
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
277
- }
278
- } else if (configuration.variant === 'range') {
279
- if (selection && isRangeSelection(selection) && !selection.to) {
280
- let toDate = date;
281
-
282
- if (configuration.maxRangeSize && Math.abs((0, _dateFns.differenceInDays)(selection.from, date)) >= configuration.maxRangeSize) {
283
- toDate = (0, _dateFns.isBefore)(date, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
284
- }
285
-
286
- const updatedSelection = (0, _dateFns.isBefore)(toDate, selection.from) ? {
287
- from: toDate,
288
- to: selection.from
289
- } : {
290
- from: selection.from,
291
- to: toDate
292
- };
293
- setSelection(updatedSelection);
294
- setHoverRange(null);
295
-
296
- if (!configuration.confirmation) {
297
- saveValue(updatedSelection);
298
- }
299
- } else {
300
- setHoverRange({
301
- from: date,
302
- to: date
303
- });
304
- setSelection({
305
- from: date,
306
- to: null
307
- });
308
- }
309
- } else {
310
- setSelection(date);
311
-
312
- if (!configuration.confirmation) {
313
- saveValue(date);
314
- }
315
- }
316
- }, [configuration.confirmation, configuration.maxRangeSize, configuration.maxSelections, configuration.variant, saveValue, selection]);
317
- const focusHnadler = (0, _react.useCallback)(date => {
318
- if (!selection) return;
319
- const {
320
- minDate,
321
- maxDate,
322
- maxRangeSize,
323
- variant
324
- } = configuration;
325
-
326
- if (variant === 'range' && isRangeSelection(selection) && hoverRange) {
327
- let hoverDate = date;
328
- if (minDate) hoverDate = (0, _dateFns.isBefore)(date, minDate) ? minDate : hoverDate;
329
- if (maxDate) hoverDate = (0, _dateFns.isAfter)(date, maxDate) ? maxDate : hoverDate;
330
-
331
- if (maxRangeSize && Math.abs((0, _dateFns.differenceInDays)(selection.from, hoverDate)) >= maxRangeSize) {
332
- hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
333
- }
334
-
335
- setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
336
- from: hoverDate,
337
- to: selection.from
338
- } : {
339
- from: selection.from,
340
- to: hoverDate
341
- });
342
- }
343
- }, [configuration, hoverRange, selection]);
344
- const datePickerCtx = (0, _react.useMemo)(() => {
345
- return {
346
- configuration,
347
- currentViewingDate,
348
- disabled: false,
349
- formattedDate: getFormattedDate,
350
- goToMonth,
351
- hoverRange,
352
- nextMonth,
353
- onClose: handleClose,
354
- onDateInput: inputHandler,
355
- onDayFocus: focusHnadler,
356
- onSelection: selectionHandler,
357
- previousMonth,
358
- revertValue,
359
- saveValue,
360
- selectionActive: false,
361
- selection
362
- };
363
- }, [configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
364
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
365
- value: datePickerCtx
366
- }, children);
367
- };
368
-
369
- exports.DatePickerProvider = DatePickerProvider;
370
- 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;