@ozen-ui/kit 0.13.0 → 0.13.2

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 (7) hide show
  1. package/__inner__/cjs/components/DataList/useDataListNavigation.js +23 -21
  2. package/__inner__/cjs/components/FieldControl/FieldControl.css +0 -15
  3. package/__inner__/cjs/components/Input/Input.css +0 -7
  4. package/__inner__/esm/components/DataList/useDataListNavigation.js +23 -21
  5. package/__inner__/esm/components/FieldControl/FieldControl.css +0 -15
  6. package/__inner__/esm/components/Input/Input.css +0 -7
  7. package/package.json +1 -1
package/__inner__/cjs/components/DataList/useDataListNavigation.js CHANGED
@@ -24,20 +24,21 @@ function useDataListNavigation(_a) {
24
24
  var _d = tslib_1.__read((0, react_1.useState)(null), 2), current = _d[0], setCurrent = _d[1];
25
25
  var _e = tslib_1.__read((0, react_1.useState)(), 2), focused = _e[0], serFocused = _e[1];
26
26
  var _f = tslib_1.__read((0, react_1.useState)(), 2), highlighted = _f[0], setHighlighted = _f[1];
27
- var currentValue = current || selected;
28
- var getItemsData = (0, react_1.useCallback)(function () {
27
+ var getItems = (0, react_1.useCallback)(function () {
29
28
  var _a;
30
- var items = Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
31
- return [
32
- items,
33
- items.find(function (item) { return getData(item, 'value') === currentValue; }),
34
- ];
35
- }, [name, currentValue]);
29
+ return Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) ||
30
+ []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
31
+ }, [name]);
32
+ var getCurrentItem = (0, react_1.useCallback)(function (value) {
33
+ return getItems().find(function (item) { return getData(item, 'value') === value; });
34
+ }, []);
35
+ var getItemsValues = (0, react_1.useCallback)(function () { return getItems().map(function (item) { return getData(item, 'value'); }); }, []);
36
+ var currentValue = current || selected;
36
37
  (0, react_1.useEffect)(function () {
37
38
  if (!active) {
38
39
  return undefined;
39
40
  }
40
- var _a = tslib_1.__read(getItemsData(), 2), selectedItem = _a[1];
41
+ var selectedItem = getCurrentItem(currentValue || '');
41
42
  if (ref === null || ref === void 0 ? void 0 : ref.current) {
42
43
  (0, scrollContainerToElement_1.scrollContainerToElement)({
43
44
  container: ref.current,
@@ -55,40 +56,41 @@ function useDataListNavigation(_a) {
55
56
  if (getData(event, 'disabled') === 'true') {
56
57
  return;
57
58
  }
59
+ var value = getData(event, 'value');
58
60
  serFocused(null);
59
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue || '');
61
+ setCurrent(value);
62
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value || '');
60
63
  };
61
64
  var onKeyDown = function (event) {
62
65
  if ((0, isKey_1.isKey)(event, 'Enter')) {
63
66
  event.preventDefault();
64
- if (currentValue)
65
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue);
67
+ var test_1 = currentValue || getItemsValues()[0] || '';
68
+ serFocused(test_1);
69
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, test_1);
66
70
  }
67
71
  if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
68
72
  return;
69
73
  }
70
74
  event.preventDefault();
71
- var _a = tslib_1.__read(getItemsData(), 2), items = _a[0], currentItem = _a[1];
72
- var currentIndex = !currentItem ? null : items.indexOf(currentItem);
75
+ var values = getItemsValues();
76
+ var currentIndex = currentValue ? values.indexOf(currentValue) : null;
73
77
  var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
74
78
  var newIndex = isArrowUp
75
- ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
76
- : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, items.length);
77
- var item = items[newIndex];
78
- var newValue = getData(item, 'value');
79
+ ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
80
+ : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
81
+ var newValue = values[newIndex];
79
82
  setCurrent(newValue);
80
83
  serFocused(newValue);
81
84
  if (ref === null || ref === void 0 ? void 0 : ref.current) {
82
85
  (0, scrollContainerToElement_1.scrollContainerToElement)({
83
86
  container: ref.current,
84
- element: item,
87
+ element: getCurrentItem(newValue || ''),
85
88
  });
86
89
  }
87
90
  };
88
91
  var onMouseMove = function (event) {
89
92
  if (getData(event, 'disabled') !== 'true')
90
- setCurrent(getData(event, 'value'));
91
- setHighlighted(getData(event, 'value'));
93
+ setHighlighted(getData(event, 'value'));
92
94
  };
