@ozen-ui/kit 0.9.2 → 0.10.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 (29) hide show
  1. package/__inner__/cjs/components/DataList/DataList.d.ts +2 -30
  2. package/__inner__/cjs/components/DataList/DataList.js +3 -2
  3. package/__inner__/cjs/components/DataList/constants.d.ts +1 -0
  4. package/__inner__/cjs/components/DataList/constants.js +3 -1
  5. package/__inner__/cjs/components/DataList/index.d.ts +1 -0
  6. package/__inner__/cjs/components/DataList/index.js +1 -0
  7. package/__inner__/cjs/components/DataList/types.d.ts +33 -0
  8. package/__inner__/cjs/components/DataList/types.js +2 -0
  9. package/__inner__/cjs/components/Menu/Menu.d.ts +4 -3
  10. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +150 -0
  11. package/__inner__/cjs/components/ThemeProvider/index.d.ts +1 -0
  12. package/__inner__/cjs/components/ThemeProvider/index.js +1 -0
  13. package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts +12 -0
  14. package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js +27 -0
  15. package/__inner__/esm/components/DataList/DataList.d.ts +2 -30
  16. package/__inner__/esm/components/DataList/DataList.js +5 -4
  17. package/__inner__/esm/components/DataList/constants.d.ts +1 -0
  18. package/__inner__/esm/components/DataList/constants.js +2 -0
  19. package/__inner__/esm/components/DataList/index.d.ts +1 -0
  20. package/__inner__/esm/components/DataList/index.js +1 -0
  21. package/__inner__/esm/components/DataList/types.d.ts +33 -0
  22. package/__inner__/esm/components/DataList/types.js +1 -0
  23. package/__inner__/esm/components/Menu/Menu.d.ts +4 -3
  24. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +150 -0
  25. package/__inner__/esm/components/ThemeProvider/index.d.ts +1 -0
  26. package/__inner__/esm/components/ThemeProvider/index.js +1 -0
  27. package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts +12 -0
  28. package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js +24 -0
  29. package/package.json +1 -1
package/__inner__/cjs/components/DataList/DataList.d.ts CHANGED
@@ -1,32 +1,4 @@
1
1
  import './DataList.css';
2
- import React from 'react';
3
- import type { ReactNode } from 'react';
4
- import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
5
- import { type ListProps } from '../List';
6
- import { type PopoverProps } from '../Popover';
2
+ import type { DataListBaseProps } from './index';
7
3
  export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
8
- export type DataListPayload = {
9
- name?: string;
10
- value: string;
11
- };
12
- export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
13
- /** Имя списка */
14
- name?: string;
15
- /** Признак по которому компонент будет представлен */
16
- open?: boolean;
17
- /** Содержимое компонента */
18
- children: ReactNode;
19
- /** Дополнительные CSS-классы */
20
- className?: string;
21
- /** Размер компонента */
22
- size?: FormElementSizeVariant;
23
- /** Выбранная опция */
24
- selected?: string;
25
- /** Выбранная опция по умолчанию */
26
- defaultSelected?: string;
27
- /** Функция обратного вызова для выбора значения */
28
- onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
29
- /** Свойства компонента List */
30
- listProps?: ListProps;
31
- };
32
- export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;
package/__inner__/cjs/components/DataList/DataList.js CHANGED
@@ -10,13 +10,14 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
10
10
  var useThemeProps_1 = require("../../hooks/useThemeProps");
11
11
  var classname_1 = require("../../utils/classname");
12
12
  var isKey_1 = require("../../utils/isKey");
13
+ var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
13
14
  var List_1 = require("../List");
14
15
  var Popover_1 = require("../Popover");
15
16
  var constants_1 = require("./constants");
16
17
  var DataListProvider_1 = require("./DataListProvider");
17
18
  var useDataListNavigation_1 = require("./useDataListNavigation");
18
19
  exports.cnDataList = (0, classname_1.cn)('DataList');
