@primer/components 0.0.0-202192822657 → 0.0.0-202192952423

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 (140) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/dist/browser.esm.js +436 -439
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +440 -443
  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/ActionMenu.js +2 -2
  9. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  10. package/lib/Autocomplete/Autocomplete.d.ts +11 -13
  11. package/lib/Autocomplete/AutocompleteInput.d.ts +11 -13
  12. package/lib/Button/Button.d.ts +11 -11
  13. package/lib/Button/ButtonBase.d.ts +1 -1
  14. package/lib/Button/ButtonClose.d.ts +29 -29
  15. package/lib/Button/ButtonDanger.d.ts +11 -11
  16. package/lib/Button/ButtonInvisible.d.ts +11 -11
  17. package/lib/Button/ButtonOutline.d.ts +11 -11
  18. package/lib/Button/ButtonPrimary.d.ts +11 -11
  19. package/lib/CircleBadge.d.ts +2 -2
  20. package/lib/CircleOcticon.d.ts +33 -33
  21. package/lib/Dialog/Dialog.d.ts +4 -4
  22. package/lib/Dialog/Dialog.js +12 -22
  23. package/lib/Dialog.d.ts +35 -35
  24. package/lib/Dropdown.d.ts +87 -165
  25. package/lib/Dropdown.js +6 -5
  26. package/lib/DropdownMenu/DropdownButton.d.ts +30 -30
  27. package/lib/FilterList.d.ts +26 -26
  28. package/lib/Label.d.ts +1 -1
  29. package/lib/NewButton/button.d.ts +581 -0
  30. package/lib/NewButton/button.js +332 -0
  31. package/lib/NewButton/buttonStyles.d.ts +2 -0
  32. package/lib/NewButton/buttonStyles.js +14 -0
  33. package/lib/NewButton/counter.d.ts +6 -0
  34. package/lib/NewButton/counter.js +33 -0
  35. package/lib/NewButton/index.d.ts +4 -0
  36. package/lib/NewButton/index.js +21 -0
  37. package/lib/Position.d.ts +4 -4
  38. package/lib/ProgressBar.d.ts +1 -1
  39. package/lib/SelectMenu/SelectMenu.d.ts +151 -153
  40. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  41. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  42. package/lib/TextInputWithTokens.d.ts +11 -13
  43. package/lib/Timeline.d.ts +33 -33
  44. package/lib/Token/AvatarToken.d.ts +1 -1
  45. package/lib/Token/IssueLabelToken.d.ts +1 -1
  46. package/lib/Token/Token.d.ts +1 -1
  47. package/lib/_TextInputWrapper.d.ts +1 -1
  48. package/lib/constants.js +3 -1
  49. package/lib/index.d.ts +2 -0
  50. package/lib/index.js +8 -0
  51. package/lib/theme-preval.js +2 -2
  52. package/lib/utils/testing.d.ts +1 -1
  53. package/lib-esm/ActionList/Item.d.ts +6 -0
  54. package/lib-esm/ActionList/Item.js +5 -1
  55. package/lib-esm/ActionMenu.js +2 -2
  56. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  57. package/lib-esm/Autocomplete/Autocomplete.d.ts +11 -13
  58. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +11 -13
  59. package/lib-esm/Button/Button.d.ts +11 -11
  60. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  61. package/lib-esm/Button/ButtonClose.d.ts +29 -29
  62. package/lib-esm/Button/ButtonDanger.d.ts +11 -11
  63. package/lib-esm/Button/ButtonInvisible.d.ts +11 -11
  64. package/lib-esm/Button/ButtonOutline.d.ts +11 -11
  65. package/lib-esm/Button/ButtonPrimary.d.ts +11 -11
  66. package/lib-esm/CircleBadge.d.ts +2 -2
  67. package/lib-esm/CircleOcticon.d.ts +33 -33
  68. package/lib-esm/Dialog/Dialog.d.ts +4 -4
  69. package/lib-esm/Dialog/Dialog.js +12 -21
  70. package/lib-esm/Dialog.d.ts +35 -35
  71. package/lib-esm/Dropdown.d.ts +87 -165
  72. package/lib-esm/Dropdown.js +4 -3
  73. package/lib-esm/DropdownMenu/DropdownButton.d.ts +30 -30
  74. package/lib-esm/FilterList.d.ts +26 -26
  75. package/lib-esm/Label.d.ts +1 -1
  76. package/lib-esm/NewButton/button.d.ts +581 -0
  77. package/lib-esm/NewButton/button.js +308 -0
  78. package/lib-esm/NewButton/buttonStyles.d.ts +2 -0
  79. package/lib-esm/NewButton/buttonStyles.js +3 -0
  80. package/lib-esm/NewButton/counter.d.ts +6 -0
  81. package/lib-esm/NewButton/counter.js +21 -0
  82. package/lib-esm/NewButton/index.d.ts +4 -0
  83. package/lib-esm/NewButton/index.js +3 -0
  84. package/lib-esm/Position.d.ts +4 -4
  85. package/lib-esm/ProgressBar.d.ts +1 -1
  86. package/lib-esm/SelectMenu/SelectMenu.d.ts +151 -153
  87. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  88. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  89. package/lib-esm/TextInputWithTokens.d.ts +11 -13
  90. package/lib-esm/Timeline.d.ts +33 -33
  91. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  92. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  93. package/lib-esm/Token/Token.d.ts +1 -1
  94. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  95. package/lib-esm/constants.js +3 -1
  96. package/lib-esm/index.d.ts +2 -0
  97. package/lib-esm/index.js +1 -0
  98. package/lib-esm/theme-preval.js +2 -2
  99. package/lib-esm/utils/testing.d.ts +1 -1
  100. package/package.json +13 -14
  101. package/lib/DatePicker/DatePicker.d.ts +0 -48
  102. package/lib/DatePicker/DatePicker.js +0 -106
  103. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  104. package/lib/DatePicker/DatePickerAnchor.js +0 -194
  105. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  106. package/lib/DatePicker/DatePickerOverlay.js +0 -48
  107. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  108. package/lib/DatePicker/DatePickerPanel.js +0 -126
  109. package/lib/DatePicker/Day.d.ts +0 -14
  110. package/lib/DatePicker/Day.js +0 -190
  111. package/lib/DatePicker/Month.d.ts +0 -9
  112. package/lib/DatePicker/Month.js +0 -120
  113. package/lib/DatePicker/dateParser.d.ts +0 -11
  114. package/lib/DatePicker/dateParser.js +0 -188
  115. package/lib/DatePicker/index.d.ts +0 -2
  116. package/lib/DatePicker/index.js +0 -13
  117. package/lib/DatePicker/useDatePicker.d.ts +0 -89
  118. package/lib/DatePicker/useDatePicker.js +0 -370
  119. package/lib/hooks/useDebounce.d.ts +0 -2
  120. package/lib/hooks/useDebounce.js +0 -24
  121. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  122. package/lib-esm/DatePicker/DatePicker.js +0 -89
  123. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  124. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -167
  125. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  126. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -29
  127. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  128. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  129. package/lib-esm/DatePicker/Day.d.ts +0 -14
  130. package/lib-esm/DatePicker/Day.js +0 -167
  131. package/lib-esm/DatePicker/Month.d.ts +0 -9
  132. package/lib-esm/DatePicker/Month.js +0 -96
  133. package/lib-esm/DatePicker/dateParser.d.ts +0 -11
  134. package/lib-esm/DatePicker/dateParser.js +0 -174
  135. package/lib-esm/DatePicker/index.d.ts +0 -2
  136. package/lib-esm/DatePicker/index.js +0 -1
  137. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -89
  138. package/lib-esm/DatePicker/useDatePicker.js +0 -339
  139. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  140. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,167 +0,0 @@
