colibri-ui 0.7.112 → 0.7.114

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 (11) hide show
  1. package/Datepicker/Datepicker.module.css +1 -0
  2. package/Datepicker/components/DatePicker/index.js +11 -7
  3. package/Datepicker/components/DatePicker/index.module.css +34 -20
  4. package/Datepicker/components/TimePicker/index.js +7 -16
  5. package/Datepicker/components/TimePicker/index.module.css +22 -55
  6. package/esm/Datepicker/Datepicker.module.css +1 -0
  7. package/esm/Datepicker/components/DatePicker/index.js +11 -7
  8. package/esm/Datepicker/components/DatePicker/index.module.css +34 -20
  9. package/esm/Datepicker/components/TimePicker/index.js +7 -16
  10. package/esm/Datepicker/components/TimePicker/index.module.css +22 -55
  11. package/package.json +1 -1
package/Datepicker/Datepicker.module.css CHANGED
@@ -2,4 +2,5 @@
2
2
  display: flex;
3
3
  flex-shrink: 0;
4
4
  font-size: 14px;
5
+ height: 36px;
5
6
  }
package/Datepicker/components/DatePicker/index.js CHANGED
@@ -24,9 +24,7 @@ var DatePicker = function DatePicker(_a) {
24
24
  date = _c[0],
25
25
  setDate = _c[1];
26
26
  return /*#__PURE__*/React__default.default.createElement("div", {
27
- className: clx(styles__default.default.root, className)
28
- }, /*#__PURE__*/React__default.default.createElement("div", {
29
- className: clx(styles__default.default["date-picker"])
27
+ className: clx(styles__default.default['input-container'], styles__default.default['input-date'], className)
30
28
  }, /*#__PURE__*/React__default.default.createElement(index.default, {
31
29
  placement: "bottom",
32
30
  preventAutoClose: true,
@@ -43,10 +41,16 @@ var DatePicker = function DatePicker(_a) {
43
41
  }
44
42
  })
45
43
  }, /*#__PURE__*/React__default.default.createElement("input", {
46
- className: clx(styles__default.default["date-picker-input-control"]),
47
- value: index$2.toDMYDate(date),
48
- readOnly: true
49
- }))));
44
+ className: clx(styles__default.default['input-field']),
45
+ tabIndex: 0,
46
+ "aria-expanded": "false",
47
+ "aria-haspopup": "true",
48
+ "aria-invalid": "false",
49
+ autoComplete: "off",
50
+ maxLength: 7,
51
+ readOnly: true,
52
+ value: index$2.toDMYDate(date)
53
+ })));
50
54
  };
51
55
 
52
56
  exports.default = DatePicker;
