@commercetools-uikit/date-range-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.
Files changed (5) hide show
  1. package/dist/commercetools-uikit-date-range-input.cjs.dev.js +5 -2
  2. package/dist/commercetools-uikit-date-range-input.cjs.prod.js +5 -2
  3. package/dist/commercetools-uikit-date-range-input.esm.js +5 -2
  4. package/dist/declarations/src/date-range-input.d.ts +5 -0
  5. package/package.json +17 -17
package/dist/commercetools-uikit-date-range-input.cjs.dev.js CHANGED
@@ -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'],
@@ -358,9 +360,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
358
360
  toggleButtonProps: getToggleButtonProps(),
359
361
  hasError: this.props.hasError,
360
362
  hasWarning: this.props.hasWarning
361
- }), 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()), {}, {
362
364
  hasError: this.props.hasError,
363
365
  hasWarning: this.props.hasWarning,
366
+ appearance: appearance,
364
367
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
365
368
  monthLabel: calendarUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
366
369
  yearLabel: calendarUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -436,7 +439,7 @@ DateRangeInput.isEmpty = range => range.length === 0;
436
439
  var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
437
440
 
438
441
  // NOTE: This string will be replaced on build time with the package version.
439
- var version = "20.0.0";
442
+ var version = "20.1.0";
440
443
 
441
444
  exports["default"] = dateRangeInput;
442
445
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.cjs.prod.js CHANGED
@@ -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'],
@@ -358,9 +360,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
358
360
  toggleButtonProps: getToggleButtonProps(),
359
361
  hasError: this.props.hasError,
360
362
  hasWarning: this.props.hasWarning
361
- }), 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()), {}, {
362
364
  hasError: this.props.hasError,
363
365
  hasWarning: this.props.hasWarning,
366
+ appearance: appearance,
364
367
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
365
368
  monthLabel: calendarUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
366
369
  yearLabel: calendarUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -436,7 +439,7 @@ DateRangeInput.isEmpty = range => range.length === 0;
436
439
  var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
437
440
 
438
441
  // NOTE: This string will be replaced on build time with the package version.
439
- var version = "20.0.0";
442
+ var version = "20.1.0";
440
443
 
441
444
  exports["default"] = dateRangeInput;
442
445
  exports.version = version;
package/dist/commercetools-uikit-date-range-input.esm.js CHANGED
@@ -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'],
@@ -335,9 +337,10 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
335
337
  toggleButtonProps: getToggleButtonProps(),
336
338
  hasError: this.props.hasError,
337
339
  hasWarning: this.props.hasWarning
338
- }), 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()), {}, {
339
341
  hasError: this.props.hasError,
340
342
  hasWarning: this.props.hasWarning,
343
+ appearance: appearance,
341
344
  children: [jsx(CalendarHeader, {
342
345
  monthLabel: getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
343
346
  yearLabel: getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -413,6 +416,6 @@ DateRangeInput.isEmpty = range => range.length === 0;
413
416
  var dateRangeInput = injectIntl(DateRangeInput);
414
417
 
415
418
  // NOTE: This string will be replaced on build time with the package version.
416
- var version = "20.0.0";
419
+ var version = "20.1.0";
417
420
 
418
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": "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": {