@primer/components 0.0.0-20219254849 → 0.0.0-20219256296

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 (114) hide show
  1. package/CHANGELOG.md +4 -8
  2. package/dist/browser.esm.js +3 -3
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +3 -3
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  7. package/lib/Autocomplete/Autocomplete.d.ts +11 -13
  8. package/lib/Autocomplete/AutocompleteInput.d.ts +11 -13
  9. package/lib/Button/Button.d.ts +11 -11
  10. package/lib/Button/ButtonBase.d.ts +1 -1
  11. package/lib/Button/ButtonClose.d.ts +29 -29
  12. package/lib/Button/ButtonDanger.d.ts +11 -11
  13. package/lib/Button/ButtonInvisible.d.ts +11 -11
  14. package/lib/Button/ButtonOutline.d.ts +11 -11
  15. package/lib/Button/ButtonPrimary.d.ts +11 -11
  16. package/lib/Button/ButtonStyles.js +1 -1
  17. package/lib/CircleBadge.d.ts +2 -2
  18. package/lib/CircleOcticon.d.ts +33 -33
  19. package/lib/Dialog.d.ts +35 -35
  20. package/lib/Dropdown.d.ts +110 -110
  21. package/lib/DropdownMenu/DropdownButton.d.ts +30 -30
  22. package/lib/FilterList.d.ts +26 -26
  23. package/lib/Label.d.ts +1 -1
  24. package/lib/NewButton/button.d.ts +18 -0
  25. package/lib/NewButton/button.js +275 -0
  26. package/lib/NewButton/index.d.ts +4 -0
  27. package/lib/NewButton/index.js +21 -0
  28. package/lib/NewButton/visual.d.ts +6 -0
  29. package/lib/NewButton/visual.js +28 -0
  30. package/lib/Position.d.ts +4 -4
  31. package/lib/ProgressBar.d.ts +1 -1
  32. package/lib/SelectMenu/SelectMenu.d.ts +151 -153
  33. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  34. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  35. package/lib/TextInputWithTokens.d.ts +11 -13
  36. package/lib/Timeline.d.ts +33 -33
  37. package/lib/Token/AvatarToken.d.ts +1 -1
  38. package/lib/Token/IssueLabelToken.d.ts +1 -1
  39. package/lib/Token/Token.d.ts +1 -1
  40. package/lib/_TextInputWrapper.d.ts +1 -1
  41. package/lib/constants.js +3 -1
  42. package/lib/theme-preval.js +2 -2
  43. package/lib/utils/testing.d.ts +1 -1
  44. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  45. package/lib-esm/Autocomplete/Autocomplete.d.ts +11 -13
  46. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +11 -13
  47. package/lib-esm/Button/Button.d.ts +11 -11
  48. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  49. package/lib-esm/Button/ButtonClose.d.ts +29 -29
  50. package/lib-esm/Button/ButtonDanger.d.ts +11 -11
  51. package/lib-esm/Button/ButtonInvisible.d.ts +11 -11
  52. package/lib-esm/Button/ButtonOutline.d.ts +11 -11
  53. package/lib-esm/Button/ButtonPrimary.d.ts +11 -11
  54. package/lib-esm/Button/ButtonStyles.js +1 -1
  55. package/lib-esm/CircleBadge.d.ts +2 -2
  56. package/lib-esm/CircleOcticon.d.ts +33 -33
  57. package/lib-esm/Dialog.d.ts +35 -35
  58. package/lib-esm/Dropdown.d.ts +110 -110
  59. package/lib-esm/DropdownMenu/DropdownButton.d.ts +30 -30
  60. package/lib-esm/FilterList.d.ts +26 -26
  61. package/lib-esm/Label.d.ts +1 -1
  62. package/lib-esm/NewButton/button.d.ts +18 -0
  63. package/lib-esm/NewButton/button.js +257 -0
  64. package/lib-esm/NewButton/index.d.ts +4 -0
  65. package/lib-esm/NewButton/index.js +3 -0
  66. package/lib-esm/NewButton/visual.d.ts +6 -0
  67. package/lib-esm/NewButton/visual.js +17 -0
  68. package/lib-esm/Position.d.ts +4 -4
  69. package/lib-esm/ProgressBar.d.ts +1 -1
  70. package/lib-esm/SelectMenu/SelectMenu.d.ts +151 -153
  71. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  72. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  73. package/lib-esm/TextInputWithTokens.d.ts +11 -13
  74. package/lib-esm/Timeline.d.ts +33 -33
  75. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  76. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  77. package/lib-esm/Token/Token.d.ts +1 -1
  78. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  79. package/lib-esm/constants.js +3 -1
  80. package/lib-esm/theme-preval.js +2 -2
  81. package/lib-esm/utils/testing.d.ts +1 -1
  82. package/package.json +8 -9
  83. package/lib/DatePicker/DatePicker.d.ts +0 -48
  84. package/lib/DatePicker/DatePicker.js +0 -88
  85. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  86. package/lib/DatePicker/DatePickerAnchor.js +0 -88
  87. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  88. package/lib/DatePicker/DatePickerOverlay.js +0 -39
  89. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  90. package/lib/DatePicker/DatePickerPanel.js +0 -126
  91. package/lib/DatePicker/Day.d.ts +0 -14
  92. package/lib/DatePicker/Day.js +0 -174
  93. package/lib/DatePicker/Month.d.ts +0 -9
  94. package/lib/DatePicker/Month.js +0 -97
  95. package/lib/DatePicker/index.d.ts +0 -2
  96. package/lib/DatePicker/index.js +0 -13
  97. package/lib/DatePicker/useDatePicker.d.ts +0 -81
  98. package/lib/DatePicker/useDatePicker.js +0 -371
  99. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  100. package/lib-esm/DatePicker/DatePicker.js +0 -71
  101. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  102. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -63
  103. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  104. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -24
  105. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  106. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  107. package/lib-esm/DatePicker/Day.d.ts +0 -14
  108. package/lib-esm/DatePicker/Day.js +0 -151
  109. package/lib-esm/DatePicker/Month.d.ts +0 -9
  110. package/lib-esm/DatePicker/Month.js +0 -74
  111. package/lib-esm/DatePicker/index.d.ts +0 -2
  112. package/lib-esm/DatePicker/index.js +0 -1
  113. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -81
  114. package/lib-esm/DatePicker/useDatePicker.js +0 -343