package/Datepicker/components/DatePicker/index.module.css CHANGED
@@ -1,31 +1,45 @@
1
- .root {
2
- width: 100px;
1
+ .input-container {
2
+ border-radius: 6px;
3
+ border: 1px solid var(--palette-bg-3);
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
3
7
  }
4
- .root:focus-within {
5
- z-index: 2;
8
+
9
+ .input-field {
10
+ height: 100%;
11
+ padding: 4px;
12
+ text-align: center;
13
+ font-size: 1em;
14
+ outline: none;
15
+ border: none;
16
+ width: 100%;
17
+ background: transparent;
6
18
  }
7
19
 
8
- .date-picker {
9
- display: inline-block;
20
+ .input-date {
21
+ position: relative;
22
+ border-bottom-left-radius: 0;
23
+ border-left: none;
24
+ border-top-left-radius: 0;
25
+ width: 100px;
10
26
  }
11
27
 
12
- .date-picker-input-control {
13
- background-color: var(--palette-white);
14
- border: 0;
15
- border-radius: 0.375rem;
28
+ .input-date:focus-within {
29
+ border: 1px solid var(--palette-primary-3);
16
30
  border-bottom-left-radius: 0;
31
+ border-left: none;
17
32
  border-top-left-radius: 0;
18
- box-shadow: inset 0 0 0 1px var(--palette-bg-3);
19
- box-sizing: border-box;
20
- color: var(--palette-black);
21
- font-size: 14px;
22
- height: 36px;
23
- outline: 0;
24
- padding: 0 10px;
25
- width: 100%;
33
+ box-shadow: 0 0 0 2px var(--palette-primary-2);
26
34
  }
27
- .date-picker-input-control:focus {
28
- box-shadow: inset 0 0 0 1px var(--palette-primary-3), 0 0 0 2px var(--palette-primary-2);
35
+
36
+ .input-date:focus-within::before {
37
+ content: "";
38
+ position: absolute;
39
+ height: 100%;
40
+ width: 1px;
41
+ background-color: var(--palette-primary-3);
42
+ left: 0;
29
43
  }
30
44
 
31
45
  .calendar {
package/Datepicker/components/TimePicker/index.js CHANGED
@@ -44,36 +44,27 @@ var TimePicker = function TimePicker(_a) {
44
44
  });
45
45
  }, [baseOptions, interval]);
46
46
  return /*#__PURE__*/React__default.default.createElement("div", {
47
- className: clx(styles__default.default.root, className)
48
- }, /*#__PURE__*/React__default.default.createElement("div", {
49
- className: clx(styles__default.default["time-picker"])
50
- }, /*#__PURE__*/React__default.default.createElement("span", {
51
- className: clx(styles__default.default["time-input-wrapper"])
52
- }, /*#__PURE__*/React__default.default.createElement("span", {
53
- className: clx(styles__default.default.select)
54
- }, /*#__PURE__*/React__default.default.createElement("span", {
55
- className: clx(styles__default.default["text-input"])
47
+ className: clx(styles__default.default['input-container'], styles__default.default['input-time'])
56
48
  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
49
+ className: className,
57
50
  value: time,
58
- className: clx(styles__default.default["select-input-control"]),
59
51
  options: options,
60
52
  fontSize: 14,
61
53
  customInputRoot: /*#__PURE__*/React__default.default.createElement("input", {
54
+ className: clx(styles__default.default['input-field']),
55
+ tabIndex: 0,
62
56
  "aria-expanded": "false",
63
57
  "aria-haspopup": "true",
64
58
  "aria-invalid": "false",
65
59
  autoComplete: "off",
66
- className: clx(styles__default.default["text-input-control"]),
67
60
  maxLength: 5,
68
- value: time,
69
- readOnly: true
61
+ readOnly: true,
62
+ value: time
70
63
  }),
71
64
  onChange: function onChange(time) {
72
65
  return setTime(time);
73
66
  }
74
- }), /*#__PURE__*/React__default.default.createElement("span", {
75
- className: clx(styles__default.default["text-input-box"])
76
- }))))));
67
+ }));
77
68
  };
78
69
  var TimePickerInput = /*#__PURE__*/React.memo(TimePicker);
79
70
 
package/Datepicker/components/TimePicker/index.module.css CHANGED
@@ -1,67 +1,34 @@
1
- .root {
2
- width: 88px;
3
- }
4
-
5
- .time-picker {
6
- display: inline-block;
7
- }
8
-
9
- .time-input-wrapper {
10
- display: inline-block;
11
- }
12
-
13
- .select {
14
- display: inline-block;
15
- max-width: 100%;
16
- position: relative;
17
- vertical-align: bottom;
18
- }
19
-
20
- .text-input {
21
- box-sizing: border-box;
22
- display: inline-block;
23
- position: relative;
24
- vertical-align: top;
25
- width: 100%;
1
+ .input-container {
2
+ border-radius: 6px;
3
+ border: 1px solid var(--palette-bg-3);
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
26
7
  }
27
8
 
28
- .text-input-control {
29
- background: 0 0;
30
- border: 0 solid transparent;
31
- border-width: 8px 16px;
32
- box-sizing: border-box;
33
- color: var(--palette-black);
9
+ .input-field {
10
+ height: 100%;
11
+ padding: 4px;
12
+ text-align: center;
34
13
  font-size: 1em;
35
- height: 36px;
36
- margin: 0;
37
- outline: 0;
38
- padding: 0;
39
- position: relative;
40
- -webkit-tap-highlight-color: transparent;
41
- vertical-align: top;
14
+ outline: none;
15
+ border: none;
42
16
  width: 100%;
43
- text-align: center;
44
- z-index: 2;
17
+ background: transparent;
45
18
  }
46
19
 
47
- .text-input-box {
48
- background-color: var(--palette-white);
49
- border: 1px solid var(--palette-bg-3);
50
- border-radius: 0.375rem;
20
+ .input-time {
51
21
  border-bottom-right-radius: 0;
52
- border-right-width: 0;
22
+ border-right: 1px solid var(--palette-bg-3);
53
23
  border-top-right-radius: 0;
54
- inset: 0;
55
- box-sizing: border-box;
56
- display: inline-block;
57
- height: 36px;
58
- position: absolute;
59
- transition: background-color 0.15s linear;
60
- z-index: 1;
24
+ width: 89px;
25
+ height: 100%;
61
26
  }
62
27
 
63
- .select-input-control:focus-within + .text-input-box {
64
- border-color: var(--palette-primary-3);
65
- border-width: 1px;
28
+ .input-time:focus-within {
29
+ border: 1px solid var(--palette-primary-3);
30
+ border-bottom-right-radius: 0;
31
+ border-top-right-radius: 0;
66
32
  box-shadow: 0 0 0 2px var(--palette-primary-2);
33
+ z-index: 3;
67
34
  }
package/esm/Datepicker/Datepicker.module.css CHANGED
@@ -2,4 +2,5 @@
2
2
  display: flex;
3
3
  flex-shrink: 0;
4
4
  font-size: 14px;
5
+ height: 36px;
5
6
  }
package/esm/Datepicker/components/DatePicker/index.js CHANGED
@@ -14,9 +14,7 @@ var DatePicker = function DatePicker(_a) {
14
14
  date = _c[0],
15
15
  setDate = _c[1];
16
16
  return /*#__PURE__*/React__default.createElement("div", {
17
- className: clx(styles.root, className)
18
- }, /*#__PURE__*/React__default.createElement("div", {
19
- className: clx(styles["date-picker"])
17
+ className: clx(styles['input-container'], styles['input-date'], className)
20
18
  }, /*#__PURE__*/React__default.createElement(Dropdown, {
21
19
  placement: "bottom",
22
20
  preventAutoClose: true,
@@ -33,10 +31,16 @@ var DatePicker = function DatePicker(_a) {
33
31
  }
34
32
  })
35
33
  }, /*#__PURE__*/React__default.createElement("input", {
36
- className: clx(styles["date-picker-input-control"]),
37
- value: toDMYDate(date),
38
- readOnly: true
39
- }))));
34
+ className: clx(styles['input-field']),
35
+ tabIndex: 0,
36
+ "aria-expanded": "false",
37
+ "aria-haspopup": "true",
38
+ "aria-invalid": "false",
39
+ autoComplete: "off",
40
+ maxLength: 7,
41
+ readOnly: true,
42
+ value: toDMYDate(date)
43
+ })));
40
44
  };