1
- import { CalendarIcon } from '@primer/octicons-react';
2
- import styled from 'styled-components';
3
- import React, { useCallback, useEffect, useRef, useState } from 'react';
4
- import Button, { ButtonInvisible } from '../Button';
5
- import Text from '../Text';
6
- import { get } from '../constants';
7
- import StyledOcticon from '../StyledOcticon';
8
- import useDatePicker from './useDatePicker';
9
- import TextInput from '../TextInput';
10
- import Box from '../Box';
11
- import { parseDate } from './dateParser';
12
- const DatePickerAnchorButton = styled(Button).withConfig({
13
- displayName: "DatePickerAnchor__DatePickerAnchorButton",
14
- componentId: "sc-8gpb9d-0"
15
- })(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], Text, get('space.2'), Text, get('space.2'));
16
- export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
17
- onAction
18
- }, ref) => {
19
- const {
20
- configuration: {
21
- anchorVariant,
22
- iconPlacement,
23
- placeholder,
24
- showInputPrompt,
25
- variant
26
- },
27
- disabled,
28
- formattedDate,
29
- onDateInput
30
- } = useDatePicker();
31
- const [inputValue, setInputValue] = useState(formattedDate);
32
- const inputRef = useRef(null);
33
- const keyPressHandler = useCallback(event => {
34
- if (disabled) {
35
- return;
36
- }
37
-
38
- if ([' ', 'Enter'].includes(event.key)) {
39
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
40
- }
41
- }, [disabled, onAction]);
42
- const clickHandler = useCallback(event => {
43
- if (disabled) {
44
- return;
45
- }
46
-
47
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
48
- }, [disabled, onAction]);
49
- useEffect(() => {
50
- if (document.activeElement !== inputRef.current) {
51
- setInputValue(formattedDate);
52
- }
53
- }, [formattedDate]);
54
- const onInputChangeHandler = useCallback(e => {
55
- const value = e.currentTarget.value;
56
-
57
- if (!value) {
58
- setInputValue(value);
59
- return;
60
- }
61
-
62
- const parsedDate = parseDate(value, variant);
63
-
64
- if (parsedDate) {
65
- onDateInput(parsedDate);
66
- }
67
- }, [onDateInput, variant]);
68
-
69
- const onBlurHandler = () => {
70
- setInputValue(formattedDate);
71
- };
72
-
73
- if (anchorVariant === 'input') {
74
- const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
75
- onClick: clickHandler,
76
- sx: {
77
- width: '32px',
78
- px: '6px',
79
- position: 'absolute',
80
- [side]: '1px',
81
- top: '1px',
82
- bottom: '1px'
83
- }
84
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
85
- icon: CalendarIcon
86
- }));
87
-
88
- const inputSx = () => {
89
- let sxObject = {};
90
-
91
- if (iconPlacement === 'start') {
92
- sxObject = { ...sxObject,
93
- pl: 5,
94
- pr: 2
95
- };
96
- } else if (iconPlacement === 'end') {
97
- sxObject = { ...sxObject,
98
- pl: 2,
99
- pr: 5
100
- };
101
- }
102
-
103
- if (showInputPrompt) {
104
- sxObject = { ...sxObject,
105
- pt: '20px'
106
- };
107
- }
108
-
109
- return sxObject;
110
- };
111
-
112
- const promptSx = () => {
113
- let sxObject = {
114
- position: 'absolute',
115
- top: '2px',
116
- fontSize: 0,
117
- color: 'fg.subtle'
118
- };
119
-
120
- if (iconPlacement === 'start') {
121
- sxObject = { ...sxObject,
122
- left: '36px'
123
- };
124
- }
125
-
126
- return sxObject;
127
- };
128
-
129
- return /*#__PURE__*/React.createElement(Box, {
130
- ref: ref,
131
- sx: {
132
- position: 'relative',
133
- display: 'flex',
134
- flex: 1
135
- }
136
- }, iconPlacement === 'start' && calendarButton('left'), showInputPrompt && /*#__PURE__*/React.createElement(Text, {
137
- sx: promptSx()
138
- }, "MM/DD/YYYY"), /*#__PURE__*/React.createElement(TextInput, {
139
- ref: inputRef,
140
- placeholder: placeholder,
141
- value: inputValue,
142
- onChange: onInputChangeHandler,
143
- sx: inputSx(),
144
- onBlur: onBlurHandler
145
- }), iconPlacement === 'end' && calendarButton('right'));
146
- }
147
-
148
- const calendarIcon = () => /*#__PURE__*/React.createElement(StyledOcticon, {
149
- icon: CalendarIcon,
150
- color: "fg.muted",
151
- sx: {
152
- my: '2px'
153
- }
154
- });
155
-
156
- return /*#__PURE__*/React.createElement(Box, {
157
- ref: ref
158
- }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
159
- onClick: clickHandler,
160
- onKeyPress: keyPressHandler
161
- }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
162
- sx: {
163
- overflow: 'hidden',
164
- textOverflow: 'ellipsis'
165
- }
166
- }, formattedDate), iconPlacement === 'end' && calendarIcon()));
167
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { AnchoredOverlayProps } from '../AnchoredOverlay';
3
- export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;
@@ -1,29 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React, { useState } from 'react';
4
- import useDatePicker from './useDatePicker';
5
- import { AnchoredOverlay } from '../AnchoredOverlay';
6
- import { DatePickerPanel } from './DatePickerPanel';
7
- export const DatePickerOverlay = ({
8
- onClose,
9
- ...rest
10
- }) => {
11
- const {
12
- onClose: onDatePickerClose
13
- } = useDatePicker();
14
- const [suspendFocusTrap, setSuspendFocusTrap] = useState(false);
15
-
16
- const onOverlayClose = async gesture => {
17
- if (!suspendFocusTrap) {
18
- setSuspendFocusTrap(true);
19
- await onDatePickerClose();
20
- setSuspendFocusTrap(false);
21
- onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
22
- }
23
- };
24
-
25
- return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
26
- onClose: onOverlayClose
27
- }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
28
- };
29
- DatePickerOverlay.displayName = "DatePickerOverlay";
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const DatePickerPanel: () => JSX.Element;
@@ -1,100 +0,0 @@
1
- import { addMonths, subMonths } from 'date-fns';
2
- import React, { useMemo } from 'react';
3
- import Box from '../Box';
4
- import { Month } from './Month';
5
- import styled from 'styled-components';
6
- import { get } from '../constants';
7
- import useDatePicker from './useDatePicker';
8
- import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
9
- import StyledOcticon from '../StyledOcticon';
10
- import Button, { ButtonPrimary } from '../Button';
11
- const DatePickerPanelContainer = styled(Box).withConfig({
12
- displayName: "DatePickerPanel__DatePickerPanelContainer",
13
- componentId: "sc-19upxpo-0"
14
- })(["align-items:stretch;display:flex;flex-direction:column;"]);
15
- const DatePickerPanelMonths = styled(Box).withConfig({
16
- displayName: "DatePickerPanel__DatePickerPanelMonths",
17
- componentId: "sc-19upxpo-1"
18
- })(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], get('space.6'), get('space.3'));
19
- const DatePickerPanelFooter = styled(Box).withConfig({
20
- displayName: "DatePickerPanel__DatePickerPanelFooter",
21
- componentId: "sc-19upxpo-2"
22
- })(["align-items:flex-start;border-top:1px solid;border-top-color:", ";display:flex;gap:", ";padding-top:12px;padding-bottom:12px;padding-left:", ";padding-right:", ";flex-direction:row;justify-content:space-between;position:relative;"], get('colors.border.default'), get('space.6'), get('space.3'), get('space.3'));
23
- const ArrowButton = styled(Button).withConfig({
24
- displayName: "DatePickerPanel__ArrowButton",
25
- componentId: "sc-19upxpo-3"
26
- })(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${get('space.3')(props)}`);
27
- export const DatePickerPanel = () => {
28
- const {
29
- configuration,
30
- saveValue,
31
- revertValue,
32
- currentViewingDate,
33
- goToMonth,
34
- nextMonth,
35
- previousMonth
36
- } = useDatePicker();
37
- const previousDisabled = useMemo(() => {
38
- const {
39
- minDate
40
- } = configuration;
41
- if (!minDate) return false;
42
- const previous = subMonths(currentViewingDate, 1);
43
-
44
- if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
45
- return true;
46
- }
47
-
48
- return false;
49
- }, [configuration, currentViewingDate]);
50
- const nextDisabled = useMemo(() => {
51
- const {
52
- maxDate,
53
- view
54
- } = configuration;
55
- if (!maxDate) return false;
56
- const next = addMonths(currentViewingDate, view === '2-month' ? 2 : 1);
57
-
58
- if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
59
- return true;
60
- }
61
-
62
- return false;
63
- }, [configuration, currentViewingDate]);
64
- return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(DatePickerPanelMonths, null, /*#__PURE__*/React.createElement(ArrowButton, {
65
- variant: "small",
66
- side: "left",
67
- onClick: previousMonth,
68
- disabled: previousDisabled
69
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
70
- icon: ChevronLeftIcon,
71
- color: "fg.muted"
72
- })), /*#__PURE__*/React.createElement(Month, {
73
- month: currentViewingDate.getMonth(),
74
- year: currentViewingDate.getFullYear()
75
- }), configuration.view === '2-month' && /*#__PURE__*/React.createElement(Month, {
76
- month: addMonths(currentViewingDate, 1).getMonth(),
77
- year: addMonths(currentViewingDate, 1).getFullYear()
78
- }), /*#__PURE__*/React.createElement(ArrowButton, {
79
- variant: "small",
80
- side: "right",
81
- onClick: nextMonth,
82
- disabled: nextDisabled
83
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
84
- icon: ChevronRightIcon,
85
- color: "fg.muted"
86
- }))), /*#__PURE__*/React.createElement(DatePickerPanelFooter, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
87
- variant: "small",
88
- sx: {
89
- mr: 1
90
- },
91
- onClick: () => revertValue()
92
- }, "Reset"), /*#__PURE__*/React.createElement(Button, {
93
- variant: "small",
94
- onClick: () => goToMonth(new Date())
95
- }, "Today")), configuration.confirmation && /*#__PURE__*/React.createElement(ButtonPrimary, {
96
- variant: "small",
97
- onClick: () => saveValue()
98
- }, "Apply")));
99
- };
100
- DatePickerPanel.displayName = "DatePickerPanel";
@@ -1,14 +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
- import { DaySelection } from './useDatePicker';
6
- export declare type DayProps = {
7
- blocked?: boolean;
8
- disabled?: boolean;
9
- onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
10
- selected?: DaySelection;
11
- date: Date;
12
- } & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
13
- export declare const Day: React.FC<DayProps>;
14
- export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
@@ -1,167 +0,0 @@
1
- import React, { useCallback, useMemo } from 'react';
2
- import styled from 'styled-components';
3
- import Box from '../Box';
4
- import Text from '../Text';
5
- import { get } from '../constants';
6
- import useDatePicker from './useDatePicker';
7
- const DayBaseComponent = styled(Box).withConfig({
8
- displayName: "Day__DayBaseComponent",
9
- componentId: "sc-1japneh-0"
10
- })(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
11
- const states = {
12
- blocked: {
13
- background: get('colors.neutral.subtle'),
14
- borderRadius: get('radii.2'),
15
- color: get('colors.fg.subtle')
16
- },
17
- disabled: {
18
- background: get('colors.canvas.primary'),
19
- borderRadius: get('radii.2'),
20
- color: get('colors.fg.subtle')
21
- },
22
- selected: {
23
- default: {
24
- background: get('colors.accent.emphasis'),
25
- borderRadius: get('radii.2'),
26
- color: get('colors.fg.onEmphasis'),
27
- todayColor: get('colors.fg.onEmphasis')
28
- },
29
- start: {
30
- background: get('colors.accent.emphasis'),
31
- borderRadius: '4px 0 0 4px',
32
- color: get('colors.fg.onEmphasis'),
33
- todayColor: get('colors.fg.onEmphasis')
34
- },
35
- middle: {
36
- background: get('colors.accent.subtle'),
37
- borderRadius: '0',
38
- color: get('colors.fg.default'),
39
- todayColor: get('colors.accent.fg')
40
- },
41
- end: {
42
- background: get('colors.accent.emphasis'),
43
- borderRadius: '0 4px 4px 0',
44
- color: get('colors.fg.onEmphasis'),
45
- todayColor: get('colors.fg.onEmphasis')
46
- }
47
- },
48
- default: {
49
- normal: {
50
- background: get('colors.canvas.primary'),
51
- borderRadius: get('radii.2'),
52
- color: get('colors.fg.default'),
53
- todayColor: get('colors.accent.fg')
54
- },
55
- hover: {
56
- background: get('colors.neutral.muted'),
57
- borderRadius: get('radii.2'),
58
- color: get('colors.fg.default'),
59
- todayColor: get('colors.accent.fg')
60
- },
61
- pressed: {
62
- background: get('colors.neutral.emphasis'),
63
- borderRadius: get('radii.2'),
64
- color: get('colors.fg.onEmphasis'),
65
- todayColor: get('colors.fg.onEmphasis')
66
- }
67
- }
68
- };
69
-
70
- const getStateStyles = (props, prop, state) => {
71
- const {
72
- blocked,
73
- disabled,
74
- selected,
75
- today
76
- } = props;
77
-
78
- if (blocked) {
79
- return states.blocked[prop];
80
- } else if (disabled) {
81
- return states.disabled[prop];
82
- } else if (selected) {
83
- switch (selected) {
84
- case 'start':
85
- return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
86
-
87
- case 'middle':
88
- return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
89
-
90
- case 'end':
91
- return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
92
-
93
- default:
94
- return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
95
- }
96
- } else {
97
- return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
98
- }
99
- };
100
-
101
- const DayComponent = styled(DayBaseComponent).attrs(props => ({
102
- background: getStateStyles(props, 'background', 'normal'),
103
- borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
104
- textColor: getStateStyles(props, 'color', 'normal'),
105
- backgroundHover: getStateStyles(props, 'background', 'hover'),
106
- textColorHover: getStateStyles(props, 'color', 'hover'),
107
- backgroundPressed: getStateStyles(props, 'background', 'pressed'),
108
- textColorPressed: getStateStyles(props, 'color', 'pressed')
109
- })).withConfig({
110
- displayName: "Day__DayComponent",
111
- componentId: "sc-1japneh-1"
112
- })(["background-color:", ";border-radius:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{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, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
113
- export const Day = ({
114
- date,
115
- onAction
116
- }) => {
117
- const {
118
- onDayFocus,
119
- onSelection,
120
- disabled,
121
- blocked,
122
- selected,
123
- today
124
- } = useDatePicker(date);
125
- const keyPressHandler = useCallback(event => {
126
- if (disabled) {
127
- return;
128
- }
129
-
130
- if ([' ', 'Enter'].includes(event.key)) {
131
- onSelection(date);
132
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
133
- }
134
- }, [disabled, onSelection, onAction, date]);
135
- const clickHandler = useCallback(event => {
136
- if (disabled) {
137
- return;
138
- }
139
-
140
- onSelection(date);
141
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
142
- }, [disabled, onSelection, date, onAction]);
143
- const todayStyles = useMemo(() => today ? {
144
- border: '2px solid',
145
- padding: '4px 6px',
146
- borderRadius: '16px',
147
- fontWeight: 'bold'
148
- } : {}, [today]);
149
- return /*#__PURE__*/React.createElement(DayComponent, {
150
- role: "button",
151
- blocked: blocked,
152
- disabled: disabled,
153
- selected: selected,
154
- today: today,
155
- onClick: clickHandler,
156
- onMouseEnter: () => onDayFocus(date),
157
- onFocus: () => onDayFocus(date),
158
- onKeyPress: keyPressHandler
159
- }, /*#__PURE__*/React.createElement(Text, {
160
- sx: todayStyles
161
- }, date.getDate()));
162
- };
163
- Day.displayName = "Day";
164
- export const BlankDay = styled(DayBaseComponent).withConfig({
165
- displayName: "Day__BlankDay",
166
- componentId: "sc-1japneh-2"
167
- })(["background-color:", ";"], get('colors.canvas.primary'));
@@ -1,9 +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
- month: number;
7
- year: number;
8
- }
9
- export declare const Month: React.FC<MonthProps>;
@@ -1,96 +0,0 @@
1
- import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
2
- import React, { useMemo, useState } from 'react';
3
- import styled from 'styled-components';
4
- import Box from '../Box';
5
- import Text from '../Text';
6
- import { get } from '../constants';
7
- import { BlankDay, Day } from './Day';
8
- import useDatePicker from './useDatePicker';
9
- const weekdayEnum = {
10
- Sunday: 0,
11
- Monday: 1,
12
- Tuesday: 2,
13
- Wednesday: 3,
14
- Thursday: 4,
15
- Friday: 5,
16
- Saturday: 6
17
- };
18
- const MonthComponent = styled(Box).withConfig({
19
- displayName: "Month__MonthComponent",
20
- componentId: "l6j7o0-0"
21
- })(["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;"]);
22
- const MonthTitle = styled(Text).withConfig({
23
- displayName: "Month__MonthTitle",
24
- componentId: "l6j7o0-1"
25
- })(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'));
26
- const WeekdayHeader = styled(Text).withConfig({
27
- displayName: "Month__WeekdayHeader",
28
- componentId: "l6j7o0-2"
29
- })(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
30
- export const Month = ({
31
- month,
32
- year
33
- }) => {
34
- const {
35
- configuration
36
- } = useDatePicker();
37
- const [selectedDay, setSelectedDay] = useState(null);
38
- const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
39
- const weekdayHeaders = useMemo(() => {
40
- var _configuration$weekSt;
41
-
42
- const now = new Date(year, month);
43
- const weekOptions = {
44
- weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
45
- };
46
- return eachDayOfInterval({
47
- start: startOfWeek(now, weekOptions),
48
- end: endOfWeek(now, weekOptions)
49
- }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
50
- key: `weekday-${d}-header`
51
- }, format(d, 'EEEEEE')));
52
- }, [configuration.weekStartsOn, month, year]);
53
-
54
- const dayAction = date => {
55
- setSelectedDay(date);
56
- };
57
-
58
- const dayComponents = useMemo(() => {
59
- var _configuration$weekSt2, _configuration$weekSt3;
60
-
61
- const components = [];
62
- const firstDay = new Date(year, month, 1);
63
- const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
64
-
65
- for (let i = 0; i < preBlanks; i++) {
66
- components.push( /*#__PURE__*/React.createElement(BlankDay, {
67
- key: `month-pre-blank-${i}`
68
- }));
69
- }
70
-
71
- for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
72
- const date = new Date(year, month, i);
73
- components.push( /*#__PURE__*/React.createElement(Day, {
74
- key: `day-component-${date.toString()}`,
75
- date: date,
76
- selected: selectedDay ? isEqual(date, selectedDay) : false,
77
- onAction: dayAction
78
- }));
79
- }
80
-
81
- const lastDay = lastDayOfMonth(firstDay);
82
- const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
83
-
84
- for (let i = 6; i > postBlanks; i--) {
85
- components.push( /*#__PURE__*/React.createElement(BlankDay, {
86
- key: `month-post-blank-${i}`
87
- }));
88
- }
89
-
90
- return components;
91
- }, [configuration.weekStartsOn, month, selectedDay, year]);
92
- return /*#__PURE__*/React.createElement(MonthComponent, {
93
- role: "grid"
94
- }, /*#__PURE__*/React.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
95
- };
96
- Month.displayName = "Month";
@@ -1,11 +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
- variant?: SelectionVariant;
9
- };
10
- export declare const formatDate: ({ selection, anchorVariant, dateFormat, placeholder, variant }: FormatDateOptions) => string;
11
- export {};