@commercetools-uikit/date-range-input 19.26.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.
Files changed (5) hide show
  1. package/dist/commercetools-uikit-date-range-input.cjs.dev.js +11 -25
  2. package/dist/commercetools-uikit-date-range-input.cjs.prod.js +11 -7
  3. package/dist/commercetools-uikit-date-range-input.esm.js +10 -24
  4. package/dist/declarations/src/date-range-input.d.ts +5 -0
  5. package/package.json +20 -21
package/dist/commercetools-uikit-date-range-input.cjs.dev.js CHANGED
@@ -16,12 +16,12 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
16
16
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
17
17
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
18
18
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
19
- var _pt = require('prop-types');
20
19
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
21
20
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
22
21
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
23
22
  var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
24
23
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
24
+ var _bindInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/bind');
25
25
  var react = require('react');
26
26
  var Downshift = require('downshift');
27
27
  var reactIntl = require('react-intl');
@@ -41,17 +41,17 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
41
41
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
42
42
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
43
43
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
44
- var _pt__default = /*#__PURE__*/_interopDefault(_pt);
45
44
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
46
45
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
47
46
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
48
47
  var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
49
48
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
49
+ var _bindInstanceProperty__default = /*#__PURE__*/_interopDefault(_bindInstanceProperty);
50
50
  var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
51
51
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
52
52
 
