@primer/components 0.0.0-2021927175656 → 0.0.0-2021927182528

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 (68) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/dist/browser.esm.js +47 -44
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +30 -27
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +5 -1
  8. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  9. package/lib/Autocomplete/Autocomplete.d.ts +2 -4
  10. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -4
  11. package/lib/SelectMenu/SelectMenu.d.ts +2 -4
  12. package/lib/TextInputWithTokens.d.ts +2 -4
  13. package/lib/TextInputWithTokens.js +17 -10
  14. package/lib/Token/Token.js +13 -2
  15. package/lib/Token/TokenBase.js +0 -4
  16. package/lib/Token/_RemoveTokenButton.js +15 -2
  17. package/lib/theme-preval.js +2 -2
  18. package/lib/utils/testing.d.ts +1 -1
  19. package/lib-esm/ActionList/Item.d.ts +6 -0
  20. package/lib-esm/ActionList/Item.js +5 -1
  21. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  22. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -4
  23. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -4
  24. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -4
  25. package/lib-esm/TextInputWithTokens.d.ts +2 -4
  26. package/lib-esm/TextInputWithTokens.js +17 -10
  27. package/lib-esm/Token/Token.js +13 -2
  28. package/lib-esm/Token/TokenBase.js +0 -4
  29. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  30. package/lib-esm/theme-preval.js +2 -2
  31. package/lib-esm/utils/testing.d.ts +1 -1
  32. package/package.json +13 -14
  33. package/lib/DatePicker/DatePicker.d.ts +0 -48
  34. package/lib/DatePicker/DatePicker.js +0 -100
  35. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  36. package/lib/DatePicker/DatePickerAnchor.js +0 -182
  37. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  38. package/lib/DatePicker/DatePickerOverlay.js +0 -39
  39. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  40. package/lib/DatePicker/DatePickerPanel.js +0 -126
  41. package/lib/DatePicker/Day.d.ts +0 -14
  42. package/lib/DatePicker/Day.js +0 -192
  43. package/lib/DatePicker/Month.d.ts +0 -9
  44. package/lib/DatePicker/Month.js +0 -120
  45. package/lib/DatePicker/index.d.ts +0 -2
  46. package/lib/DatePicker/index.js +0 -13
  47. package/lib/DatePicker/useDatePicker.d.ts +0 -88
  48. package/lib/DatePicker/useDatePicker.js +0 -383
  49. package/lib/hooks/useDebounce.d.ts +0 -2
  50. package/lib/hooks/useDebounce.js +0 -24
  51. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  52. package/lib-esm/DatePicker/DatePicker.js +0 -83
  53. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  54. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -155
  55. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  56. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -24
  57. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  58. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  59. package/lib-esm/DatePicker/Day.d.ts +0 -14
  60. package/lib-esm/DatePicker/Day.js +0 -169
  61. package/lib-esm/DatePicker/Month.d.ts +0 -9
  62. package/lib-esm/DatePicker/Month.js +0 -96
  63. package/lib-esm/DatePicker/index.d.ts +0 -2
  64. package/lib-esm/DatePicker/index.js +0 -1
  65. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -88
  66. package/lib-esm/DatePicker/useDatePicker.js +0 -355
  67. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  68. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,155 +0,0 @@
