@commercetools-uikit/date-time-input 20.0.0 → 20.2.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-time-input.cjs.dev.js +5 -2
  2. package/dist/commercetools-uikit-date-time-input.cjs.prod.js +5 -2
  3. package/dist/commercetools-uikit-date-time-input.esm.js +5 -2
  4. package/dist/declarations/src/date-time-input.d.ts +6 -1
  5. package/package.json +17 -17
package/dist/commercetools-uikit-date-time-input.cjs.dev.js CHANGED
@@ -157,6 +157,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
157
157
  if (!this.props.isReadOnly) {
158
158
  process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
159
159
  }
160
+ const appearance = this.props.appearance || 'default';
160
161
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
161
162
  max: this.props.horizontalConstraint,
162
163
  children: jsxRuntime.jsx(Downshift__default["default"]
@@ -246,6 +247,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
246
247
  onBlur: this.handleBlur,
247
248
  children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
248
249
  inputRef: this.inputRef,
250
+ appearance: appearance,
249
251
  inputProps: getInputProps(_objectSpread({
250
252
  /* ARIA */
251
253
  'aria-invalid': this.props['aria-invalid'],
@@ -342,10 +344,11 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
342
344
  }),
343
345
  hasError: this.props.hasError,
344
346
  hasWarning: this.props.hasWarning
345
- }), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
347
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
346
348
  hasFooter: true,
347
349
  hasError: this.props.hasError,
348
350
  hasWarning: this.props.hasWarning,
351
+ appearance: appearance,
349
352
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
350
353
  monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
351
354
  yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -405,7 +408,7 @@ DateTimeInput.displayName = 'DateTimeInput';
405
408
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
406
409
 
407
410
  // NOTE: This string will be replaced on build time with the package version.
408
- var version = "20.0.0";
411
+ var version = "20.2.0";
409
412
 
410
413
  exports["default"] = dateTimeInput;
411
414
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.cjs.prod.js CHANGED
@@ -155,6 +155,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
155
155
  key: "render",
156
156
  value: function render() {
157
157
  if (!this.props.isReadOnly) ;
158
+ const appearance = this.props.appearance || 'default';
158
159
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
159
160
  max: this.props.horizontalConstraint,
160
161
  children: jsxRuntime.jsx(Downshift__default["default"]
@@ -244,6 +245,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
244
245
  onBlur: this.handleBlur,
245
246
  children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
246
247
  inputRef: this.inputRef,
248
+ appearance: appearance,
247
249
  inputProps: getInputProps(_objectSpread({
248
250
  /* ARIA */
249
251
  'aria-invalid': this.props['aria-invalid'],
@@ -340,10 +342,11 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
340
342
  }),
341
343
  hasError: this.props.hasError,
342
344
  hasWarning: this.props.hasWarning
343
- }), isOpen && !this.props.isDisabled && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
345
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
344
346
  hasFooter: true,
345
347
  hasError: this.props.hasError,
346
348
  hasWarning: this.props.hasWarning,
349
+ appearance: appearance,
347
350
  children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
348
351
  monthLabel: calendarTimeUtils.getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
349
352
  yearLabel: calendarTimeUtils.getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -403,7 +406,7 @@ DateTimeInput.displayName = 'DateTimeInput';
403
406
  var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
404
407
 
405
408
  // NOTE: This string will be replaced on build time with the package version.
406
- var version = "20.0.0";
409
+ var version = "20.2.0";
407
410
 
408
411
  exports["default"] = dateTimeInput;
409
412
  exports.version = version;
package/dist/commercetools-uikit-date-time-input.esm.js CHANGED
@@ -136,6 +136,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
136
136
  if (!this.props.isReadOnly) {
137
137
  process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
138
138
  }
139
+ const appearance = this.props.appearance || 'default';
139
140
  return jsx(Constraints.Horizontal, {
140
141
  max: this.props.horizontalConstraint,
141
142
  children: jsx(Downshift
@@ -225,6 +226,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
225
226
  onBlur: this.handleBlur,
226
227
  children: [jsx(CalendarBody, {
227
228
  inputRef: this.inputRef,
229
+ appearance: appearance,
228
230
  inputProps: getInputProps(_objectSpread({
229
231
  /* ARIA */
230
232
  'aria-invalid': this.props['aria-invalid'],
@@ -321,10 +323,11 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
321
323
  }),
322
324
  hasError: this.props.hasError,
323
325
  hasWarning: this.props.hasWarning
324
- }), isOpen && !this.props.isDisabled && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
326
+ }), (isOpen && !this.props.isDisabled || appearance === 'filter' && !this.props.isDisabled) && jsxs(CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
325
327
  hasFooter: true,
326
328
  hasError: this.props.hasError,
327
329
  hasWarning: this.props.hasWarning,
330
+ appearance: appearance,
328
331
  children: [jsx(CalendarHeader, {
329
332
  monthLabel: getMonthCalendarLabel(this.state.calendarDate, this.props.intl.locale),
330
333
  yearLabel: getYearCalendarLabel(this.state.calendarDate, this.props.intl.locale),
@@ -384,6 +387,6 @@ DateTimeInput.displayName = 'DateTimeInput';
384
387
  var dateTimeInput = injectIntl(DateTimeInput);
385
388
 
386
389
  // NOTE: This string will be replaced on build time with the package version.
387
- var version = "20.0.0";
390
+ var version = "20.2.0";
388
391
 
389
392
  export { dateTimeInput as default, version };
package/dist/declarations/src/date-time-input.d.ts CHANGED
@@ -75,9 +75,14 @@ export type TDateTimeInputProps = {
75
75
  hasWarning?: boolean;
76
76
  /**
77
77
  * The time that will be used by default when a user selects a calendar day.
78
- * It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59)
78
+ * It must follow the "HH:mm" pattern (eg: 04:30, 13:25, 23:59)
79
79
  */
80
80
  defaultDaySelectionTime?: string;
81
+ /**
82
+ * Indicates the appearance of the input.
83
+ * Filter appearance removes borders and box shadows, and calendar is always open.
84
+ */
85
+ appearance?: 'default' | 'filter';
81
86
  } & WrappedComponentProps;
82
87
  declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateTimeInputProps>> & {
83
88
  WrappedComponent: import("react").ComponentType<TDateTimeInputProps>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/date-time-input",
3
3
  "description": "The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.",
4
- "version": "20.0.0",
4
+ "version": "20.2.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.2.0",
25
+ "@commercetools-uikit/calendar-time-utils": "20.2.0",
26
+ "@commercetools-uikit/calendar-utils": "20.2.0",
27
+ "@commercetools-uikit/constraints": "20.2.0",
28
+ "@commercetools-uikit/design-system": "20.2.0",
29
+ "@commercetools-uikit/hooks": "20.2.0",
30
+ "@commercetools-uikit/icons": "20.2.0",
31
+ "@commercetools-uikit/secondary-icon-button": "20.2.0",
32
+ "@commercetools-uikit/select-utils": "20.2.0",
33
+ "@commercetools-uikit/spacings-inline": "20.2.0",
34
+ "@commercetools-uikit/text": "20.2.0",
35
+ "@commercetools-uikit/tooltip": "20.2.0",
36
+ "@commercetools-uikit/utils": "20.2.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": {