@commercetools-uikit/date-input 20.0.0 → 20.1.0
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.
|
@@ -62,6 +62,7 @@ const DateInput = props => {
|
|
|
62
62
|
highlightedIndex = _useState6[0],
|
|
63
63
|
setHighlightedIndex = _useState6[1];
|
|
64
64
|
const inputRef = react.useRef(null);
|
|
65
|
+
const appearance = props.appearance || 'default';
|
|
65
66
|
if (!props.isReadOnly) {
|
|
66
67
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
|
|
67
68
|
}
|
|
@@ -173,6 +174,7 @@ const DateInput = props => {
|
|
|
173
174
|
onBlur: handleBlur,
|
|
174
175
|
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
175
176
|
inputRef: inputRef,
|
|
177
|
+
appearance: appearance,
|
|
176
178
|
inputProps: getInputProps(_objectSpread({
|
|
177
179
|
/* ARIA */
|
|
178
180
|
'aria-invalid': props['aria-invalid'],
|
|
@@ -247,9 +249,10 @@ const DateInput = props => {
|
|
|
247
249
|
toggleButtonProps: getToggleButtonProps(),
|
|
248
250
|
hasError: props.hasError,
|
|
249
251
|
hasWarning: props.hasWarning
|
|
250
|
-
}), isOpen && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
252
|
+
}), (isOpen && !props.isDisabled && !props.isReadOnly || appearance === 'filter' && !props.isDisabled && !props.isReadOnly) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
251
253
|
hasError: props.hasError,
|
|
252
254
|
hasWarning: props.hasWarning,
|
|
255
|
+
appearance: appearance,
|
|
253
256
|
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
254
257
|
monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
|
|
255
258
|
yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
|
|
@@ -290,7 +293,7 @@ DateInput.isEmpty = value => value === '';
|
|
|
290
293
|
var DateInput$1 = DateInput;
|
|
291
294
|
|
|
292
295
|
// NOTE: This string will be replaced on build time with the package version.
|
|
293
|
-
var version = "20.
|
|
296
|
+
var version = "20.1.0";
|
|
294
297
|
|
|
295
298
|
exports["default"] = DateInput$1;
|
|
296
299
|
exports.version = version;
|
|
@@ -62,6 +62,7 @@ const DateInput = props => {
|
|
|
62
62
|
highlightedIndex = _useState6[0],
|
|
63
63
|
setHighlightedIndex = _useState6[1];
|
|
64
64
|
const inputRef = react.useRef(null);
|
|
65
|
+
const appearance = props.appearance || 'default';
|
|
65
66
|
if (!props.isReadOnly) ;
|
|
66
67
|
const onChange = props.onChange;
|
|
67
68
|
const emit = react.useCallback(value => onChange?.({
|
|
@@ -171,6 +172,7 @@ const DateInput = props => {
|
|
|
171
172
|
onBlur: handleBlur,
|
|
172
173
|
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
173
174
|
inputRef: inputRef,
|
|
175
|
+
appearance: appearance,
|
|
174
176
|
inputProps: getInputProps(_objectSpread({
|
|
175
177
|
/* ARIA */
|
|
176
178
|
'aria-invalid': props['aria-invalid'],
|
|
@@ -245,9 +247,10 @@ const DateInput = props => {
|
|
|
245
247
|
toggleButtonProps: getToggleButtonProps(),
|
|
246
248
|
hasError: props.hasError,
|
|
247
249
|
hasWarning: props.hasWarning
|
|
248
|
-
}), isOpen && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
250
|
+
}), (isOpen && !props.isDisabled && !props.isReadOnly || appearance === 'filter' && !props.isDisabled && !props.isReadOnly) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
249
251
|
hasError: props.hasError,
|
|
250
252
|
hasWarning: props.hasWarning,
|
|
253
|
+
appearance: appearance,
|
|
251
254
|
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
252
255
|
monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
|
|
253
256
|
yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
|
|
@@ -288,7 +291,7 @@ DateInput.isEmpty = value => value === '';
|
|
|
288
291
|
var DateInput$1 = DateInput;
|
|
289
292
|
|
|
290
293
|
// NOTE: This string will be replaced on build time with the package version.
|
|
291
|
-
var version = "20.
|
|
294
|
+
var version = "20.1.0";
|
|
292
295
|
|
|
293
296
|
exports["default"] = DateInput$1;
|
|
294
297
|
exports.version = version;
|
|
@@ -41,6 +41,7 @@ const DateInput = props => {
|
|
|
41
41
|
highlightedIndex = _useState6[0],
|
|
42
42
|
setHighlightedIndex = _useState6[1];
|
|
43
43
|
const inputRef = useRef(null);
|
|
44
|
+
const appearance = props.appearance || 'default';
|
|
44
45
|
if (!props.isReadOnly) {
|
|
45
46
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
|
|
46
47
|
}
|
|
@@ -152,6 +153,7 @@ const DateInput = props => {
|
|
|
152
153
|
onBlur: handleBlur,
|
|
153
154
|
children: [jsx(CalendarBody, {
|
|
154
155
|
inputRef: inputRef,
|
|
156
|
+
appearance: appearance,
|
|
155
157
|
inputProps: getInputProps(_objectSpread({
|
|
156
158
|
/* ARIA */
|
|
157
159
|
'aria-invalid': props['aria-invalid'],
|
|
@@ -226,9 +228,10 @@ const DateInput = props => {
|
|
|
226
228
|
toggleButtonProps: getToggleButtonProps(),
|
|
227
229
|
hasError: props.hasError,
|
|
228
230
|
hasWarning: props.hasWarning
|
|
229
|
-
}), isOpen && !props.isDisabled && !props.isReadOnly && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
231
|
+
}), (isOpen && !props.isDisabled && !props.isReadOnly || appearance === 'filter' && !props.isDisabled && !props.isReadOnly) && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
230
232
|
hasError: props.hasError,
|
|
231
233
|
hasWarning: props.hasWarning,
|
|
234
|
+
appearance: appearance,
|
|
232
235
|
children: [jsx(CalendarHeader, {
|
|
233
236
|
monthLabel: getMonthCalendarLabel(calendarDate, intl.locale),
|
|
234
237
|
yearLabel: getYearCalendarLabel(calendarDate, intl.locale),
|
|
@@ -269,6 +272,6 @@ DateInput.isEmpty = value => value === '';
|
|
|
269
272
|
var DateInput$1 = DateInput;
|
|
270
273
|
|
|
271
274
|
// NOTE: This string will be replaced on build time with the package version.
|
|
272
|
-
var version = "20.
|
|
275
|
+
var version = "20.1.0";
|
|
273
276
|
|
|
274
277
|
export { DateInput$1 as default, version };
|
|
@@ -75,6 +75,11 @@ export type TDateInput = {
|
|
|
75
75
|
* A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
|
|
76
76
|
*/
|
|
77
77
|
maxValue?: string;
|
|
78
|
+
/**
|
|
79
|
+
* Indicates the appearance of the input.
|
|
80
|
+
* Filter appearance removes borders and box shadows, and calendar is always open.
|
|
81
|
+
*/
|
|
82
|
+
appearance?: 'default' | 'filter';
|
|
78
83
|
};
|
|
79
84
|
declare const DateInput: {
|
|
80
85
|
(props: TDateInput): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-input",
|
|
3
3
|
"description": "The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.",
|
|
4
|
-
"version": "20.
|
|
4
|
+
"version": "20.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,28 +21,28 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "20.
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "20.
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "20.
|
|
27
|
-
"@commercetools-uikit/constraints": "20.
|
|
28
|
-
"@commercetools-uikit/design-system": "20.
|
|
29
|
-
"@commercetools-uikit/hooks": "20.
|
|
30
|
-
"@commercetools-uikit/icons": "20.
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "20.
|
|
32
|
-
"@commercetools-uikit/select-utils": "20.
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "20.
|
|
34
|
-
"@commercetools-uikit/text": "20.
|
|
35
|
-
"@commercetools-uikit/tooltip": "20.
|
|
36
|
-
"@commercetools-uikit/utils": "20.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "20.1.0",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "20.1.0",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "20.1.0",
|
|
27
|
+
"@commercetools-uikit/constraints": "20.1.0",
|
|
28
|
+
"@commercetools-uikit/design-system": "20.1.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "20.1.0",
|
|
30
|
+
"@commercetools-uikit/icons": "20.1.0",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "20.1.0",
|
|
32
|
+
"@commercetools-uikit/select-utils": "20.1.0",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "20.1.0",
|
|
34
|
+
"@commercetools-uikit/text": "20.1.0",
|
|
35
|
+
"@commercetools-uikit/tooltip": "20.1.0",
|
|
36
|
+
"@commercetools-uikit/utils": "20.1.0",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
|
-
"downshift": "9.0.
|
|
40
|
-
"react-is": "19.
|
|
39
|
+
"downshift": "9.0.9",
|
|
40
|
+
"react-is": "19.1.0",
|
|
41
41
|
"warning": "4.0.3"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"moment": "2.30.1",
|
|
45
|
-
"react": "19.
|
|
45
|
+
"react": "19.1.0",
|
|
46
46
|
"react-intl": "^7.1.4"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|