93
95
  var onMouseLeave = function () {
94
96
  setHighlighted(null);
package/__inner__/cjs/components/FieldControl/FieldControl.css CHANGED
@@ -24,9 +24,6 @@
24
24
 
25
25
  text-transform: var(--typography-text-2xs-text_transform, none);
26
26
  }
27
- .FieldControl_size_2xs .FieldInput::-webkit-calendar-picker-indicator {
28
- inset-inline-end: -25px;
29
- }
30
27
  .FieldControl_size_xs {
31
28
  --textfield-gutter-x: 12px;
32
29
  --textfield-input-height: 40px;
@@ -39,9 +36,6 @@
39
36
 
40
37
  text-transform: var(--typography-text-xs-text_transform, none);
41
38
  }
42
- .FieldControl_size_xs .FieldInput::-webkit-calendar-picker-indicator {
43
- inset-inline-end: -25px;
44
- }
45
39
  .FieldControl_size_s {
46
40
  --textfield-gutter-x: 16px;
47
41
  --textfield-input-height: 48px;
@@ -54,9 +48,6 @@
54
48
 
55
49
  text-transform: var(--typography-text-s-text_transform, none);
56
50
  }
57
- .FieldControl_size_s .FieldInput::-webkit-calendar-picker-indicator {
58
- inset-inline-end: -30px;
59
- }
60
51
  .FieldControl_size_m {
61
52
  --textfield-gutter-x: 20px;
62
53
  --textfield-input-height: 56px;
@@ -69,9 +60,6 @@
69
60
 
70
61
  text-transform: var(--typography-text-m-text_transform, none);
71
62
  }
72
- .FieldControl_size_m .FieldInput::-webkit-calendar-picker-indicator {
73
- inset-inline-end: -34px;
74
- }
75
63
  .FieldControl_size_l {
76
64
  --textfield-gutter-x: 24px;
77
65
  --textfield-input-height: 64px;
@@ -84,9 +72,6 @@
84
72
 
85
73
  text-transform: var(--typography-text-l-text_transform, none);
86
74
  }
87
- .FieldControl_size_l .FieldInput::-webkit-calendar-picker-indicator {
88
- inset-inline-end: -39px;
89
- }
90
75
  .FieldControl_hasLabel.FieldControl_size_2xs {
91
76
  --textfield-input-padding: 8px 0 8px;
92
77
  }
package/__inner__/cjs/components/Input/Input.css CHANGED
@@ -44,13 +44,6 @@
44
44
  appearance: none;
45
45
  margin: 0;
46
46
  }
47
- .Input-Field::-webkit-calendar-picker-indicator {
48
- opacity: 0;
49
- position: absolute;
50
- inset-block-start: 50%;
51
- transform: translateY(-50%);
52
- cursor: pointer;
53
- }
54
47
  .Input-Field[type='number'] {
55
48
  -webkit-appearance: textfield;
56
49
  -moz-appearance: textfield;
package/__inner__/esm/components/DataList/useDataListNavigation.js CHANGED
@@ -21,20 +21,21 @@ export function useDataListNavigation(_a) {
21
21
  var _d = __read(useState(null), 2), current = _d[0], setCurrent = _d[1];
22
22
  var _e = __read(useState(), 2), focused = _e[0], serFocused = _e[1];
23
23
  var _f = __read(useState(), 2), highlighted = _f[0], setHighlighted = _f[1];
24
- var currentValue = current || selected;
25
- var getItemsData = useCallback(function () {
24
+ var getItems = useCallback(function () {
26
25
  var _a;
27
- var items = Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
28
- return [
29
- items,
30
- items.find(function (item) { return getData(item, 'value') === currentValue; }),
31
- ];
32
- }, [name, currentValue]);
26
+ return Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) ||
27
+ []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
28
+ }, [name]);
29
+ var getCurrentItem = useCallback(function (value) {
30
+ return getItems().find(function (item) { return getData(item, 'value') === value; });
31
+ }, []);
32
+ var getItemsValues = useCallback(function () { return getItems().map(function (item) { return getData(item, 'value'); }); }, []);
33
+ var currentValue = current || selected;
33
34
  useEffect(function () {
34
35
  if (!active) {
35
36
  return undefined;
36
37
  }
37
- var _a = __read(getItemsData(), 2), selectedItem = _a[1];
38
+ var selectedItem = getCurrentItem(currentValue || '');
38
39
  if (ref === null || ref === void 0 ? void 0 : ref.current) {
39
40
  scrollContainerToElement({
40
41
  container: ref.current,
@@ -52,40 +53,41 @@ export function useDataListNavigation(_a) {
52
53
  if (getData(event, 'disabled') === 'true') {
53
54
  return;
54
55
  }
56
+ var value = getData(event, 'value');
55
57
  serFocused(null);
56
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue || '');
58
+ setCurrent(value);
59
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value || '');
57
60
  };
58
61
  var onKeyDown = function (event) {
59
62
  if (isKey(event, 'Enter')) {
60
63
  event.preventDefault();
61
- if (currentValue)
62
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue);
64
+ var test_1 = currentValue || getItemsValues()[0] || '';
65
+ serFocused(test_1);
66
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, test_1);
63
67
  }
64
68
  if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
65
69
  return;
66
70
  }
67
71
  event.preventDefault();
68
- var _a = __read(getItemsData(), 2), items = _a[0], currentItem = _a[1];
69
- var currentIndex = !currentItem ? null : items.indexOf(currentItem);
72
+ var values = getItemsValues();
73
+ var currentIndex = currentValue ? values.indexOf(currentValue) : null;
70
74
  var isArrowUp = isKey(event, 'ArrowUp');
71
75
  var newIndex = isArrowUp
72
- ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
73
- : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, items.length);
74
- var item = items[newIndex];
75
- var newValue = getData(item, 'value');
76
+ ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
77
+ : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
78
+ var newValue = values[newIndex];
76
79
  setCurrent(newValue);
77
80
  serFocused(newValue);
78
81
  if (ref === null || ref === void 0 ? void 0 : ref.current) {
79
82
  scrollContainerToElement({
80
83
  container: ref.current,
81
- element: item,
84
+ element: getCurrentItem(newValue || ''),
82
85
  });
83
86
  }
84
87
  };
