@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.0.0";
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.0.0";
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.0.0";
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.0.0",
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.0.0",
25
- "@commercetools-uikit/calendar-time-utils": "20.0.0",
26
- "@commercetools-uikit/calendar-utils": "20.0.0",
27
- "@commercetools-uikit/constraints": "20.0.0",
28
- "@commercetools-uikit/design-system": "20.0.0",
29
- "@commercetools-uikit/hooks": "20.0.0",
30
- "@commercetools-uikit/icons": "20.0.0",
31
- "@commercetools-uikit/secondary-icon-button": "20.0.0",
32
- "@commercetools-uikit/select-utils": "20.0.0",
33
- "@commercetools-uikit/spacings-inline": "20.0.0",
34
- "@commercetools-uikit/text": "20.0.0",
35
- "@commercetools-uikit/tooltip": "20.0.0",
36
- "@commercetools-uikit/utils": "20.0.0",
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.8",
40
- "react-is": "19.0.0",
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.0.0",
45
+ "react": "19.1.0",
46
46
  "react-intl": "^7.1.4"
47
47
  },
48
48
  "peerDependencies": {