1
- import { CalendarIcon } from '@primer/octicons-react';
2
- import styled from 'styled-components';
3
- import React, { useCallback, 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 { isBefore } from 'date-fns';
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
- const INVALID_DATE = 'Invalid Date';
17
- export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
18
- onAction
19
- }, ref) => {
20
- const {
21
- configuration: {
22
- anchorVariant,
23
- iconPlacement,
24
- selection
25
- },
26
- disabled,
27
- formattedDate,
28
- onDateInput
29
- } = useDatePicker();
30
- const [inputValue, setInputValue] = useState(formattedDate);
31
- const keyPressHandler = useCallback(event => {
32
- if (disabled) {
33
- return;
34
- }
35
-
36
- if ([' ', 'Enter'].includes(event.key)) {
37
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
38
- }
39
- }, [disabled, onAction]);
40
- const clickHandler = useCallback(event => {
41
- if (disabled) {
42
- return;
43
- }
44
-
45
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
46
- }, [disabled, onAction]);
47
- const onInputChangeHandler = useCallback(e => {
48
- const value = e.currentTarget.value;
49
- if (!value) return;
50
-
51
- if (selection === 'range') {
52
- var _values$, _values$2, _values$3, _values$4, _values$5, _values$6;
53
-
54
- const values = value.split(' - ');
55
- const dates = isBefore(new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()), new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())) ? {
56
- from: new Date((_values$3 = values[0]) === null || _values$3 === void 0 ? void 0 : _values$3.trim()),
57
- to: new Date((_values$4 = values[1]) === null || _values$4 === void 0 ? void 0 : _values$4.trim())
58
- } : {
59
- from: new Date((_values$5 = values[1]) === null || _values$5 === void 0 ? void 0 : _values$5.trim()),
60
- to: new Date((_values$6 = values[0]) === null || _values$6 === void 0 ? void 0 : _values$6.trim())
61
- };
62
- setInputValue(value);
63
-
64
- if (dates.from.toString() !== INVALID_DATE && dates.to.toString() !== INVALID_DATE) {
65
- onDateInput(dates);
66
- }
67
- } else if (selection === 'multi') {
68
- const values = value.split(',');
69
- const dates = [];
70
-
71
- for (const date of values) {
72
- dates.push(new Date(date.trim()));
73
- }
74
-
75
- setInputValue(value);
76
-
77
- if (dates.every(d => d.toString() !== INVALID_DATE)) {
78
- onDateInput(dates);
79
- }
80
- } else {
81
- const date = new Date(value);
82
- setInputValue(value);
83
- if (date.toString() !== INVALID_DATE) onDateInput(date);
84
- }
85
- }, [onDateInput, selection]);
86
-
87
- const onBlurHandler = () => {
88
- setInputValue(formattedDate);
89
- };
90
-
91
- if (anchorVariant === 'input') {
92
- const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
93
- onClick: clickHandler,
94
- sx: {
95
- width: '32px',
96
- px: '6px',
97
- position: 'absolute',
98
- [side]: '1px',
99
- top: '1px'
100
- }
101
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
102
- icon: CalendarIcon
103
- }));
104
-
105
- const inputSx = () => {
106
- if (iconPlacement === 'start') {
107
- return {
108
- pl: 5,
109
- pr: 2
110
- };
111
- } else if (iconPlacement === 'end') {
112
- return {
113
- pl: 2,
114
- pr: 5
115
- };
116
- } else {
117
- return {};
118
- }
119
- };
120
-
121
- return /*#__PURE__*/React.createElement(Box, {
122
- ref: ref,
123
- sx: {
124
- position: 'relative',
125
- display: 'flex',
126
- flex: 1
127
- }
128
- }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
129
- value: inputValue,
130
- onChange: onInputChangeHandler,
131
- sx: inputSx(),
132
- onBlur: onBlurHandler
133
- }), iconPlacement === 'end' && calendarButton('right'));
134
- }
135
-
136
- const calendarIcon = () => /*#__PURE__*/React.createElement(StyledOcticon, {
137
- icon: CalendarIcon,
138
- color: "fg.muted",
139
- sx: {
140
- my: '2px'
141
- }
142
- });
143
-
144
- return /*#__PURE__*/React.createElement(Box, {
145
- ref: ref
146
- }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
147
- onClick: clickHandler,
148
- onKeyPress: keyPressHandler
149
- }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
150
- sx: {
151
- overflow: 'hidden',
152
- textOverflow: 'ellipsis'
153
- }
154
- }, formattedDate), iconPlacement === 'end' && calendarIcon()));
155
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { AnchoredOverlayProps } from '../AnchoredOverlay';
3
- export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;
@@ -1,24 +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 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
- revertValue
13
- } = useDatePicker();
14
-
15
- const onOverlayClose = gesture => {
16
- revertValue();
17
- onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
18
- };
19
-
20
- return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
21
- onClose: onOverlayClose
22
- }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
23
- };
24
- 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,169 +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.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.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
- onDayBlur,
120
- onSelection,
121
- disabled,
122
- blocked,
123
- selected,
124
- today
125
- } = useDatePicker(date);
126
- const keyPressHandler = useCallback(event => {
127
- if (disabled) {
128
- return;
129
- }
130
-
131
- if ([' ', 'Enter'].includes(event.key)) {
132
- onSelection(date);
133
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
134
- }
135
- }, [disabled, onSelection, onAction, date]);
136
- const clickHandler = useCallback(event => {
137
- if (disabled) {
138
- return;
139
- }
140
-
141
- onSelection(date);
142
- onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
143
- }, [disabled, onSelection, date, onAction]);
144
- const todayStyles = useMemo(() => today ? {
145
- border: '2px solid',
146
- padding: '4px 6px',
147
- borderRadius: '16px',
148
- fontWeight: 'bold'
149
- } : {}, [today]);
150
- return /*#__PURE__*/React.createElement(DayComponent, {
151
- role: "button",
152
- blocked: blocked,
153
- disabled: disabled,
154
- selected: selected,
155
- today: today,
156
- onClick: clickHandler,
157
- onMouseEnter: () => onDayFocus(date),
158
- onFocus: () => onDayFocus(date),
159
- onBlur: () => onDayBlur(date),
160
- onKeyPress: keyPressHandler
161
- }, /*#__PURE__*/React.createElement(Text, {
162
- sx: todayStyles
163
- }, date.getDate()));
164
- };
165
- Day.displayName = "Day";
166
- export const BlankDay = styled(DayBaseComponent).withConfig({
167
- displayName: "Day__BlankDay",
168
- componentId: "sc-1japneh-2"
169
- })(["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,2 +0,0 @@
1
- export { DatePicker } from './DatePicker';
2
- export type { DatePickerProps } from './DatePicker';
@@ -1 +0,0 @@
1
- export { DatePicker } from './DatePicker';
@@ -1,88 +0,0 @@
1
- import React from 'react';
2
- export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
3
- export declare type DateFormat = 'short' | 'long' | string;
4
- export declare type SelectionVariant = 'single' | 'multi' | 'range';
5
- export interface DatePickerConfiguration {
6
- anchorVariant?: AnchorVariant;
7
- blockedDates?: Array<Date>;
8
- confirmation?: boolean;
9
- contiguousSelection?: boolean;
10
- dateFormat?: DateFormat;
11
- dimWeekends?: boolean;
12
- iconPlacement?: 'start' | 'end' | 'none';
13
- maxDate?: Date;
14
- maxSelections?: number;
15
- maxRange?: number;
16
- minDate?: Date;
17
- placeholder?: string;
18
- rangeIncrement?: number;
19
- selection?: SelectionVariant;
20
- view?: '1-month' | '2-month';
21
- weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
22
- }
23
- export declare type RangeSelection = {
24
- from: Date;
25
- to: Date | null;
26
- };
27
- export declare type StringRangeSelection = {
28
- from: string;
29
- to: string;
30
- };
31
- export interface DatePickerContext {
32
- disabled?: boolean;
33
- configuration: DatePickerConfiguration;
34
- currentViewingDate: Date;
35
- goToMonth: (date: Date) => void;
36
- hoverRange?: RangeSelection | null;
37
- selection?: Selection;
38
- softSelection?: Partial<RangeSelection> | null;
39
- selectionActive?: boolean;
40
- formattedDate: string;
41
- nextMonth: () => void;
42
- onDateInput: (updatedSelection: Selection) => void;
43
- onDayFocus: (date: Date) => void;
44
- onDayBlur: (date: Date) => void;
45
- onSelection: (date: Date) => void;
46
- previousMonth: () => void;
47
- revertValue: () => void;
48
- saveValue: (selection?: Selection) => void;
49
- }
50
- export declare type Selection = Date | Array<Date> | RangeSelection | null;
51
- export declare type StringSelection = string | Array<string> | {
52
- to: string;
53
- from: string;
54
- } | null;
55
- export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
56
- declare const useDatePicker: (date?: Date | undefined) => {
57
- blocked: boolean | undefined;
58
- disabled: boolean;
59
- selected: DaySelection;
60
- today: boolean;
61
- configuration: DatePickerConfiguration;
62
- currentViewingDate: Date;
63
- goToMonth: (date: Date) => void;
64
- hoverRange?: RangeSelection | null | undefined;
65
- selection?: Selection | undefined;
66
- softSelection?: Partial<RangeSelection> | null | undefined;
67
- selectionActive?: boolean | undefined;
68
- formattedDate: string;
69
- nextMonth: () => void;
70
- onDateInput: (updatedSelection: Selection) => void;
71
- onDayFocus: (date: Date) => void;
72
- onDayBlur: (date: Date) => void;
73
- onSelection: (date: Date) => void;
74
- previousMonth: () => void;
75
- revertValue: () => void;
76
- saveValue: (selection?: Selection | undefined) => void;
77
- };
78
- export default useDatePicker;
79
- export interface DatePickerProviderProps {
80
- closePicker?: () => void;
81
- configuration?: DatePickerConfiguration;
82
- value?: Selection | StringSelection;
83
- }
84
- export declare function isSingleSelection(selection: Selection): selection is Date;
85
- export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
86
- export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
87
- export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
88
- export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;