53
53
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
54
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
54
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
55
55
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
56
56
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
57
57
  const preventDownshiftDefault = event => {
@@ -163,6 +163,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
163
163
  return _createClass(DateRangeInput, [{
164
164
  key: "render",
165
165
  value: function render() {
166
+ const appearance = this.props.appearance || 'default';
166
167
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
167
168
  max: this.props.horizontalConstraint,
168
169
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -286,6 +287,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
286
287
  onBlur: this.handleBlur,
287
288
  children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
288
289
  inputRef: this.inputRef,
290
+ appearance: appearance,
289
291
  inputProps: getInputProps(_objectSpread({
290
292
  /* ARIA */
291
293
  'aria-invalid': this.props['aria-invalid'],
@@ -302,11 +304,12 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
302
304
  if (isOpen) setHighlightedIndex(null);
303
305
  },
304
306
  onKeyDown: event => {
307
+ var _context4, _context5;
305
308
  if (this.props.isReadOnly) {
306
309
  preventDownshiftDefault(event);
307
310
  return;
308
311
  }
309
- if (event.key === 'Enter' && inputValue?.trim() === '' &&
312
+ if (event.key === 'Enter' && ((_context4 = inputValue) == null ? void 0 : _bindInstanceProperty__default["default"](_context5 = Function.call).call(_context5, _trimInstanceProperty__default["default"](_context4), _context4))?.() === '' &&
310
313
  // do not clear value when user presses Enter to
311
314
  // select the end date (so only clear when there is no
312
315
  // startDate)
@@ -339,7 +342,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
339
342
  },
340
343
  // we only do this for readOnly because the input
341
344
  // doesn't ignore these events, unlike when its disabled
342
- onClick: this.props.isReadOnly ? undefined : openMenu
345
+ onClick: this.props.isReadOnly ? undefined : () => openMenu()
343
346
  }, utils.filterDataAttributes(this.props))),
344
347
  hasSelection: this.props.value.length === 2,
345
348
  isClearable: this.props.isClearable,
@@ -357,9 +360,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
357
360
  toggleButtonProps: getToggleButtonProps(),
358
361
  hasError: this.props.hasError,
359
362
  hasWarning: this.props.hasWarning
360
- }), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
363
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled && !this.props.isReadOnly) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
361
364
  hasError: this.props.hasError,
362
365
  hasWarning: this.props.hasWarning,
366
+ appearance: appearance,
363
367
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
364
368
  monthLabel: calendarUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
365
369
  yearLabel: calendarUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -432,28 +436,10 @@ DateRangeInput.defaultProps = {
432
436
  isClearable: true
433
437
  };
434
438
  DateRangeInput.isEmpty = range => range.length === 0;
435
- DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
436
- horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
437
- value: _pt__default["default"].arrayOf(_pt__default["default"].any).isRequired,
438
- 'aria-invalid': _pt__default["default"].bool,
439
- 'aria-errormessage': _pt__default["default"].string,
440
- onChange: _pt__default["default"].func,
441
- isClearable: _pt__default["default"].bool,
442
- onFocus: _pt__default["default"].func,
443
- onBlur: _pt__default["default"].func,
444
- id: _pt__default["default"].string,
445
- name: _pt__default["default"].string,
446
- placeholder: _pt__default["default"].string,
447
- isCondensed: _pt__default["default"].bool,
448
- isDisabled: _pt__default["default"].bool,
449
- isReadOnly: _pt__default["default"].bool,
450
- hasError: _pt__default["default"].bool,
451
- hasWarning: _pt__default["default"].bool
452
- } : {};
453
439
  var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
454
440
 
455
441
  // NOTE: This string will be replaced on build time with the package version.
456
- var version = "19.26.0";
442
+ var version = "20.1.0";
457
443
 
458
444
  exports["default"] = dateRangeInput;
459
445
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.cjs.prod.js CHANGED
@@ -16,12 +16,12 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
16
16
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
17
17
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
18
18
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
19
- require('prop-types');
20
19
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
21
20
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
22
21
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
23
22
  var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
24
23
  var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
24
+ var _bindInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/bind');
25
25
  var react = require('react');
26
26
  var Downshift = require('downshift');
27
27
  var reactIntl = require('react-intl');
@@ -46,11 +46,12 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
46
46
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
47
47
  var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
48
48
  var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
49
+ var _bindInstanceProperty__default = /*#__PURE__*/_interopDefault(_bindInstanceProperty);
49
50
  var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
50
51
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
51
52
 
52
53
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
53
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
54
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
54
55
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
55
56
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
56
57
  const preventDownshiftDefault = event => {
@@ -162,6 +163,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
162
163
  return _createClass(DateRangeInput, [{
163
164
  key: "render",
164
165
  value: function render() {
166
+ const appearance = this.props.appearance || 'default';
165
167
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
166
168
  max: this.props.horizontalConstraint,
167
169
  children: jsxRuntime.jsx(Downshift__default["default"], {
@@ -285,6 +287,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
285
287
  onBlur: this.handleBlur,
286
288
  children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
287
289
  inputRef: this.inputRef,
290
+ appearance: appearance,
288
291
  inputProps: getInputProps(_objectSpread({
289
292
  /* ARIA */
290
293
  'aria-invalid': this.props['aria-invalid'],
@@ -301,11 +304,12 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
301
304
  if (isOpen) setHighlightedIndex(null);
302
305
  },
303
306
  onKeyDown: event => {
307
+ var _context4, _context5;
304
308
  if (this.props.isReadOnly) {
305
309
  preventDownshiftDefault(event);
306
310
  return;
307
311
  }
308
- if (event.key === 'Enter' && inputValue?.trim() === '' &&
312
+ if (event.key === 'Enter' && ((_context4 = inputValue) == null ? void 0 : _bindInstanceProperty__default["default"](_context5 = Function.call).call(_context5, _trimInstanceProperty__default["default"](_context4), _context4))?.() === '' &&
309
313
  // do not clear value when user presses Enter to
310
314
  // select the end date (so only clear when there is no
311
315
  // startDate)
@@ -338,7 +342,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
338
342
  },
339
343
  // we only do this for readOnly because the input
340
344
  // doesn't ignore these events, unlike when its disabled
341
- onClick: this.props.isReadOnly ? undefined : openMenu
345
+ onClick: this.props.isReadOnly ? undefined : () => openMenu()
342
346
  }, utils.filterDataAttributes(this.props))),
343
347
  hasSelection: this.props.value.length === 2,
344
348
  isClearable: this.props.isClearable,
@@ -356,9 +360,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
356
360
  toggleButtonProps: getToggleButtonProps(),
357
361
  hasError: this.props.hasError,
358
362
  hasWarning: this.props.hasWarning
359
- }), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
363
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled && !this.props.isReadOnly) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
360
364
  hasError: this.props.hasError,
361
365
  hasWarning: this.props.hasWarning,
366
+ appearance: appearance,
362
367
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
363
368
  monthLabel: calendarUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
364
369
  yearLabel: calendarUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -431,11 +436,10 @@ DateRangeInput.defaultProps = {
431
436
  isClearable: true
432
437
  };
433
438
  DateRangeInput.isEmpty = range => range.length === 0;
434
- DateRangeInput.propTypes = {};
435
439
  var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
436
440
 
437
441
  // NOTE: This string will be replaced on build time with the package version.
438
- var version = "19.26.0";
442
+ var version = "20.1.0";
439
443
 
440
444
  exports["default"] = dateRangeInput;
441
445
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.esm.js CHANGED
@@ -12,12 +12,12 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
12
12
  import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
13
13
  import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
14
14
  import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
15
- import _pt from 'prop-types';
16
15
  import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
17
16
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
18
17
  import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
19
18
  import _sortInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/sort';
20
19
  import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
20
+ import _bindInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/bind';
21
21
  import { Component, createRef } from 'react';
22
22
  import Downshift from 'downshift';
23
23
  import { injectIntl } from 'react-intl';
@@ -28,7 +28,7 @@ import { getLocalizedDateTimeFormatPattern } from '@commercetools-uikit/calendar
28
28
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
29
29
 
30
30
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
31
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
31
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
32
32
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
33
33
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
34
34
  const preventDownshiftDefault = event => {
@@ -140,6 +140,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
140
140
  return _createClass(DateRangeInput, [{
141
141
  key: "render",
142
142
  value: function render() {
143
+ const appearance = this.props.appearance || 'default';
143
144
  return jsx(Constraints.Horizontal, {
144
145
  max: this.props.horizontalConstraint,
145
146
  children: jsx(Downshift, {
@@ -263,6 +264,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
263
264
  onBlur: this.handleBlur,
264
265
  children: [jsx(CalendarBody, {
265
266
  inputRef: this.inputRef,
267
+ appearance: appearance,
266
268
  inputProps: getInputProps(_objectSpread({
267
269
  /* ARIA */
268
270
  'aria-invalid': this.props['aria-invalid'],
@@ -279,11 +281,12 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
279
281
  if (isOpen) setHighlightedIndex(null);
280
282
  },
281
283
  onKeyDown: event => {
284
+ var _context4, _context5;
282
285
  if (this.props.isReadOnly) {
283
286
  preventDownshiftDefault(event);
284
287
  return;
285
288
  }
286
- if (event.key === 'Enter' && inputValue?.trim() === '' &&
289
+ if (event.key === 'Enter' && ((_context4 = inputValue) == null ? void 0 : _bindInstanceProperty(_context5 = Function.call).call(_context5, _trimInstanceProperty(_context4), _context4))?.() === '' &&
287
290
  // do not clear value when user presses Enter to
288
291
  // select the end date (so only clear when there is no
289
292
  // startDate)
@@ -316,7 +319,7 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
316
319
  },
317
320
  // we only do this for readOnly because the input
318
321
  // doesn't ignore these events, unlike when its disabled
319
- onClick: this.props.isReadOnly ? undefined : openMenu
322
+ onClick: this.props.isReadOnly ? undefined : () => openMenu()
320
323
  }, filterDataAttributes(this.props))),
321
324
  hasSelection: this.props.value.length === 2,
322
325
  isClearable: this.props.isClearable,
@@ -334,9 +337,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
334
337
  toggleButtonProps: getToggleButtonProps(),
335
338
  hasError: this.props.hasError,
336
339
  hasWarning: this.props.hasWarning
337
- }), isOpen && !this.props.isDisabled && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
340
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled && !this.props.isReadOnly) && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
338
341
  hasError: this.props.hasError,
339
342
  hasWarning: this.props.hasWarning,
343
+ appearance: appearance,
340
344
  children: [jsx(CalendarHeader, {
341
345
  monthLabel: getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
342
346
  yearLabel: getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -409,27 +413,9 @@ DateRangeInput.defaultProps = {
409
413
  isClearable: true
410
414
  };
411
415
  DateRangeInput.isEmpty = range => range.length === 0;
412
- DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
413
- horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
414
- value: _pt.arrayOf(_pt.any).isRequired,
415
- 'aria-invalid': _pt.bool,
416
- 'aria-errormessage': _pt.string,
417
- onChange: _pt.func,
418
- isClearable: _pt.bool,
419
- onFocus: _pt.func,
420
- onBlur: _pt.func,
421
- id: _pt.string,
422
- name: _pt.string,
423
- placeholder: _pt.string,
424
- isCondensed: _pt.bool,
425
- isDisabled: _pt.bool,
426
- isReadOnly: _pt.bool,
427
- hasError: _pt.bool,
428
- hasWarning: _pt.bool
429
- } : {};
430
416
  var dateRangeInput = injectIntl(DateRangeInput);
431
417
 
432
418
  // NOTE: This string will be replaced on build time with the package version.
433
- var version = "19.26.0";
419
+ var version = "20.1.0";
434
420
 
435
421
  export { dateRangeInput as default, version };
package/dist/declarations/src/date-range-input.d.ts CHANGED
@@ -72,6 +72,11 @@ export type TDateRangeInputProps = {
72
72
  * Indicates the input field has warning
73
73
  */
74
74
  hasWarning?: boolean;
75
+ /**
76
+ * Indicates the appearance of the input.
77
+ * Filter appearance removes borders and box shadows, and calendar is always open.
78
+ */
79
+ appearance?: 'default' | 'filter';
75
80
  } & WrappedComponentProps;
76
81
  declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateRangeInputProps>> & {
77
82
  WrappedComponent: import("react").ComponentType<TDateRangeInputProps>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-range-input",
3
3
  "description": "The `DateRangeInput` component allows the user to select a date range.",
4
- "version": "19.26.0",
4
+ "version": "20.1.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,34 +21,33 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "19.26.0",
25
- "@commercetools-uikit/calendar-time-utils": "19.26.0",
26
- "@commercetools-uikit/calendar-utils": "19.26.0",
27
- "@commercetools-uikit/constraints": "19.26.0",
28
- "@commercetools-uikit/design-system": "19.26.0",
29
- "@commercetools-uikit/hooks": "19.26.0",
30
- "@commercetools-uikit/icons": "19.26.0",
31
- "@commercetools-uikit/secondary-icon-button": "19.26.0",
32
- "@commercetools-uikit/select-utils": "19.26.0",
33
- "@commercetools-uikit/spacings-inline": "19.26.0",
34
- "@commercetools-uikit/text": "19.26.0",
35
- "@commercetools-uikit/tooltip": "19.26.0",
36
- "@commercetools-uikit/utils": "19.26.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": "6.1.12",
40
- "prop-types": "15.8.1",
41
- "react-is": "17.0.2",
39
+ "downshift": "9.0.9",
40
+ "react-is": "19.1.0",
42
41
  "warning": "4.0.3"
43
42
  },
44
43
  "devDependencies": {
45
44
  "moment": "2.30.1",
46
- "react": "17.0.2",
47
- "react-intl": "^6.3.2"
45
+ "react": "19.1.0",
46
+ "react-intl": "^7.1.4"
48
47
  },
49
48
  "peerDependencies": {
50
49
  "moment": "2.x",
51
- "react": "17.x",
52
- "react-intl": "6.x"
50
+ "react": "19.x",
51
+ "react-intl": "7.x"
53
52
  }
54
53
  }