41
45
 
42
46
  export { DatePicker as default };
package/esm/Datepicker/components/DatePicker/index.module.css CHANGED
@@ -1,31 +1,45 @@
1
- .root {
2
- width: 100px;
1
+ .input-container {
2
+ border-radius: 6px;
3
+ border: 1px solid var(--palette-bg-3);
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
3
7
  }
4
- .root:focus-within {
5
- z-index: 2;
8
+
9
+ .input-field {
10
+ height: 100%;
11
+ padding: 4px;
12
+ text-align: center;
13
+ font-size: 1em;
14
+ outline: none;
15
+ border: none;
16
+ width: 100%;
17
+ background: transparent;
6
18
  }
7
19
 
8
- .date-picker {
9
- display: inline-block;
20
+ .input-date {
21
+ position: relative;
22
+ border-bottom-left-radius: 0;
23
+ border-left: none;
24
+ border-top-left-radius: 0;
25
+ width: 100px;
10
26
  }
11
27
 
12
- .date-picker-input-control {
13
- background-color: var(--palette-white);
14
- border: 0;
15
- border-radius: 0.375rem;
28
+ .input-date:focus-within {
29
+ border: 1px solid var(--palette-primary-3);
16
30
  border-bottom-left-radius: 0;
31
+ border-left: none;
17
32
  border-top-left-radius: 0;
18
- box-shadow: inset 0 0 0 1px var(--palette-bg-3);
19
- box-sizing: border-box;
20
- color: var(--palette-black);
21
- font-size: 14px;
22
- height: 36px;
23
- outline: 0;
24
- padding: 0 10px;
25
- width: 100%;
33
+ box-shadow: 0 0 0 2px var(--palette-primary-2);
26
34
  }
27
- .date-picker-input-control:focus {
28
- box-shadow: inset 0 0 0 1px var(--palette-primary-3), 0 0 0 2px var(--palette-primary-2);
35
+
36
+ .input-date:focus-within::before {
37
+ content: "";
38
+ position: absolute;
39
+ height: 100%;
40
+ width: 1px;
41
+ background-color: var(--palette-primary-3);
42
+ left: 0;
29
43
  }
30
44
 
31
45
  .calendar {
package/esm/Datepicker/components/TimePicker/index.js CHANGED
@@ -34,36 +34,27 @@ var TimePicker = function TimePicker(_a) {
34
34
  });
35
35
  }, [baseOptions, interval]);
36
36
  return /*#__PURE__*/React__default.createElement("div", {
37
- className: clx(styles.root, className)
38
- }, /*#__PURE__*/React__default.createElement("div", {
39
- className: clx(styles["time-picker"])
40
- }, /*#__PURE__*/React__default.createElement("span", {
41
- className: clx(styles["time-input-wrapper"])
42
- }, /*#__PURE__*/React__default.createElement("span", {
43
- className: clx(styles.select)
44
- }, /*#__PURE__*/React__default.createElement("span", {
45
- className: clx(styles["text-input"])
37
+ className: clx(styles['input-container'], styles['input-time'])
46
38
  }, /*#__PURE__*/React__default.createElement(Select, {
39
+ className: className,
47
40
  value: time,
48
- className: clx(styles["select-input-control"]),
49
41
  options: options,
50
42
  fontSize: 14,
51
43
  customInputRoot: /*#__PURE__*/React__default.createElement("input", {
44
+ className: clx(styles['input-field']),
45
+ tabIndex: 0,
52
46
  "aria-expanded": "false",
53
47
  "aria-haspopup": "true",
54
48
  "aria-invalid": "false",
55
49
  autoComplete: "off",
56
- className: clx(styles["text-input-control"]),
57
50
  maxLength: 5,
58
- value: time,
59
- readOnly: true
51
+ readOnly: true,
52
+ value: time
60
53
  }),
61
54
  onChange: function onChange(time) {
62
55
  return setTime(time);
63
56
  }
64
- }), /*#__PURE__*/React__default.createElement("span", {
65
- className: clx(styles["text-input-box"])
66
- }))))));
57
+ }));
67
58
  };
