@primer/components 0.0.0-2021103235619 → 0.0.0-2021104151625

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 (192) hide show
  1. package/CHANGELOG.md +27 -1
  2. package/dist/browser.esm.js +509 -505
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +112 -108
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Header.js +1 -1
  7. package/lib/ActionList/Item.d.ts +6 -0
  8. package/lib/ActionList/Item.js +5 -1
  9. package/lib/ActionList2/Description.d.ts +12 -0
  10. package/lib/ActionList2/Description.js +53 -0
  11. package/lib/ActionList2/Divider.d.ts +5 -0
  12. package/lib/ActionList2/Divider.js +35 -0
  13. package/lib/ActionList2/Group.d.ts +11 -0
  14. package/lib/ActionList2/Group.js +57 -0
  15. package/lib/ActionList2/Header.d.ts +26 -0
  16. package/lib/ActionList2/Header.js +55 -0
  17. package/lib/ActionList2/Item.d.ts +67 -0
  18. package/lib/ActionList2/Item.js +221 -0
  19. package/lib/ActionList2/LinkItem.d.ts +17 -0
  20. package/lib/ActionList2/LinkItem.js +57 -0
  21. package/lib/ActionList2/List.d.ts +26 -0
  22. package/lib/ActionList2/List.js +51 -0
  23. package/lib/ActionList2/Selection.d.ts +5 -0
  24. package/lib/ActionList2/Selection.js +70 -0
  25. package/lib/ActionList2/Visuals.d.ts +11 -0
  26. package/lib/ActionList2/Visuals.js +90 -0
  27. package/lib/ActionList2/index.d.ts +40 -0
  28. package/lib/ActionList2/index.js +47 -0
  29. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  30. package/lib/Autocomplete/Autocomplete.d.ts +30 -32
  31. package/lib/Autocomplete/AutocompleteInput.d.ts +30 -32
  32. package/lib/Button/Button.d.ts +27 -27
  33. package/lib/Button/ButtonBase.d.ts +1 -1
  34. package/lib/Button/ButtonClose.d.ts +45 -45
  35. package/lib/Button/ButtonDanger.d.ts +27 -27
  36. package/lib/Button/ButtonInvisible.d.ts +27 -27
  37. package/lib/Button/ButtonOutline.d.ts +27 -27
  38. package/lib/Button/ButtonPrimary.d.ts +27 -27
  39. package/lib/CircleBadge.d.ts +2 -2
  40. package/lib/CircleOcticon.d.ts +43 -43
  41. package/lib/Dialog.d.ts +46 -46
  42. package/lib/Dropdown.d.ts +178 -178
  43. package/lib/DropdownMenu/DropdownButton.d.ts +47 -47
  44. package/lib/FilterList.d.ts +42 -42
  45. package/lib/Flash.d.ts +1 -1
  46. package/lib/Label.d.ts +1 -1
  47. package/lib/Position.d.ts +4 -4
  48. package/lib/ProgressBar.d.ts +1 -1
  49. package/lib/SelectMenu/SelectMenu.d.ts +246 -248
  50. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  51. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  52. package/lib/TextInputWithTokens.d.ts +34 -32
  53. package/lib/TextInputWithTokens.js +102 -29
  54. package/lib/Timeline.d.ts +44 -44
  55. package/lib/Token/AvatarToken.d.ts +1 -1
  56. package/lib/Token/IssueLabelToken.d.ts +1 -1
  57. package/lib/Token/Token.d.ts +1 -1
  58. package/lib/Token/Token.js +13 -2
  59. package/lib/Token/TokenBase.js +0 -4
  60. package/lib/Token/_RemoveTokenButton.js +15 -2
  61. package/lib/_TextInputWrapper.d.ts +1 -1
  62. package/lib/_TextInputWrapper.js +1 -1
  63. package/lib/experiments.d.ts +1 -0
  64. package/lib/experiments.js +18 -0
  65. package/lib/hooks/useResizeObserver.d.ts +1 -1
  66. package/lib/hooks/useResizeObserver.js +1 -1
  67. package/lib/sx.d.ts +10 -2
  68. package/lib/sx.js +8 -0
  69. package/lib/theme-preval.js +79 -0
  70. package/lib/theme.d.ts +78 -0
  71. package/lib/theme.js +3 -1
  72. package/lib/utils/create-slots.d.ts +17 -0
  73. package/lib/utils/create-slots.js +105 -0
  74. package/lib/utils/testing.d.ts +13 -0
  75. package/lib/utils/types/KeyPaths.d.ts +3 -0
  76. package/lib/utils/types/KeyPaths.js +1 -0
  77. package/lib/utils/use-force-update.d.ts +1 -0
  78. package/lib/utils/use-force-update.js +19 -0
  79. package/lib-esm/ActionList/Header.js +1 -1
  80. package/lib-esm/ActionList/Item.d.ts +6 -0
  81. package/lib-esm/ActionList/Item.js +5 -1
  82. package/lib-esm/ActionList2/Description.d.ts +12 -0
  83. package/lib-esm/ActionList2/Description.js +37 -0
  84. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  85. package/lib-esm/ActionList2/Divider.js +23 -0
  86. package/lib-esm/ActionList2/Group.d.ts +11 -0
  87. package/lib-esm/ActionList2/Group.js +40 -0
  88. package/lib-esm/ActionList2/Header.d.ts +26 -0
  89. package/lib-esm/ActionList2/Header.js +44 -0
  90. package/lib-esm/ActionList2/Item.d.ts +67 -0
  91. package/lib-esm/ActionList2/Item.js +195 -0
  92. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  93. package/lib-esm/ActionList2/LinkItem.js +43 -0
  94. package/lib-esm/ActionList2/List.d.ts +26 -0
  95. package/lib-esm/ActionList2/List.js +34 -0
  96. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  97. package/lib-esm/ActionList2/Selection.js +52 -0
  98. package/lib-esm/ActionList2/Visuals.d.ts +11 -0
  99. package/lib-esm/ActionList2/Visuals.js +68 -0
  100. package/lib-esm/ActionList2/index.d.ts +40 -0
  101. package/lib-esm/ActionList2/index.js +33 -0
  102. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  103. package/lib-esm/Autocomplete/Autocomplete.d.ts +30 -32
  104. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +30 -32
  105. package/lib-esm/Button/Button.d.ts +27 -27
  106. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  107. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  108. package/lib-esm/Button/ButtonDanger.d.ts +27 -27
  109. package/lib-esm/Button/ButtonInvisible.d.ts +27 -27
  110. package/lib-esm/Button/ButtonOutline.d.ts +27 -27
  111. package/lib-esm/Button/ButtonPrimary.d.ts +27 -27
  112. package/lib-esm/CircleBadge.d.ts +2 -2
  113. package/lib-esm/CircleOcticon.d.ts +43 -43
  114. package/lib-esm/Dialog.d.ts +46 -46
  115. package/lib-esm/Dropdown.d.ts +178 -178
  116. package/lib-esm/DropdownMenu/DropdownButton.d.ts +47 -47
  117. package/lib-esm/FilterList.d.ts +42 -42
  118. package/lib-esm/Flash.d.ts +1 -1
  119. package/lib-esm/Label.d.ts +1 -1
  120. package/lib-esm/Position.d.ts +4 -4
  121. package/lib-esm/ProgressBar.d.ts +1 -1
  122. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -248
  123. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  124. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  125. package/lib-esm/TextInputWithTokens.d.ts +34 -32
  126. package/lib-esm/TextInputWithTokens.js +101 -30
  127. package/lib-esm/Timeline.d.ts +44 -44
  128. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  129. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  130. package/lib-esm/Token/Token.d.ts +1 -1
  131. package/lib-esm/Token/Token.js +13 -2
  132. package/lib-esm/Token/TokenBase.js +0 -4
  133. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  134. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  135. package/lib-esm/_TextInputWrapper.js +1 -1
  136. package/lib-esm/experiments.d.ts +1 -0
  137. package/lib-esm/experiments.js +2 -0
  138. package/lib-esm/hooks/useResizeObserver.d.ts +1 -1
  139. package/lib-esm/hooks/useResizeObserver.js +1 -1
  140. package/lib-esm/sx.d.ts +10 -2
  141. package/lib-esm/sx.js +3 -1
  142. package/lib-esm/theme-preval.js +79 -0
  143. package/lib-esm/theme.d.ts +78 -0
  144. package/lib-esm/theme.js +2 -1
  145. package/lib-esm/utils/create-slots.d.ts +17 -0
  146. package/lib-esm/utils/create-slots.js +84 -0
  147. package/lib-esm/utils/testing.d.ts +13 -0
  148. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  149. package/lib-esm/utils/types/KeyPaths.js +1 -0
  150. package/lib-esm/utils/use-force-update.d.ts +1 -0
  151. package/lib-esm/utils/use-force-update.js +6 -0
  152. package/package.json +12 -9
  153. package/lib/DatePicker/DatePicker.d.ts +0 -52
  154. package/lib/DatePicker/DatePicker.js +0 -109
  155. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  156. package/lib/DatePicker/DatePickerAnchor.js +0 -202
  157. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  158. package/lib/DatePicker/DatePickerOverlay.js +0 -55
  159. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  160. package/lib/DatePicker/DatePickerPanel.js +0 -363
  161. package/lib/DatePicker/Day.d.ts +0 -15
  162. package/lib/DatePicker/Day.js +0 -206
  163. package/lib/DatePicker/Month.d.ts +0 -8
  164. package/lib/DatePicker/Month.js +0 -122
  165. package/lib/DatePicker/dateParser.d.ts +0 -12
  166. package/lib/DatePicker/dateParser.js +0 -192
  167. package/lib/DatePicker/index.d.ts +0 -2
  168. package/lib/DatePicker/index.js +0 -13
  169. package/lib/DatePicker/useDatePicker.d.ts +0 -107
  170. package/lib/DatePicker/useDatePicker.js +0 -558
  171. package/lib/hooks/useDebounce.d.ts +0 -2
  172. package/lib/hooks/useDebounce.js +0 -24
  173. package/lib-esm/DatePicker/DatePicker.d.ts +0 -52
  174. package/lib-esm/DatePicker/DatePicker.js +0 -92
  175. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  176. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -174
  177. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  178. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -40
  179. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  180. package/lib-esm/DatePicker/DatePickerPanel.js +0 -332
  181. package/lib-esm/DatePicker/Day.d.ts +0 -15
  182. package/lib-esm/DatePicker/Day.js +0 -182
  183. package/lib-esm/DatePicker/Month.d.ts +0 -8
  184. package/lib-esm/DatePicker/Month.js +0 -98
  185. package/lib-esm/DatePicker/dateParser.d.ts +0 -12
  186. package/lib-esm/DatePicker/dateParser.js +0 -178
  187. package/lib-esm/DatePicker/index.d.ts +0 -2
  188. package/lib-esm/DatePicker/index.js +0 -1
  189. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -107
  190. package/lib-esm/DatePicker/useDatePicker.js +0 -523
  191. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  192. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,206 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.BlankDay = exports.Day = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _Box = _interopRequireDefault(require("../Box"));