19
- exports.DataList = (0, react_1.forwardRef)(function (inProps, ref) {
20
+ exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
20
21
  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, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = tslib_1.__rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
21
22
  var _d = tslib_1.__read((0, useControlled_1.useControlled)({
22
23
  name: 'DataList',
@@ -45,7 +46,7 @@ exports.DataList = (0, react_1.forwardRef)(function (inProps, ref) {
45
46
  }
46
47
  }
47
48
  });
48
- return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
49
+ return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ as: constants_1.DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
49
50
  react_1["default"].createElement(DataListProvider_1.DataListContext.Provider, { value: tslib_1.__assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
50
51
  react_1["default"].createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
51
52
  });
package/__inner__/cjs/components/DataList/constants.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const DATA_LIST_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
1
2
  export declare const DATA_LIST_DEFAULT_SIZE = "m";
2
3
  export declare const DATA_LIST_DEFAULT_OPEN = false;
3
4
  export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;
package/__inner__/cjs/components/DataList/constants.js CHANGED
@@ -1,6 +1,8 @@
1
1
  "use strict";
2
2
  exports.__esModule = true;
3
- exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = void 0;
3
+ exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = exports.DATA_LIST_DEFAULT_TAG = void 0;
4
+ var Paper_1 = require("../Paper");
5
+ exports.DATA_LIST_DEFAULT_TAG = Paper_1.Paper;
4
6
  exports.DATA_LIST_DEFAULT_SIZE = 'm';
5
7
  exports.DATA_LIST_DEFAULT_OPEN = false;
6
8
  exports.DATA_LIST_OPTION_DEFAULT_DISABLED = false;
package/__inner__/cjs/components/DataList/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './DataList';
2
2
  export * from './components';
3
+ export * from './types';
package/__inner__/cjs/components/DataList/index.js CHANGED
@@ -3,3 +3,4 @@ exports.__esModule = true;
3
3
  var tslib_1 = require("tslib");
4
4
  tslib_1.__exportStar(require("./DataList"), exports);
5
5
  tslib_1.__exportStar(require("./components"), exports);
6
+ tslib_1.__exportStar(require("./types"), exports);
package/__inner__/cjs/components/DataList/types.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import type { ReactNode, ComponentRef, ElementType } from 'react';
2
+ import type React from 'react';
3
+ import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
+ import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
5
+ import type { ListProps } from '../List';
6
+ import type { PopoverBaseProps } from '../Popover';
7
+ import type { DATA_LIST_DEFAULT_TAG } from './constants';
8
+ export type DataListPayload = {
9
+ name?: string;
10
+ value: string;
11
+ };
12
+ export type DataListBaseProps = Omit<PopoverBaseProps, 'onSelect'> & {
13
+ /** Имя списка */
14
+ name?: string;
15
+ /** Признак по которому компонент будет представлен */
16
+ open?: boolean;
17
+ /** Содержимое компонента */
18
+ children: ReactNode;
19
+ /** Дополнительные CSS-классы */
20
+ className?: string;
21
+ /** Размер компонента */
22
+ size?: FormElementSizeVariant;
23
+ /** Выбранная опция */
24
+ selected?: string;
25
+ /** Выбранная опция по умолчанию */
26
+ defaultSelected?: string;
27
+ /** Функция обратного вызова для выбора значения */
28
+ onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
29
+ /** Свойства компонента List */
30
+ listProps?: ListProps;
31
+ };
32
+ export type DataListRef = ComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
33
+ export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<DataListBaseProps, As>;
package/__inner__/cjs/components/DataList/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ exports.__esModule = true;
package/__inner__/cjs/components/Menu/Menu.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import './Menu.css';
2
2
  import React from 'react';
3
- import type { RefObject } from 'react';
4
- import { type PopoverProps } from '../Popover';
3
+ import type { RefObject, ComponentPropsWithRef } from 'react';
4
+ import { type PopoverBaseProps } from '../Popover';
5
+ import type { PORTAL_DEFAULT_TAG } from '../Portal';
5
6
  import { type MenuListProps } from './components';
6
7
  export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
7
8
  export type MenuProps = {
8
9
  /** Свойства компонента MenuList */
9
10
  menuListProps?: Omit<MenuListProps, 'children'>;
10
11
  menuListRef?: RefObject<HTMLDivElement>;
11
- } & Omit<PopoverProps, 'disableEnforceFocus'>;
12
+ } & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
12
13
  export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css ADDED
@@ -0,0 +1,150 @@
1
+ .Theme_color_bBusinessDefault {
2
+ --color-content-primary: #080808;
3
+ --color-content-secondary: #707070;
4
+ --color-additional-h3: #e1e4e7;
5
+ --color-content-tertiary: #949494;
6
+ --color-content-disabled: #949494;
7
+ --color-content-ghost-disabled: rgb(255 255 255 / 47%);
8
+ --color-content-action: #019f99;
9
+ --color-content-action-hover: #088695;
10
+ --color-content-action-pressed: #006081;
11
+ --color-content-action-dark: #003c51;
12
+ --color-content-action-on: #fff;
13
+ --color-content-error: #e32346;
14
+ --color-content-error-hover: #c61031;
15
+ --color-content-error-pressed: #ae0f2c;
16
+ --color-content-error-dark: #7c0218;
17
+ --color-content-warning: #ffb039;
18
+ --color-content-warning-hover: #ff9c09;
19
+ --color-content-warning-pressed: #e78b00;
20
+ --color-content-warning-dark: #5c3801;
21
+ --color-content-success: #68d3bf;
22
+ --color-content-success-hover: #35ccb0;
23
+ --color-content-success-pressed: #129e84;
24
+ --color-content-success-dark: #024d3e;
25
+ --color-content-info: #3b81ea;
26
+ --color-content-info-hover: #1161d9;
27
+ --color-content-info-pressed: #105ba4;
28
+ --color-content-info-dark: #022f5a;
29
+ --color-content-primary-inverse: #fff;
30
+ --color-content-accent-main: #a0a0a0;
31
+ --color-accent-main: #181818;
32
+ --color-content-accent-primary: #fff;
33
+ --color-accent-primary: #282828;
34
+ --color-content-accent-disabled: #606060;
35
+ --color-background-main: #fff;
36
+ --color-background-main-hover: #f5f5f5;
37
+ --color-background-main-pressed: #e8e8e8;
38
+ --color-background-primary: #f5f5f5;
39
+ --color-background-primary-hover: #e8e8e8;
40
+ --color-background-primary-pressed: #dcdcdc;
41
+ --color-background-secondary: #e8e8e8;
42
+ --color-background-secondary-hover: #dcdcdc;
43
+ --color-background-secondary-pressed: #c7c7c7;
44
+ --color-background-tertiary: #dcdcdc;
45
+ --color-background-tertiary-hover: #c7c7c7;
46
+ --color-background-tertiary-pressed: #b2b2b2;
47
+ --color-background-disabled: #e8e8e8;
48
+ --color-background-action: #019f99;
49
+ --color-background-action-hover: #088695;
50
+ --color-background-action-pressed: #006081;
51
+ --color-background-action-active-disabled: #a0f3df;
52
+ --color-background-action-light: #e2fef8;
53
+ --color-background-action-light-hover: #cdfaf1;
54
+ --color-background-action-light-pressed: #a0f3df;
55
+ --color-background-error: #e32346;
56
+ --color-background-error-hover: #c61031;
57
+ --color-background-error-pressed: #ae0f2c;
58
+ --color-background-error-light: #fff5f6;
59
+ --color-background-error-light-hover: #ffe2e6;
60
+ --color-background-error-light-pressed: #ffa9b3;
61
+ --color-background-warning: #ffb039;
62
+ --color-background-warning-hover: #ff9c09;
63
+ --color-background-warning-pressed: #e78b00;
64
+ --color-background-warning-light: #fffaf3;
65
+ --color-background-warning-light-hover: #fff5e7;
66
+ --color-background-warning-light-pressed: #ffd89e;
67
+ --color-background-success: #68d3bf;
68
+ --color-background-success-hover: #35ccb0;
69
+ --color-background-success-pressed: #129e84;
70
+ --color-background-success-light: #eafdf9;
71
+ --color-background-success-light-hover: #d3f8f0;
72
+ --color-background-success-light-pressed: #a8eee1;
73
+ --color-background-info: #3b81ea;
74
+ --color-background-info-hover: #1161d9;
75
+ --color-background-info-pressed: #105ba4;
76
+ --color-background-info-light: #f7fbff;
77
+ --color-background-info-light-hover: #ecf5ff;
78
+ --color-background-info-light-pressed: #a1c0ef;
79
+ --color-background-main-inverse: #202023;
80
+ --color-background-overlay: rgb(0 0 0 / 55%);
81
+ --color-background-ghost: rgb(255 255 255 / 12%);
82
+ --color-background-ghost-hover: rgb(255 255 255 / 24%);
83
+ --color-background-ghost-pressed: rgb(255 255 255 / 32%);
84
+ --color-background-ghost-disabled: rgb(255 255 255 / 47%);
85
+ --color-background-accent-action-light-hover: #005573;
86
+ --color-background-accent-action-light-pressed: #003c51;
87
+ --color-background-accent-error-light-hover: #a30925;
88
+ --color-background-accent-error-light-pressed: #7c0118;
89
+ --color-background-accent-warning-light-hover: #995c00;
90
+ --color-background-accent-warning-light-pressed: #5c3800;
91
+ --color-background-accent-success-light-hover: #046d5a;
92
+ --color-background-accent-success-light-pressed: #014d3e;
93
+ --color-background-accent-info-light-hover: #064889;
94
+ --color-background-accent-info-light-pressed: #032f5a;
95
+ --color-border-main: #c7c7c7;
96
+ --color-border-main-hover: #b2b2b2;
97
+ --color-border-main-pressed: #949494;
98
+ --color-border-secondary: #e8e8e8;
99
+ --color-border-secondary-hover: #c7c7c7;
100
+ --color-border-secondary-pressed: #b2b2b2;
101
+ --color-border-disabled: #c7c7c7;
102
+ --color-border-ghost-disabled: rgb(255 255 255 / 47%);
103
+ --color-border-focused: #a0f3df;
104
+ --color-border-action: #019f99;
105
+ --color-border-action-hover: #088695;
106
+ --color-border-action-pressed: #006081;
107
+ --color-border-error: #c61031;
108
+ --color-border-warning: #ff9c09;
109
+ --color-border-success: #35ccb0;
110
+ --color-border-info: #1161d9;
111
+ --color-border-main-on: #fff;
112
+ --color-border-accent-main: #a0a0a0;
113
+ --color-border-accent-disabled: #606060;
114
+ --color-border-accent-focused: #004258;
115
+ --color-accent-main-hover: #282828;
116
+ --color-accent-main-pressed: #383838;
117
+ --color-accent-primary-hover: #383838;
118
+ --color-accent-primary-pressed: #484848;
119
+ --color-accent-secondary: #383838;
120
+ --color-accent-secondary-hover: #484848;
121
+ --color-accent-secondary-pressed: #585858;
122
+ --color-accent-tertiary: #484848;
123
+ --color-accent-tertiary-hover: #585858;
124
+ --color-accent-tertiary-pressed: #686868;
125
+ --color-accent-disabled: #484848;
126
+ --color-accent-main-inverse: #fff;
127
+ --color-additional-a1: #0b6abe;
128
+ --color-additional-a2: #1899e9;
129
+ --color-additional-a3: #b3f1ff;
130
+ --color-additional-b1: #b5215f;
131
+ --color-additional-b2: #e62d73;
132
+ --color-additional-b3: #ffb5cd;
133
+ --color-additional-c1: #e64920;
134
+ --color-additional-c2: #f46c1b;
135
+ --color-additional-c3: #ffe2a8;
136
+ --color-additional-d1: #ff8e00;
137
+ --color-additional-d2: #ffc100;
138
+ --color-additional-d3: #fff9a2;
139
+ --color-additional-e1: #771db4;
140
+ --color-additional-e2: #a02be5;
141
+ --color-additional-e3: #e9b7fe;
142
+ --color-additional-f1: #107c60;
143
+ --color-additional-f2: #17ae87;
144
+ --color-additional-f3: #abeada;
145
+ --color-additional-g1: #b88f27;
146
+ --color-additional-g2: #e0b548;
147
+ --color-additional-g3: #f4d37d;
148
+ --color-additional-h1: #747e89;
149
+ --color-additional-h2: #bdc4cb;
150
+ }
package/__inner__/cjs/components/ThemeProvider/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from './ThemeProvider';
2
2
  export * from './themes/themeOzenDark';
3
3
  export * from './themes/themeOzenDefault';
4
+ export * from './themes/themeBBusinessDefault';
4
5
  export * as themeHelper from './themes/helper';
5
6
  export { useTheme } from './ThemeProviderContext';
6
7
  export * from './localization/localization';
package/__inner__/cjs/components/ThemeProvider/index.js CHANGED
@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
5
5
  tslib_1.__exportStar(require("./ThemeProvider"), exports);
6
6
  tslib_1.__exportStar(require("./themes/themeOzenDark"), exports);
7
7
  tslib_1.__exportStar(require("./themes/themeOzenDefault"), exports);
8
+ tslib_1.__exportStar(require("./themes/themeBBusinessDefault"), exports);
8
9
  exports.themeHelper = tslib_1.__importStar(require("./themes/helper"));
9
10
  var ThemeProviderContext_1 = require("./ThemeProviderContext");
10
11
  tslib_1.__createBinding(exports, ThemeProviderContext_1, "useTheme");
package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import '@ozen-ui/fonts';
2
+ import type { Theme } from '../index';
3
+ import '../_color/Theme_color_bBusinessDefault.css';
4
+ import '../_typography/Theme_typography_ozenDefault.css';
5
+ import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
6
+ import '../_space/Theme_space_ozenDefault.css';
7
+ import '../_shadow/Theme_shadow_ozenDefault.css';
8
+ import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
9
+ import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
10
+ import '../_zIndex/Theme_zIndex_ozenDefault.css';
11
+ import '../_transition/Theme_transition_ozenDefault.css';
12
+ export declare const themeBBusinessDefault: Theme;
package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ exports.themeBBusinessDefault = void 0;
4
+ require("@ozen-ui/fonts");
5
+ require("../_color/Theme_color_bBusinessDefault.css");
6
+ require("../_typography/Theme_typography_ozenDefault.css");
7
+ require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
8
+ require("../_space/Theme_space_ozenDefault.css");
9
+ require("../_shadow/Theme_shadow_ozenDefault.css");
10
+ require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
11
+ require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
12
+ require("../_zIndex/Theme_zIndex_ozenDefault.css");
13
+ require("../_transition/Theme_transition_ozenDefault.css");
14
+ exports.themeBBusinessDefault = {
15
+ tokens: {
16
+ color: 'bBusinessDefault',
17
+ space: 'ozenDefault',
18
+ typography: 'ozenDefault',
19
+ borderRadius: 'ozenDefault',
20
+ borderWidth: 'ozenDefault',
21
+ shadow: 'ozenDefault',
22
+ breakpoint: 'ozenDefault',
23
+ zIndex: 'ozenDefault',
24
+ transition: 'ozenDefault'
25
+ },
26
+ defaultProps: {}
27
+ };
package/__inner__/esm/components/DataList/DataList.d.ts CHANGED
@@ -1,32 +1,4 @@
1
1
  import './DataList.css';
2
- import React from 'react';
3
- import type { ReactNode } from 'react';
4
- import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
5
- import { type ListProps } from '../List';
6
- import { type PopoverProps } from '../Popover';
2
+ import type { DataListBaseProps } from './index';
7
3
  export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
8
- export type DataListPayload = {
9
- name?: string;
10
- value: string;
11
- };
12
- export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
13
- /** Имя списка */
14
- name?: string;
15
- /** Признак по которому компонент будет представлен */
16
- open?: boolean;
17
- /** Содержимое компонента */
18
- children: ReactNode;
19
- /** Дополнительные CSS-классы */
20
- className?: string;
21
- /** Размер компонента */
22
- size?: FormElementSizeVariant;
23
- /** Выбранная опция */
24
- selected?: string;
25
- /** Выбранная опция по умолчанию */
26
- defaultSelected?: string;
27
- /** Функция обратного вызова для выбора значения */
28
- onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
29
- /** Свойства компонента List */
30
- listProps?: ListProps;
31
- };
32
- export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;
package/__inner__/esm/components/DataList/DataList.js CHANGED
@@ -1,19 +1,20 @@
1
1
  import { __assign, __read, __rest } from "tslib";
2
2
  import './DataList.css';
3
- import React, { forwardRef, useRef } from 'react';
3
+ import React, { useRef } from 'react';
4
4
  import { useControlled } from '../../hooks/useControlled';
5
5
  import { useEventListener } from '../../hooks/useEventListener';
6
6
  import { useMultiRef } from '../../hooks/useMultiRef';
7
7
  import { useThemeProps } from '../../hooks/useThemeProps';
8
8
  import { cn } from '../../utils/classname';
9
9
  import { isKey } from '../../utils/isKey';
10
+ import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
10
11
  import { List } from '../List';
11
12
  import { Popover } from '../Popover';
12
- import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN } from './constants';
13
+ import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
13
14
  import { DataListContext } from './DataListProvider';
