@manuscripts/style-guide 3.5.29 → 3.5.31
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/dist/cjs/components/DateInput.js +118 -0
- package/dist/cjs/components/DatePicker.js +0 -202
- package/dist/cjs/components/MultiValueInput.js +2 -2
- package/dist/cjs/components/SelectField.js +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/es/components/DateInput.js +82 -0
- package/dist/es/components/DatePicker.js +1 -196
- package/dist/es/components/MultiValueInput.js +2 -2
- package/dist/es/components/SelectField.js +1 -0
- package/dist/es/index.js +1 -1
- package/dist/types/components/DateInput.d.ts +24 -0
- package/dist/types/components/DatePicker.d.ts +0 -28
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -3
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.DateTimeInput = exports.DateInput = void 0;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const styled_components_1 = __importStar(require("styled-components"));
|
|
39
|
+
const icons_1 = require("./icons");
|
|
40
|
+
const inputStyles = (0, styled_components_1.css) `
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
width: 100%;
|
|
43
|
+
min-height: ${(props) => (props.variant === 'small' ? '32px' : '40px')};
|
|
44
|
+
padding: 0 36px 0 12px;
|
|
45
|
+
border: 1px solid
|
|
46
|
+
${(props) => props.error
|
|
47
|
+
? props.theme.colors.border.error
|
|
48
|
+
: props.theme.colors.border.field.default};
|
|
49
|
+
border-radius: 3px;
|
|
50
|
+
background-color: #fff;
|
|
51
|
+
color: ${(props) => props.theme.colors.text.primary};
|
|
52
|
+
font: ${(props) => props.theme.font.weight.normal}
|
|
53
|
+
${(props) => props.theme.font.size.medium} / 1
|
|
54
|
+
${(props) => props.theme.font.family.sans};
|
|
55
|
+
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
56
|
+
outline: none;
|
|
57
|
+
|
|
58
|
+
&::-webkit-calendar-picker-indicator {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
position: absolute;
|
|
61
|
+
right: 0;
|
|
62
|
+
width: 36px;
|
|
63
|
+
height: 100%;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&::placeholder {
|
|
68
|
+
color: ${(props) => props.theme.colors.text.greyMuted || '#6E6E6E'};
|
|
69
|
+
opacity: 1;
|
|
70
|
+
font-style: italic;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:hover:not(:disabled) {
|
|
74
|
+
background-color: #f2fbfc;
|
|
75
|
+
border-color: ${(props) => props.theme.colors.text.greyMuted};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:focus:not(:disabled) {
|
|
79
|
+
border: 2px solid
|
|
80
|
+
${(props) => props.error
|
|
81
|
+
? props.theme.colors.border.error
|
|
82
|
+
: props.theme.colors.brand.default};
|
|
83
|
+
background-color: #f2fbfc;
|
|
84
|
+
padding: 0 35px 0 11px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&:disabled {
|
|
88
|
+
background-color: #f5f5f5;
|
|
89
|
+
border-color: #e4e4e4;
|
|
90
|
+
color: #b3b3b3;
|
|
91
|
+
cursor: not-allowed;
|
|
92
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
const StyledDateInput = styled_components_1.default.input `
|
|
95
|
+
${inputStyles}
|
|
96
|
+
`;
|
|
97
|
+
const Wrapper = styled_components_1.default.div `
|
|
98
|
+
position: relative;
|
|
99
|
+
display: block;
|
|
100
|
+
width: 100%;
|
|
101
|
+
`;
|
|
102
|
+
const IconWrapper = styled_components_1.default.div `
|
|
103
|
+
position: absolute;
|
|
104
|
+
right: ${(props) => props.theme.grid.unit * 3}px;
|
|
105
|
+
top: 50%;
|
|
106
|
+
transform: translateY(-50%);
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
pointer-events: none;
|
|
110
|
+
color: ${(props) => props.theme.colors.border.secondary};
|
|
111
|
+
`;
|
|
112
|
+
const makeComponent = (type, displayName) => {
|
|
113
|
+
const Component = (props) => ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(StyledDateInput, { ...props, type: type }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
|
|
114
|
+
Component.displayName = displayName;
|
|
115
|
+
return Component;
|
|
116
|
+
};
|
|
117
|
+
exports.DateInput = makeComponent('date', 'DateInput');
|
|
118
|
+
exports.DateTimeInput = makeComponent('datetime-local', 'DateTimeInput');
|
|
@@ -1,203 +1 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DatePicker = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
require("react-datepicker/dist/react-datepicker.css");
|
|
9
|
-
const react_1 = require("react");
|
|
10
|
-
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
11
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
const icons_1 = require("./icons");
|
|
13
|
-
const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
|
|
14
|
-
const [selectedDate, setSelectedDate] = (0, react_1.useState)(date || null);
|
|
15
|
-
(0, react_1.useEffect)(() => {
|
|
16
|
-
setSelectedDate(date ?? null);
|
|
17
|
-
}, [date]);
|
|
18
|
-
const handleChange = (date) => {
|
|
19
|
-
setSelectedDate(date);
|
|
20
|
-
handleDateChange(date);
|
|
21
|
-
};
|
|
22
|
-
const format = showTimeSelect
|
|
23
|
-
? 'd MMM yyyy, EEEE h:mm aa'
|
|
24
|
-
: 'd MMM yyyy, EEEE';
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(Calendar, { children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
|
|
26
|
-
};
|
|
27
|
-
exports.DatePicker = DatePicker;
|
|
28
|
-
const Calendar = styled_components_1.default.div `
|
|
29
|
-
width: 100%;
|
|
30
|
-
position: relative;
|
|
31
|
-
display: block;
|
|
32
|
-
|
|
33
|
-
.react-datepicker {
|
|
34
|
-
display: flex;
|
|
35
|
-
padding: ${(props) => props.theme.grid.unit * 5}px;
|
|
36
|
-
font-size: ${(props) => props.theme.font.size.normal};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.react-datepicker-wrapper,
|
|
40
|
-
.react-datepicker__input-container {
|
|
41
|
-
display: block;
|
|
42
|
-
width: 100% !important;
|
|
43
|
-
|
|
44
|
-
input::placeholder {
|
|
45
|
-
color: ${(props) => props.theme.colors.text.greyMuted ||
|
|
46
|
-
props.theme.colors.text.secondary ||
|
|
47
|
-
'#6E6E6E'};
|
|
48
|
-
opacity: 1;
|
|
49
|
-
font-family: 'PT Sans', sans-serif;
|
|
50
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
51
|
-
font-style: italic;
|
|
52
|
-
font-weight: ${(props) => props.theme.font.weight.normal};
|
|
53
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
input:focus::placeholder {
|
|
57
|
-
color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
|
|
58
|
-
opacity: 1 !important;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.react-datepicker__header {
|
|
63
|
-
background-color: unset;
|
|
64
|
-
border: unset;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.react-datepicker__day.react-datepicker__day--disabled {
|
|
68
|
-
color: #ccc;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.react-datepicker__day-name,
|
|
72
|
-
.react-datepicker__day,
|
|
73
|
-
.react-datepicker__time-name {
|
|
74
|
-
color: #000000cc;
|
|
75
|
-
padding: ${(props) => props.theme.grid.unit}px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.react-datepicker__day-names .react-datepicker__day-name {
|
|
79
|
-
color: #d4d4d4;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.react-datepicker__time {
|
|
83
|
-
.react-datepicker__time-box {
|
|
84
|
-
width: 95px;
|
|
85
|
-
|
|
86
|
-
.react-datepicker__time-list {
|
|
87
|
-
overflow-y: unset;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
h2.react-datepicker__current-month {
|
|
93
|
-
padding-bottom: ${(props) => props.theme.grid.unit * 5}px;
|
|
94
|
-
font-weight: 400;
|
|
95
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.react-datepicker[aria-label='Choose Date and Time'] {
|
|
99
|
-
.react-datepicker__navigation--next {
|
|
100
|
-
right: 150px;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.react-datepicker__navigation--next {
|
|
105
|
-
right: 65px;
|
|
106
|
-
top: 24px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.react-datepicker__navigation--previous {
|
|
110
|
-
left: 65px;
|
|
111
|
-
top: 24px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.react-datepicker__day--selected {
|
|
115
|
-
border: 1px solid rgb(188, 231, 246);
|
|
116
|
-
background-color: rgb(242, 251, 252);
|
|
117
|
-
border-radius: 50%;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.react-datepicker__day:not(.-selected):hover {
|
|
121
|
-
border-radius: 50%;
|
|
122
|
-
background-color: rgb(242, 251, 252);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.react-datepicker-popper[data-placement^='bottom']
|
|
126
|
-
.react-datepicker__triangle {
|
|
127
|
-
fill: white;
|
|
128
|
-
color: white;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.react-datepicker__day--outside-month {
|
|
132
|
-
visibility: hidden;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.react-datepicker__day--keyboard-selected {
|
|
136
|
-
background-color: unset;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.calendar-input {
|
|
140
|
-
width: 100%;
|
|
141
|
-
box-sizing: border-box;
|
|
142
|
-
min-height: 40px;
|
|
143
|
-
border-radius: 3px;
|
|
144
|
-
font: ${(props) => props.theme.font.weight.normal}
|
|
145
|
-
${(props) => props.theme.font.size.medium} / 1
|
|
146
|
-
${(props) => props.theme.font.family.sans};
|
|
147
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
148
|
-
padding: 0 ${(props) => props.theme.grid.unit * 10}px 0
|
|
149
|
-
${(props) => props.theme.grid.unit * 4}px;
|
|
150
|
-
text-align: start;
|
|
151
|
-
border: 1px solid ${(props) => props.theme.colors.border.field.default};
|
|
152
|
-
color: ${(props) => props.theme.colors.text.primary};
|
|
153
|
-
outline: 0;
|
|
154
|
-
background-color: #fff;
|
|
155
|
-
|
|
156
|
-
&::placeholder {
|
|
157
|
-
color: ${(props) => props.theme.colors.text.greyMuted ||
|
|
158
|
-
props.theme.colors.text.secondary ||
|
|
159
|
-
'#6E6E6E'};
|
|
160
|
-
opacity: 1;
|
|
161
|
-
font-family: 'PT Sans', sans-serif;
|
|
162
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
163
|
-
font-style: italic;
|
|
164
|
-
font-weight: ${(props) => props.theme.font.weight.normal};
|
|
165
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&:focus {
|
|
169
|
-
border: 2px solid ${(props) => props.theme.colors.brand.default};
|
|
170
|
-
background-color: #f2fbfc;
|
|
171
|
-
padding: 0 ${(props) => props.theme.grid.unit * 10 - 1}px 0
|
|
172
|
-
${(props) => props.theme.grid.unit * 4 - 1}px;
|
|
173
|
-
outline: none;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
&:hover {
|
|
177
|
-
border-color: ${(props) => props.theme.colors.text.greyMuted};
|
|
178
|
-
background-color: #f2fbfc;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
&:disabled {
|
|
182
|
-
cursor: not-allowed;
|
|
183
|
-
background-color: ${(props) => props.theme.colors.background.disabled};
|
|
184
|
-
border-color: ${(props) => props.theme.colors.border.field.default};
|
|
185
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
186
|
-
|
|
187
|
-
&:hover {
|
|
188
|
-
border-color: ${(props) => props.theme.colors.border.field.default};
|
|
189
|
-
background-color: ${(props) => props.theme.colors.background.disabled};
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
`;
|
|
194
|
-
const IconWrapper = styled_components_1.default.div `
|
|
195
|
-
position: absolute;
|
|
196
|
-
right: ${(props) => props.theme.grid.unit * 3}px;
|
|
197
|
-
top: 50%;
|
|
198
|
-
transform: translateY(-50%);
|
|
199
|
-
display: flex;
|
|
200
|
-
align-items: center;
|
|
201
|
-
pointer-events: none;
|
|
202
|
-
color: ${(props) => props.theme.colors.border.secondary};
|
|
203
|
-
`;
|
|
@@ -15,7 +15,7 @@ const Container = styled_components_1.default.div `
|
|
|
15
15
|
flex-wrap: wrap;
|
|
16
16
|
gap: 4px;
|
|
17
17
|
align-items: center;
|
|
18
|
-
padding:
|
|
18
|
+
padding: 0;
|
|
19
19
|
background: ${(props) => props.theme.colors.background.primary};
|
|
20
20
|
|
|
21
21
|
&:hover Input {
|
|
@@ -36,6 +36,7 @@ const Chip = styled_components_1.default.span `
|
|
|
36
36
|
padding: ${(props) => props.theme.grid.unit}px;
|
|
37
37
|
font-size: ${(props) => props.theme.font.size.small};
|
|
38
38
|
line-height: ${(props) => props.theme.font.lineHeight.normal};
|
|
39
|
+
margin-left: 10px;
|
|
39
40
|
|
|
40
41
|
& + Input {
|
|
41
42
|
padding-left: 0;
|
|
@@ -70,7 +71,6 @@ const Input = styled_components_1.default.input `
|
|
|
70
71
|
border: none;
|
|
71
72
|
flex: 1;
|
|
72
73
|
min-width: 6em;
|
|
73
|
-
padding: 10px 16px;
|
|
74
74
|
|
|
75
75
|
appearance: none;
|
|
76
76
|
-moz-appearance: textfield;
|
package/dist/cjs/index.js
CHANGED
|
@@ -88,7 +88,7 @@ __exportStar(require("./components/Text"), exports);
|
|
|
88
88
|
__exportStar(require("./components/RelativeDate"), exports);
|
|
89
89
|
__exportStar(require("./components/Menus"), exports);
|
|
90
90
|
__exportStar(require("./components/Drawer"), exports);
|
|
91
|
-
__exportStar(require("./components/
|
|
91
|
+
__exportStar(require("./components/DateInput"), exports);
|
|
92
92
|
__exportStar(require("./components/SelectField"), exports);
|
|
93
93
|
__exportStar(require("./components/SelectedItemsBox"), exports);
|
|
94
94
|
__exportStar(require("./components/ExpandableSection"), exports);
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import { CalendarIcon } from './icons';
|
|
4
|
+
const inputStyles = css `
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
min-height: ${(props) => (props.variant === 'small' ? '32px' : '40px')};
|
|
8
|
+
padding: 0 36px 0 12px;
|
|
9
|
+
border: 1px solid
|
|
10
|
+
${(props) => props.error
|
|
11
|
+
? props.theme.colors.border.error
|
|
12
|
+
: props.theme.colors.border.field.default};
|
|
13
|
+
border-radius: 3px;
|
|
14
|
+
background-color: #fff;
|
|
15
|
+
color: ${(props) => props.theme.colors.text.primary};
|
|
16
|
+
font: ${(props) => props.theme.font.weight.normal}
|
|
17
|
+
${(props) => props.theme.font.size.medium} / 1
|
|
18
|
+
${(props) => props.theme.font.family.sans};
|
|
19
|
+
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
20
|
+
outline: none;
|
|
21
|
+
|
|
22
|
+
&::-webkit-calendar-picker-indicator {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
position: absolute;
|
|
25
|
+
right: 0;
|
|
26
|
+
width: 36px;
|
|
27
|
+
height: 100%;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&::placeholder {
|
|
32
|
+
color: ${(props) => props.theme.colors.text.greyMuted || '#6E6E6E'};
|
|
33
|
+
opacity: 1;
|
|
34
|
+
font-style: italic;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover:not(:disabled) {
|
|
38
|
+
background-color: #f2fbfc;
|
|
39
|
+
border-color: ${(props) => props.theme.colors.text.greyMuted};
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:focus:not(:disabled) {
|
|
43
|
+
border: 2px solid
|
|
44
|
+
${(props) => props.error
|
|
45
|
+
? props.theme.colors.border.error
|
|
46
|
+
: props.theme.colors.brand.default};
|
|
47
|
+
background-color: #f2fbfc;
|
|
48
|
+
padding: 0 35px 0 11px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:disabled {
|
|
52
|
+
background-color: #f5f5f5;
|
|
53
|
+
border-color: #e4e4e4;
|
|
54
|
+
color: #b3b3b3;
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
const StyledDateInput = styled.input `
|
|
59
|
+
${inputStyles}
|
|
60
|
+
`;
|
|
61
|
+
const Wrapper = styled.div `
|
|
62
|
+
position: relative;
|
|
63
|
+
display: block;
|
|
64
|
+
width: 100%;
|
|
65
|
+
`;
|
|
66
|
+
const IconWrapper = styled.div `
|
|
67
|
+
position: absolute;
|
|
68
|
+
right: ${(props) => props.theme.grid.unit * 3}px;
|
|
69
|
+
top: 50%;
|
|
70
|
+
transform: translateY(-50%);
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
pointer-events: none;
|
|
74
|
+
color: ${(props) => props.theme.colors.border.secondary};
|
|
75
|
+
`;
|
|
76
|
+
const makeComponent = (type, displayName) => {
|
|
77
|
+
const Component = (props) => (_jsxs(Wrapper, { children: [_jsx(StyledDateInput, { ...props, type: type }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
|
|
78
|
+
Component.displayName = displayName;
|
|
79
|
+
return Component;
|
|
80
|
+
};
|
|
81
|
+
export const DateInput = makeComponent('date', 'DateInput');
|
|
82
|
+
export const DateTimeInput = makeComponent('datetime-local', 'DateTimeInput');
|
|
@@ -1,196 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import 'react-datepicker/dist/react-datepicker.css';
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
import ReactDatePicker from 'react-datepicker';
|
|
5
|
-
import styled from 'styled-components';
|
|
6
|
-
import { CalendarIcon } from './icons';
|
|
7
|
-
export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
|
|
8
|
-
const [selectedDate, setSelectedDate] = useState(date || null);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
setSelectedDate(date ?? null);
|
|
11
|
-
}, [date]);
|
|
12
|
-
const handleChange = (date) => {
|
|
13
|
-
setSelectedDate(date);
|
|
14
|
-
handleDateChange(date);
|
|
15
|
-
};
|
|
16
|
-
const format = showTimeSelect
|
|
17
|
-
? 'd MMM yyyy, EEEE h:mm aa'
|
|
18
|
-
: 'd MMM yyyy, EEEE';
|
|
19
|
-
return (_jsxs(Calendar, { children: [_jsx(ReactDatePicker, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
|
|
20
|
-
};
|
|
21
|
-
const Calendar = styled.div `
|
|
22
|
-
width: 100%;
|
|
23
|
-
position: relative;
|
|
24
|
-
display: block;
|
|
25
|
-
|
|
26
|
-
.react-datepicker {
|
|
27
|
-
display: flex;
|
|
28
|
-
padding: ${(props) => props.theme.grid.unit * 5}px;
|
|
29
|
-
font-size: ${(props) => props.theme.font.size.normal};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.react-datepicker-wrapper,
|
|
33
|
-
.react-datepicker__input-container {
|
|
34
|
-
display: block;
|
|
35
|
-
width: 100% !important;
|
|
36
|
-
|
|
37
|
-
input::placeholder {
|
|
38
|
-
color: ${(props) => props.theme.colors.text.greyMuted ||
|
|
39
|
-
props.theme.colors.text.secondary ||
|
|
40
|
-
'#6E6E6E'};
|
|
41
|
-
opacity: 1;
|
|
42
|
-
font-family: 'PT Sans', sans-serif;
|
|
43
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
44
|
-
font-style: italic;
|
|
45
|
-
font-weight: ${(props) => props.theme.font.weight.normal};
|
|
46
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
input:focus::placeholder {
|
|
50
|
-
color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
|
|
51
|
-
opacity: 1 !important;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.react-datepicker__header {
|
|
56
|
-
background-color: unset;
|
|
57
|
-
border: unset;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.react-datepicker__day.react-datepicker__day--disabled {
|
|
61
|
-
color: #ccc;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.react-datepicker__day-name,
|
|
65
|
-
.react-datepicker__day,
|
|
66
|
-
.react-datepicker__time-name {
|
|
67
|
-
color: #000000cc;
|
|
68
|
-
padding: ${(props) => props.theme.grid.unit}px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.react-datepicker__day-names .react-datepicker__day-name {
|
|
72
|
-
color: #d4d4d4;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.react-datepicker__time {
|
|
76
|
-
.react-datepicker__time-box {
|
|
77
|
-
width: 95px;
|
|
78
|
-
|
|
79
|
-
.react-datepicker__time-list {
|
|
80
|
-
overflow-y: unset;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
h2.react-datepicker__current-month {
|
|
86
|
-
padding-bottom: ${(props) => props.theme.grid.unit * 5}px;
|
|
87
|
-
font-weight: 400;
|
|
88
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.react-datepicker[aria-label='Choose Date and Time'] {
|
|
92
|
-
.react-datepicker__navigation--next {
|
|
93
|
-
right: 150px;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.react-datepicker__navigation--next {
|
|
98
|
-
right: 65px;
|
|
99
|
-
top: 24px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.react-datepicker__navigation--previous {
|
|
103
|
-
left: 65px;
|
|
104
|
-
top: 24px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.react-datepicker__day--selected {
|
|
108
|
-
border: 1px solid rgb(188, 231, 246);
|
|
109
|
-
background-color: rgb(242, 251, 252);
|
|
110
|
-
border-radius: 50%;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.react-datepicker__day:not(.-selected):hover {
|
|
114
|
-
border-radius: 50%;
|
|
115
|
-
background-color: rgb(242, 251, 252);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.react-datepicker-popper[data-placement^='bottom']
|
|
119
|
-
.react-datepicker__triangle {
|
|
120
|
-
fill: white;
|
|
121
|
-
color: white;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.react-datepicker__day--outside-month {
|
|
125
|
-
visibility: hidden;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.react-datepicker__day--keyboard-selected {
|
|
129
|
-
background-color: unset;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.calendar-input {
|
|
133
|
-
width: 100%;
|
|
134
|
-
box-sizing: border-box;
|
|
135
|
-
min-height: 40px;
|
|
136
|
-
border-radius: 3px;
|
|
137
|
-
font: ${(props) => props.theme.font.weight.normal}
|
|
138
|
-
${(props) => props.theme.font.size.medium} / 1
|
|
139
|
-
${(props) => props.theme.font.family.sans};
|
|
140
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
141
|
-
padding: 0 ${(props) => props.theme.grid.unit * 10}px 0
|
|
142
|
-
${(props) => props.theme.grid.unit * 4}px;
|
|
143
|
-
text-align: start;
|
|
144
|
-
border: 1px solid ${(props) => props.theme.colors.border.field.default};
|
|
145
|
-
color: ${(props) => props.theme.colors.text.primary};
|
|
146
|
-
outline: 0;
|
|
147
|
-
background-color: #fff;
|
|
148
|
-
|
|
149
|
-
&::placeholder {
|
|
150
|
-
color: ${(props) => props.theme.colors.text.greyMuted ||
|
|
151
|
-
props.theme.colors.text.secondary ||
|
|
152
|
-
'#6E6E6E'};
|
|
153
|
-
opacity: 1;
|
|
154
|
-
font-family: 'PT Sans', sans-serif;
|
|
155
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
156
|
-
font-style: italic;
|
|
157
|
-
font-weight: ${(props) => props.theme.font.weight.normal};
|
|
158
|
-
line-height: ${(props) => props.theme.font.lineHeight.large};
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
&:focus {
|
|
162
|
-
border: 2px solid ${(props) => props.theme.colors.brand.default};
|
|
163
|
-
background-color: #f2fbfc;
|
|
164
|
-
padding: 0 ${(props) => props.theme.grid.unit * 10 - 1}px 0
|
|
165
|
-
${(props) => props.theme.grid.unit * 4 - 1}px;
|
|
166
|
-
outline: none;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
&:hover {
|
|
170
|
-
border-color: ${(props) => props.theme.colors.text.greyMuted};
|
|
171
|
-
background-color: #f2fbfc;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
&:disabled {
|
|
175
|
-
cursor: not-allowed;
|
|
176
|
-
background-color: ${(props) => props.theme.colors.background.disabled};
|
|
177
|
-
border-color: ${(props) => props.theme.colors.border.field.default};
|
|
178
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
179
|
-
|
|
180
|
-
&:hover {
|
|
181
|
-
border-color: ${(props) => props.theme.colors.border.field.default};
|
|
182
|
-
background-color: ${(props) => props.theme.colors.background.disabled};
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
`;
|
|
187
|
-
const IconWrapper = styled.div `
|
|
188
|
-
position: absolute;
|
|
189
|
-
right: ${(props) => props.theme.grid.unit * 3}px;
|
|
190
|
-
top: 50%;
|
|
191
|
-
transform: translateY(-50%);
|
|
192
|
-
display: flex;
|
|
193
|
-
align-items: center;
|
|
194
|
-
pointer-events: none;
|
|
195
|
-
color: ${(props) => props.theme.colors.border.secondary};
|
|
196
|
-
`;
|
|
1
|
+
"use strict";
|
|
@@ -9,7 +9,7 @@ const Container = styled.div `
|
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
gap: 4px;
|
|
11
11
|
align-items: center;
|
|
12
|
-
padding:
|
|
12
|
+
padding: 0;
|
|
13
13
|
background: ${(props) => props.theme.colors.background.primary};
|
|
14
14
|
|
|
15
15
|
&:hover Input {
|
|
@@ -30,6 +30,7 @@ const Chip = styled.span `
|
|
|
30
30
|
padding: ${(props) => props.theme.grid.unit}px;
|
|
31
31
|
font-size: ${(props) => props.theme.font.size.small};
|
|
32
32
|
line-height: ${(props) => props.theme.font.lineHeight.normal};
|
|
33
|
+
margin-left: 10px;
|
|
33
34
|
|
|
34
35
|
& + Input {
|
|
35
36
|
padding-left: 0;
|
|
@@ -64,7 +65,6 @@ const Input = styled.input `
|
|
|
64
65
|
border: none;
|
|
65
66
|
flex: 1;
|
|
66
67
|
min-width: 6em;
|
|
67
|
-
padding: 10px 16px;
|
|
68
68
|
|
|
69
69
|
appearance: none;
|
|
70
70
|
-moz-appearance: textfield;
|
package/dist/es/index.js
CHANGED
|
@@ -47,7 +47,7 @@ export * from './components/Text';
|
|
|
47
47
|
export * from './components/RelativeDate';
|
|
48
48
|
export * from './components/Menus';
|
|
49
49
|
export * from './components/Drawer';
|
|
50
|
-
export * from './components/
|
|
50
|
+
export * from './components/DateInput';
|
|
51
51
|
export * from './components/SelectField';
|
|
52
52
|
export * from './components/SelectedItemsBox';
|
|
53
53
|
export * from './components/ExpandableSection';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* © 2026 Atypon Systems LLC
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
import React from 'react';
|
|
17
|
+
export interface BaseDateInputProps {
|
|
18
|
+
error?: boolean | string;
|
|
19
|
+
variant?: 'small' | 'large';
|
|
20
|
+
}
|
|
21
|
+
export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>, BaseDateInputProps {
|
|
22
|
+
}
|
|
23
|
+
export declare const DateInput: React.FC<DateInputProps>;
|
|
24
|
+
export declare const DateTimeInput: React.FC<DateInputProps>;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2026 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import 'react-datepicker/dist/react-datepicker.css';
|
|
17
|
-
import React from 'react';
|
|
18
|
-
export interface DatePickerProps {
|
|
19
|
-
id?: string;
|
|
20
|
-
date?: Date;
|
|
21
|
-
originalDate?: Date;
|
|
22
|
-
handleDateChange: (date: Date | null) => void;
|
|
23
|
-
placeholder?: string;
|
|
24
|
-
showTimeSelect?: boolean;
|
|
25
|
-
required?: boolean;
|
|
26
|
-
disabled?: boolean;
|
|
27
|
-
}
|
|
28
|
-
export declare const DatePicker: React.FC<DatePickerProps>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -48,7 +48,7 @@ export * from './components/Text';
|
|
|
48
48
|
export * from './components/RelativeDate';
|
|
49
49
|
export * from './components/Menus';
|
|
50
50
|
export * from './components/Drawer';
|
|
51
|
-
export * from './components/
|
|
51
|
+
export * from './components/DateInput';
|
|
52
52
|
export * from './components/SelectField';
|
|
53
53
|
export * from './components/SelectedItemsBox';
|
|
54
54
|
export * from './components/ExpandableSection';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manuscripts/style-guide",
|
|
3
3
|
"description": "Shared components for Manuscripts applications",
|
|
4
|
-
"version": "3.5.
|
|
4
|
+
"version": "3.5.31",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"test": "vitest run",
|
|
32
32
|
"typecheck": "tsc --noEmit",
|
|
33
33
|
"version": "pnpm build",
|
|
34
|
+
"unlink-all": "git checkout -- pnpm-workspace.yaml pnpm-lock.yaml && rm -rf node_modules && pnpm install",
|
|
34
35
|
"prepare": "husky install"
|
|
35
36
|
},
|
|
36
37
|
"dependencies": {
|
|
@@ -45,7 +46,6 @@
|
|
|
45
46
|
"prosemirror-state": "1.4.3",
|
|
46
47
|
"prosemirror-view": "1.41.0",
|
|
47
48
|
"react": "19.2.0",
|
|
48
|
-
"react-datepicker": "^7.6.0",
|
|
49
49
|
"react-dnd": "16.0.1",
|
|
50
50
|
"react-dnd-html5-backend": "16.0.1",
|
|
51
51
|
"react-dom": "19.2.0",
|
|
@@ -75,7 +75,6 @@
|
|
|
75
75
|
"@types/lodash": "4.17.16",
|
|
76
76
|
"@types/node": "^20.19.25",
|
|
77
77
|
"@types/react": "19.2.3",
|
|
78
|
-
"@types/react-datepicker": "^7.0.0",
|
|
79
78
|
"@types/react-dom": "19.2.3",
|
|
80
79
|
"@types/react-router-dom": "5.3.3",
|
|
81
80
|
"@types/styled-components": "5.1.34",
|