@primer/components 0.0.0-202192822657 → 0.0.0-2021929142717
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -1
- package/dist/browser.esm.js +53 -49
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +50 -46
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.d.ts +6 -0
- package/lib/ActionList/Item.js +5 -1
- package/lib/ActionList2/Description.d.ts +6 -0
- package/lib/ActionList2/Description.js +53 -0
- package/lib/ActionList2/Divider.d.ts +5 -0
- package/lib/ActionList2/Divider.js +33 -0
- package/lib/ActionList2/Group.d.ts +11 -0
- package/lib/ActionList2/Group.js +55 -0
- package/lib/ActionList2/Header.d.ts +26 -0
- package/lib/ActionList2/Header.js +55 -0
- package/lib/ActionList2/Item.d.ts +48 -0
- package/lib/ActionList2/Item.js +204 -0
- package/lib/ActionList2/List.d.ts +26 -0
- package/lib/ActionList2/List.js +56 -0
- package/lib/ActionList2/Selection.d.ts +5 -0
- package/lib/ActionList2/Selection.js +73 -0
- package/lib/ActionList2/Visuals.d.ts +11 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/hacks.d.ts +30 -0
- package/lib/ActionList2/hacks.js +38 -0
- package/lib/ActionList2/index.d.ts +28 -0
- package/lib/ActionList2/index.js +42 -0
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib/Autocomplete/Autocomplete.d.ts +6 -8
- package/lib/Autocomplete/AutocompleteInput.d.ts +6 -8
- package/lib/Button/Button.d.ts +4 -4
- package/lib/Button/ButtonClose.d.ts +21 -21
- package/lib/Button/ButtonDanger.d.ts +4 -4
- package/lib/Button/ButtonInvisible.d.ts +4 -4
- package/lib/Button/ButtonOutline.d.ts +4 -4
- package/lib/Button/ButtonPrimary.d.ts +4 -4
- package/lib/CircleOcticon.d.ts +19 -19
- package/lib/Dialog.d.ts +21 -21
- package/lib/Dropdown.d.ts +82 -82
- package/lib/DropdownMenu/DropdownButton.d.ts +23 -23
- package/lib/FilterList.d.ts +19 -19
- package/lib/Position.d.ts +4 -4
- package/lib/SelectMenu/SelectMenu.d.ts +105 -107
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +10 -8
- package/lib/TextInputWithTokens.js +102 -29
- package/lib/Timeline.d.ts +19 -19
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/Token/Token.js +13 -2
- package/lib/Token/TokenBase.js +0 -4
- package/lib/Token/_RemoveTokenButton.js +15 -2
- package/lib/_TextInputWrapper.js +1 -1
- package/lib/experiments.d.ts +1 -0
- package/lib/experiments.js +18 -0
- package/lib/sx.d.ts +2 -0
- package/lib/sx.js +8 -0
- package/lib/theme-preval.js +2 -2
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/testing.d.ts +1 -1
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +19 -0
- package/lib-esm/ActionList/Item.d.ts +6 -0
- package/lib-esm/ActionList/Item.js +5 -1
- package/lib-esm/ActionList2/Description.d.ts +6 -0
- package/lib-esm/ActionList2/Description.js +37 -0
- package/lib-esm/ActionList2/Divider.d.ts +5 -0
- package/lib-esm/ActionList2/Divider.js +21 -0
- package/lib-esm/ActionList2/Group.d.ts +11 -0
- package/lib-esm/ActionList2/Group.js +38 -0
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +45 -0
- package/lib-esm/ActionList2/Item.d.ts +48 -0
- package/lib-esm/ActionList2/Item.js +176 -0
- package/lib-esm/ActionList2/List.d.ts +26 -0
- package/lib-esm/ActionList2/List.js +38 -0
- package/lib-esm/ActionList2/Selection.d.ts +5 -0
- package/lib-esm/ActionList2/Selection.js +55 -0
- package/lib-esm/ActionList2/Visuals.d.ts +11 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/hacks.d.ts +30 -0
- package/lib-esm/ActionList2/hacks.js +30 -0
- package/lib-esm/ActionList2/index.d.ts +28 -0
- package/lib-esm/ActionList2/index.js +29 -0
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib-esm/Autocomplete/Autocomplete.d.ts +6 -8
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +6 -8
- package/lib-esm/Button/Button.d.ts +4 -4
- package/lib-esm/Button/ButtonClose.d.ts +21 -21
- package/lib-esm/Button/ButtonDanger.d.ts +4 -4
- package/lib-esm/Button/ButtonInvisible.d.ts +4 -4
- package/lib-esm/Button/ButtonOutline.d.ts +4 -4
- package/lib-esm/Button/ButtonPrimary.d.ts +4 -4
- package/lib-esm/CircleOcticon.d.ts +19 -19
- package/lib-esm/Dialog.d.ts +21 -21
- package/lib-esm/Dropdown.d.ts +82 -82
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +23 -23
- package/lib-esm/FilterList.d.ts +19 -19
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +105 -107
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +10 -8
- package/lib-esm/TextInputWithTokens.js +101 -30
- package/lib-esm/Timeline.d.ts +19 -19
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/Token/Token.js +13 -2
- package/lib-esm/Token/TokenBase.js +0 -4
- package/lib-esm/Token/_RemoveTokenButton.js +11 -2
- package/lib-esm/_TextInputWrapper.js +1 -1
- package/lib-esm/experiments.d.ts +1 -0
- package/lib-esm/experiments.js +2 -0
- package/lib-esm/sx.d.ts +2 -0
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +2 -2
- package/lib-esm/utils/create-slots.d.ts +17 -0
- package/lib-esm/utils/create-slots.js +84 -0
- package/lib-esm/utils/testing.d.ts +1 -1
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/package.json +16 -14
- package/lib/DatePicker/DatePicker.d.ts +0 -48
- package/lib/DatePicker/DatePicker.js +0 -106
- package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib/DatePicker/DatePickerAnchor.js +0 -194
- package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib/DatePicker/DatePickerOverlay.js +0 -48
- package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib/DatePicker/DatePickerPanel.js +0 -126
- package/lib/DatePicker/Day.d.ts +0 -14
- package/lib/DatePicker/Day.js +0 -190
- package/lib/DatePicker/Month.d.ts +0 -9
- package/lib/DatePicker/Month.js +0 -120
- package/lib/DatePicker/dateParser.d.ts +0 -11
- package/lib/DatePicker/dateParser.js +0 -188
- package/lib/DatePicker/index.d.ts +0 -2
- package/lib/DatePicker/index.js +0 -13
- package/lib/DatePicker/useDatePicker.d.ts +0 -89
- package/lib/DatePicker/useDatePicker.js +0 -370
- package/lib/hooks/useDebounce.d.ts +0 -2
- package/lib/hooks/useDebounce.js +0 -24
- package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
- package/lib-esm/DatePicker/DatePicker.js +0 -89
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib-esm/DatePicker/DatePickerAnchor.js +0 -167
- package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib-esm/DatePicker/DatePickerOverlay.js +0 -29
- package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
- package/lib-esm/DatePicker/Day.d.ts +0 -14
- package/lib-esm/DatePicker/Day.js +0 -167
- package/lib-esm/DatePicker/Month.d.ts +0 -9
- package/lib-esm/DatePicker/Month.js +0 -96
- package/lib-esm/DatePicker/dateParser.d.ts +0 -11
- package/lib-esm/DatePicker/dateParser.js +0 -174
- package/lib-esm/DatePicker/index.d.ts +0 -2
- package/lib-esm/DatePicker/index.js +0 -1
- package/lib-esm/DatePicker/useDatePicker.d.ts +0 -89
- package/lib-esm/DatePicker/useDatePicker.js +0 -339
- package/lib-esm/hooks/useDebounce.d.ts +0 -2
- package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,48 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DatePickerOverlay = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
9
|
-
|
10
|
-
var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
|
11
|
-
|
12
|
-
var _AnchoredOverlay = require("../AnchoredOverlay");
|
13
|
-
|
14
|
-
var _DatePickerPanel = require("./DatePickerPanel");
|
15
|
-
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
-
|
18
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
19
|
-
|
20
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
21
|
-
|
22
|
-
function _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); }
|
23
|
-
|
24
|
-
const DatePickerOverlay = ({
|
25
|
-
onClose,
|
26
|
-
...rest
|
27
|
-
}) => {
|
28
|
-
const {
|
29
|
-
onClose: onDatePickerClose
|
30
|
-
} = (0, _useDatePicker.default)();
|
31
|
-
const [suspendFocusTrap, setSuspendFocusTrap] = (0, _react.useState)(false);
|
32
|
-
|
33
|
-
const onOverlayClose = async gesture => {
|
34
|
-
if (!suspendFocusTrap) {
|
35
|
-
setSuspendFocusTrap(true);
|
36
|
-
await onDatePickerClose();
|
37
|
-
setSuspendFocusTrap(false);
|
38
|
-
onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
|
39
|
-
}
|
40
|
-
};
|
41
|
-
|
42
|
-
return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({
|
43
|
-
onClose: onOverlayClose
|
44
|
-
}, rest), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
|
45
|
-
};
|
46
|
-
|
47
|
-
exports.DatePickerOverlay = DatePickerOverlay;
|
48
|
-
DatePickerOverlay.displayName = "DatePickerOverlay";
|
@@ -1,126 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DatePickerPanel = void 0;
|
7
|
-
|
8
|
-
var _dateFns = require("date-fns");
|
9
|
-
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
11
|
-
|
12
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
13
|
-
|
14
|
-
var _Month = require("./Month");
|
15
|
-
|
16
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
17
|
-
|
18
|
-
var _constants = require("../constants");
|
19
|
-
|
20
|
-
var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
|
21
|
-
|
22
|
-
var _octiconsReact = require("@primer/octicons-react");
|
23
|
-
|
24
|
-
var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
|
25
|
-
|
26
|
-
var _Button = _interopRequireWildcard(require("../Button"));
|
27
|
-
|
28
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
29
|
-
|
30
|
-
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); }
|
31
|
-
|
32
|
-
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; }
|
33
|
-
|
34
|
-
const DatePickerPanelContainer = (0, _styledComponents.default)(_Box.default).withConfig({
|
35
|
-
displayName: "DatePickerPanel__DatePickerPanelContainer",
|
36
|
-
componentId: "sc-19upxpo-0"
|
37
|
-
})(["align-items:stretch;display:flex;flex-direction:column;"]);
|
38
|
-
const DatePickerPanelMonths = (0, _styledComponents.default)(_Box.default).withConfig({
|
39
|
-
displayName: "DatePickerPanel__DatePickerPanelMonths",
|
40
|
-
componentId: "sc-19upxpo-1"
|
41
|
-
})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], (0, _constants.get)('space.6'), (0, _constants.get)('space.3'));
|
42
|
-
const DatePickerPanelFooter = (0, _styledComponents.default)(_Box.default).withConfig({
|
43
|
-
displayName: "DatePickerPanel__DatePickerPanelFooter",
|
44
|
-
componentId: "sc-19upxpo-2"
|
45
|
-
})(["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;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.6'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'));
|
46
|
-
const ArrowButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
47
|
-
displayName: "DatePickerPanel__ArrowButton",
|
48
|
-
componentId: "sc-19upxpo-3"
|
49
|
-
})(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${(0, _constants.get)('space.3')(props)}`);
|
50
|
-
|
51
|
-
const DatePickerPanel = () => {
|
52
|
-
const {
|
53
|
-
configuration,
|
54
|
-
saveValue,
|
55
|
-
revertValue,
|
56
|
-
currentViewingDate,
|
57
|
-
goToMonth,
|
58
|
-
nextMonth,
|
59
|
-
previousMonth
|
60
|
-
} = (0, _useDatePicker.default)();
|
61
|
-
const previousDisabled = (0, _react.useMemo)(() => {
|
62
|
-
const {
|
63
|
-
minDate
|
64
|
-
} = configuration;
|
65
|
-
if (!minDate) return false;
|
66
|
-
const previous = (0, _dateFns.subMonths)(currentViewingDate, 1);
|
67
|
-
|
68
|
-
if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
|
69
|
-
return true;
|
70
|
-
}
|
71
|
-
|
72
|
-
return false;
|
73
|
-
}, [configuration, currentViewingDate]);
|
74
|
-
const nextDisabled = (0, _react.useMemo)(() => {
|
75
|
-
const {
|
76
|
-
maxDate,
|
77
|
-
view
|
78
|
-
} = configuration;
|
79
|
-
if (!maxDate) return false;
|
80
|
-
const next = (0, _dateFns.addMonths)(currentViewingDate, view === '2-month' ? 2 : 1);
|
81
|
-
|
82
|
-
if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
|
83
|
-
return true;
|
84
|
-
}
|
85
|
-
|
86
|
-
return false;
|
87
|
-
}, [configuration, currentViewingDate]);
|
88
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, null, /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, null, /*#__PURE__*/_react.default.createElement(ArrowButton, {
|
89
|
-
variant: "small",
|
90
|
-
side: "left",
|
91
|
-
onClick: previousMonth,
|
92
|
-
disabled: previousDisabled
|
93
|
-
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
94
|
-
icon: _octiconsReact.ChevronLeftIcon,
|
95
|
-
color: "fg.muted"
|
96
|
-
})), /*#__PURE__*/_react.default.createElement(_Month.Month, {
|
97
|
-
month: currentViewingDate.getMonth(),
|
98
|
-
year: currentViewingDate.getFullYear()
|
99
|
-
}), configuration.view === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {
|
100
|
-
month: (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth(),
|
101
|
-
year: (0, _dateFns.addMonths)(currentViewingDate, 1).getFullYear()
|
102
|
-
}), /*#__PURE__*/_react.default.createElement(ArrowButton, {
|
103
|
-
variant: "small",
|
104
|
-
side: "right",
|
105
|
-
onClick: nextMonth,
|
106
|
-
disabled: nextDisabled
|
107
|
-
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
108
|
-
icon: _octiconsReact.ChevronRightIcon,
|
109
|
-
color: "fg.muted"
|
110
|
-
}))), /*#__PURE__*/_react.default.createElement(DatePickerPanelFooter, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
111
|
-
variant: "small",
|
112
|
-
sx: {
|
113
|
-
mr: 1
|
114
|
-
},
|
115
|
-
onClick: () => revertValue()
|
116
|
-
}, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
117
|
-
variant: "small",
|
118
|
-
onClick: () => goToMonth(new Date())
|
119
|
-
}, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
|
120
|
-
variant: "small",
|
121
|
-
onClick: () => saveValue()
|
122
|
-
}, "Apply")));
|
123
|
-
};
|
124
|
-
|
125
|
-
exports.DatePickerPanel = DatePickerPanel;
|
126
|
-
DatePickerPanel.displayName = "DatePickerPanel";
|
package/lib/DatePicker/Day.d.ts
DELETED
@@ -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>;
|
package/lib/DatePicker/Day.js
DELETED
@@ -1,190 +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
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
|
-
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); }
|
23
|
-
|
24
|
-
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; }
|
25
|
-
|
26
|
-
const DayBaseComponent = (0, _styledComponents.default)(_Box.default).withConfig({
|
27
|
-
displayName: "Day__DayBaseComponent",
|
28
|
-
componentId: "sc-1japneh-0"
|
29
|
-
})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], (0, _constants.get)('space.1'));
|
30
|
-
const states = {
|
31
|
-
blocked: {
|
32
|
-
background: (0, _constants.get)('colors.neutral.subtle'),
|
33
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
34
|
-
color: (0, _constants.get)('colors.fg.subtle')
|
35
|
-
},
|
36
|
-
disabled: {
|
37
|
-
background: (0, _constants.get)('colors.canvas.primary'),
|
38
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
39
|
-
color: (0, _constants.get)('colors.fg.subtle')
|
40
|
-
},
|
41
|
-
selected: {
|
42
|
-
default: {
|
43
|
-
background: (0, _constants.get)('colors.accent.emphasis'),
|
44
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
45
|
-
color: (0, _constants.get)('colors.fg.onEmphasis'),
|
46
|
-
todayColor: (0, _constants.get)('colors.fg.onEmphasis')
|
47
|
-
},
|
48
|
-
start: {
|
49
|
-
background: (0, _constants.get)('colors.accent.emphasis'),
|
50
|
-
borderRadius: '4px 0 0 4px',
|
51
|
-
color: (0, _constants.get)('colors.fg.onEmphasis'),
|
52
|
-
todayColor: (0, _constants.get)('colors.fg.onEmphasis')
|
53
|
-
},
|
54
|
-
middle: {
|
55
|
-
background: (0, _constants.get)('colors.accent.subtle'),
|
56
|
-
borderRadius: '0',
|
57
|
-
color: (0, _constants.get)('colors.fg.default'),
|
58
|
-
todayColor: (0, _constants.get)('colors.accent.fg')
|
59
|
-
},
|
60
|
-
end: {
|
61
|
-
background: (0, _constants.get)('colors.accent.emphasis'),
|
62
|
-
borderRadius: '0 4px 4px 0',
|
63
|
-
color: (0, _constants.get)('colors.fg.onEmphasis'),
|
64
|
-
todayColor: (0, _constants.get)('colors.fg.onEmphasis')
|
65
|
-
}
|
66
|
-
},
|
67
|
-
default: {
|
68
|
-
normal: {
|
69
|
-
background: (0, _constants.get)('colors.canvas.primary'),
|
70
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
71
|
-
color: (0, _constants.get)('colors.fg.default'),
|
72
|
-
todayColor: (0, _constants.get)('colors.accent.fg')
|
73
|
-
},
|
74
|
-
hover: {
|
75
|
-
background: (0, _constants.get)('colors.neutral.muted'),
|
76
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
77
|
-
color: (0, _constants.get)('colors.fg.default'),
|
78
|
-
todayColor: (0, _constants.get)('colors.accent.fg')
|
79
|
-
},
|
80
|
-
pressed: {
|
81
|
-
background: (0, _constants.get)('colors.neutral.emphasis'),
|
82
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
83
|
-
color: (0, _constants.get)('colors.fg.onEmphasis'),
|
84
|
-
todayColor: (0, _constants.get)('colors.fg.onEmphasis')
|
85
|
-
}
|
86
|
-
}
|
87
|
-
};
|
88
|
-
|
89
|
-
const getStateStyles = (props, prop, state) => {
|
90
|
-
const {
|
91
|
-
blocked,
|
92
|
-
disabled,
|
93
|
-
selected,
|
94
|
-
today
|
95
|
-
} = props;
|
96
|
-
|
97
|
-
if (blocked) {
|
98
|
-
return states.blocked[prop];
|
99
|
-
} else if (disabled) {
|
100
|
-
return states.disabled[prop];
|
101
|
-
} else if (selected) {
|
102
|
-
switch (selected) {
|
103
|
-
case 'start':
|
104
|
-
return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
|
105
|
-
|
106
|
-
case 'middle':
|
107
|
-
return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
|
108
|
-
|
109
|
-
case 'end':
|
110
|
-
return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
|
111
|
-
|
112
|
-
default:
|
113
|
-
return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
|
114
|
-
}
|
115
|
-
} else {
|
116
|
-
return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
|
117
|
-
}
|
118
|
-
};
|
119
|
-
|
120
|
-
const DayComponent = (0, _styledComponents.default)(DayBaseComponent).attrs(props => ({
|
121
|
-
background: getStateStyles(props, 'background', 'normal'),
|
122
|
-
borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
|
123
|
-
textColor: getStateStyles(props, 'color', 'normal'),
|
124
|
-
backgroundHover: getStateStyles(props, 'background', 'hover'),
|
125
|
-
textColorHover: getStateStyles(props, 'color', 'hover'),
|
126
|
-
backgroundPressed: getStateStyles(props, 'background', 'pressed'),
|
127
|
-
textColorPressed: getStateStyles(props, 'color', 'pressed')
|
128
|
-
})).withConfig({
|
129
|
-
displayName: "Day__DayComponent",
|
130
|
-
componentId: "sc-1japneh-1"
|
131
|
-
})(["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.default, props => props.textColor, (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), props => props.backgroundHover, _Text.default, props => props.textColorHover, props => props.backgroundPressed, (0, _constants.get)('shadows.shadow.medium'), _Text.default, props => props.textColorPressed);
|
132
|
-
|
133
|
-
const Day = ({
|
134
|
-
date,
|
135
|
-
onAction
|
136
|
-
}) => {
|
137
|
-
const {
|
138
|
-
onDayFocus,
|
139
|
-
onSelection,
|
140
|
-
disabled,
|
141
|
-
blocked,
|
142
|
-
selected,
|
143
|
-
today
|
144
|
-
} = (0, _useDatePicker.default)(date);
|
145
|
-
const keyPressHandler = (0, _react.useCallback)(event => {
|
146
|
-
if (disabled) {
|
147
|
-
return;
|
148
|
-
}
|
149
|
-
|
150
|
-
if ([' ', 'Enter'].includes(event.key)) {
|
151
|
-
onSelection(date);
|
152
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
153
|
-
}
|
154
|
-
}, [disabled, onSelection, onAction, date]);
|
155
|
-
const clickHandler = (0, _react.useCallback)(event => {
|
156
|
-
if (disabled) {
|
157
|
-
return;
|
158
|
-
}
|
159
|
-
|
160
|
-
onSelection(date);
|
161
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
162
|
-
}, [disabled, onSelection, date, onAction]);
|
163
|
-
const todayStyles = (0, _react.useMemo)(() => today ? {
|
164
|
-
border: '2px solid',
|
165
|
-
padding: '4px 6px',
|
166
|
-
borderRadius: '16px',
|
167
|
-
fontWeight: 'bold'
|
168
|
-
} : {}, [today]);
|
169
|
-
return /*#__PURE__*/_react.default.createElement(DayComponent, {
|
170
|
-
role: "button",
|
171
|
-
blocked: blocked,
|
172
|
-
disabled: disabled,
|
173
|
-
selected: selected,
|
174
|
-
today: today,
|
175
|
-
onClick: clickHandler,
|
176
|
-
onMouseEnter: () => onDayFocus(date),
|
177
|
-
onFocus: () => onDayFocus(date),
|
178
|
-
onKeyPress: keyPressHandler
|
179
|
-
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
180
|
-
sx: todayStyles
|
181
|
-
}, date.getDate()));
|
182
|
-
};
|
183
|
-
|
184
|
-
exports.Day = Day;
|
185
|
-
Day.displayName = "Day";
|
186
|
-
const BlankDay = (0, _styledComponents.default)(DayBaseComponent).withConfig({
|
187
|
-
displayName: "Day__BlankDay",
|
188
|
-
componentId: "sc-1japneh-2"
|
189
|
-
})(["background-color:", ";"], (0, _constants.get)('colors.canvas.primary'));
|
190
|
-
exports.BlankDay = BlankDay;
|
@@ -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>;
|
package/lib/DatePicker/Month.js
DELETED
@@ -1,120 +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;justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
|
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
|
-
month,
|
54
|
-
year
|
55
|
-
}) => {
|
56
|
-
const {
|
57
|
-
configuration
|
58
|
-
} = (0, _useDatePicker.default)();
|
59
|
-
const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
|
60
|
-
const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
|
61
|
-
const weekdayHeaders = (0, _react.useMemo)(() => {
|
62
|
-
var _configuration$weekSt;
|
63
|
-
|
64
|
-
const now = new Date(year, month);
|
65
|
-
const weekOptions = {
|
66
|
-
weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
|
67
|
-
};
|
68
|
-
return (0, _dateFns.eachDayOfInterval)({
|
69
|
-
start: (0, _dateFns.startOfWeek)(now, weekOptions),
|
70
|
-
end: (0, _dateFns.endOfWeek)(now, weekOptions)
|
71
|
-
}).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
|
72
|
-
key: `weekday-${d}-header`
|
73
|
-
}, (0, _dateFns.format)(d, 'EEEEEE')));
|
74
|
-
}, [configuration.weekStartsOn, month, year]);
|
75
|
-
|
76
|
-
const dayAction = date => {
|
77
|
-
setSelectedDay(date);
|
78
|
-
};
|
79
|
-
|
80
|
-
const dayComponents = (0, _react.useMemo)(() => {
|
81
|
-
var _configuration$weekSt2, _configuration$weekSt3;
|
82
|
-
|
83
|
-
const components = [];
|
84
|
-
const firstDay = new Date(year, month, 1);
|
85
|
-
const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
|
86
|
-
|
87
|
-
for (let i = 0; i < preBlanks; i++) {
|
88
|
-
components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
|
89
|
-
key: `month-pre-blank-${i}`
|
90
|
-
}));
|
91
|
-
}
|
92
|
-
|
93
|
-
for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
|
94
|
-
const date = new Date(year, month, i);
|
95
|
-
components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
|
96
|
-
key: `day-component-${date.toString()}`,
|
97
|
-
date: date,
|
98
|
-
selected: selectedDay ? (0, _dateFns.isEqual)(date, selectedDay) : false,
|
99
|
-
onAction: dayAction
|
100
|
-
}));
|
101
|
-
}
|
102
|
-
|
103
|
-
const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
|
104
|
-
const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
|
105
|
-
|
106
|
-
for (let i = 6; i > postBlanks; i--) {
|
107
|
-
components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
|
108
|
-
key: `month-post-blank-${i}`
|
109
|
-
}));
|
110
|
-
}
|
111
|
-
|
112
|
-
return components;
|
113
|
-
}, [configuration.weekStartsOn, month, selectedDay, year]);
|
114
|
-
return /*#__PURE__*/_react.default.createElement(MonthComponent, {
|
115
|
-
role: "grid"
|
116
|
-
}, /*#__PURE__*/_react.default.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
|
117
|
-
};
|
118
|
-
|
119
|
-
exports.Month = Month;
|
120
|
-
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 {};
|