14
15
  import { useDataListNavigation } from './useDataListNavigation';
15
16
  export var cnDataList = cn('DataList');
16
- export var DataList = forwardRef(function (inProps, ref) {
17
+ export var DataList = polymorphicComponentWithRef(function (inProps, ref) {
17
18
  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, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = __rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
18
19
  var _d = __read(useControlled({
19
20
  name: 'DataList',
@@ -42,7 +43,7 @@ export var DataList = forwardRef(function (inProps, ref) {
42
43
  }
43
44
  }
44
45
  });
45
- return (React.createElement(Popover, __assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
46
+ return (React.createElement(Popover, __assign({ as: DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
46
47
  React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
47
48
  React.createElement(List, __assign({ as: "ul", size: size }, listProps, { ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
48
49
  });
package/__inner__/esm/components/DataList/constants.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const DATA_LIST_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
1
2
  export declare const DATA_LIST_DEFAULT_SIZE = "m";
2
3
  export declare const DATA_LIST_DEFAULT_OPEN = false;
3
4
  export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;
package/__inner__/esm/components/DataList/constants.js CHANGED
@@ -1,3 +1,5 @@
1
+ import { Paper } from '../Paper';
2
+ export var DATA_LIST_DEFAULT_TAG = Paper;
1
3
  export var DATA_LIST_DEFAULT_SIZE = 'm';
2
4
  export var DATA_LIST_DEFAULT_OPEN = false;
3
5
  export var DATA_LIST_OPTION_DEFAULT_DISABLED = false;
package/__inner__/esm/components/DataList/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './DataList';
2
2
  export * from './components';
3
+ export * from './types';
package/__inner__/esm/components/DataList/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './DataList';
2
2
  export * from './components';
3
+ export * from './types';
package/__inner__/esm/components/DataList/types.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import type { ReactNode, ComponentRef, ElementType } from 'react';
2
+ import type React from 'react';
3
+ import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
+ import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
5
+ import type { ListProps } from '../List';
6
+ import type { PopoverBaseProps } from '../Popover';
7
+ import type { DATA_LIST_DEFAULT_TAG } from './constants';
8
+ export type DataListPayload = {
9
+ name?: string;
10
+ value: string;
11
+ };
12
+ export type DataListBaseProps = Omit<PopoverBaseProps, 'onSelect'> & {
13
+ /** Имя списка */
14
+ name?: string;
15
+ /** Признак по которому компонент будет представлен */
16
+ open?: boolean;
17
+ /** Содержимое компонента */
18
+ children: ReactNode;
19
+ /** Дополнительные CSS-классы */
20
+ className?: string;
21
+ /** Размер компонента */
22
+ size?: FormElementSizeVariant;
23
+ /** Выбранная опция */
24
+ selected?: string;
25
+ /** Выбранная опция по умолчанию */
26
+ defaultSelected?: string;
27
+ /** Функция обратного вызова для выбора значения */
28
+ onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
29
+ /** Свойства компонента List */
30
+ listProps?: ListProps;
31
+ };
32
+ export type DataListRef = ComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
33
+ export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<DataListBaseProps, As>;
package/__inner__/esm/components/DataList/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/__inner__/esm/components/Menu/Menu.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import './Menu.css';
2
2
  import React from 'react';
3
- import type { RefObject } from 'react';
4
- import { type PopoverProps } from '../Popover';
3
+ import type { RefObject, ComponentPropsWithRef } from 'react';
4
+ import { type PopoverBaseProps } from '../Popover';
5
+ import type { PORTAL_DEFAULT_TAG } from '../Portal';
5
6
  import { type MenuListProps } from './components';
6
7
  export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
7
8
  export type MenuProps = {
8
9
  /** Свойства компонента MenuList */
9
10
  menuListProps?: Omit<MenuListProps, 'children'>;
10
11
  menuListRef?: RefObject<HTMLDivElement>;
11
- } & Omit<PopoverProps, 'disableEnforceFocus'>;
12
+ } & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
12
13
  export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css ADDED
@@ -0,0 +1,150 @@
1
+ .Theme_color_bBusinessDefault {
2
+ --color-content-primary: #080808;
3
+ --color-content-secondary: #707070;
4
+ --color-additional-h3: #e1e4e7;
5
+ --color-content-tertiary: #949494;
6
+ --color-content-disabled: #949494;
7
+ --color-content-ghost-disabled: rgb(255 255 255 / 47%);
8
+ --color-content-action: #019f99;
9
+ --color-content-action-hover: #088695;
10
+ --color-content-action-pressed: #006081;
11
+ --color-content-action-dark: #003c51;
12
+ --color-content-action-on: #fff;
13
+ --color-content-error: #e32346;
14
+ --color-content-error-hover: #c61031;
15
+ --color-content-error-pressed: #ae0f2c;
16
+ --color-content-error-dark: #7c0218;
17
+ --color-content-warning: #ffb039;
18
+ --color-content-warning-hover: #ff9c09;
19
+ --color-content-warning-pressed: #e78b00;
20
+ --color-content-warning-dark: #5c3801;
21
+ --color-content-success: #68d3bf;
22
+ --color-content-success-hover: #35ccb0;
23
+ --color-content-success-pressed: #129e84;
24
+ --color-content-success-dark: #024d3e;
25
+ --color-content-info: #3b81ea;
26
+ --color-content-info-hover: #1161d9;
27
+ --color-content-info-pressed: #105ba4;
28
+ --color-content-info-dark: #022f5a;
29
+ --color-content-primary-inverse: #fff;
30
+ --color-content-accent-main: #a0a0a0;
31
+ --color-accent-main: #181818;
32
+ --color-content-accent-primary: #fff;
33
+ --color-accent-primary: #282828;
34
+ --color-content-accent-disabled: #606060;
35
+ --color-background-main: #fff;
36
+ --color-background-main-hover: #f5f5f5;
37
+ --color-background-main-pressed: #e8e8e8;
38
+ --color-background-primary: #f5f5f5;
39
+ --color-background-primary-hover: #e8e8e8;
40
+ --color-background-primary-pressed: #dcdcdc;
41
+ --color-background-secondary: #e8e8e8;
42
+ --color-background-secondary-hover: #dcdcdc;
43
+ --color-background-secondary-pressed: #c7c7c7;
44
+ --color-background-tertiary: #dcdcdc;
45
+ --color-background-tertiary-hover: #c7c7c7;
46
+ --color-background-tertiary-pressed: #b2b2b2;
47
+ --color-background-disabled: #e8e8e8;
48
+ --color-background-action: #019f99;
49
+ --color-background-action-hover: #088695;
50
+ --color-background-action-pressed: #006081;
51
+ --color-background-action-active-disabled: #a0f3df;
52
+ --color-background-action-light: #e2fef8;
53
+ --color-background-action-light-hover: #cdfaf1;
54
+ --color-background-action-light-pressed: #a0f3df;
55
+ --color-background-error: #e32346;
56
+ --color-background-error-hover: #c61031;
57
+ --color-background-error-pressed: #ae0f2c;
58
+ --color-background-error-light: #fff5f6;
59
+ --color-background-error-light-hover: #ffe2e6;
60
+ --color-background-error-light-pressed: #ffa9b3;
61
+ --color-background-warning: #ffb039;
62
+ --color-background-warning-hover: #ff9c09;
63
+ --color-background-warning-pressed: #e78b00;
64
+ --color-background-warning-light: #fffaf3;
65
+ --color-background-warning-light-hover: #fff5e7;
66
+ --color-background-warning-light-pressed: #ffd89e;
67
+ --color-background-success: #68d3bf;
68
+ --color-background-success-hover: #35ccb0;
69
+ --color-background-success-pressed: #129e84;
70
+ --color-background-success-light: #eafdf9;
71
+ --color-background-success-light-hover: #d3f8f0;
72
+ --color-background-success-light-pressed: #a8eee1;
73
+ --color-background-info: #3b81ea;
74
+ --color-background-info-hover: #1161d9;
75
+ --color-background-info-pressed: #105ba4;
76
+ --color-background-info-light: #f7fbff;
77
+ --color-background-info-light-hover: #ecf5ff;
78
+ --color-background-info-light-pressed: #a1c0ef;
79
+ --color-background-main-inverse: #202023;
80
+ --color-background-overlay: rgb(0 0 0 / 55%);
81
+ --color-background-ghost: rgb(255 255 255 / 12%);
82
+ --color-background-ghost-hover: rgb(255 255 255 / 24%);
83
+ --color-background-ghost-pressed: rgb(255 255 255 / 32%);
84
+ --color-background-ghost-disabled: rgb(255 255 255 / 47%);
85
+ --color-background-accent-action-light-hover: #005573;
86
+ --color-background-accent-action-light-pressed: #003c51;
87
+ --color-background-accent-error-light-hover: #a30925;
88
+ --color-background-accent-error-light-pressed: #7c0118;
89
+ --color-background-accent-warning-light-hover: #995c00;
90
+ --color-background-accent-warning-light-pressed: #5c3800;
91
+ --color-background-accent-success-light-hover: #046d5a;
92
+ --color-background-accent-success-light-pressed: #014d3e;
93
+ --color-background-accent-info-light-hover: #064889;
94
+ --color-background-accent-info-light-pressed: #032f5a;
95
+ --color-border-main: #c7c7c7;
96
+ --color-border-main-hover: #b2b2b2;
97
+ --color-border-main-pressed: #949494;
98
+ --color-border-secondary: #e8e8e8;
99
+ --color-border-secondary-hover: #c7c7c7;
100
+ --color-border-secondary-pressed: #b2b2b2;
101
+ --color-border-disabled: #c7c7c7;
102
+ --color-border-ghost-disabled: rgb(255 255 255 / 47%);
103
+ --color-border-focused: #a0f3df;
104
+ --color-border-action: #019f99;
105
+ --color-border-action-hover: #088695;
106
+ --color-border-action-pressed: #006081;
107
+ --color-border-error: #c61031;
108
+ --color-border-warning: #ff9c09;
109
+ --color-border-success: #35ccb0;
110
+ --color-border-info: #1161d9;
111
+ --color-border-main-on: #fff;
112
+ --color-border-accent-main: #a0a0a0;
113
+ --color-border-accent-disabled: #606060;
114
+ --color-border-accent-focused: #004258;
115
+ --color-accent-main-hover: #282828;
116
+ --color-accent-main-pressed: #383838;
117
+ --color-accent-primary-hover: #383838;
118
+ --color-accent-primary-pressed: #484848;
119
+ --color-accent-secondary: #383838;
120
+ --color-accent-secondary-hover: #484848;
121
+ --color-accent-secondary-pressed: #585858;
122
+ --color-accent-tertiary: #484848;
123
+ --color-accent-tertiary-hover: #585858;
124
+ --color-accent-tertiary-pressed: #686868;
125
+ --color-accent-disabled: #484848;
126
+ --color-accent-main-inverse: #fff;
127
+ --color-additional-a1: #0b6abe;
128
+ --color-additional-a2: #1899e9;
129
+ --color-additional-a3: #b3f1ff;
130
+ --color-additional-b1: #b5215f;
131
+ --color-additional-b2: #e62d73;
132
+ --color-additional-b3: #ffb5cd;
133
+ --color-additional-c1: #e64920;
134
+ --color-additional-c2: #f46c1b;
135
+ --color-additional-c3: #ffe2a8;
136
+ --color-additional-d1: #ff8e00;
137
+ --color-additional-d2: #ffc100;
138
+ --color-additional-d3: #fff9a2;
139
+ --color-additional-e1: #771db4;
140
+ --color-additional-e2: #a02be5;
141
+ --color-additional-e3: #e9b7fe;
142
+ --color-additional-f1: #107c60;
143
+ --color-additional-f2: #17ae87;
144
+ --color-additional-f3: #abeada;
145
+ --color-additional-g1: #b88f27;
146
+ --color-additional-g2: #e0b548;
147
+ --color-additional-g3: #f4d37d;
148
+ --color-additional-h1: #747e89;
149
+ --color-additional-h2: #bdc4cb;
150
+ }
package/__inner__/esm/components/ThemeProvider/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from './ThemeProvider';
2
2
  export * from './themes/themeOzenDark';
3
3
  export * from './themes/themeOzenDefault';
4
+ export * from './themes/themeBBusinessDefault';
4
5
  export * as themeHelper from './themes/helper';
5
6
  export { useTheme } from './ThemeProviderContext';
6
7
  export * from './localization/localization';
package/__inner__/esm/components/ThemeProvider/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from './ThemeProvider';
2
2
  export * from './themes/themeOzenDark';
3
3
  export * from './themes/themeOzenDefault';
4
+ export * from './themes/themeBBusinessDefault';
4
5
  import * as themeHelper_1 from './themes/helper';
5
6
  export { themeHelper_1 as themeHelper };
6
7
  export { useTheme } from './ThemeProviderContext';
package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import '@ozen-ui/fonts';
2
+ import type { Theme } from '../index';
3
+ import '../_color/Theme_color_bBusinessDefault.css';
4
+ import '../_typography/Theme_typography_ozenDefault.css';
5
+ import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
6
+ import '../_space/Theme_space_ozenDefault.css';
7
+ import '../_shadow/Theme_shadow_ozenDefault.css';
8
+ import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
9
+ import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
10
+ import '../_zIndex/Theme_zIndex_ozenDefault.css';
11
+ import '../_transition/Theme_transition_ozenDefault.css';
12
+ export declare const themeBBusinessDefault: Theme;
package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js ADDED
@@ -0,0 +1,24 @@
1
+ import '@ozen-ui/fonts';
2
+ import '../_color/Theme_color_bBusinessDefault.css';
3
+ import '../_typography/Theme_typography_ozenDefault.css';
4
+ import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
5
+ import '../_space/Theme_space_ozenDefault.css';
6
+ import '../_shadow/Theme_shadow_ozenDefault.css';
7
+ import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
8
+ import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
9
+ import '../_zIndex/Theme_zIndex_ozenDefault.css';
10
+ import '../_transition/Theme_transition_ozenDefault.css';
11
+ export var themeBBusinessDefault = {
12
+ tokens: {
13
+ color: 'bBusinessDefault',
14
+ space: 'ozenDefault',
15
+ typography: 'ozenDefault',
16
+ borderRadius: 'ozenDefault',
17
+ borderWidth: 'ozenDefault',
18
+ shadow: 'ozenDefault',
19
+ breakpoint: 'ozenDefault',
20
+ zIndex: 'ozenDefault',
21
+ transition: 'ozenDefault'
22
+ },
23
+ defaultProps: {}
24
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.9.2",
3
+ "version": "0.10.0",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"