@ozen-ui/kit 0.29.1 → 0.30.0

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 (18) hide show
  1. package/Autocomplete/package.json +5 -0
  2. package/__inner__/cjs/components/DataList/DataList.js +0 -1
  3. package/__inner__/cjs/components/DataList/helpers/useDataListNavigation.js +52 -49
  4. package/__inner__/cjs/components/DataList/types.d.ts +2 -2
  5. package/__inner__/cjs/components/FieldInput/FieldInput.js +1 -1
  6. package/__inner__/cjs/components/InputNumber/InputNumber.css +58 -118
  7. package/__inner__/cjs/components/InputNumber/InputNumber.js +18 -25
  8. package/__inner__/cjs/components/InputNumber/types.d.ts +9 -3
  9. package/__inner__/esm/components/DataList/DataList.js +0 -1
  10. package/__inner__/esm/components/DataList/helpers/useDataListNavigation.js +52 -49
  11. package/__inner__/esm/components/DataList/types.d.ts +2 -2
  12. package/__inner__/esm/components/FieldInput/FieldInput.js +1 -1
  13. package/__inner__/esm/components/InputNumber/InputNumber.css +58 -118
  14. package/__inner__/esm/components/InputNumber/InputNumber.js +18 -25
  15. package/__inner__/esm/components/InputNumber/types.d.ts +9 -3
  16. package/package.json +1 -1
  17. package/Calendar/package.json +0 -5
  18. package/DatePicker/package.json +0 -5
package/Autocomplete/package.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "main": "../__inner__/cjs/components/Autocomplete/index.js",
3
+ "module": "../__inner__/esm/components/Autocomplete/index.js",
4
+ "types": "../__inner__/esm/components/Autocomplete/index.d.ts"
5
+ }
package/__inner__/cjs/components/DataList/DataList.js CHANGED
@@ -91,7 +91,6 @@ var DataListRender = function (inProps, ref) {
91
91
  (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
92
92
  // Назначает элементу контроля событие управления списком с клавиатуры
93
93
  (0, useEventListener_1.useEventListener)({
94
- active: opened,
95
94
  eventName: 'keydown',
96
95
  element: anchorRef,
97
96
  handler: function (event) {
package/__inner__/cjs/components/DataList/helpers/useDataListNavigation.js CHANGED
@@ -21,65 +21,68 @@ function useDataListNavigation(_a) {
21
21
  var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
22
22
  // Актуализирует состояние при каждом изменении текущего значения
23
23
  (0, react_1.useEffect)(function () {
24
- if (active) {
25
- setState(function (prevState) {
26
- var _a, _b, _c;
27
- return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
28
- });
24
+ var _a, _b, _c;
25
+ if (!active) {
26
+ return;
29
27
  }
28
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: (_a = findInItems(state.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
30
29
  }, [active, current]);
30
+ var onMouseLeave = function () {
31
+ if (!active) {
32
+ return;
33
+ }
34
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: null }));
35
+ };
36
+ var onMouseEnter = function (item) {
37
+ if (!active) {
38
+ return;
39
+ }
40
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: item }));
41
+ };
42
+ var onClick = function (event, item) {
43
+ var _a;
44
+ if (!active) {
45
+ return;
46
+ }
47
+ var focused = item === state.focused ? item : null;
48
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: focused, selected: item }));
49
+ (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
50
+ };
51
+ var onKeyDown = function (event) {
52
+ var _a, _b, _c, _d, _e, _f, _g;
53
+ if (!active) {
54
+ return;
55
+ }
56
+ if ((0, isKey_1.isKey)(event, 'Enter')) {
57
+ event.preventDefault();
58
+ var selected_1 = (_a = state.focused) !== null && _a !== void 0 ? _a : state.selected;
59
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { selected: selected_1, focused: selected_1 }));
60
+ (_b = savedOnSelect.current) === null || _b === void 0 ? void 0 : _b.call(savedOnSelect, event, selected_1);
61
+ }
62
+ if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
63
+ return;
64
+ }
65
+ event.preventDefault();
66
+ var selected = (_c = state.focused) !== null && _c !== void 0 ? _c : state.selected;
67
+ var currentIndex = typeof selected !== 'undefined'
68
+ ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(selected)
69
+ : null;
70
+ var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
71
+ var newIndex = isArrowUp
72
+ ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
73
+ : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
74
+ var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
75
+ setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: newItem }));
76
+ };
31
77
  (0, react_1.useEffect)(function () {
32
78
  if (!active) {
33
79
  return undefined;
34
80
  }
35
- // Инициализация всех событий
36
- var onMouseLeave = function () {
37
- setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: null })); });
38
- };
39
- var onMouseEnter = function (item) {
40
- setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: item })); });
41
- };
42
- var onClick = function (event, item) {
43
- var _a;
44
- setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: item === prevState.focused ? item : null, selected: item })); });
45
- (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
46
- };
47
- var onKeyDown = function (event) {
48
- var _a;
49
- if ((0, isKey_1.isKey)(event, 'Enter')) {
50
- event.preventDefault();
51
- var selected_1;
52
- setState(function (prevState) {
53
- var _a;
54
- selected_1 = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
55
- return tslib_1.__assign(tslib_1.__assign({}, prevState), { selected: selected_1, focused: selected_1 });
56
- });
57
- (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
58
- }
59
- if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
60
- return;
61
- }
62
- event.preventDefault();
63
- setState(function (prevState) {
64
- var _a, _b, _c, _d, _e;
65
- var selected = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
66
- var currentIndex = typeof selected !== 'undefined'
67
- ? (_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.indexOf(selected)
68
- : null;
69
- var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
70
- var newIndex = isArrowUp
71
- ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
72
- : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.length) || 0);
73
- var newItem = (_e = savedItems.current) === null || _e === void 0 ? void 0 : _e[newIndex];
74
- return tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: newItem });
75
- });
76
- };
77
- setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
78
81
  return function () {
79
82
  // Сброс
80
83
  setState({});
81
84
  };
