@ozen-ui/kit 0.34.0 → 0.34.1

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/Autocomplete/helper.d.ts +2 -2
  2. package/__inner__/cjs/components/Autocomplete/types.d.ts +2 -2
  3. package/__inner__/cjs/components/DataList/DataList.js +19 -26
  4. package/__inner__/esm/components/Autocomplete/helper.d.ts +2 -2
  5. package/__inner__/esm/components/Autocomplete/types.d.ts +2 -2
  6. package/__inner__/esm/components/DataList/DataList.js +21 -28
  7. package/package.json +1 -1
package/__inner__/cjs/components/Autocomplete/helper.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
30
30
  searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
31
31
  disableShowEmptyOptionsList?: boolean | undefined;
32
32
  disableShowChevron?: boolean | undefined;
33
- dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
33
+ dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
34
34
  } & {
35
35
  label?: string | undefined;
36
36
  style?: import("react").CSSProperties | undefined;
@@ -110,7 +110,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
110
110
  searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
111
111
  disableShowEmptyOptionsList?: boolean | undefined;
112
112
  disableShowChevron?: boolean | undefined;
113
- dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
113
+ dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
114
114
  } & {
115
115
  label?: string | undefined;
116
116
  style?: import("react").CSSProperties | undefined;
package/__inner__/cjs/components/Autocomplete/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
2
2
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
- import type { DataListBaseProps } from '../DataList';
3
+ import type { DataListProps } from '../DataList';
4
4
  import type { InputProps } from '../Input';
5
5
  export type AutocompleteRenderOptionProps<OPTION> = {
6
6
  option: OPTION;
@@ -32,7 +32,7 @@ type AutocompleteOpenUncontrolledProps = {
32
32
  defaultOpen?: boolean;
33
33
  };
34
34
  type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
35
- type AutocompleteDataListProps = Partial<Omit<DataListBaseProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
35
+ type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
36
36
  export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
37
37
  /** Список вариантов выбора (опции) */
38
38
  options: OPTION[];
package/__inner__/cjs/components/DataList/DataList.js CHANGED
@@ -5,7 +5,6 @@ var tslib_1 = require("tslib");
5
5
  require("./DataList.css");
6
6
  var react_1 = tslib_1.__importStar(require("react"));
7
7
  var react_is_1 = require("react-is");
8
- var useBoolean_1 = require("../../hooks/useBoolean");
9
8
  var useControlled_1 = require("../../hooks/useControlled");
10
9
  var useEventListener_1 = require("../../hooks/useEventListener");
11
10
  var useMultiRef_1 = require("../../hooks/useMultiRef");
@@ -13,6 +12,7 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
13
12
  var classname_1 = require("../../utils/classname");
14
13
  var isKey_1 = require("../../utils/isKey");
15
14
  var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
15
+ var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
16
16
  var List_1 = require("../List");
17
17
  var Popover_1 = require("../Popover");
18
18
  var constants_1 = require("./constants");
@@ -20,17 +20,15 @@ var helpers_1 = require("./helpers");
20
20
  var index_1 = require("./index");
21
21
  exports.cnDataList = (0, classname_1.cn)('DataList');
22
22
  var DataListRender = function (inProps, ref) {
23
- var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
23
+ var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
24
24
  var dataListRef = (0, react_1.useRef)(null);
25
25
  var listRef = (0, react_1.useRef)(null);
26
- // Состояние представленного компонента с завершенной анимацией
27
- var _e = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
28
- var _g = tslib_1.__read((0, useControlled_1.useControlled)({
26
+ var _e = tslib_1.__read((0, useControlled_1.useControlled)({
29
27
  name: 'DataList',
30
28
  defaultValue: defaultSelected,
31
29
  value: selectedProp,
32
30
  state: 'selected',
33
- }), 2), selectedState = _g[0], setSelected = _g[1];
31
+ }), 2), selectedState = _e[0], setSelected = _e[1];
34
32
  var nodes = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
35
33
  var items = (0, react_1.useMemo)(function () { return new Array(); }, [children]);
36
34
  var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -70,29 +68,34 @@ var DataListRender = function (inProps, ref) {
70
68
  setSelected_2(value);
71
69
  }
72
70
  };
71
+ var handleOnMouseDownList = function (e) {
72
+ var _a;
73
+ e.preventDefault();
74
+ (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
75
+ };
73
76
  // Навигация по списку
74
- var _h = (0, helpers_1.useDataListNavigation)({
75
- active: opened,
77
+ var _f = (0, helpers_1.useDataListNavigation)({
78
+ active: open,
76
79
  items: items,
77
80
  selected: (0, helpers_1.lastSelectedValue)(selectedState),
78
81
  onSelect: function (event, item) {
79
82
  handleSelect(event, item || '');
80
83
  },
81
- }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
82
- var _j = tslib_1.__read((0, react_1.useState)({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
84
+ }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
83
85
  (0, react_1.useEffect)(function () {
84
86
  var _a, _b;
85
87
  var selected = focused || current || '';
86
88
  // Находит элемент по ключу
87
89
  var idx = nodes.get(selected);
88
90
  if (idx !== undefined) {
89
- setSelectedElRef({
90
- current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
91
+ // Прокрутка списка
92
+ (0, scrollContainerToElement_1.scrollContainerToElement)({
93
+ container: dataListRef.current,
94
+ element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
95
+ behavior: focused ? 'smooth' : 'instant',
91
96
  });
92
97
  }
93
98
  }, [focused, current]);
94
- // Прокрутка списка
95
- (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
96
99
  // Назначает элементу контроля событие управления списком с клавиатуры
97
100
  (0, useEventListener_1.useEventListener)({
98
101
  eventName: 'keydown',
@@ -136,17 +139,7 @@ var DataListRender = function (inProps, ref) {
136
139
  }, [resolvedChildren, selectedState, focused, onClick]);
137
140
  return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
138
141
  classNames: 'DataList-animation',
139
- } }, other, { onEntered: function () {
140
- onEntered();
141
- onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
142
- }, onExited: function () {
143
- onExited();
144
- onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
145
- }, ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
146
- react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
147
- var _a;
148
- e.preventDefault();
149
- (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
150
- }, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
142
+ } }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
143
+ react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
151
144
  };
152
145
  exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);
package/__inner__/esm/components/Autocomplete/helper.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
30
30
  searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
31
31
  disableShowEmptyOptionsList?: boolean | undefined;
32
32
  disableShowChevron?: boolean | undefined;
33
- dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
33
+ dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
34
34
  } & {
35
35
  label?: string | undefined;
36
36
  style?: import("react").CSSProperties | undefined;
@@ -110,7 +110,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
110
110
  searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
111
111
  disableShowEmptyOptionsList?: boolean | undefined;
112
112
  disableShowChevron?: boolean | undefined;
113
- dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
113
+ dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
114
114
  } & {
115
115
  label?: string | undefined;
116
116
  style?: import("react").CSSProperties | undefined;
package/__inner__/esm/components/Autocomplete/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
2
2
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
- import type { DataListBaseProps } from '../DataList';
3
+ import type { DataListProps } from '../DataList';
4
4
  import type { InputProps } from '../Input';
5
5
  export type AutocompleteRenderOptionProps<OPTION> = {
6
6
  option: OPTION;
@@ -32,7 +32,7 @@ type AutocompleteOpenUncontrolledProps = {
32
32
  defaultOpen?: boolean;
33
33
  };
34
34
  type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
35
- type AutocompleteDataListProps = Partial<Omit<DataListBaseProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
35
+ type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
36
36
  export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
37
37
  /** Список вариантов выбора (опции) */
38
38
  options: OPTION[];
package/__inner__/esm/components/DataList/DataList.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { __assign, __read, __rest, __spreadArray } from "tslib";
2
2
  import './DataList.css';
3
- import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, useState, } from 'react';
3
+ import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, } from 'react';
4
4
  import { isFragment } from 'react-is';
5
- import { useBoolean } from '../../hooks/useBoolean';
6
5
  import { useControlled } from '../../hooks/useControlled';
7
6
  import { useEventListener } from '../../hooks/useEventListener';
8
7
  import { useMultiRef } from '../../hooks/useMultiRef';
@@ -10,24 +9,23 @@ import { useThemeProps } from '../../hooks/useThemeProps';
10
9
  import { cn } from '../../utils/classname';
11
10
  import { isKey } from '../../utils/isKey';
12
11
  import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
12
+ import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
13
13
  import { List } from '../List';
14
14
  import { Popover } from '../Popover';
15
15
  import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
16
- import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, useScrollContainerToElement, } from './helpers';
16
+ import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, } from './helpers';
17
17
  import { DataListOption } from './index';
18
18
  export var cnDataList = cn('DataList');
19
19
  var DataListRender = function (inProps, ref) {
20
- var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
20
+ var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
21
21
  var dataListRef = useRef(null);
22
22
  var listRef = useRef(null);
23
- // Состояние представленного компонента с завершенной анимацией
24
- var _e = __read(useBoolean(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
25
- var _g = __read(useControlled({
23
+ var _e = __read(useControlled({
26
24
  name: 'DataList',
27
25
  defaultValue: defaultSelected,
28
26
  value: selectedProp,
29
27
  state: 'selected',
30
- }), 2), selectedState = _g[0], setSelected = _g[1];
28
+ }), 2), selectedState = _e[0], setSelected = _e[1];
31
29
  var nodes = useMemo(function () { return new Map(); }, [children]);
32
30
  var items = useMemo(function () { return new Array(); }, [children]);
33
31
  var resolvedChildren = isFragment(children)
@@ -67,29 +65,34 @@ var DataListRender = function (inProps, ref) {
67
65
  setSelected_2(value);
68
66
  }
69
67
  };
68
+ var handleOnMouseDownList = function (e) {
69
+ var _a;
70
+ e.preventDefault();
71
+ (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
72
+ };
70
73
  // Навигация по списку
71
- var _h = useDataListNavigation({
72
- active: opened,
74
+ var _f = useDataListNavigation({
75
+ active: open,
73
76
  items: items,
74
77
  selected: lastSelectedValue(selectedState),
75
78
  onSelect: function (event, item) {
76
79
  handleSelect(event, item || '');
77
80
  },
78
- }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
79
- var _j = __read(useState({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
81
+ }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
80
82
  useEffect(function () {
81
83
  var _a, _b;
82
84
  var selected = focused || current || '';
83
85
  // Находит элемент по ключу
84
86
  var idx = nodes.get(selected);
85
87
  if (idx !== undefined) {
86
- setSelectedElRef({
87
- current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
88
+ // Прокрутка списка
89
+ scrollContainerToElement({
90
+ container: dataListRef.current,
91
+ element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
92
+ behavior: focused ? 'smooth' : 'instant',
88
93
  });
89
94
  }
90
95
  }, [focused, current]);
91
- // Прокрутка списка
92
- useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
93
96
  // Назначает элементу контроля событие управления списком с клавиатуры
94
97
  useEventListener({
95
98
  eventName: 'keydown',
@@ -133,17 +136,7 @@ var DataListRender = function (inProps, ref) {
133
136
  }, [resolvedChildren, selectedState, focused, onClick]);
134
137
  return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
135
138
  classNames: 'DataList-animation',
136
- } }, other, { onEntered: function () {
137
- onEntered();
138
- onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
139
- }, onExited: function () {
140
- onExited();
141
- onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
142
- }, ref: useMultiRef([ref, dataListRef]) }),
143
- React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
144
- var _a;
145
- e.preventDefault();
146
- (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
147
- }, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
139
+ } }, other, { ref: useMultiRef([ref, dataListRef]) }),
140
+ React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
148
141
  };
149
142
  export var DataList = polymorphicComponentWithRef(DataListRender);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.34.0",
3
+ "version": "0.34.1",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"