@@ -1,97 +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
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- const MonthComponent = (0, _styledComponents.default)(_Box.default).withConfig({
29
- displayName: "Month__MonthComponent",
30
- componentId: "l6j7o0-0"
31
- })(["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;"]);
32
- const MonthTitle = (0, _styledComponents.default)(_Text.default).withConfig({
33
- displayName: "Month__MonthTitle",
34
- componentId: "l6j7o0-1"
35
- })(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
36
- const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
37
- displayName: "Month__WeekdayHeader",
38
- componentId: "l6j7o0-2"
39
- })(["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'));
40
-
41
- const Month = ({
42
- month,
43
- year
44
- }) => {
45
- const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
46
- const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
47
- const weekdayHeaders = (0, _react.useMemo)(() => {
48
- const now = new Date(year, month);
49
- return (0, _dateFns.eachDayOfInterval)({
50
- start: (0, _dateFns.startOfWeek)(now),
51
- end: (0, _dateFns.endOfWeek)(now)
52
- }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
53
- key: `weekday-${d}-header`
54
- }, (0, _dateFns.format)(d, 'EEEEEE')));
55
- }, [month, year]);
56
-
57
- const dayAction = date => {
58
- setSelectedDay(date);
59
- };
60
-
61
- const dayComponents = (0, _react.useMemo)(() => {
62
- const components = [];
63
- const firstDay = new Date(year, month, 1);
64
-
65
- for (let i = 0; i < firstDay.getDay(); i++) {
66
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
67
- key: `month-pre-blank-${i}`
68
- }));
69
- }
70
-
71
- for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
72
- const date = new Date(year, month, i);
73
- components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
74
- key: `day-component-${date.toString()}`,
75
- date: date,
76
- selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
77
- onAction: dayAction
78
- }));
79
- }
80
-
81
- const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
82
-
83
- for (let i = 6; i > lastDay.getDay(); i--) {
84
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
85
- key: `month-post-blank-${i}`
86
- }));
87
- }
88
-
89
- return components;
90
- }, [month, selectedDay, year]);
91
- return /*#__PURE__*/_react.default.createElement(MonthComponent, {
92
- role: "grid"
93
- }, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
94
- };
95
-
96
- exports.Month = Month;
97
- 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,81 +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
- contiguousSelection?: boolean;
10
- dateFormat?: DateFormat;
11
- dimWeekends?: boolean;
12
- minDate?: Date;
13
- maxDate?: Date;
14
- placeholder?: string;
15
- rangeIncrement?: number;
16
- selection?: SelectionVariant;
17
- view?: '1-month' | '2-month';
18
- }
19
- export declare type RangeSelection = {
20
- from: Date;
21
- to: Date | null;
22
- };
23
- export declare type StringRangeSelection = {
24
- from: string;
25
- to: string;
26
- };
27
- export interface DatePickerContext {
28
- disabled?: boolean;
29
- configuration: DatePickerConfiguration;
30
- currentViewingDate: Date;
31
- goToMonth: (date: Date) => void;
32
- hoverRange?: RangeSelection | null;
33
- selection?: Selection;
34
- softSelection?: Partial<RangeSelection> | null;
35
- selectionActive?: boolean;
36
- formattedDate: string;
37
- nextMonth: () => void;
38
- onSelection: (date: Date) => void;
39
- onDayFocus: (date: Date) => void;
40
- onDayBlur: (date: Date) => void;
41
- previousMonth: () => void;
42
- revertValue: () => void;
43
- saveValue: (selection?: Selection) => void;
44
- }
45
- export declare type Selection = Date | Array<Date> | RangeSelection | null;
46
- export declare type StringSelection = string | Array<string> | {
47
- to: string;
48
- from: string;
49
- } | null;
50
- export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
51
- declare const useDatePicker: (date?: Date | undefined) => {
52
- blocked: boolean | undefined;
53
- disabled: boolean;
54
- selected: DaySelection;
55
- configuration: DatePickerConfiguration;
56
- currentViewingDate: Date;
57
- goToMonth: (date: Date) => void;
58
- hoverRange?: RangeSelection | null | undefined;
59
- selection?: Selection | undefined;
60
- softSelection?: Partial<RangeSelection> | null | undefined;
61
- selectionActive?: boolean | undefined;
62
- formattedDate: string;
63
- nextMonth: () => void;
64
- onSelection: (date: Date) => void;
65
- onDayFocus: (date: Date) => void;
66
- onDayBlur: (date: Date) => void;
67
- previousMonth: () => void;
68
- revertValue: () => void;
69
- saveValue: (selection?: Selection | undefined) => void;
70
- };
71
- export default useDatePicker;
72
- export interface DatePickerProviderProps {
73
- closePicker?: () => void;
74
- configuration?: DatePickerConfiguration;
75
- value?: Selection | StringSelection;
76
- }
77
- export declare function isSingleSelection(selection: Selection): selection is Date;
78
- export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
79
- export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
80
- export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
81
- export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;
@@ -1,371 +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 _dateFns = require("date-fns");
13
-
14
- var _deepmerge = _interopRequireDefault(require("deepmerge"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- 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); }
19
-
20
- 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; }
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
- const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
25
-
26
- const useDatePicker = date => {
27
- const value = (0, _react.useContext)(DatePickerContext);
28
- const [selected, setSelected] = (0, _react.useState)(false);
29
-
30
- if (!value) {
31
- throw new Error('useDatePicker must be used inside a DatePickerProvider');
32
- }
33
-
34
- (0, _react.useEffect)(() => {
35
- if (date) {
36
- if (value.hoverRange) {
37
- if (isRangeSelection(value.hoverRange)) {
38
- if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
39
- setSelected('start');
40
- } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
41
- setSelected('end');
42
- } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
43
- setSelected('middle');
44
- } else {
45
- setSelected(false);
46
- }
47
- }
48
- } else if (value.selection) {
49
- if (isMultiSelection(value.selection)) {
50
- setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
51
- } else if (isRangeSelection(value.selection)) {
52
- if ((0, _dateFns.isEqual)(date, value.selection.from)) {
53
- setSelected('start');
54
- } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
55
- setSelected('end');
56
- } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
57
- setSelected('middle');
58
- } else {
59
- setSelected(false);
60
- }
61
- } else {
62
- setSelected((0, _dateFns.isEqual)(date, value.selection));
63
- }
64
- }
65
- }
66
- }, [date, value.hoverRange, value.selection]);
67
- let blocked,
68
- disabled = false;
69
-
70
- if (date) {
71
- // Determine if date is blocked out
72
- if (value.configuration.blockedDates) {
73
- blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
74
- } // Determine if date is disabled
75
-
76
-
77
- if (value.configuration.minDate || value.configuration.maxDate) {
78
- disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false);
79
- }
80
- }
81
-
82
- return { ...value,
83
- blocked,
84
- disabled,
85
- selected
86
- };
87
- };
88
-
89
- var _default = useDatePicker;
90
- exports.default = _default;
91
-
92
- function isSingleSelection(selection) {
93
- return selection instanceof Date;
94
- }
95
-
96
- function isMultiSelection(selection) {
97
- return Array.isArray(selection);
98
- }
99
-
100
- function isRangeSelection(selection) {
101
- return !!selection.from;
102
- }
103
-
104
- function isStringRangeSelection(selection) {
105
- return !!selection.from;
106
- }
107
-
108
- function parseSelection(selection, variant) {
109
- if (!selection) return;
110
-
111
- if (variant === 'multi') {
112
- if (isMultiSelection(selection)) {
113
- const parsedSelection = [];
114
-
115
- for (const d of selection) {
116
- parsedSelection.push(new Date(new Date(d).toDateString()));
117
- }
118
-
119
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
120
- } else if (selection instanceof Date) {
121
- return [new Date(new Date(selection).toDateString())];
122
- } else if (isRangeSelection(selection)) {
123
- const parsedSelection = [];
124
- parsedSelection.push(new Date(new Date(selection.from).toDateString()));
125
-
126
- if (selection.to) {
127
- parsedSelection.push(new Date(new Date(selection.to).toDateString()));
128
- }
129
-
130
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
131
- }
132
- } else if (variant === 'range') {
133
- if (isRangeSelection(selection)) {
134
- return {
135
- from: new Date(new Date(selection.from).toDateString()),
136
- to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
137
- };
138
- } else if (isMultiSelection(selection)) {
139
- return {
140
- from: new Date(new Date(selection[0]).toDateString()),
141
- to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
142
- };
143
- } else if (selection instanceof Date) {
144
- return {
145
- from: new Date(new Date(selection).toDateString()),
146
- to: null
147
- };
148
- }
149
- } else {
150
- if (selection instanceof Date) {
151
- return new Date(new Date(selection).toDateString());
152
- } else if (isMultiSelection(selection)) {
153
- return new Date(new Date(selection[0]).toDateString());
154
- } else if (isRangeSelection(selection)) {
155
- return new Date(new Date(selection.from).toDateString());
156
- } else {
157
- return;
158
- }
159
- }
160
- }
161
-
162
- const defaultConfiguration = {
163
- anchorVariant: 'button',
164
- confirmation: false,
165
- contiguousSelection: false,
166
- dimWeekends: false,
167
- placeholder: 'Select a Date...',
168
- selection: 'single',
169
- view: '2-month'
170
- };
171
-
172
- const DatePickerProvider = ({
173
- configuration: externalConfig = {},
174
- children,
175
- closePicker,
176
- value
177
- }) => {
178
- const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
179
- const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
180
- const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
181
- const [hoverRange, setHoverRange] = (0, _react.useState)(null);
182
- const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
183
- (0, _react.useEffect)(() => {
184
- setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
185
- setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
186
- // eslint-disable-next-line react-hooks/exhaustive-deps
187
- }, [configuration.selection, externalConfig]);
188
- const goToMonth = (0, _react.useCallback)(date => {
189
- setCurrentViewingDate(new Date(new Date(date).toDateString()));
190
- }, []);
191
- const nextMonth = (0, _react.useCallback)(() => {
192
- setCurrentViewingDate((0, _dateFns.addMonths)(currentViewingDate, 1));
193
- }, [currentViewingDate]);
194
- const previousMonth = (0, _react.useCallback)(() => {
195
- setCurrentViewingDate((0, _dateFns.subMonths)(currentViewingDate, 1));
196
- }, [currentViewingDate]);
197
- const getFormattedDate = (0, _react.useMemo)(() => {
198
- if (!selection) {
199
- return configuration.placeholder;
200
- }
201
-
202
- let template = 'MMM d';
203
-
204
- if (configuration.dateFormat) {
205
- switch (configuration.dateFormat) {
206
- case 'short':
207
- template = 'MMM d';
208
- break;
209
-
210
- case 'long':
211
- template = 'MMM d, yyyy';
212
- break;
213
-
214
- default:
215
- template = configuration.dateFormat;
216
- break;
217
- }
218
- }
219
-
220
- switch (configuration.selection) {
221
- case 'single':
222
- {
223
- if (selection instanceof Date) {
224
- return (0, _dateFns.format)(selection, template);
225
- } else if (Array.isArray(selection)) {
226
- return (0, _dateFns.format)(selection[0], template);
227
- } else if (isRangeSelection(selection)) {
228
- return (0, _dateFns.format)(selection.from, template);
229
- } else {
230
- return 'Invalid Selection';
231
- }
232
- }
233
-
234
- case 'multi':
235
- {
236
- if (Array.isArray(selection)) {
237
- if (selection.length > 3) return `${selection.length} Selected`;
238
- const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
239
- return formatted;
240
- } else if (selection instanceof Date) {
241
- return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
242
- } else if (isRangeSelection(selection)) {
243
- return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
244
- } else {
245
- return 'Invalid Selection';
246
- }
247
- }
248
-
249
- case 'range':
250
- {
251
- if (isRangeSelection(selection)) {
252
- return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
253
- } else if (selection instanceof Date) {
254
- return Object.entries({
255
- from: selection,
256
- to: null
257
- }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
258
- } else if (Array.isArray(selection)) {
259
- return Object.entries({
260
- from: selection[0],
261
- to: selection[1]
262
- }) // to date can still be null
263
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
264
- .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
265
- } else {
266
- return 'Invalid Selection';
267
- }
268
- }
269
-
270
- default:
271
- {
272
- return 'Invalid Configuration';
273
- }
274
- }
275
- }, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
276
- const saveValue = (0, _react.useCallback)(updatedSelection => {
277
- setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
278
- closePicker === null || closePicker === void 0 ? void 0 : closePicker();
279
- }, [closePicker, selection]);
280
- const selectionHandler = (0, _react.useCallback)(date => {
281
- if (configuration.selection === 'multi') {
282
- const selections = [...selection];
283
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
284
-
285
- if (existingIndex > -1) {
286
- selections.splice(existingIndex, 1);
287
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
288
- } else {
289
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
290
- }
291
- } else if (configuration.selection === 'range') {
292
- if (selection && isRangeSelection(selection) && !selection.to) {
293
- const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
294
- from: date,
295
- to: selection.from
296
- } : {
297
- from: selection.from,
298
- to: date
299
- };
300
- setSelection(updatedSelection);
301
- setHoverRange(null);
302
-
303
- if (!configuration.confirmation) {
304
- saveValue(updatedSelection);
305
- }
306
- } else {
307
- setHoverRange({
308
- from: date,
309
- to: date
310
- });
311
- setSelection({
312
- from: date,
313
- to: null
314
- });
315
- }
316
- } else {
317
- setSelection(date);
318
-
319
- if (!configuration.confirmation) {
320
- saveValue(date);
321
- }
322
- }
323
- }, [configuration.confirmation, configuration.selection, saveValue, selection]);
324
- const focusHnadler = (0, _react.useCallback)(date => {
325
- if (!selection) return;
326
-
327
- if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
328
- setHoverRange((0, _dateFns.isBefore)(date, selection.from) ? {
329
- from: date,
330
- to: selection.from
331
- } : {
332
- from: selection.from,
333
- to: date
334
- });
335
- }
336
- }, [configuration.selection, hoverRange, selection]);
337
- const blurHnadler = (0, _react.useCallback)(date => {
338
- if (!selection || !hoverRange) return;
339
-
340
- if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {// setHoverRange({from: hoverRange.from, to: hoverRange.from})
341
- }
342
- }, [configuration.selection, hoverRange, selection]);
343
- const revertValue = (0, _react.useCallback)(() => {
344
- setSelection(previousSelection);
345
- }, [previousSelection]);
346
- const datePickerCtx = (0, _react.useMemo)(() => {
347
- return {
348
- configuration,
349
- currentViewingDate,
350
- disabled: false,
351
- formattedDate: getFormattedDate,
352
- goToMonth,
353
- hoverRange,
354
- nextMonth,
355
- onDayBlur: blurHnadler,
356
- onDayFocus: focusHnadler,
357
- onSelection: selectionHandler,
358
- previousMonth,
359
- revertValue,
360
- saveValue,
361
- selectionActive: false,
362
- selection
363
- };
364
- }, [blurHnadler, configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, hoverRange, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
365
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
366
- value: datePickerCtx
367
- }, children);
368
- };
369
-
370
- exports.DatePickerProvider = DatePickerProvider;
371
- DatePickerProvider.displayName = "DatePickerProvider";
@@ -1,48 +0,0 @@
1
- import React from 'react';
2
- import { OverlayProps } from '../Overlay';
3
- import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
4
- import { FocusZoneHookSettings } from '../hooks/useFocusZone';
5
- import { DatePickerConfiguration, Selection } from './useDatePicker';
6
- declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
7
- declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
8
- export interface DatePickerProps extends DatePickerConfiguration {
9
- /**
10
- * An override to the internal ref that will be spread on to the renderAnchor
11
- */
12
- anchorRef?: React.RefObject<HTMLElement>;
13
- /**
14
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
15
- */
16
- focusTrapSettings?: Partial<FocusTrapHookSettings>;
17
- /**
18
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
19
- */
20
- focusZoneSettings?: Partial<FocusZoneHookSettings>;
21
- initialValue?: 'today' | Date | string | null;
22
- iconOnly?: boolean;
23
- placeholder?: string;
24
- /**
25
- * Determines whether the overlay portion of the component should be shown or not
26
- */
27
- open?: boolean;
28
- /**
29
- * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
30
- */
31
- onOpen?: (gesture: OpenGesture) => unknown;
32
- /**
33
- * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
34
- */
35
- onClose?: (gesture: CloseGesture) => unknown;
36
- /**
37
- * Props to be spread on the internal `Overlay` component.
38
- */
39
- overlayProps?: Partial<OverlayProps>;
40
- /**
41
- * A custom function component used to render the anchor element.
42
- * Will receive the selected text as `children` prop when an item is activated.
43
- */
44
- renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
45
- value?: Selection;
46
- }
47
- export declare const DatePicker: React.FC<DatePickerProps>;
48
- export {};
@@ -1,71 +0,0 @@
1
- import React, { useRef, useState } from 'react';
2
- import { DatePickerAnchor } from './DatePickerAnchor';
3
- import { DatePickerProvider } from './useDatePicker';
4
- import { DatePickerOverlay } from './DatePickerOverlay';
5
- export const DatePicker = ({
6
- anchorVariant,
7
- anchorRef: externalAnchorRef,
8
- confirmation,
9
- focusTrapSettings,
10
- focusZoneSettings,
11
- maxDate,
12
- minDate,
13
- onOpen: onOpenExternal,
14
- onClose: onCloseExternal,
15
- open,
16
- overlayProps,
17
- renderAnchor,
18
- selection,
19
- value,
20
- view
21
- }) => {
22
- const buttonRef = useRef(null);
23
- const [isOpen, setIsOpen] = useState(false);
24
- const datePickerConfiguration = {
25
- anchorVariant,
26
- confirmation,
27
- maxDate,
28
- minDate,
29
- selection,
30
- view
31
- };
32
-
33
- const onOpen = gesture => {
34
- setIsOpen(true);
35
- onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
36
- };
37
-
38
- const onClose = gesture => {
39
- setIsOpen(false);
40
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
41
- };
42
-
43
- const toggleIsOpen = () => {
44
- if (isOpen) {
45
- setIsOpen(false);
46
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
47
- } else {
48
- setIsOpen(true);
49
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
50
- }
51
- };
52
-
53
- return /*#__PURE__*/React.createElement(DatePickerProvider, {
54
- configuration: datePickerConfiguration,
55
- value: value,
56
- closePicker: () => setIsOpen(false)
57
- }, /*#__PURE__*/React.createElement(DatePickerAnchor, {
58
- ref: buttonRef,
59
- onAction: toggleIsOpen
60
- }), /*#__PURE__*/React.createElement(DatePickerOverlay, {
61
- anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
62
- renderAnchor: renderAnchor,
63
- open: open !== null && open !== void 0 ? open : isOpen,
64
- onOpen: onOpen,
65
- onClose: onClose,
66
- overlayProps: overlayProps,
67
- focusTrapSettings: focusTrapSettings,
68
- focusZoneSettings: focusZoneSettings
69
- }));
70
- };
71
- DatePicker.displayName = "DatePicker";