82
85
  }, [active]);
83
- return state;
86
+ return tslib_1.__assign(tslib_1.__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave });
84
87
  }
85
88
  exports.useDataListNavigation = useDataListNavigation;
package/__inner__/cjs/components/DataList/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactNode, ElementType } from 'react';
1
+ import type { ReactNode, ElementType, SyntheticEvent } from 'react';
2
2
  import type React from 'react';
3
3
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
4
  import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
@@ -11,7 +11,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
11
11
  name?: string;
12
12
  value: DataListSelected<MULTIPLE>;
13
13
  };
14
- export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
14
+ export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
15
15
  export type DataListBaseProps<MULTIPLE extends boolean = false> = {
16
16
  /** Имя списка */
17
17
  name?: string;
package/__inner__/cjs/components/FieldInput/FieldInput.js CHANGED
@@ -50,6 +50,6 @@ exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
50
50
  setFocused(false);
51
51
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
52
52
  }, [onBlur]);
53
- return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
53
+ return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, value: valueState }, other, { ref: ref }), children));
54
54
  });
55
55
  exports.FieldInput.displayName = 'FieldInput';
package/__inner__/cjs/components/InputNumber/InputNumber.css CHANGED
@@ -1,159 +1,99 @@
1
- /* stylelint-disable */
2
1
  .InputNumber {
3
- --textfield-color: var(--color-content-primary);
4
- --textfield-background-color: var(--color-background-primary);
5
- --textfield-border-width: var(--border-width-s);
6
- --textfield-border-color: var(--color-border-main);
7
- font: var(--textfield-input-font);
8
- cursor: text;
9
- display: inline-flex;
10
- vertical-align: top;
11
- flex-direction: column;
2
+ --input-number-padding: 0 var(--control-padding-3xs) 0
3
+ var(--textfield-gutter-x);
12
4
  }
