colibri-ui 0.8.41 → 0.8.43

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/Calendar/components/Month/Month.js +21 -23
  2. package/Calendar/index.js +6 -0
  3. package/esm/Calendar/components/Month/Month.js +20 -22
  4. package/esm/Calendar/index.js +6 -0
  5. package/package.json +13 -10
package/Calendar/components/Month/Month.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
3
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var React = require('react');
5
5
  var classNames = require('classnames/bind');
6
6
  var leadingZeros = require('../../../libs/numbers/leadingZeros.js');
@@ -29,58 +29,56 @@ function _interopNamespace(e) {
29
29
  return Object.freeze(n);
30
30
  }
31
31
 
32
- var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
32
+ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
33
33
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
34
34
  var classNames__default = /*#__PURE__*/_interopDefault(classNames);
35
35
  var styles__default = /*#__PURE__*/_interopDefault(styles);
36
36
 
37
37
  var clx = classNames__default.default.bind(styles__default.default);
38
- var Item = function Item(_ref) {
38
+ var Item = /*#__PURE__*/React__namespace.memo(function (_ref) {
39
39
  var isSelected = _ref.isSelected,
40
40
  isInSelectedRange = _ref.isInSelectedRange,
41
41
  isStartOfSelection = _ref.isStartOfSelection,
42
42
  isEndOfSelection = _ref.isEndOfSelection,
43
43
  children = _ref.children;
44
- var noSelection = isStartOfSelection && isEndOfSelection ? styles__default.default["no-selection"] : "";
45
- var startClass = isStartOfSelection && !isEndOfSelection ? styles__default.default["start-of-selection"] : "";
46
- var endClass = isEndOfSelection && !isStartOfSelection ? styles__default.default["end-of-selection"] : "";
47
- var firstChildClass = isEndOfSelection ? styles__default.default["first-child"] : "";
48
- var lastChildClass = isStartOfSelection ? styles__default.default["last-child"] : "";
44
+ var itemClass = clx('day', _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "selected-day", isSelected), "selected-range-day", isInSelectedRange || isSelected), "no-selection", isStartOfSelection && isEndOfSelection), "start-of-selection", isStartOfSelection && !isEndOfSelection), "end-of-selection", isEndOfSelection && !isStartOfSelection), "first-child", isEndOfSelection), "last-child", isStartOfSelection));
49
45
  if (isSelected) {
50
46
  return /*#__PURE__*/React__namespace.createElement("li", {
51
- className: clx(styles__default.default["selected-range-day"], styles__default.default["selected-day"], noSelection, startClass, endClass, firstChildClass, lastChildClass)
47
+ className: itemClass
52
48
  }, children);
53
49
  } else if (isInSelectedRange) {
54
50
  return /*#__PURE__*/React__namespace.createElement("li", {
55
- className: clx(styles__default.default["selected-range-day"])
51
+ className: clx("selected-range-day")
56
52
  }, children);
57
53
  }
58
54
  return /*#__PURE__*/React__namespace.createElement("li", {
59
- className: clx(styles__default.default.day)
55
+ className: clx('day')
60
56
  }, children);