68
59
  var TimePickerInput = /*#__PURE__*/memo(TimePicker);
69
60
 
package/esm/Datepicker/components/TimePicker/index.module.css CHANGED
@@ -1,67 +1,34 @@
1
- .root {
2
- width: 88px;
3
- }
4
-
5
- .time-picker {
6
- display: inline-block;
7
- }
8
-
9
- .time-input-wrapper {
10
- display: inline-block;
11
- }
12
-
13
- .select {
14
- display: inline-block;
15
- max-width: 100%;
16
- position: relative;
17
- vertical-align: bottom;
18
- }
19
-
20
- .text-input {
21
- box-sizing: border-box;
22
- display: inline-block;
23
- position: relative;
24
- vertical-align: top;
25
- width: 100%;
1
+ .input-container {
2
+ border-radius: 6px;
3
+ border: 1px solid var(--palette-bg-3);
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
26
7
  }
27
8
 
28
- .text-input-control {
29
- background: 0 0;
30
- border: 0 solid transparent;
31
- border-width: 8px 16px;
32
- box-sizing: border-box;
33
- color: var(--palette-black);
9
+ .input-field {
10
+ height: 100%;
11
+ padding: 4px;
12
+ text-align: center;
34
13
  font-size: 1em;
35
- height: 36px;
36
- margin: 0;
37
- outline: 0;
38
- padding: 0;
39
- position: relative;
40
- -webkit-tap-highlight-color: transparent;
41
- vertical-align: top;
14
+ outline: none;
15
+ border: none;
42
16
  width: 100%;
43
- text-align: center;
44
- z-index: 2;
17
+ background: transparent;
45
18
  }
46
19
 
47
- .text-input-box {
48
- background-color: var(--palette-white);
49
- border: 1px solid var(--palette-bg-3);
50
- border-radius: 0.375rem;
20
+ .input-time {
51
21
  border-bottom-right-radius: 0;
52
- border-right-width: 0;
22
+ border-right: 1px solid var(--palette-bg-3);
53
23
  border-top-right-radius: 0;
54
- inset: 0;
55
- box-sizing: border-box;
56
- display: inline-block;
57
- height: 36px;
58
- position: absolute;
59
- transition: background-color 0.15s linear;
60
- z-index: 1;
24
+ width: 89px;
25
+ height: 100%;
61
26
  }
62
27
 
63
- .select-input-control:focus-within + .text-input-box {
64
- border-color: var(--palette-primary-3);
65
- border-width: 1px;
28
+ .input-time:focus-within {
29
+ border: 1px solid var(--palette-primary-3);
30
+ border-bottom-right-radius: 0;
31
+ border-top-right-radius: 0;
66
32
  box-shadow: 0 0 0 2px var(--palette-primary-2);
33
+ z-index: 3;
67
34
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.112",
3
+ "version": "0.7.114",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},