13
- .InputNumber > * {
14
- cursor: text;
15
- }
16
- .InputNumber-Body {
17
- position: relative;
5
+
6
+ .InputNumber_size_2xs {
7
+ --input-number-button-block-size: 16px;
8
+ --input-number-button-inline-size: 24px;
9
+ }
10
+
11
+ .InputNumber_size_xs {
12
+ --input-number-button-block-size: 16px;
13
+ --input-number-button-inline-size: 28px;
14
+ }
15
+
16
+ .InputNumber_size_s {
17
+ --input-number-button-block-size: 20px;
18
+ --input-number-button-inline-size: 32px;
19
+ }
20
+
21
+ .InputNumber_size_m {
22
+ --input-number-button-block-size: 24px;
23
+ --input-number-button-inline-size: 40px;
24
+ }
25
+
26
+ .InputNumber_size_l {
27
+ --input-number-button-block-size: 28px;
28
+ --input-number-button-inline-size: 48px;
29
+ }
30
+
31
+ .InputNumber-Body {
18
32
  display: flex;
19
- -moz-column-gap: var(--textfield-input-gap);
20
- column-gap: var(--textfield-input-gap);
33
+ position: relative;
21
34
  align-items: center;
22
35
  box-sizing: border-box;
23
- padding: 0 4px 0 var(--textfield-gutter-x);
24
- background-color: var(--textfield-background-color);
25
- transition: background-color var(--transition-slow);
26
36
  color: var(--textfield-color);
37
+ -moz-column-gap: var(--textfield-input-gap);
38
+ column-gap: var(--textfield-input-gap);
27
39
  border-radius: var(--border-radius-xs);
40
+ padding: var(--input-number-padding);
41
+ background-color: var(--textfield-background-color);
42
+ transition: background-color var(--transition-slow);
28
43
  }
29
- .InputNumber-FieldContainer {
44
+
45
+ .InputNumber-FieldContainer {
30
46
  inline-size: 100%;
31
47
  position: relative;
32
48
  }
33
- .InputNumber-Field {
49
+
50
+ .InputNumber-Field {
34
51
  border: none;
35
52
  outline: none;
36
53
  display: flex;
54
+ font: inherit;
55
+ background: none;
56
+ inline-size: 100%;
57
+ box-sizing: border-box;
37
58
  -webkit-appearance: textfield;
38
59
  -moz-appearance: textfield;
39
60
  appearance: textfield;
40
- inline-size: 100%;
41
- padding: 0;
42
- background: none;
43
61
  color: var(--textfield-color);
44
- box-sizing: border-box;
62
+ padding: var(--textfield-input-padding);
45
63
  block-size: var(--textfield-input-height);
46
- font: inherit;
47
64
  }
48
- .InputNumber-Field::placeholder {
65
+
66
+ .InputNumber-Field::placeholder {
49
67
  opacity: 1;
50
68
  color: var(--color-content-tertiary);
51
69
  }
52
- .InputNumber-Field:-webkit-autofill,
70
+
71
+ .InputNumber-Field:-webkit-autofill,
53
72
  .InputNumber-Field:-webkit-autofill:hover,
54
73
  .InputNumber-Field:-webkit-autofill:focus {
55
- box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
56
74
  background-color: transparent !important;
57
75
  -webkit-text-fill-color: var(--color-content-info-dark);
76
+ box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
58
77
  }
59
- .InputNumber-Field::-webkit-outer-spin-button,
78
+
79
+ .InputNumber-Field::-webkit-outer-spin-button,
60
80
  .InputNumber-Field::-webkit-inner-spin-button {
81
+ margin: 0;
61
82
  -webkit-appearance: none;
62
83
  appearance: none;
63
- margin: 0;
64
84
  }
65
- .InputNumber-Controls {
85
+
86
+ .InputNumber-Controls {
66
87
  display: flex;
67
88
  flex-direction: column;
68
89
  }
69
- .InputNumber_size_2xs {
70
- --textfield-gutter-x: 12px;
71
- --textfield-input-height: 40px;
72
- --textfield-input-padding: 4px 0 4px;
73
- --textfield-input-font: var(--typography-text-2xs-font);
74
- --textfield-input-gap: var(--space-s);
75
- --textfield-button-width: 24px;
76
- --textfield-button-height: 16px;
77
- }
78
- .InputNumber_size_2xs .FieldLabel_size_2xs {
79
- --field-label-top: 12px;
80
- }
81
- .InputNumber_size_xs {
82
- --textfield-gutter-x: 12px;
83
- --textfield-input-height: 40px;
84
- --textfield-input-font: var(--typography-text-xs-font);
85
- --textfield-input-padding: 19px 0 4px;
86
- --textfield-input-gap: var(--space-s);
87
- --textfield-button-width: 28px;
88
- --textfield-button-height: 16px;
89
- }
90
- .InputNumber_size_s {
91
- --textfield-gutter-x: 16px;
92
- --textfield-input-height: 48px;
93
- --textfield-input-font: var(--typography-text-s-font);
94
- --textfield-input-padding: 21px 0 6px;
95
- --textfield-input-gap: var(--space-m);
96
- --textfield-button-width: 32px;
97
- --textfield-button-height: 20px;
98
- }
99
- .InputNumber_size_m {
100
- --textfield-gutter-x: 20px;
101
- --textfield-input-height: 56px;
102
- --textfield-input-font: var(--typography-text-m-font);
103
- --textfield-input-padding: 24px 0 6px;
104
- --textfield-input-gap: var(--space-m);
105
- --textfield-button-width: 40px;
106
- --textfield-button-height: 24px;
107
- }
108
- .InputNumber_size_l {
109
- --textfield-gutter-x: 24px;
110
- --textfield-input-height: 64px;
111
- --textfield-input-font: var(--typography-text-l-font);
112
- --textfield-input-padding: 26px 0 6px;
113
- --textfield-input-gap: var(--space-l);
114
- --textfield-button-width: 48px;
115
- --textfield-button-height: 28px;
116
- }
117
- .InputNumber_fullWidth {
118
- inline-size: 100%;
119
- }
120
- .InputNumber_hasLabel .InputNumber-Field {
121
- padding: var(--textfield-input-padding);
122
- font: var(--textfield-input-font);
123
- }
124
- .InputNumber_hasLabel .InputNumber-Field::placeholder {
125
- opacity: 0;
126
- }
127
- .InputNumber_hasLabel .InputNumber-Field:focus::placeholder {
128
- opacity: 1;
129
- }
130
- .InputNumber:hover {
131
- --textfield-border-color: var(--color-border-main-hover);
132
- }
133
- .InputNumber_focused,
134
- .InputNumber_focused:hover {
135
- --textfield-border-width: var(--border-width-m);
136
- --textfield-background-color: var(--color-background-main);
137
- --textfield-border-color: var(--color-border-action);
138
- }
139
- .InputNumber_error,
140
- .InputNumber_error.InputNumber:hover,
141
- .InputNumber_error.InputNumber_focused,
142
- .InputNumber_error.InputNumber_focused:hover {
143
- --textfield-border-color: var(--color-border-error);
144
- }
145
- .InputNumber_disabled {
146
- --textfield-border-color: var(--color-border-disabled);
147
- --textfield-background-color: var(--color-background-disabled);
148
- --textfield-color: var(--color-content-secondary);
149
- pointer-events: none;
150
- cursor: default;
151
- }
90
+
152
91
  .IconButton.InputNumber-Increment,
153
92
  .IconButton.InputNumber-Decrement {
154
- inline-size: var(--textfield-button-width);
155
- block-size: var(--textfield-button-height);
93
+ inline-size: var(--input-number-button-inline-size);
94
+ block-size: var(--input-number-button-block-size);
156
95
  }
96
+
157
97
  .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
158
98
  pointer-events: none;
159
99
  }
package/__inner__/cjs/components/InputNumber/InputNumber.js CHANGED
@@ -5,14 +5,17 @@ var tslib_1 = require("tslib");
5
5
  require("./InputNumber.css");
6
6
  var react_1 = tslib_1.__importStar(require("react"));
7
7
  var icons_1 = require("@ozen-ui/icons");
8
+ var useBoolean_1 = require("../../hooks/useBoolean");
8
9
  var useControlled_1 = require("../../hooks/useControlled");
9
10
  var useEventListener_1 = require("../../hooks/useEventListener");
10
11
  var useInterval_1 = require("../../hooks/useInterval");
11
12
  var useMultiRef_1 = require("../../hooks/useMultiRef");
12
13
  var useThemeProps_1 = require("../../hooks/useThemeProps");
13
14
  var classname_1 = require("../../utils/classname");
15
+ var FieldControl_1 = require("../FieldControl");
14
16
  var FieldHint_1 = require("../FieldHint");
15
17
  var FieldIcon_1 = require("../FieldIcon");
18
+ var FieldInput_1 = require("../FieldInput");
16
19
  var FieldLabel_1 = require("../FieldLabel");
17
20
  var Fieldset_1 = require("../Fieldset");
18
21
  var IconButton_1 = require("../IconButton");
@@ -25,15 +28,15 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
25
28
  name: 'InputNumber',
26
29
  });
27
30
  var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps"]);
28
- var _l = tslib_1.__read((0, react_1.useState)(false), 2), focused = _l[0], setFocused = _l[1];
29
- var _m = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
30
- var _o = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _o[0], setCountDirection = _o[1];
31
- var _p = tslib_1.__read((0, useControlled_1.useControlled)({
31
+ var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
32
+ var _o = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
33
+ var _p = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _p[0], setCountDirection = _p[1];
34
+ var _q = tslib_1.__read((0, useControlled_1.useControlled)({
32
35
  value: valueProp,
33
36
  name: 'InputNumber',
34
37
  state: 'value',
35
38
  defaultValue: defaultValue,
36
- }), 2), valueState = _p[0], setValueState = _p[1];
39
+ }), 2), valueState = _q[0], setValueState = _q[1];
37
40
  var bodyInnerRef = (0, react_1.useRef)(null);
38
41
  var fieldInnerRef = (0, react_1.useRef)(null);
39
42
  var filled = (0, utils_1.isValidValue)(valueState);
@@ -74,12 +77,12 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
74
77
  };
75
78
  var handleFocus = function (event) {
76
79
  var _a;
77
- setFocused(true);
80
+ onFocus();
78
81
  (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
79
82
  };
80
83
  var handleBlur = function (event) {
81
84
  var _a;
82
- setFocused(false);
85
+ offFocus();
83
86
  (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
84
87
  };
85
88
  /* В некоторых браузерах input[type=number] позволяет вводить
@@ -126,27 +129,17 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
126
129
  onChange === null || onChange === void 0 ? void 0 : onChange(null, { id: id, name: name, value: value });
127
130
  }
128
131
  }, countDirection ? 100 : null);
129
- return (react_1.default.createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnInputNumber)({
130
- fullWidth: fullWidth,
131
- size: size,
132
- error: error,
133
- disabled: disabled,
134
- required: required,
135
- hasLabel: !!label,
136
- focused: focused,
137
- }, [className]) }),
132
+ return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInputNumber)({ size: size }, [className]) }),
138
133
  react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInputNumber)('Body'), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
139
- react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderLeft'), icon: renderLeft, size: size }),
134
+ react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
140
135
  react_1.default.createElement("div", { className: (0, exports.cnInputNumber)('FieldContainer') },
141
- react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label),
142
- react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueState, required: required, placeholder: placeholder, className: (0, exports.cnInputNumber)('Field', { filled: filled }, [
143
- inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
144
- ]), min: min, max: max, step: step }, inputProps, { type: "number", onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]) }))),
145
- react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderRight'), icon: renderRight, size: size }),
136
+ react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: (0, useMultiRef_1.useMultiRef)([labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref, labelRef]), className: (0, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
137
+ react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: (0, exports.cnInputNumber)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
138
+ react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
146
139
  react_1.default.createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
147
- react_1.default.createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, className: (0, exports.cnInputNumber)('Increment'), icon: icons_1.SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", type: "button", variant: "ghost" }),
148
- react_1.default.createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, icon: icons_1.SortDownIcon, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", type: "button", variant: "ghost" })),
140
+ react_1.default.createElement(IconButton_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": "increment", className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
141
+ react_1.default.createElement(IconButton_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": "decrement", className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
149
142
  react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
150
- react_1.default.createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
143
+ react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
151
144
  });
152
145
  exports.InputNumber.displayName = 'InputNumber';
package/__inner__/cjs/components/InputNumber/types.d.ts CHANGED
@@ -2,6 +2,13 @@ import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEven
2
2
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
3
  import type { FieldIconProps } from '../FieldIcon';
4
4
  import type { FieldLabelProps } from '../FieldLabel';
5
+ type InputNumberPropsDeprecated = {
6
+ /**
7
+ * Ссылка на FieldLabel
8
+ * @deprecated Используйте labelProps.ref
9
+ * */
10
+ labelRef?: FieldLabelProps['ref'];
11
+ };
5
12
  export type InputNumberSizeVariant = FormElementSizeVariant;
6
13
  export type InputElement = ComponentPropsWithRef<'input'>;
7
14
  export type InputNumberEmptyValue = '';
@@ -48,8 +55,6 @@ export type InputNumberProps = {
48
55
  inputProps?: InputElement & {
49
56
  'data-testid'?: string;
50
57
  };
51
- /** Ссылка на FieldLabel */
52
- labelRef?: FieldLabelProps['ref'];
53
58
  /** Свойства FieldLabel */
54
59
  labelProps?: FieldLabelProps;
55
60
  /** Cвойства Body */
@@ -63,4 +68,5 @@ export type InputNumberProps = {
63
68
  /** Ссылка на корневой DOM-элемент компонента */
64
69
  ref?: Ref<HTMLDivElement>;
65
70
  'data-testid'?: string;
66
- } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
71
+ } & InputNumberPropsDeprecated & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
72
+ export {};
package/__inner__/esm/components/DataList/DataList.js CHANGED
@@ -88,7 +88,6 @@ var DataListRender = function (inProps, ref) {
88
88
  useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
89
89
  // Назначает элементу контроля событие управления списком с клавиатуры
90
90
  useEventListener({
91
- active: opened,
92
91
  eventName: 'keydown',
93
92
  element: anchorRef,
94
93
  handler: function (event) {
package/__inner__/esm/components/DataList/helpers/useDataListNavigation.js CHANGED
@@ -18,64 +18,67 @@ export function useDataListNavigation(_a) {
18
18
  var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
19
19
  // Актуализирует состояние при каждом изменении текущего значения
20
20
  useEffect(function () {
21
- if (active) {
22
- setState(function (prevState) {
23
- var _a, _b, _c;
24
- return (__assign(__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
25
- });
21
+ var _a, _b, _c;
22
+ if (!active) {
23
+ return;
26
24
  }
25
+ setState(__assign(__assign({}, state), { focused: (_a = findInItems(state.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
27
26
  }, [active, current]);
27
+ var onMouseLeave = function () {
28
+ if (!active) {
29
+ return;
30
+ }
31
+ setState(__assign(__assign({}, state), { highlighted: null }));
32
+ };
33
+ var onMouseEnter = function (item) {
34
+ if (!active) {
35
+ return;
36
+ }
37
+ setState(__assign(__assign({}, state), { highlighted: item }));
38
+ };
39
+ var onClick = function (event, item) {
40
+ var _a;
41
+ if (!active) {
42
+ return;
43
+ }
44
+ var focused = item === state.focused ? item : null;
45
+ setState(__assign(__assign({}, state), { focused: focused, selected: item }));
46
+ (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
47
+ };
48
+ var onKeyDown = function (event) {
49
+ var _a, _b, _c, _d, _e, _f, _g;
50
+ if (!active) {
51
+ return;
52
+ }
53
+ if (isKey(event, 'Enter')) {
54
+ event.preventDefault();
55
+ var selected_1 = (_a = state.focused) !== null && _a !== void 0 ? _a : state.selected;
56
+ setState(__assign(__assign({}, state), { selected: selected_1, focused: selected_1 }));
57
+ (_b = savedOnSelect.current) === null || _b === void 0 ? void 0 : _b.call(savedOnSelect, event, selected_1);
58
+ }
59
+ if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
60
+ return;
61
+ }
62
+ event.preventDefault();
63
+ var selected = (_c = state.focused) !== null && _c !== void 0 ? _c : state.selected;
64
+ var currentIndex = typeof selected !== 'undefined'
65
+ ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(selected)
66
+ : null;
67
+ var isArrowUp = isKey(event, 'ArrowUp');
68
+ var newIndex = isArrowUp
69
+ ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
70
+ : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
71
+ var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
72
+ setState(__assign(__assign({}, state), { focused: newItem }));
73
+ };
28
74
  useEffect(function () {
29
75
  if (!active) {
30
76
  return undefined;
31
77
  }
32
- // Инициализация всех событий
33
- var onMouseLeave = function () {
34
- setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: null })); });
35
- };
36
- var onMouseEnter = function (item) {
37
- setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: item })); });
38
- };
39
- var onClick = function (event, item) {
40
- var _a;
41
- setState(function (prevState) { return (__assign(__assign({}, prevState), { focused: item === prevState.focused ? item : null, selected: item })); });
42
- (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
43
- };
44
- var onKeyDown = function (event) {
45
- var _a;
46
- if (isKey(event, 'Enter')) {
47
- event.preventDefault();
48
- var selected_1;
49
- setState(function (prevState) {
50
- var _a;
51
- selected_1 = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
52
- return __assign(__assign({}, prevState), { selected: selected_1, focused: selected_1 });
53
- });
54
- (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
55
- }
56
- if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
57
- return;
58
- }
59
- event.preventDefault();
60
- setState(function (prevState) {
61
- var _a, _b, _c, _d, _e;
62
- var selected = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
63
- var currentIndex = typeof selected !== 'undefined'
64
- ? (_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.indexOf(selected)
65
- : null;
66
- var isArrowUp = isKey(event, 'ArrowUp');
67
- var newIndex = isArrowUp
68
- ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
69
- : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.length) || 0);
70
- var newItem = (_e = savedItems.current) === null || _e === void 0 ? void 0 : _e[newIndex];
71
- return __assign(__assign({}, prevState), { focused: newItem });
72
- });
73
- };
74
- setState(function (prevState) { return (__assign(__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
75
78
  return function () {
76
79
  // Сброс
77
80
  setState({});
78
81
  };
79
82
  }, [active]);
80
- return state;
83
+ return __assign(__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave });
81
84
  }
package/__inner__/esm/components/DataList/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactNode, ElementType } from 'react';
1
+ import type { ReactNode, ElementType, SyntheticEvent } from 'react';
2
2
  import type React from 'react';
3
3
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
4
  import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
@@ -11,7 +11,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
11
11
  name?: string;
12
12
  value: DataListSelected<MULTIPLE>;
13
13
  };
14
- export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
14
+ export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
15
15
  export type DataListBaseProps<MULTIPLE extends boolean = false> = {
16
16
  /** Имя списка */
17
17
  name?: string;
package/__inner__/esm/components/FieldInput/FieldInput.js CHANGED
@@ -47,6 +47,6 @@ export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
47
47
  setFocused(false);
48
48
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
49
49
  }, [onBlur]);
50
- return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
50
+ return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, value: valueState }, other, { ref: ref }), children));
51
51
  });