61
- };
57
+ });
62
58
  var Month = function Month(props) {
63
59
  var year = props.startDate.getFullYear();
64
60
  var month = leadingZeros.leadingZeros(props.startDate.getMonth() + 1, 2);
65
61
  return /*#__PURE__*/React__namespace.createElement("div", {
66
62
  "data-testid": "month",
67
- className: clx(styles__default.default.root),
63
+ className: clx('root'),
68
64
  style: {
69
65
  left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined
70
66
  }
71
67
  }, /*#__PURE__*/React__namespace.createElement("div", {
72
- className: clx(styles__default.default["month-name"])
68
+ className: clx("month-name")
73
69
  }, /*#__PURE__*/React__namespace.createElement(index.default, {
74
70
  tag: "span",
75
71
  size: props.titleSize
76
72
  }, index$1.getUpperMonthName(props.startDate))), /*#__PURE__*/React__namespace.createElement("div", {
77
- className: clx(styles__default.default.table)
73
+ className: clx('table')
78
74
  }, /*#__PURE__*/React__namespace.createElement("ul", {
79
- className: clx(styles__default.default.legend)
80
- }, _toConsumableArray__default.default(Array(7)).map(function (_) {
81
- var index$2 = (arguments.length <= 1 ? undefined : arguments[1]) + 1;
75
+ className: clx('legend')
76
+ }, Array.from({
77
+ length: 7
78
+ }, function (_, idx) {
79
+ var index$2 = idx + 1;
82
80
  return /*#__PURE__*/React__namespace.createElement("li", {
83
- className: clx(styles__default.default.day),
81
+ className: clx('day'),
84
82
  key: index$2
85
83
  }, /*#__PURE__*/React__namespace.createElement(index.default, {
86
84
  style: {
@@ -91,12 +89,12 @@ var Month = function Month(props) {
91
89
  })), getMonthWeeks.getMonthWeeks(props).map(function (days) {
92
90
  return /*#__PURE__*/React__namespace.createElement("ul", {
93
91
  key: "week-".concat(arguments.length <= 1 ? undefined : arguments[1]),
94
- className: clx(styles__default.default.week)
92
+ className: clx('week')
95
93
  }, days.map(function (day) {
96
94
  var key = "day-".concat(arguments.length <= 1 ? undefined : arguments[1]);
97
95
  if (day.isDummy) {
98
96
  return /*#__PURE__*/React__namespace.createElement("li", {
99
- className: clx(styles__default.default.day),
97
+ className: clx('day'),
100
98
  key: key
101
99
  });
102
100
  }
@@ -106,11 +104,11 @@ var Month = function Month(props) {
106
104
  isSelected: day.isSelected,
107
105
  isInSelectedRange: day.isInSelectedRange
108
106
  };
109
- var dayInnerActive = day.isActive ? styles__default.default["day-inner-active"] : "";
107
+ var dayInnerActive = day.isActive ? "day-inner-active" : "";
110
108
  return /*#__PURE__*/React__namespace.createElement(Item, Object.assign({}, attrs, {
111
109
  key: key
112
110
  }), /*#__PURE__*/React__namespace.createElement("button", {
113
- className: clx(styles__default.default["day-inner"], dayInnerActive),
111
+ className: clx("day-inner", dayInnerActive),
114
112
  style: {
115
113
  background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
116
114
  },
package/Calendar/index.js CHANGED
@@ -131,6 +131,12 @@ var Calendar = function Calendar(_ref) {
131
131
  // eslint-disable-next-line react-hooks/exhaustive-deps
132
132
  [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
133
133
  var handlePresetSelect = React.useCallback(function (preset) {
134
+ if (onChange) {
135
+ onChange({
136
+ date: preset.date,
137
+ period: preset.period
138
+ });
139
+ }
134
140
  index$1.requestIdleCallback(function () {
135
141
  return selectDate(preset.date, preset.period, true);
136
142
  }, idleCallbackOptions);
package/esm/Calendar/components/Month/Month.js CHANGED
@@ -1,4 +1,4 @@
1
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
1
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import * as React from 'react';
3
3
  import classNames from 'classnames/bind';
4
4
  import { leadingZeros } from '../../../libs/numbers/leadingZeros.js';
@@ -8,52 +8,50 @@ import { getMonthWeeks } from '../../utils/getMonthWeeks.js';
8
8
  import styles from './index.module.css';
9
9
 
10
10
  var clx = classNames.bind(styles);
11
- var Item = function Item(_ref) {
11
+ var Item = /*#__PURE__*/React.memo(function (_ref) {
12
12
  var isSelected = _ref.isSelected,
13
13
  isInSelectedRange = _ref.isInSelectedRange,
14
14
  isStartOfSelection = _ref.isStartOfSelection,
15
15
  isEndOfSelection = _ref.isEndOfSelection,
16
16
  children = _ref.children;
17
- var noSelection = isStartOfSelection && isEndOfSelection ? styles["no-selection"] : "";
18
- var startClass = isStartOfSelection && !isEndOfSelection ? styles["start-of-selection"] : "";
19
- var endClass = isEndOfSelection && !isStartOfSelection ? styles["end-of-selection"] : "";
20
- var firstChildClass = isEndOfSelection ? styles["first-child"] : "";
21
- var lastChildClass = isStartOfSelection ? styles["last-child"] : "";
17
+ var itemClass = clx('day', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "selected-day", isSelected), "selected-range-day", isInSelectedRange || isSelected), "no-selection", isStartOfSelection && isEndOfSelection), "start-of-selection", isStartOfSelection && !isEndOfSelection), "end-of-selection", isEndOfSelection && !isStartOfSelection), "first-child", isEndOfSelection), "last-child", isStartOfSelection));
22
18
  if (isSelected) {
23
19
  return /*#__PURE__*/React.createElement("li", {
24
- className: clx(styles["selected-range-day"], styles["selected-day"], noSelection, startClass, endClass, firstChildClass, lastChildClass)
20
+ className: itemClass
25
21
  }, children);
26
22
  } else if (isInSelectedRange) {
27
23
  return /*#__PURE__*/React.createElement("li", {
28
- className: clx(styles["selected-range-day"])
24
+ className: clx("selected-range-day")
29
25
  }, children);
30
26
  }
31
27
  return /*#__PURE__*/React.createElement("li", {
32
- className: clx(styles.day)
28
+ className: clx('day')
33
29
  }, children);
34
- };
30
+ });
35
31
  var Month = function Month(props) {
36
32
  var year = props.startDate.getFullYear();
37
33
  var month = leadingZeros(props.startDate.getMonth() + 1, 2);
38
34
  return /*#__PURE__*/React.createElement("div", {
39
35
  "data-testid": "month",
40
- className: clx(styles.root),
36
+ className: clx('root'),
41
37
  style: {
42
38
  left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined
43
39
  }
44
40
  }, /*#__PURE__*/React.createElement("div", {
45
- className: clx(styles["month-name"])
41
+ className: clx("month-name")
46
42
  }, /*#__PURE__*/React.createElement(Typography, {
47
43
  tag: "span",
48
44
  size: props.titleSize
49
45
  }, getUpperMonthName(props.startDate))), /*#__PURE__*/React.createElement("div", {
50
- className: clx(styles.table)
46
+ className: clx('table')
51
47
  }, /*#__PURE__*/React.createElement("ul", {
52
- className: clx(styles.legend)
53
- }, _toConsumableArray(Array(7)).map(function (_) {
54
- var index = (arguments.length <= 1 ? undefined : arguments[1]) + 1;
48
+ className: clx('legend')
49
+ }, Array.from({
50
+ length: 7
51
+ }, function (_, idx) {
52
+ var index = idx + 1;
55
53
  return /*#__PURE__*/React.createElement("li", {
56
- className: clx(styles.day),
54
+ className: clx('day'),
57
55
  key: index
58
56
  }, /*#__PURE__*/React.createElement(Typography, {
59
57
  style: {
@@ -64,12 +62,12 @@ var Month = function Month(props) {
64
62
  })), getMonthWeeks(props).map(function (days) {
65
63
  return /*#__PURE__*/React.createElement("ul", {
66
64
  key: "week-".concat(arguments.length <= 1 ? undefined : arguments[1]),
67
- className: clx(styles.week)
65
+ className: clx('week')
68
66
  }, days.map(function (day) {
69
67
  var key = "day-".concat(arguments.length <= 1 ? undefined : arguments[1]);
70
68
  if (day.isDummy) {
71
69
  return /*#__PURE__*/React.createElement("li", {
72
- className: clx(styles.day),
70
+ className: clx('day'),
73
71
  key: key
74
72
  });
75
73
  }
@@ -79,11 +77,11 @@ var Month = function Month(props) {
79
77
  isSelected: day.isSelected,
80
78
  isInSelectedRange: day.isInSelectedRange
81
79
  };
82
- var dayInnerActive = day.isActive ? styles["day-inner-active"] : "";
80
+ var dayInnerActive = day.isActive ? "day-inner-active" : "";
83
81
  return /*#__PURE__*/React.createElement(Item, Object.assign({}, attrs, {
84
82
  key: key
85
83
  }), /*#__PURE__*/React.createElement("button", {
86
- className: clx(styles["day-inner"], dayInnerActive),
84
+ className: clx("day-inner", dayInnerActive),
87
85
  style: {
88
86
  background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
89
87
  },
package/esm/Calendar/index.js CHANGED
@@ -120,6 +120,12 @@ var Calendar = function Calendar(_ref) {
120
120
  // eslint-disable-next-line react-hooks/exhaustive-deps
121
121
  [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
122
122
  var handlePresetSelect = useCallback(function (preset) {
123
+ if (onChange) {
124
+ onChange({
125
+ date: preset.date,
126
+ period: preset.period
127
+ });
128
+ }
123
129
  requestIdleCallback(function () {
124
130
  return selectDate(preset.date, preset.period, true);
125
131
  }, idleCallbackOptions);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.41",
3
+ "version": "0.8.43",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},
@@ -23,17 +23,20 @@
23
23
  },
24
24
  "homepage": "https://github.com/ColibriMQLab/ColibriUI#readme",
25
25
  "dependencies": {
26
- "@popperjs/core": "^2.11.8",
27
- "classnames": "^2.5.1",
28
- "date-fns": "^3.6.0",
29
- "react": "^19.0.0",
30
- "react-dom": "^19.0.0",
31
- "react-popper": "^2.3.0",
32
- "react-textarea-autosize": "^8.5.9"
26
+ "@popperjs/core": "2.11.8",
27
+ "classnames": "2.5.1",
28
+ "date-fns": "3.6.0",
29
+ "react": "19.2.0",
30
+ "react-dom": "19.2.0",
31
+ "react-popper": "2.3.0",
32
+ "react-textarea-autosize": "8.5.9"
33
33
  },
34
34
  "devDependencies": {},
35
35
  "peerDependencies": {
36
- "@types/react": "^17.0.0 || ^18.0.0",
37
- "tslib": "^2.5.0"
36
+ "react": "19.2.0",
37
+ "react-dom": "19.2.0",
38
+ "@types/react": "^19.0.0",
39
+ "@types/react-dom": "^19.0.0",
40
+ "tslib": "2.5.0"
38
41
  }
39
42
  }