85
88
  var onMouseMove = function (event) {
86
89
  if (getData(event, 'disabled') !== 'true')
87
- setCurrent(getData(event, 'value'));
88
- setHighlighted(getData(event, 'value'));
90
+ setHighlighted(getData(event, 'value'));
89
91
  };
90
92
  var onMouseLeave = function () {
91
93
  setHighlighted(null);
package/__inner__/esm/components/FieldControl/FieldControl.css CHANGED
@@ -24,9 +24,6 @@
24
24
 
25
25
  text-transform: var(--typography-text-2xs-text_transform, none);
26
26
  }
27
- .FieldControl_size_2xs .FieldInput::-webkit-calendar-picker-indicator {
28
- inset-inline-end: -25px;
29
- }
30
27
  .FieldControl_size_xs {
31
28
  --textfield-gutter-x: 12px;
32
29
  --textfield-input-height: 40px;
@@ -39,9 +36,6 @@
39
36
 
40
37
  text-transform: var(--typography-text-xs-text_transform, none);
41
38
  }
42
- .FieldControl_size_xs .FieldInput::-webkit-calendar-picker-indicator {
43
- inset-inline-end: -25px;
44
- }
45
39
  .FieldControl_size_s {
46
40
  --textfield-gutter-x: 16px;
47
41
  --textfield-input-height: 48px;
@@ -54,9 +48,6 @@
54
48
 
55
49
  text-transform: var(--typography-text-s-text_transform, none);
56
50
  }
57
- .FieldControl_size_s .FieldInput::-webkit-calendar-picker-indicator {
58
- inset-inline-end: -30px;
59
- }
60
51
  .FieldControl_size_m {
61
52
  --textfield-gutter-x: 20px;
62
53
  --textfield-input-height: 56px;
@@ -69,9 +60,6 @@
69
60
 
70
61
  text-transform: var(--typography-text-m-text_transform, none);
71
62
  }
72
- .FieldControl_size_m .FieldInput::-webkit-calendar-picker-indicator {
73
- inset-inline-end: -34px;
74
- }
75
63
  .FieldControl_size_l {
76
64
  --textfield-gutter-x: 24px;
77
65
  --textfield-input-height: 64px;
@@ -84,9 +72,6 @@
84
72
 
85
73
  text-transform: var(--typography-text-l-text_transform, none);
86
74
  }
87
- .FieldControl_size_l .FieldInput::-webkit-calendar-picker-indicator {
88
- inset-inline-end: -39px;
89
- }
90
75
  .FieldControl_hasLabel.FieldControl_size_2xs {
91
76
  --textfield-input-padding: 8px 0 8px;
92
77
  }
package/__inner__/esm/components/Input/Input.css CHANGED
@@ -44,13 +44,6 @@
44
44
  appearance: none;
45
45
  margin: 0;
46
46
  }
47
- .Input-Field::-webkit-calendar-picker-indicator {
48
- opacity: 0;
49
- position: absolute;
50
- inset-block-start: 50%;
51
- transform: translateY(-50%);
52
- cursor: pointer;
53
- }
54
47
  .Input-Field[type='number'] {
55
48
  -webkit-appearance: textfield;
56
49
  -moz-appearance: textfield;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.13.0",
3
+ "version": "0.13.2",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"