52
52
  FieldInput.displayName = 'FieldInput';
package/__inner__/esm/components/InputNumber/InputNumber.css CHANGED
@@ -1,159 +1,99 @@
1
- /* stylelint-disable */
2
1
  .InputNumber {
3
- --textfield-color: var(--color-content-primary);
4
- --textfield-background-color: var(--color-background-primary);
5
- --textfield-border-width: var(--border-width-s);
6
- --textfield-border-color: var(--color-border-main);
7
- font: var(--textfield-input-font);
8
- cursor: text;
9
- display: inline-flex;
10
- vertical-align: top;
11
- flex-direction: column;
2
+ --input-number-padding: 0 var(--control-padding-3xs) 0
3
+ var(--textfield-gutter-x);
12
4
  }
13
- .InputNumber > * {
14
- cursor: text;
15
- }
16
- .InputNumber-Body {
17
- position: relative;
5
+
6
+ .InputNumber_size_2xs {
7
+ --input-number-button-block-size: 16px;
8
+ --input-number-button-inline-size: 24px;
9
+ }
10
+
11
+ .InputNumber_size_xs {
12
+ --input-number-button-block-size: 16px;
13
+ --input-number-button-inline-size: 28px;
14
+ }
15
+
16
+ .InputNumber_size_s {
17
+ --input-number-button-block-size: 20px;
18
+ --input-number-button-inline-size: 32px;
19
+ }
20
+
21
+ .InputNumber_size_m {
22
+ --input-number-button-block-size: 24px;
23
+ --input-number-button-inline-size: 40px;
24
+ }
25
+
26
+ .InputNumber_size_l {
27
+ --input-number-button-block-size: 28px;
28
+ --input-number-button-inline-size: 48px;
29
+ }
30
+
31
+ .InputNumber-Body {
18
32
  display: flex;
19
- -moz-column-gap: var(--textfield-input-gap);
20
- column-gap: var(--textfield-input-gap);
33
+ position: relative;
21
34
  align-items: center;
22
35
  box-sizing: border-box;
23
- padding: 0 4px 0 var(--textfield-gutter-x);
24
- background-color: var(--textfield-background-color);
25
- transition: background-color var(--transition-slow);
26
36
  color: var(--textfield-color);
37
+ -moz-column-gap: var(--textfield-input-gap);
38
+ column-gap: var(--textfield-input-gap);
27
39
  border-radius: var(--border-radius-xs);
40
+ padding: var(--input-number-padding);
41
+ background-color: var(--textfield-background-color);
42
+ transition: background-color var(--transition-slow);
28
43
  }
29
- .InputNumber-FieldContainer {
44
+
45
+ .InputNumber-FieldContainer {
30
46
  inline-size: 100%;
31
47
  position: relative;
32
48
  }
33
- .InputNumber-Field {
49
+
50
+ .InputNumber-Field {
34
51
  border: none;
35
52
  outline: none;
36
53
  display: flex;
54
+ font: inherit;
55
+ background: none;
56
+ inline-size: 100%;
57
+ box-sizing: border-box;
37
58
  -webkit-appearance: textfield;
38
59
  -moz-appearance: textfield;
39
60
  appearance: textfield;
40
- inline-size: 100%;
41
- padding: 0;
42
- background: none;
43
61
  color: var(--textfield-color);
44
- box-sizing: border-box;
62
+ padding: var(--textfield-input-padding);
45
63
  block-size: var(--textfield-input-height);
46
- font: inherit;
47
64
  }
48
- .InputNumber-Field::placeholder {
65
+
66
+ .InputNumber-Field::placeholder {
49
67
  opacity: 1;
50
68
  color: var(--color-content-tertiary);
51
69
  }
52
- .InputNumber-Field:-webkit-autofill,
70
+
71
+ .InputNumber-Field:-webkit-autofill,
53
72
  .InputNumber-Field:-webkit-autofill:hover,
54
73
  .InputNumber-Field:-webkit-autofill:focus {
55
- box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
56
74
  background-color: transparent !important;
57
75
  -webkit-text-fill-color: var(--color-content-info-dark);
76
+ box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
58
77
  }
59
- .InputNumber-Field::-webkit-outer-spin-button,
78
+
79
+ .InputNumber-Field::-webkit-outer-spin-button,
60
80
  .InputNumber-Field::-webkit-inner-spin-button {
81
+ margin: 0;
61
82
  -webkit-appearance: none;
62
83
  appearance: none;
63
- margin: 0;
64
84
  }
65
- .InputNumber-Controls {
85
+
86
+ .InputNumber-Controls {
66
87
  display: flex;
67
88
  flex-direction: column;
68
89
  }
69
- .InputNumber_size_2xs {
70
- --textfield-gutter-x: 12px;
71
- --textfield-input-height: 40px;
72
- --textfield-input-padding: 4px 0 4px;
73
- --textfield-input-font: var(--typography-text-2xs-font);
74
- --textfield-input-gap: var(--space-s);
75
- --textfield-button-width: 24px;
76
- --textfield-button-height: 16px;
77
- }
78
- .InputNumber_size_2xs .FieldLabel_size_2xs {
79
- --field-label-top: 12px;
80
- }
81
- .InputNumber_size_xs {
82
- --textfield-gutter-x: 12px;
83
- --textfield-input-height: 40px;
84
- --textfield-input-font: var(--typography-text-xs-font);
85
- --textfield-input-padding: 19px 0 4px;
86
- --textfield-input-gap: var(--space-s);
87
- --textfield-button-width: 28px;
88
- --textfield-button-height: 16px;
89
- }
90
- .InputNumber_size_s {
91
- --textfield-gutter-x: 16px;
92
- --textfield-input-height: 48px;
93
- --textfield-input-font: var(--typography-text-s-font);
94
- --textfield-input-padding: 21px 0 6px;
95
- --textfield-input-gap: var(--space-m);
96
- --textfield-button-width: 32px;
97
- --textfield-button-height: 20px;
98
- }
99
- .InputNumber_size_m {
100
- --textfield-gutter-x: 20px;
101
- --textfield-input-height: 56px;
102
- --textfield-input-font: var(--typography-text-m-font);
103
- --textfield-input-padding: 24px 0 6px;
104
- --textfield-input-gap: var(--space-m);
105
- --textfield-button-width: 40px;
106
- --textfield-button-height: 24px;
107
- }
108
- .InputNumber_size_l {
109
- --textfield-gutter-x: 24px;
110
- --textfield-input-height: 64px;
111
- --textfield-input-font: var(--typography-text-l-font);
112
- --textfield-input-padding: 26px 0 6px;
113
- --textfield-input-gap: var(--space-l);
114
- --textfield-button-width: 48px;
115
- --textfield-button-height: 28px;
116
- }
117
- .InputNumber_fullWidth {
118
- inline-size: 100%;
119
- }
120
- .InputNumber_hasLabel .InputNumber-Field {
121
- padding: var(--textfield-input-padding);
122
- font: var(--textfield-input-font);
123
- }
124
- .InputNumber_hasLabel .InputNumber-Field::placeholder {
125
- opacity: 0;
126
- }
127
- .InputNumber_hasLabel .InputNumber-Field:focus::placeholder {
128
- opacity: 1;
129
- }
130
- .InputNumber:hover {
131
- --textfield-border-color: var(--color-border-main-hover);
132
- }
133
- .InputNumber_focused,
134
- .InputNumber_focused:hover {
135
- --textfield-border-width: var(--border-width-m);
136
- --textfield-background-color: var(--color-background-main);
137
- --textfield-border-color: var(--color-border-action);
138
- }
139
- .InputNumber_error,
140
- .InputNumber_error.InputNumber:hover,
141
- .InputNumber_error.InputNumber_focused,
142
- .InputNumber_error.InputNumber_focused:hover {
143
- --textfield-border-color: var(--color-border-error);
144
- }
145
- .InputNumber_disabled {
146
- --textfield-border-color: var(--color-border-disabled);
147
- --textfield-background-color: var(--color-background-disabled);
148
- --textfield-color: var(--color-content-secondary);
149
- pointer-events: none;
150
- cursor: default;
151
- }
90
+
152
91
  .IconButton.InputNumber-Increment,
153
92
  .IconButton.InputNumber-Decrement {
154
- inline-size: var(--textfield-button-width);
155
- block-size: var(--textfield-button-height);
93
+ inline-size: var(--input-number-button-inline-size);
94
+ block-size: var(--input-number-button-block-size);
156
95
  }
96
+
157
97
  .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
158
98
  pointer-events: none;
159
99
  }
package/__inner__/esm/components/InputNumber/InputNumber.js CHANGED
@@ -2,14 +2,17 @@ import { __assign, __read, __rest } from "tslib";
2
2
  import './InputNumber.css';
3
3
  import React, { useState, useRef, forwardRef } from 'react';
4
4
  import { SortUpIcon, SortDownIcon } from '@ozen-ui/icons';
5
+ import { useBoolean } from '../../hooks/useBoolean';
5
6
  import { useControlled } from '../../hooks/useControlled';
6
7
  import { useEventListener } from '../../hooks/useEventListener';
7
8
  import { useInterval } from '../../hooks/useInterval';
8
9
  import { useMultiRef } from '../../hooks/useMultiRef';
9
10
  import { useThemeProps } from '../../hooks/useThemeProps';
10
11
  import { cn } from '../../utils/classname';
12
+ import { FieldControl } from '../FieldControl';
11
13
  import { FieldHint } from '../FieldHint';
12
14
  import { FieldIcon } from '../FieldIcon';
15
+ import { FieldInput } from '../FieldInput';
13
16
  import { FieldLabel } from '../FieldLabel';
14
17
  import { Fieldset } from '../Fieldset';
15
18
  import { IconButton } from '../IconButton';
@@ -22,15 +25,15 @@ export var InputNumber = forwardRef(function (inProps, ref) {
22
25
  name: 'InputNumber',
23
26
  });
24
27
  var _a = props.size, size = _a === void 0 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, other = __rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps"]);
25
- var _l = __read(useState(false), 2), focused = _l[0], setFocused = _l[1];
26
- var _m = __read(useState(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
27
- var _o = __read(useState(null), 2), countDirection = _o[0], setCountDirection = _o[1];
28
- var _p = __read(useControlled({
28
+ var _l = __read(useBoolean(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
29
+ var _o = __read(useState(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
30
+ var _p = __read(useState(null), 2), countDirection = _p[0], setCountDirection = _p[1];
31
+ var _q = __read(useControlled({
29
32
  value: valueProp,
30
33
  name: 'InputNumber',
31
34
  state: 'value',
32
35
  defaultValue: defaultValue,
33
- }), 2), valueState = _p[0], setValueState = _p[1];
36
+ }), 2), valueState = _q[0], setValueState = _q[1];
34
37
  var bodyInnerRef = useRef(null);
35
38
  var fieldInnerRef = useRef(null);
36
39
  var filled = isValidValue(valueState);
@@ -71,12 +74,12 @@ export var InputNumber = forwardRef(function (inProps, ref) {
71
74
  };
72
75
  var handleFocus = function (event) {
73
76
  var _a;
74
- setFocused(true);
77
+ onFocus();
75
78
  (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
76
79
  };
77
80
  var handleBlur = function (event) {
78
81
  var _a;
79
- setFocused(false);
82
+ offFocus();
80
83
  (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
81
84
  };
82
85
  /* В некоторых браузерах input[type=number] позволяет вводить
@@ -123,27 +126,17 @@ export var InputNumber = forwardRef(function (inProps, ref) {
123
126
  onChange === null || onChange === void 0 ? void 0 : onChange(null, { id: id, name: name, value: value });
124
127
  }
125
128
  }, countDirection ? 100 : null);
126
- return (React.createElement("div", __assign({}, other, { ref: ref, className: cnInputNumber({
127
- fullWidth: fullWidth,
128
- size: size,
129
- error: error,
130
- disabled: disabled,
131
- required: required,
132
- hasLabel: !!label,
133
- focused: focused,
134
- }, [className]) }),
129
+ return (React.createElement(FieldControl, __assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInputNumber({ size: size }, [className]) }),
135
130
  React.createElement("label", __assign({}, bodyProps, { className: cnInputNumber('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
136
- React.createElement(FieldIcon, { className: cnInputNumber('RenderLeft'), icon: renderLeft, size: size }),
131
+ React.createElement(FieldIcon, { icon: renderLeft }),
137
132
  React.createElement("div", { className: cnInputNumber('FieldContainer') },
138
- React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInputNumber('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label),
139
- React.createElement("input", __assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueState, required: required, placeholder: placeholder, className: cnInputNumber('Field', { filled: filled }, [
140
- inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
141
- ]), min: min, max: max, step: step }, inputProps, { type: "number", onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: useMultiRef([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]) }))),
142
- React.createElement(FieldIcon, { className: cnInputNumber('RenderRight'), icon: renderRight, size: size }),
133
+ React.createElement(FieldLabel, __assign({}, labelProps, { ref: useMultiRef([labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref, labelRef]), className: cnInputNumber('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
134
+ React.createElement(FieldInput, __assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: useMultiRef([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: cnInputNumber('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
135
+ React.createElement(FieldIcon, { icon: renderRight }),
143
136
  React.createElement("span", { className: cnInputNumber('Controls') },
144
- React.createElement(IconButton, { tabIndex: -1, size: size, className: cnInputNumber('Increment'), icon: SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", type: "button", variant: "ghost" }),
145
- React.createElement(IconButton, { tabIndex: -1, size: size, icon: SortDownIcon, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", type: "button", variant: "ghost" })),
137
+ React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: SortUpIcon, disabled: disabled, "aria-label": "increment", className: cnInputNumber('Increment'), onMouseDown: handleMouseDown('increment') }),
138
+ React.createElement(IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: SortDownIcon, disabled: disabled, "aria-label": "decrement", className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement') })),
146
139
  React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
147
- React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
140
+ React.createElement(FieldHint, null, hint)));
148
141
  });
149
142
  InputNumber.displayName = 'InputNumber';
package/__inner__/esm/components/InputNumber/types.d.ts CHANGED
@@ -2,6 +2,13 @@ import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEven
2
2
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
3
3
  import type { FieldIconProps } from '../FieldIcon';
4
4
  import type { FieldLabelProps } from '../FieldLabel';
5
+ type InputNumberPropsDeprecated = {
6
+ /**
7
+ * Ссылка на FieldLabel
8
+ * @deprecated Используйте labelProps.ref
9
+ * */
10
+ labelRef?: FieldLabelProps['ref'];
11
+ };
5
12
  export type InputNumberSizeVariant = FormElementSizeVariant;
6
13
  export type InputElement = ComponentPropsWithRef<'input'>;
7
14
  export type InputNumberEmptyValue = '';
@@ -48,8 +55,6 @@ export type InputNumberProps = {
48
55
  inputProps?: InputElement & {
49
56
  'data-testid'?: string;
50
57
  };
51
- /** Ссылка на FieldLabel */
52
- labelRef?: FieldLabelProps['ref'];
53
58
  /** Свойства FieldLabel */
54
59
  labelProps?: FieldLabelProps;
55
60
  /** Cвойства Body */
@@ -63,4 +68,5 @@ export type InputNumberProps = {
63
68
  /** Ссылка на корневой DOM-элемент компонента */
64
69
  ref?: Ref<HTMLDivElement>;
65
70
  'data-testid'?: string;
66
- } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
71
+ } & InputNumberPropsDeprecated & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
72
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.29.1",
3
+ "version": "0.30.0",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"
package/Calendar/package.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "main": "../__inner__/cjs/components/Calendar/index.js",
3
- "module": "../__inner__/esm/components/Calendar/index.js",
4
- "types": "../__inner__/esm/components/Calendar/index.d.ts"
5
- }
package/DatePicker/package.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "main": "../__inner__/cjs/components/DatePicker/index.js",
3
- "module": "../__inner__/esm/components/DatePicker/index.js",
4
- "types": "../__inner__/esm/components/DatePicker/index.d.ts"
5
- }