13
-
14
- var _Text = _interopRequireDefault(require("../Text"));
15
-
16
- var _constants = require("../constants");
17
-
18
- var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
19
-
20
- var _dateFns = require("date-fns");
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 DayBaseComponent = (0, _styledComponents.default)(_Box.default).withConfig({
29
- displayName: "Day__DayBaseComponent",
30
- componentId: "sc-1japneh-0"
31
- })(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], (0, _constants.get)('space.1'));
32
- const states = {
33
- blocked: {
34
- background: (0, _constants.get)('colors.neutral.subtle'),
35
- borderRadius: (0, _constants.get)('radii.2'),
36
- color: (0, _constants.get)('colors.fg.subtle')
37
- },
38
- disabled: {
39
- background: (0, _constants.get)('colors.canvas.primary'),
40
- borderRadius: (0, _constants.get)('radii.2'),
41
- color: (0, _constants.get)('colors.fg.subtle')
42
- },
43
- selected: {
44
- default: {
45
- background: (0, _constants.get)('colors.accent.emphasis'),
46
- borderRadius: (0, _constants.get)('radii.2'),
47
- color: (0, _constants.get)('colors.fg.onEmphasis'),
48
- todayColor: (0, _constants.get)('colors.fg.onEmphasis')
49
- },
50
- start: {
51
- background: (0, _constants.get)('colors.accent.emphasis'),
52
- borderRadius: '4px 0 0 4px',
53
- color: (0, _constants.get)('colors.fg.onEmphasis'),
54
- todayColor: (0, _constants.get)('colors.fg.onEmphasis')
55
- },
56
- middle: {
57
- background: (0, _constants.get)('colors.accent.subtle'),
58
- borderRadius: '0',
59
- color: (0, _constants.get)('colors.fg.default'),
60
- todayColor: (0, _constants.get)('colors.accent.fg')
61
- },
62
- end: {
63
- background: (0, _constants.get)('colors.accent.emphasis'),
64
- borderRadius: '0 4px 4px 0',
65
- color: (0, _constants.get)('colors.fg.onEmphasis'),
66
- todayColor: (0, _constants.get)('colors.fg.onEmphasis')
67
- }
68
- },
69
- default: {
70
- normal: {
71
- background: (0, _constants.get)('colors.canvas.primary'),
72
- borderRadius: (0, _constants.get)('radii.2'),
73
- color: (0, _constants.get)('colors.fg.default'),
74
- todayColor: (0, _constants.get)('colors.accent.fg')
75
- },
76
- hover: {
77
- background: (0, _constants.get)('colors.neutral.muted'),
78
- borderRadius: (0, _constants.get)('radii.2'),
79
- color: (0, _constants.get)('colors.fg.default'),
80
- todayColor: (0, _constants.get)('colors.accent.fg')
81
- },
82
- pressed: {
83
- background: (0, _constants.get)('colors.neutral.emphasis'),
84
- borderRadius: (0, _constants.get)('radii.2'),
85
- color: (0, _constants.get)('colors.fg.onEmphasis'),
86
- todayColor: (0, _constants.get)('colors.fg.onEmphasis')
87
- }
88
- }
89
- };
90
-
91
- const getStateStyles = (props, prop, state) => {
92
- const {
93
- blocked,
94
- disabled,
95
- selected,
96
- today
97
- } = props;
98
-
99
- if (selected) {
100
- switch (selected) {
101
- case 'start':
102
- return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
103
-
104
- case 'middle':
105
- return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
106
-
107
- case 'end':
108
- return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
109
-
110
- default:
111
- return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
112
- }
113
- } else if (blocked) {
114
- return states.blocked[prop];
115
- } else if (disabled) {
116
- return states.disabled[prop];
117
- } else {
118
- return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
119
- }
120
- };
121
-
122
- const DayComponent = (0, _styledComponents.default)(DayBaseComponent).attrs(props => ({
123
- background: getStateStyles(props, 'background', 'normal'),
124
- borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
125
- textColor: getStateStyles(props, 'color', 'normal'),
126
- backgroundHover: getStateStyles(props, 'background', 'hover'),
127
- textColorHover: getStateStyles(props, 'color', 'hover'),
128
- backgroundPressed: getStateStyles(props, 'background', 'pressed'),
129
- textColorPressed: getStateStyles(props, 'color', 'pressed')
130
- })).withConfig({
131
- displayName: "Day__DayComponent",
132
- componentId: "sc-1japneh-1"
133
- })(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;padding:4px 0;position:relative;transition:0.1s color ease;user-select:none;width:16px;&:after{content:'';display:", ";position:absolute;bottom:0;background:", ";width:100%;height:2px;border-radius:1px;}}&:hover,&:focus{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, _Text.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.today ? 'block' : 'none', props => props.selected && props.selected !== 'middle' ? (0, _constants.get)('colors.fg.onEmphasis')(props) : (0, _constants.get)('colors.accent.emphasis')(props), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
134
-
135
- const Day = ({
136
- date,
137
- onAction
138
- }) => {
139
- const {
140
- onDayFocus,
141
- onSelection,
142
- disabled,
143
- blocked,
144
- focused,
145
- selected,
146
- today
147
- } = (0, _useDatePicker.default)(date);
148
- const dayRef = (0, _react.useRef)(null);
149
- (0, _react.useEffect)(() => {
150
- if (focused) {
151
- setTimeout(() => {
152
- var _dayRef$current;
153
-
154
- return (_dayRef$current = dayRef.current) === null || _dayRef$current === void 0 ? void 0 : _dayRef$current.focus();
155
- }, 0);
156
- }
157
- }, [focused]);
158
- const keyPressHandler = (0, _react.useCallback)(event => {
159
- if (disabled) {
160
- return;
161
- }
162
-
163
- if ([' ', 'Enter'].includes(event.key)) {
164
- onSelection(date);
165
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
166
- }
167
- }, [disabled, onSelection, onAction, date]);
168
- const clickHandler = (0, _react.useCallback)(event => {
169
- if (disabled) {
170
- return;
171
- }
172
-
173
- onSelection(date);
174
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
175
- }, [disabled, onSelection, date, onAction]);
176
- const todayStyles = (0, _react.useMemo)(() => today ? {
177
- fontWeight: 'bold'
178
- } : {}, [today]);
179
- return /*#__PURE__*/_react.default.createElement(DayComponent, {
180
- ref: dayRef,
181
- role: "gridcell",
182
- "aria-disabled": disabled,
183
- "aria-selected": selected !== false,
184
- blocked: blocked,
185
- disabled: disabled,
186
- focused: focused,
187
- selected: selected,
188
- today: today,
189
- onClick: clickHandler,
190
- onMouseEnter: () => onDayFocus(date),
191
- onFocus: () => onDayFocus(date),
192
- onKeyPress: keyPressHandler,
193
- tabIndex: -1,
194
- "data-date": (0, _dateFns.format)(date, 'MM/dd/yyyy')
195
- }, /*#__PURE__*/_react.default.createElement(_Text.default, {
196
- sx: todayStyles
197
- }, date.getDate()));
198
- };
199
-
200
- exports.Day = Day;
201
- Day.displayName = "Day";
202
- const BlankDay = (0, _styledComponents.default)(DayBaseComponent).withConfig({
203
- displayName: "Day__BlankDay",
204
- componentId: "sc-1japneh-2"
205
- })(["background-color:", ";"], (0, _constants.get)('colors.canvas.primary'));
206
- exports.BlankDay = BlankDay;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { FontSizeProps } from 'styled-system';
3
- import { SystemCommonProps, SystemLayoutProps } from '../constants';
4
- import { SxProp } from '../sx';
5
- export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
6
- date: Date;
7
- }
8
- export declare const Month: React.FC<MonthProps>;
@@ -1,122 +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;height:", ";justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('space.4'));
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
- date
54
- }) => {
55
- const {
56
- configuration
57
- } = (0, _useDatePicker.default)();
58
- const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
59
- const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(date), 'MMMM yyyy')}`, [date]);
60
- const weekdayHeaders = (0, _react.useMemo)(() => {
61
- var _configuration$weekSt;
62
-
63
- const now = new Date(date);
64
- const weekOptions = {
65
- weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
66
- };
67
- return (0, _dateFns.eachDayOfInterval)({
68
- start: (0, _dateFns.startOfWeek)(now, weekOptions),
69
- end: (0, _dateFns.endOfWeek)(now, weekOptions)
70
- }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
71
- key: `weekday-${d}-header`
72
- }, (0, _dateFns.format)(d, 'EEEEEE')));
73
- }, [configuration.weekStartsOn, date]);
74
-
75
- const dayAction = day => {
76
- setSelectedDay(day);
77
- };
78
-
79
- const dayComponents = (0, _react.useMemo)(() => {
80
- var _configuration$weekSt2, _configuration$weekSt3;
81
-
82
- const components = [];
83
- const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
84
- const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
85
-
86
- for (let i = 0; i < preBlanks; i++) {
87
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
88
- key: `month-pre-blank-${i}`
89
- }));
90
- }
91
-
92
- for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
93
- const day = new Date(date.getFullYear(), date.getMonth(), i);
94
- components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
95
- key: `day-component-${day.toString()}`,
96
- date: day,
97
- selected: selectedDay ? (0, _dateFns.isEqual)(day, selectedDay) : false,
98
- onAction: dayAction
99
- }));
100
- }
101
-
102
- const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
103
- const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
104
-
105
- for (let i = 6; i > postBlanks; i--) {
106
- components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
107
- key: `month-post-blank-${i}`
108
- }));
109
- }
110
-
111
- return components;
112
- }, [configuration.weekStartsOn, date, selectedDay]);
113
- return /*#__PURE__*/_react.default.createElement(MonthComponent, {
114
- role: "grid",
115
- "aria-labelledby": `${date.getMonth()} ${date.getFullYear()}`
116
- }, /*#__PURE__*/_react.default.createElement(MonthTitle, {
117
- "aria-live": "polite"
118
- }, !configuration.compressedHeader ? getTitle : ''), weekdayHeaders, dayComponents);
119
- };
120
-
121
- exports.Month = Month;
122
- Month.displayName = "Month";
@@ -1,12 +0,0 @@
1
- import { AnchorVariant, Selection, SelectionVariant } from './useDatePicker';
2
- export declare const parseDate: (dateString: string, variant?: SelectionVariant) => Selection;
3
- declare type FormatDateOptions = {
4
- selection?: Selection;
5
- anchorVariant?: AnchorVariant;
6
- dateFormat?: string;
7
- placeholder?: string;
8
- rawFormat?: boolean;
9
- variant?: SelectionVariant;
10
- };
11
- export declare const formatDate: ({ selection, dateFormat, placeholder, rawFormat, variant }: FormatDateOptions) => string;
12
- export {};
@@ -1,192 +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 = new RegExp(/(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})(?:\s?-\s?)?(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})?/g);
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 null;
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
- const expandedParsedItems = [];
64
-
65
- for (const item of parsedDateItems) {
66
- if ((0, _useDatePicker.isRangeSelection)(item)) {
67
- if (item.to) {
68
- (0, _dateFns.eachDayOfInterval)({
69
- start: item.from,
70
- end: item.to
71
- }).map(d => expandedParsedItems.push(d));
72
- } else {
73
- expandedParsedItems.push(item.from);
74
- }
75
- } else {
76
- if (item) {
77
- if (Array.isArray(item)) {
78
- item.map(d => expandedParsedItems.push(d));
79
- } else {
80
- expandedParsedItems.push(item);
81
- }
82
- }
83
- }
84
- }
85
-
86
- return expandedParsedItems;
87
- }
88
-
89
- case 'range':
90
- {
91
- return parsedDateItems.filter(d => (0, _useDatePicker.isRangeSelection)(d))[0];
92
- }
93
-
94
- default:
95
- {
96
- return parsedDateItems[0];
97
- }
98
- }
99
- };
100
-
101
- exports.parseDate = parseDate;
102
-
103
- const formatDate = ({
104
- selection,
105
- dateFormat = 'short',
106
- placeholder = 'Choose Date',
107
- rawFormat = false,
108
- variant = 'single'
109
- }) => {
110
- if (!selection) {
111
- if (rawFormat) return '';
112
- return placeholder;
113
- }
114
-
115
- let template = 'MMM d';
116
-
117
- if (!rawFormat && dateFormat) {
118
- switch (dateFormat) {
119
- case 'short':
120
- template = 'MMM d';
121
- break;
122
-
123
- case 'long':
124
- template = 'MMM d, yyyy';
125
- break;
126
-
127
- default:
128
- template = dateFormat;
129
- break;
130
- }
131
- } else {
132
- template = 'MM/dd/yyyy';
133
- }
134
-
135
- switch (variant) {
136
- case 'single':
137
- {
138
- if (selection instanceof Date) {
139
- return (0, _dateFns.format)(selection, template);
140
- } else if (Array.isArray(selection)) {
141
- return (0, _dateFns.format)(selection[0], template);
142
- } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
143
- return (0, _dateFns.format)(selection.from, template);
144
- } else {
145
- return 'Invalid Selection';
146
- }
147
- }
148
-
149
- case 'multi':
150
- {
151
- if (Array.isArray(selection)) {
152
- if (selection.length > 3 && !rawFormat) return `${selection.length} Selected`;
153
- const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
154
- return formatted;
155
- } else if (selection instanceof Date) {
156
- return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
157
- } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
158
- return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
159
- } else {
160
- return 'Invalid Selection';
161
- }
162
- }
163
-
164
- case 'range':
165
- {
166
- if ((0, _useDatePicker.isRangeSelection)(selection)) {
167
- return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
168
- } else if (selection instanceof Date) {
169
- return Object.entries({
170
- from: selection,
171
- to: null
172
- }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
173
- } else if (Array.isArray(selection)) {
174
- return Object.entries({
175
- from: selection[0],
176
- to: selection[1]
177
- }) // to date can still be null
178
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
179
- .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
180
- } else {
181
- return 'Invalid Selection';
182
- }
183
- }
184
-
185
- default:
186
- {
187
- return 'Invalid Configuration';
188
- }
189
- }
190
- };
191
-
192
- 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,107 +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
- compressedHeader?: boolean;
11
- dateFormat?: DateFormat;
12
- disableWeekends?: boolean;
13
- iconPlacement?: 'start' | 'end' | 'none';
14
- maxDate?: Date | null;
15
- maxSelections?: number;
16
- maxRangeSize?: number;
17
- minDate?: Date | null;
18
- placeholder?: string;
19
- rangeIncrement?: number;
20
- showInputPrompt?: boolean;
21
- variant?: SelectionVariant;
22
- view?: '1-month' | '2-month';
23
- weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
24
- }
25
- export declare type RangeSelection = {
26
- from: Date;
27
- to: Date | null;
28
- };
29
- export declare type StringRangeSelection = {
30
- from: string;
31
- to: string;
32
- };
33
- export interface DatePickerContext {
34
- disabled?: boolean;
35
- configuration: DatePickerConfiguration;
36
- currentViewingDate: Date;
37
- dialogOpen: boolean;
38
- focusDate: Date;
39
- formattedDate: string;
40
- goToMonth: (date: Date) => void;
41
- inputDate: string;
42
- hoverRange?: RangeSelection | null;
43
- nextMonth: () => void;
44
- onClose: () => void;
45
- onDateInput: (updatedSelection: Selection) => void;
46
- onDayFocus: (date: Date) => void;
47
- onSelection: (date: Date) => void;
48
- previousMonth: () => void;
49
- revertValue: () => void;
50
- saveValue: (selection?: Selection) => void;
51
- selection?: Selection;
52
- selectionActive?: boolean;
53
- setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
54
- setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
55
- softSelection?: Partial<RangeSelection> | null;
56
- setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
57
- viewMode: '1-month' | '2-month';
58
- }
59
- export declare type Selection = Date | Array<Date> | RangeSelection | null;
60
- export declare type StringSelection = string | Array<string> | {
61
- to: string;
62
- from: string;
63
- } | null;
64
- export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
65
- declare const useDatePicker: (date?: Date | undefined) => {
66
- blocked: boolean | undefined;
67
- disabled: boolean;
68
- focused: boolean;
69
- selected: DaySelection;
70
- today: boolean;
71
- configuration: DatePickerConfiguration;
72
- currentViewingDate: Date;
73
- dialogOpen: boolean;
74
- focusDate: Date;
75
- formattedDate: string;
76
- goToMonth: (date: Date) => void;
77
- inputDate: string;
78
- hoverRange?: RangeSelection | null | undefined;
79
- nextMonth: () => void;
80
- onClose: () => void;
81
- onDateInput: (updatedSelection: Selection) => void;
82
- onDayFocus: (date: Date) => void;
83
- onSelection: (date: Date) => void;
84
- previousMonth: () => void;
85
- revertValue: () => void;
86
- saveValue: (selection?: Selection | undefined) => void;
87
- selection?: Selection | undefined;
88
- selectionActive?: boolean | undefined;
89
- setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
90
- setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
91
- softSelection?: Partial<RangeSelection> | null | undefined;
92
- setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
93
- viewMode: '1-month' | '2-month';
94
- };
95
- export default useDatePicker;
96
- export interface DatePickerProviderProps {
97
- closePicker?: () => void;
98
- configuration?: DatePickerConfiguration;
99
- isOpen?: boolean;
100
- value?: Selection | StringSelection;
101
- }
102
- export declare function isSingleSelection(selection: Selection): selection is Date;
103
- export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
104
- export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
105
- export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
106
- export declare const normalizeDate: (date: Date | string) => Date;
107
- export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;