@primer/components 0.0.0-202192422618 → 0.0.0-20219256296
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -8
- package/dist/browser.esm.js +3 -3
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +3 -3
- package/dist/browser.umd.js.map +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib/Autocomplete/Autocomplete.d.ts +11 -13
- package/lib/Autocomplete/AutocompleteInput.d.ts +11 -13
- package/lib/Button/Button.d.ts +11 -11
- package/lib/Button/ButtonBase.d.ts +1 -1
- package/lib/Button/ButtonClose.d.ts +29 -29
- package/lib/Button/ButtonDanger.d.ts +11 -11
- package/lib/Button/ButtonInvisible.d.ts +11 -11
- package/lib/Button/ButtonOutline.d.ts +11 -11
- package/lib/Button/ButtonPrimary.d.ts +11 -11
- package/lib/Button/ButtonStyles.js +1 -1
- package/lib/CircleBadge.d.ts +2 -2
- package/lib/CircleOcticon.d.ts +33 -33
- package/lib/Dialog.d.ts +35 -35
- package/lib/Dropdown.d.ts +110 -110
- package/lib/DropdownMenu/DropdownButton.d.ts +30 -30
- package/lib/FilterList.d.ts +26 -26
- package/lib/Label.d.ts +1 -1
- package/lib/NewButton/button.d.ts +18 -0
- package/lib/NewButton/button.js +275 -0
- package/lib/NewButton/index.d.ts +4 -0
- package/lib/NewButton/index.js +21 -0
- package/lib/NewButton/visual.d.ts +6 -0
- package/lib/NewButton/visual.js +28 -0
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +151 -153
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +11 -13
- package/lib/Timeline.d.ts +33 -33
- 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/_TextInputWrapper.d.ts +1 -1
- package/lib/constants.js +3 -1
- package/lib/theme-preval.js +2 -2
- package/lib/utils/testing.d.ts +1 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib-esm/Autocomplete/Autocomplete.d.ts +11 -13
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +11 -13
- package/lib-esm/Button/Button.d.ts +11 -11
- package/lib-esm/Button/ButtonBase.d.ts +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +29 -29
- package/lib-esm/Button/ButtonDanger.d.ts +11 -11
- package/lib-esm/Button/ButtonInvisible.d.ts +11 -11
- package/lib-esm/Button/ButtonOutline.d.ts +11 -11
- package/lib-esm/Button/ButtonPrimary.d.ts +11 -11
- package/lib-esm/Button/ButtonStyles.js +1 -1
- package/lib-esm/CircleBadge.d.ts +2 -2
- package/lib-esm/CircleOcticon.d.ts +33 -33
- package/lib-esm/Dialog.d.ts +35 -35
- package/lib-esm/Dropdown.d.ts +110 -110
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +30 -30
- package/lib-esm/FilterList.d.ts +26 -26
- package/lib-esm/Label.d.ts +1 -1
- package/lib-esm/NewButton/button.d.ts +18 -0
- package/lib-esm/NewButton/button.js +257 -0
- package/lib-esm/NewButton/index.d.ts +4 -0
- package/lib-esm/NewButton/index.js +3 -0
- package/lib-esm/NewButton/visual.d.ts +6 -0
- package/lib-esm/NewButton/visual.js +17 -0
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +151 -153
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +11 -13
- package/lib-esm/Timeline.d.ts +33 -33
- 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/_TextInputWrapper.d.ts +1 -1
- package/lib-esm/constants.js +3 -1
- package/lib-esm/theme-preval.js +2 -2
- package/lib-esm/utils/testing.d.ts +1 -1
- package/package.json +8 -9
- package/lib/DatePicker/DatePicker.d.ts +0 -48
- package/lib/DatePicker/DatePicker.js +0 -84
- package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib/DatePicker/DatePickerAnchor.js +0 -88
- package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib/DatePicker/DatePickerOverlay.js +0 -39
- package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib/DatePicker/DatePickerPanel.js +0 -90
- package/lib/DatePicker/Day.d.ts +0 -14
- package/lib/DatePicker/Day.js +0 -174
- package/lib/DatePicker/Month.d.ts +0 -9
- package/lib/DatePicker/Month.js +0 -97
- package/lib/DatePicker/index.d.ts +0 -2
- package/lib/DatePicker/index.js +0 -13
- package/lib/DatePicker/useDatePicker.d.ts +0 -73
- package/lib/DatePicker/useDatePicker.js +0 -357
- package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
- package/lib-esm/DatePicker/DatePicker.js +0 -67
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib-esm/DatePicker/DatePickerAnchor.js +0 -63
- package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib-esm/DatePicker/DatePickerOverlay.js +0 -24
- package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib-esm/DatePicker/DatePickerPanel.js +0 -64
- package/lib-esm/DatePicker/Day.d.ts +0 -14
- package/lib-esm/DatePicker/Day.js +0 -151
- package/lib-esm/DatePicker/Month.d.ts +0 -9
- package/lib-esm/DatePicker/Month.js +0 -74
- 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 -73
- package/lib-esm/DatePicker/useDatePicker.js +0 -329
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/components",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-20219256296",
|
4
4
|
"description": "Primer react components",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"module": "lib-esm/index.js",
|
@@ -43,16 +43,20 @@
|
|
43
43
|
"author": "GitHub, Inc.",
|
44
44
|
"license": "MIT",
|
45
45
|
"dependencies": {
|
46
|
-
"@primer/octicons-react": "^
|
47
|
-
"@primer/primitives": "
|
46
|
+
"@primer/octicons-react": "^13.0.0",
|
47
|
+
"@primer/primitives": "5.1.0",
|
48
48
|
"@radix-ui/react-polymorphic": "0.0.14",
|
49
49
|
"@react-aria/ssr": "3.1.0",
|
50
50
|
"@styled-system/css": "5.1.5",
|
51
51
|
"@styled-system/props": "5.1.5",
|
52
52
|
"@styled-system/theme-get": "5.1.2",
|
53
|
+
"@types/history": "4.7.8",
|
54
|
+
"@types/styled-components": "5.1.11",
|
55
|
+
"@types/styled-system": "5.1.12",
|
56
|
+
"@types/styled-system__css": "5.0.16",
|
57
|
+
"@types/styled-system__theme-get": "5.0.1",
|
53
58
|
"classnames": "2.3.1",
|
54
59
|
"color2k": "1.2.4",
|
55
|
-
"date-fns": "2.25.0",
|
56
60
|
"deepmerge": "4.2.2",
|
57
61
|
"focus-visible": "5.2.0",
|
58
62
|
"styled-system": "5.1.5"
|
@@ -81,11 +85,6 @@
|
|
81
85
|
"@testing-library/react": "11.2.7",
|
82
86
|
"@testing-library/react-hooks": "7.0.2",
|
83
87
|
"@testing-library/user-event": "13.1.9",
|
84
|
-
"@types/history": "4.7.9",
|
85
|
-
"@types/styled-components": "5.1.15",
|
86
|
-
"@types/styled-system": "5.1.13",
|
87
|
-
"@types/styled-system__css": "5.0.16",
|
88
|
-
"@types/styled-system__theme-get": "5.0.1",
|
89
88
|
"@types/chroma-js": "2.1.3",
|
90
89
|
"@types/enzyme": "3.10.9",
|
91
90
|
"@types/jest": "26.0.23",
|
@@ -1,48 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { OverlayProps } from '../Overlay';
|
3
|
-
import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
|
4
|
-
import { FocusZoneHookSettings } from '../hooks/useFocusZone';
|
5
|
-
import { DatePickerConfiguration, Selection } from './useDatePicker';
|
6
|
-
declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
|
7
|
-
declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
|
8
|
-
export interface DatePickerProps extends DatePickerConfiguration {
|
9
|
-
/**
|
10
|
-
* An override to the internal ref that will be spread on to the renderAnchor
|
11
|
-
*/
|
12
|
-
anchorRef?: React.RefObject<HTMLElement>;
|
13
|
-
/**
|
14
|
-
* Settings to apply to the Focus Zone on the internal `Overlay` component.
|
15
|
-
*/
|
16
|
-
focusTrapSettings?: Partial<FocusTrapHookSettings>;
|
17
|
-
/**
|
18
|
-
* Settings to apply to the Focus Zone on the internal `Overlay` component.
|
19
|
-
*/
|
20
|
-
focusZoneSettings?: Partial<FocusZoneHookSettings>;
|
21
|
-
initialValue?: 'today' | Date | string | null;
|
22
|
-
iconOnly?: boolean;
|
23
|
-
placeholder?: string;
|
24
|
-
/**
|
25
|
-
* Determines whether the overlay portion of the component should be shown or not
|
26
|
-
*/
|
27
|
-
open?: boolean;
|
28
|
-
/**
|
29
|
-
* A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
|
30
|
-
*/
|
31
|
-
onOpen?: (gesture: OpenGesture) => unknown;
|
32
|
-
/**
|
33
|
-
* A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
|
34
|
-
*/
|
35
|
-
onClose?: (gesture: CloseGesture) => unknown;
|
36
|
-
/**
|
37
|
-
* Props to be spread on the internal `Overlay` component.
|
38
|
-
*/
|
39
|
-
overlayProps?: Partial<OverlayProps>;
|
40
|
-
/**
|
41
|
-
* A custom function component used to render the anchor element.
|
42
|
-
* Will receive the selected text as `children` prop when an item is activated.
|
43
|
-
*/
|
44
|
-
renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
|
45
|
-
value?: Selection;
|
46
|
-
}
|
47
|
-
export declare const DatePicker: React.FC<DatePickerProps>;
|
48
|
-
export {};
|
@@ -1,84 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DatePicker = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
9
|
-
|
10
|
-
var _DatePickerAnchor = require("./DatePickerAnchor");
|
11
|
-
|
12
|
-
var _useDatePicker = require("./useDatePicker");
|
13
|
-
|
14
|
-
var _DatePickerOverlay = require("./DatePickerOverlay");
|
15
|
-
|
16
|
-
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); }
|
17
|
-
|
18
|
-
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; }
|
19
|
-
|
20
|
-
const DatePicker = ({
|
21
|
-
anchorVariant,
|
22
|
-
anchorRef: externalAnchorRef,
|
23
|
-
confirmation,
|
24
|
-
focusTrapSettings,
|
25
|
-
focusZoneSettings,
|
26
|
-
onOpen: onOpenExternal,
|
27
|
-
onClose: onCloseExternal,
|
28
|
-
open,
|
29
|
-
overlayProps,
|
30
|
-
renderAnchor,
|
31
|
-
selection,
|
32
|
-
value,
|
33
|
-
view
|
34
|
-
}) => {
|
35
|
-
const buttonRef = (0, _react.useRef)(null);
|
36
|
-
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
37
|
-
const datePickerConfiguration = {
|
38
|
-
anchorVariant,
|
39
|
-
confirmation,
|
40
|
-
selection,
|
41
|
-
view
|
42
|
-
};
|
43
|
-
|
44
|
-
const onOpen = gesture => {
|
45
|
-
setIsOpen(true);
|
46
|
-
onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
|
47
|
-
};
|
48
|
-
|
49
|
-
const onClose = gesture => {
|
50
|
-
setIsOpen(false);
|
51
|
-
onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
|
52
|
-
};
|
53
|
-
|
54
|
-
const toggleIsOpen = () => {
|
55
|
-
if (isOpen) {
|
56
|
-
setIsOpen(false);
|
57
|
-
onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
|
58
|
-
} else {
|
59
|
-
setIsOpen(true);
|
60
|
-
onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
|
61
|
-
}
|
62
|
-
};
|
63
|
-
|
64
|
-
return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
|
65
|
-
configuration: datePickerConfiguration,
|
66
|
-
value: value,
|
67
|
-
closePicker: () => setIsOpen(false)
|
68
|
-
}, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {
|
69
|
-
ref: buttonRef,
|
70
|
-
onAction: toggleIsOpen
|
71
|
-
}), /*#__PURE__*/_react.default.createElement(_DatePickerOverlay.DatePickerOverlay, {
|
72
|
-
anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
|
73
|
-
renderAnchor: renderAnchor,
|
74
|
-
open: open !== null && open !== void 0 ? open : isOpen,
|
75
|
-
onOpen: onOpen,
|
76
|
-
onClose: onClose,
|
77
|
-
overlayProps: overlayProps,
|
78
|
-
focusTrapSettings: focusTrapSettings,
|
79
|
-
focusZoneSettings: focusZoneSettings
|
80
|
-
}));
|
81
|
-
};
|
82
|
-
|
83
|
-
exports.DatePicker = DatePicker;
|
84
|
-
DatePicker.displayName = "DatePicker";
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
export interface DatePickerAnchorProps {
|
3
|
-
onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
|
4
|
-
}
|
5
|
-
export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLButtonElement>>;
|
@@ -1,88 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DatePickerAnchor = void 0;
|
7
|
-
|
8
|
-
var _octiconsReact = require("@primer/octicons-react");
|
9
|
-
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
11
|
-
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
13
|
-
|
14
|
-
var _Button = _interopRequireDefault(require("../Button"));
|
15
|
-
|
16
|
-
var _Text = _interopRequireDefault(require("../Text"));
|
17
|
-
|
18
|
-
var _constants = require("../constants");
|
19
|
-
|
20
|
-
var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
|
21
|
-
|
22
|
-
var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
|
23
|
-
|
24
|
-
var _TextInput = _interopRequireDefault(require("../TextInput"));
|
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
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
31
|
-
|
32
|
-
const DatePickerAnchorButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
33
|
-
displayName: "DatePickerAnchor__DatePickerAnchorButton",
|
34
|
-
componentId: "sc-8gpb9d-0"
|
35
|
-
})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", "{margin-left:", ";}"], _Text.default, (0, _constants.get)('space.2'));
|
36
|
-
|
37
|
-
const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
|
38
|
-
onAction
|
39
|
-
}, ref) => {
|
40
|
-
const {
|
41
|
-
configuration: {
|
42
|
-
anchorVariant
|
43
|
-
},
|
44
|
-
disabled,
|
45
|
-
formattedDate
|
46
|
-
} = (0, _useDatePicker.default)();
|
47
|
-
const keyPressHandler = (0, _react.useCallback)(event => {
|
48
|
-
if (disabled) {
|
49
|
-
return;
|
50
|
-
}
|
51
|
-
|
52
|
-
if ([' ', 'Enter'].includes(event.key)) {
|
53
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
54
|
-
}
|
55
|
-
}, [disabled, onAction]);
|
56
|
-
const clickHandler = (0, _react.useCallback)(event => {
|
57
|
-
if (disabled) {
|
58
|
-
return;
|
59
|
-
}
|
60
|
-
|
61
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
62
|
-
}, [disabled, onAction]);
|
63
|
-
|
64
|
-
if (anchorVariant === 'input') {
|
65
|
-
return /*#__PURE__*/_react.default.createElement(_TextInput.default, {
|
66
|
-
value: formattedDate
|
67
|
-
});
|
68
|
-
}
|
69
|
-
|
70
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
|
71
|
-
ref: ref,
|
72
|
-
onClick: clickHandler,
|
73
|
-
onKeyPress: keyPressHandler
|
74
|
-
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
75
|
-
icon: _octiconsReact.CalendarIcon,
|
76
|
-
color: "fg.muted",
|
77
|
-
sx: {
|
78
|
-
my: '2px'
|
79
|
-
}
|
80
|
-
}), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
|
81
|
-
sx: {
|
82
|
-
overflow: 'hidden',
|
83
|
-
textOverflow: 'ellipsis'
|
84
|
-
}
|
85
|
-
}, formattedDate));
|
86
|
-
});
|
87
|
-
|
88
|
-
exports.DatePickerAnchor = DatePickerAnchor;
|
@@ -1,39 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DatePickerOverlay = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(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 _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); }
|
19
|
-
|
20
|
-
const DatePickerOverlay = ({
|
21
|
-
onClose,
|
22
|
-
...rest
|
23
|
-
}) => {
|
24
|
-
const {
|
25
|
-
revertValue
|
26
|
-
} = (0, _useDatePicker.default)();
|
27
|
-
|
28
|
-
const onOverlayClose = gesture => {
|
29
|
-
revertValue();
|
30
|
-
onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
|
31
|
-
};
|
32
|
-
|
33
|
-
return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({
|
34
|
-
onClose: onOverlayClose
|
35
|
-
}, rest), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
|
36
|
-
};
|
37
|
-
|
38
|
-
exports.DatePickerOverlay = DatePickerOverlay;
|
39
|
-
DatePickerOverlay.displayName = "DatePickerOverlay";
|
@@ -1,90 +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 = _interopRequireDefault(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 _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); }
|
29
|
-
|
30
|
-
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; }
|
31
|
-
|
32
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
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
|
-
} = (0, _useDatePicker.default)();
|
57
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, null, /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, null, /*#__PURE__*/_react.default.createElement(ArrowButton, {
|
58
|
-
variant: "small",
|
59
|
-
side: "left"
|
60
|
-
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
61
|
-
icon: _octiconsReact.ChevronLeftIcon,
|
62
|
-
color: "fg.muted"
|
63
|
-
})), /*#__PURE__*/_react.default.createElement(_Month.Month, {
|
64
|
-
month: new Date().getMonth(),
|
65
|
-
year: new Date().getFullYear()
|
66
|
-
}), configuration.view === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {
|
67
|
-
month: (0, _dateFns.addMonths)(new Date(), 1).getMonth(),
|
68
|
-
year: (0, _dateFns.addMonths)(new Date(), 1).getFullYear()
|
69
|
-
}), /*#__PURE__*/_react.default.createElement(ArrowButton, {
|
70
|
-
variant: "small",
|
71
|
-
side: "right"
|
72
|
-
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
73
|
-
icon: _octiconsReact.ChevronRightIcon,
|
74
|
-
color: "fg.muted"
|
75
|
-
}))), /*#__PURE__*/_react.default.createElement(DatePickerPanelFooter, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
76
|
-
variant: "small",
|
77
|
-
sx: {
|
78
|
-
mr: 1
|
79
|
-
},
|
80
|
-
onClick: () => revertValue()
|
81
|
-
}, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
82
|
-
variant: "small"
|
83
|
-
}, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
|
84
|
-
variant: "small",
|
85
|
-
onClick: () => saveValue()
|
86
|
-
}, "Apply")));
|
87
|
-
};
|
88
|
-
|
89
|
-
exports.DatePickerPanel = DatePickerPanel;
|
90
|
-
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 interface DayProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
|
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
|
-
}
|
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,174 +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
|
-
},
|
47
|
-
start: {
|
48
|
-
background: (0, _constants.get)('colors.accent.emphasis'),
|
49
|
-
borderRadius: '4px 0 0 4px',
|
50
|
-
color: (0, _constants.get)('colors.fg.onEmphasis')
|
51
|
-
},
|
52
|
-
middle: {
|
53
|
-
background: (0, _constants.get)('colors.accent.subtle'),
|
54
|
-
borderRadius: '0',
|
55
|
-
color: (0, _constants.get)('colors.fg.default')
|
56
|
-
},
|
57
|
-
end: {
|
58
|
-
background: (0, _constants.get)('colors.accent.emphasis'),
|
59
|
-
borderRadius: '0 4px 4px 0',
|
60
|
-
color: (0, _constants.get)('colors.fg.onEmphasis')
|
61
|
-
}
|
62
|
-
},
|
63
|
-
default: {
|
64
|
-
normal: {
|
65
|
-
background: (0, _constants.get)('colors.canvas.primary'),
|
66
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
67
|
-
color: (0, _constants.get)('colors.fg.default')
|
68
|
-
},
|
69
|
-
hover: {
|
70
|
-
background: (0, _constants.get)('colors.neutral.muted'),
|
71
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
72
|
-
color: (0, _constants.get)('colors.fg.default')
|
73
|
-
},
|
74
|
-
pressed: {
|
75
|
-
background: (0, _constants.get)('colors.neutral.emphasis'),
|
76
|
-
borderRadius: (0, _constants.get)('radii.2'),
|
77
|
-
color: (0, _constants.get)('colors.fg.onEmphasis')
|
78
|
-
}
|
79
|
-
}
|
80
|
-
};
|
81
|
-
|
82
|
-
const getStateStyles = (props, prop, state) => {
|
83
|
-
const {
|
84
|
-
blocked,
|
85
|
-
disabled,
|
86
|
-
selected
|
87
|
-
} = props;
|
88
|
-
|
89
|
-
if (blocked) {
|
90
|
-
return states.blocked[prop];
|
91
|
-
} else if (disabled) {
|
92
|
-
return states.disabled[prop];
|
93
|
-
} else if (selected) {
|
94
|
-
switch (selected) {
|
95
|
-
case 'start':
|
96
|
-
return states.selected.start[prop];
|
97
|
-
|
98
|
-
case 'middle':
|
99
|
-
return states.selected.middle[prop];
|
100
|
-
|
101
|
-
case 'end':
|
102
|
-
return states.selected.end[prop];
|
103
|
-
|
104
|
-
default:
|
105
|
-
return states.selected.default[prop];
|
106
|
-
}
|
107
|
-
} else {
|
108
|
-
return states.default[state][prop];
|
109
|
-
}
|
110
|
-
};
|
111
|
-
|
112
|
-
const DayComponent = (0, _styledComponents.default)(DayBaseComponent).attrs(props => ({
|
113
|
-
background: getStateStyles(props, 'background', 'normal'),
|
114
|
-
borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
|
115
|
-
textColor: getStateStyles(props, 'color', 'normal'),
|
116
|
-
backgroundHover: getStateStyles(props, 'background', 'hover'),
|
117
|
-
textColorHover: getStateStyles(props, 'color', 'hover'),
|
118
|
-
backgroundPressed: getStateStyles(props, 'background', 'pressed'),
|
119
|
-
textColorPressed: getStateStyles(props, 'color', 'pressed')
|
120
|
-
})).withConfig({
|
121
|
-
displayName: "Day__DayComponent",
|
122
|
-
componentId: "sc-1japneh-1"
|
123
|
-
})(["background-color:", ";border-radius:", ";transition:0.2s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.2s 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);
|
124
|
-
|
125
|
-
const Day = ({
|
126
|
-
date,
|
127
|
-
onAction
|
128
|
-
}) => {
|
129
|
-
const {
|
130
|
-
onDayFocus,
|
131
|
-
onDayBlur,
|
132
|
-
onSelection,
|
133
|
-
disabled,
|
134
|
-
blocked,
|
135
|
-
selected
|
136
|
-
} = (0, _useDatePicker.default)(date);
|
137
|
-
const keyPressHandler = (0, _react.useCallback)(event => {
|
138
|
-
if (disabled) {
|
139
|
-
return;
|
140
|
-
}
|
141
|
-
|
142
|
-
if ([' ', 'Enter'].includes(event.key)) {
|
143
|
-
onSelection(date);
|
144
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
145
|
-
}
|
146
|
-
}, [disabled, onSelection, onAction, date]);
|
147
|
-
const clickHandler = (0, _react.useCallback)(event => {
|
148
|
-
if (disabled) {
|
149
|
-
return;
|
150
|
-
}
|
151
|
-
|
152
|
-
onSelection(date);
|
153
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
154
|
-
}, [disabled, onSelection, date, onAction]);
|
155
|
-
return /*#__PURE__*/_react.default.createElement(DayComponent, {
|
156
|
-
role: "button",
|
157
|
-
blocked: blocked,
|
158
|
-
disabled: disabled,
|
159
|
-
selected: selected,
|
160
|
-
onClick: clickHandler,
|
161
|
-
onMouseEnter: () => onDayFocus(date),
|
162
|
-
onFocus: () => onDayFocus(date),
|
163
|
-
onBlur: () => onDayBlur(date),
|
164
|
-
onKeyPress: keyPressHandler
|
165
|
-
}, /*#__PURE__*/_react.default.createElement(_Text.default, null, date.getDate()));
|
166
|
-
};
|
167
|
-
|
168
|
-
exports.Day = Day;
|
169
|
-
Day.displayName = "Day";
|
170
|
-
const BlankDay = (0, _styledComponents.default)(DayBaseComponent).withConfig({
|
171
|
-
displayName: "Day__BlankDay",
|
172
|
-
componentId: "sc-1japneh-2"
|
173
|
-
})(["background-color:", ";"], (0, _constants.get)('colors.canvas.primary'));
|
174
|
-
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>;
|