@ozen-ui/kit 0.13.1 → 0.13.3

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 (4) hide show
  1. package/README.md +3 -3
  2. package/__inner__/cjs/components/DataList/useDataListNavigation.js +23 -21
  3. package/__inner__/esm/components/DataList/useDataListNavigation.js +23 -21
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -21,9 +21,9 @@ pnpm add @ozen-ui/kit
21
21
 
22
22
  Разделы для знакомства с библиотекой:
23
23
 
24
- - [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F-%D0%B4%D0%BE%D0%B1%D1%80%D0%BE-%D0%BF%D0%BE%D0%B6%D0%B0%D0%BB%D0%BE%D0%B2%D0%B0%D1%82%D1%8C--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
25
- - [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs/%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B5-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
26
- - [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F-%D0%BE%D0%B1%D0%B7%D0%BE%D1%80--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
24
+ - [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/documentation-getting-started--docs)
25
+ - [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs/foundations-design-tokens--docs)
26
+ - [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/documentation-overview--docs)
27
27
 
28
28
  ## О нас
29
29
 
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__/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.13.1",
3
+ "version": "0.13.3",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"