@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.5
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.
- package/_internal/custom-scrollbar/index.js +5 -27
- package/_internal/dropdown-loading/index.js +2 -3
- package/_internal/page-scroll-lock/context.js +3 -25
- package/alert/index.d.ts +2 -2
- package/alert/index.js +4 -30
- package/arrow-button/index.js +18 -19
- package/autocomplete/autocomplete.js +49 -76
- package/autocomplete-deprecated/index.d.ts +1 -1
- package/autocomplete-deprecated/index.js +43 -67
- package/avatar/avatar.module.scss +3 -1
- package/avatar/index.d.ts +1 -1
- package/avatar/index.js +7 -33
- package/avatar/user.d.ts +1 -1
- package/avatar/user.js +8 -29
- package/base-input/base-input.js +5 -31
- package/base-input-deprecated/index.d.ts +2 -2
- package/base-input-deprecated/index.js +8 -34
- package/bordered-layout/index.d.ts +1 -1
- package/bordered-layout/index.js +2 -3
- package/bottom-bar/bottom-bar.js +2 -3
- package/box/index.d.ts +1 -1
- package/box/index.js +2 -2
- package/button/index.d.ts +2 -2
- package/button/index.js +6 -32
- package/card/index.js +2 -8
- package/card/slots.d.ts +1 -1
- package/card/slots.js +9 -31
- package/carousel/draggable.d.ts +1 -1
- package/carousel/draggable.js +5 -28
- package/carousel/index.d.ts +1 -1
- package/carousel/index.js +17 -43
- package/checkbox/index.d.ts +2 -2
- package/checkbox/index.js +3 -29
- package/checkbox-field/index.d.ts +2 -2
- package/checkbox-field/index.js +3 -31
- package/chips/index.d.ts +1 -1
- package/chips/index.js +3 -25
- package/chips/item.d.ts +1 -1
- package/chips/item.js +3 -5
- package/clean-buttons/index.js +6 -28
- package/dot-nav/index.d.ts +1 -1
- package/dot-nav/index.js +12 -34
- package/dropdown/index.d.ts +2 -2
- package/dropdown/index.js +3 -26
- package/dropdown-item/index.d.ts +1 -1
- package/dropdown-item/index.js +4 -9
- package/expandable/index.d.ts +2 -2
- package/expandable/index.js +8 -36
- package/field-block/index.js +2 -9
- package/field-grid/index.d.ts +1 -1
- package/field-grid/index.js +43 -65
- package/file-icon/index.d.ts +1 -1
- package/file-icon/index.js +5 -10
- package/group-overflow/index.js +6 -30
- package/helpers/define-slots.d.ts +1 -1
- package/helpers/events.d.ts +1 -1
- package/helpers/on.d.ts +1 -1
- package/hint/hint-view.js +3 -3
- package/hint/hint.js +3 -8
- package/hint-deprecated/index.d.ts +2 -2
- package/hint-deprecated/index.js +3 -26
- package/hooks/breakpoint/index.js +3 -25
- package/info-text/index.js +15 -42
- package/input/index.js +8 -30
- package/layout/layout.js +2 -2
- package/layout/legacy.d.ts +5 -5
- package/layout/legacy.js +3 -25
- package/link/index.d.ts +6 -3
- package/link/index.js +3 -25
- package/loading-overlay/index.d.ts +1 -1
- package/loading-overlay/index.js +2 -3
- package/masked-field/index.d.ts +2 -2
- package/masked-field/index.js +3 -25
- package/masked-input/masked-input.js +3 -25
- package/modal/index.d.ts +1 -1
- package/modal/index.js +3 -10
- package/modal/slots.js +6 -29
- package/modal-overlay/index.js +3 -26
- package/no-index/index.d.ts +3 -3
- package/no-index/index.js +4 -8
- package/no-index-mark/index.d.ts +2 -2
- package/no-index-mark/index.js +7 -6
- package/package.json +6 -11
- package/pagination/index.d.ts +4 -20
- package/pagination/index.js +8 -15
- package/pagination/pagination-item.d.ts +8 -0
- package/pagination/pagination-item.js +31 -0
- package/pagination/pagination-item.module.scss +49 -0
- package/pagination/pagination.d.ts +8 -0
- package/pagination/pagination.js +78 -0
- package/pagination/pagination.module.scss +14 -70
- package/pagination/types.d.ts +28 -0
- package/pagination/types.js +2 -0
- package/pagination/utils.d.ts +15 -43
- package/pagination/utils.js +38 -87
- package/{pagination → pagination-deprecated}/base-pagination.d.ts +6 -1
- package/{pagination → pagination-deprecated}/base-pagination.js +33 -33
- package/pagination-deprecated/index.d.ts +22 -0
- package/pagination-deprecated/index.js +15 -0
- package/{pagination → pagination-deprecated}/page-button.d.ts +2 -1
- package/{pagination → pagination-deprecated}/page-button.js +3 -5
- package/pagination-deprecated/pagination.module.scss +76 -0
- package/pagination-deprecated/utils.d.ts +58 -0
- package/pagination-deprecated/utils.js +124 -0
- package/panel/index.js +3 -6
- package/phone-input/images/armenia.png +0 -0
- package/phone-input/images/azerbaijan.png +0 -0
- package/phone-input/images/belarus.png +0 -0
- package/phone-input/images/georgia.png +0 -0
- package/phone-input/images/kazakhstan.png +0 -0
- package/phone-input/images/kyrgyzstan.png +0 -0
- package/phone-input/images/moldova.png +0 -0
- package/phone-input/images/other.png +0 -0
- package/phone-input/images/russia.png +0 -0
- package/phone-input/images/tajikistan.png +0 -0
- package/phone-input/images/turkmenistan.png +0 -0
- package/phone-input/images/ukraine.png +0 -0
- package/phone-input/images/uzbekistan.png +0 -0
- package/phone-input/phone-input.js +13 -37
- package/phone-input/presets.js +2 -0
- package/phone-input-deprecated/index.d.ts +1 -1
- package/phone-input-deprecated/index.js +31 -57
- package/plate/index.d.ts +2 -2
- package/plate/index.js +3 -25
- package/popup/popup-view.js +3 -6
- package/popup/popup.js +4 -26
- package/portal/index.d.ts +1 -1
- package/price/index.js +2 -2
- package/radio-button/index.js +2 -4
- package/range/index.d.ts +1 -1
- package/range/index.js +6 -33
- package/rating/index.d.ts +1 -1
- package/rating/index.js +4 -9
- package/readme.md +4 -67
- package/screen/index.d.ts +5 -5
- package/screen/index.js +11 -37
- package/screen/slots.d.ts +3 -3
- package/screen/slots.js +9 -31
- package/select/parts/block.js +6 -28
- package/select/parts/button.js +7 -29
- package/select/parts/menu.js +12 -33
- package/select/select.js +4 -28
- package/select-deprecated/index.d.ts +1 -1
- package/select-deprecated/index.js +32 -56
- package/side-page/index.js +4 -30
- package/side-page/slots.js +4 -4
- package/spinner/index.d.ts +1 -1
- package/spinner/index.js +3 -5
- package/spinner/spinner.module.scss +3 -1
- package/stepper/index.d.ts +2 -2
- package/stepper/index.js +11 -38
- package/stroked-svg/index.d.ts +2 -2
- package/stroked-svg/index.js +3 -27
- package/styling/sizes.module.scss +3 -1
- package/super-ellipse-clip-path/index.js +2 -8
- package/switcher-row/index.js +5 -10
- package/tabs/index.d.ts +1 -1
- package/tabs/index.js +4 -26
- package/text/index.d.ts +2 -2
- package/text/index.js +3 -25
- package/text-button/index.d.ts +2 -2
- package/text-button/index.js +4 -7
- package/text-field/index.d.ts +2 -2
- package/text-field/index.js +25 -55
- package/textarea/index.js +4 -26
- package/timer/index.d.ts +1 -1
- package/timer/index.js +3 -25
- package/toggle/index.d.ts +2 -2
- package/toggle/index.js +3 -27
- package/tooltip/index.d.ts +2 -2
- package/tooltip/index.js +4 -28
- package/top-bar/top-bar.js +5 -45
- package/top-bar/utils.d.ts +2 -2
- package/top-bar/utils.js +6 -28
- package/touch-slider/index.d.ts +1 -1
- package/touch-slider/index.js +2 -4
- package/unknown-content/index.d.ts +1 -1
- package/unknown-content/index.js +3 -25
- package/upload-area/upload-area.js +8 -38
- package/with-hint/index.d.ts +1 -1
- package/with-hint/index.js +3 -28
- package/with-hint/positioning-hint.d.ts +1 -1
- package/with-hint/positioning-hint.js +3 -25
- package/with-tooltip/index.d.ts +1 -1
- package/with-tooltip/index.js +6 -31
- package/with-tooltip/positioning-tooltip.d.ts +1 -1
- package/with-tooltip/positioning-tooltip.js +4 -26
- package/file-icon/unknown.svg +0 -9
- package/rating/star.svg +0 -3
- package/upload-area/upload.svg +0 -6
|
@@ -1,38 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
4
|
};
|
|
28
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
6
|
exports.getViewport = exports.useFullScroll = exports.CustomScrollbar = void 0;
|
|
30
|
-
const
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = require("react");
|
|
31
9
|
const overlayscrollbars_react_1 = require("overlayscrollbars-react");
|
|
32
10
|
const bind_1 = __importDefault(require("classnames/bind"));
|
|
33
11
|
const custom_scrollbar_module_scss_1 = __importDefault(require("./custom-scrollbar.module.scss"));
|
|
34
|
-
require("overlayscrollbars/css/OverlayScrollbars.css");
|
|
35
12
|
const identity_1 = require("../../hooks/identity");
|
|
13
|
+
require("overlayscrollbars/css/OverlayScrollbars.css");
|
|
36
14
|
const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
|
|
37
15
|
/**
|
|
38
16
|
* Компонент блока с кастомными полосами прокрутки по гайдам.
|
|
@@ -41,10 +19,10 @@ const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
|
|
|
41
19
|
*/
|
|
42
20
|
function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox = false, onFullScroll, fullScrollThreshold, }) {
|
|
43
21
|
const onScrollStop = useFullScroll(onFullScroll, fullScrollThreshold);
|
|
44
|
-
return (
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(overlayscrollbars_react_1.OverlayScrollbarsComponent, Object.assign({ ref: osComponentRef, style: style, className: cx('custom-scrollbar', className, { 'os-host-flexbox': inFlexBox }), options: {
|
|
45
23
|
overflowBehavior: overflow,
|
|
46
24
|
callbacks: { onScrollStop },
|
|
47
|
-
} }, children));
|
|
25
|
+
} }, { children: children })));
|
|
48
26
|
}
|
|
49
27
|
exports.CustomScrollbar = CustomScrollbar;
|
|
50
28
|
/**
|
|
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.DropdownLoading = void 0;
|
|
7
|
-
const
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const spinner_1 = require("../../spinner");
|
|
9
9
|
const index_module_scss_1 = __importDefault(require("./index.module.scss"));
|
|
10
10
|
/**
|
|
@@ -13,7 +13,6 @@ const index_module_scss_1 = __importDefault(require("./index.module.scss"));
|
|
|
13
13
|
* @return Элемент.
|
|
14
14
|
*/
|
|
15
15
|
function DropdownLoading(props) {
|
|
16
|
-
return (
|
|
17
|
-
react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's' })));
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: index_module_scss_1.default.root }, { children: (0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's' }) })));
|
|
18
17
|
}
|
|
19
18
|
exports.DropdownLoading = DropdownLoading;
|
|
@@ -1,30 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
3
|
exports.usePageScrollContext = exports.PageScrollProvider = void 0;
|
|
27
|
-
const
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
28
6
|
const body_scroll_lock_1 = require("./adapters/body-scroll-lock");
|
|
29
7
|
const PageScrollContext = (0, react_1.createContext)(null);
|
|
30
8
|
const DEFAULTS = {
|
|
@@ -40,7 +18,7 @@ function PageScrollProvider({ children, adapter }) {
|
|
|
40
18
|
if (contextValue !== null) {
|
|
41
19
|
throw Error('PageScrollContext: only one provider allowed in jsx tree');
|
|
42
20
|
}
|
|
43
|
-
return
|
|
21
|
+
return (0, jsx_runtime_1.jsx)(PageScrollContext.Provider, Object.assign({ value: { adapter } }, { children: children }));
|
|
44
22
|
}
|
|
45
23
|
exports.PageScrollProvider = PageScrollProvider;
|
|
46
24
|
/**
|
package/alert/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { WithPageScrollLock } from '../_internal/page-scroll-lock';
|
|
3
3
|
import { CardContentProps } from '../card/slots';
|
|
4
4
|
export interface AlertProps extends WithPageScrollLock {
|
|
5
5
|
/** Основное содержимое. */
|
|
6
|
-
children?:
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
/** Будет вызвана при закрытии окна нажатием на затемнение. */
|
|
8
8
|
onClose?: VoidFunction;
|
|
9
9
|
}
|
package/alert/index.js
CHANGED
|
@@ -1,33 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
4
|
};
|
|
28
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
6
|
exports.AlertBody = exports.Alert = void 0;
|
|
30
|
-
const
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = require("react");
|
|
31
9
|
const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
|
|
32
10
|
const modal_overlay_1 = require("../modal-overlay");
|
|
33
11
|
const card_1 = require("../card");
|
|
@@ -53,11 +31,7 @@ function Alert({ children, withScrollDisable = false, scrollDisableOptions, onCl
|
|
|
53
31
|
});
|
|
54
32
|
const overlayClickBind = (0, utils_1.useExactClick)(onClose);
|
|
55
33
|
(0, react_1.useImperativeHandle)(body === null || body === void 0 ? void 0 : body.props.scrollableRef, () => scrollableRef.current);
|
|
56
|
-
return (
|
|
57
|
-
react_1.default.createElement(card_1.Card, { shadow: 'z4', rounds: 'm', className: cx('alert'), "data-testid": 'alert' },
|
|
58
|
-
topBar && react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBar.props, { size: 's' })),
|
|
59
|
-
body && (react_1.default.createElement(card_1.CardContent, Object.assign({}, body.props, { scrollableRef: scrollableRef }), body)),
|
|
60
|
-
bottomBar && react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, bottomBar.props, { size: 's' })))));
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, Object.assign({ className: alert_module_scss_1.default.overlay }, overlayClickBind, { children: (0, jsx_runtime_1.jsxs)(card_1.Card, Object.assign({ shadow: 'z4', rounds: 'm', className: cx('alert'), "data-testid": 'alert' }, { children: [topBar && (0, jsx_runtime_1.jsx)(top_bar_1.TopBar, Object.assign({ size: 's' }, topBar.props)), body && ((0, jsx_runtime_1.jsx)(card_1.CardContent, Object.assign({}, body.props, { scrollableRef: scrollableRef }, { children: body }))), bottomBar && (0, jsx_runtime_1.jsx)(bottom_bar_1.BottomBar, Object.assign({ size: 's' }, bottomBar.props))] })) })));
|
|
61
35
|
}
|
|
62
36
|
exports.Alert = Alert;
|
|
63
37
|
/**
|
|
@@ -66,6 +40,6 @@ exports.Alert = Alert;
|
|
|
66
40
|
* @return Элемент.
|
|
67
41
|
*/
|
|
68
42
|
function AlertBody({ children }) {
|
|
69
|
-
return
|
|
43
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
|
|
70
44
|
}
|
|
71
45
|
exports.AlertBody = AlertBody;
|
package/arrow-button/index.js
CHANGED
|
@@ -15,30 +15,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.ArrowButton = void 0;
|
|
18
|
-
const
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
const bind_1 = __importDefault(require("classnames/bind"));
|
|
20
20
|
const arrow_button_module_scss_1 = __importDefault(require("./arrow-button.module.scss"));
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
21
|
+
const ArrowUp_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowUp"));
|
|
22
|
+
const ArrowRight_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowRight"));
|
|
23
|
+
const ArrowDown_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowDown"));
|
|
24
|
+
const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
|
|
25
|
+
const ArrowUp_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowUp"));
|
|
26
|
+
const ArrowRight_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowRight"));
|
|
27
|
+
const ArrowDown_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowDown"));
|
|
28
|
+
const ArrowLeft_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowLeft"));
|
|
29
29
|
const cx = bind_1.default.bind(arrow_button_module_scss_1.default);
|
|
30
30
|
const ICONS = {
|
|
31
31
|
s: {
|
|
32
|
-
up:
|
|
33
|
-
right:
|
|
34
|
-
down:
|
|
35
|
-
left:
|
|
32
|
+
up: ArrowUp_2.default,
|
|
33
|
+
right: ArrowRight_2.default,
|
|
34
|
+
down: ArrowDown_2.default,
|
|
35
|
+
left: ArrowLeft_2.default,
|
|
36
36
|
},
|
|
37
37
|
l: {
|
|
38
|
-
up:
|
|
39
|
-
right:
|
|
40
|
-
down:
|
|
41
|
-
left:
|
|
38
|
+
up: ArrowUp_1.default,
|
|
39
|
+
right: ArrowRight_1.default,
|
|
40
|
+
down: ArrowDown_1.default,
|
|
41
|
+
left: ArrowLeft_1.default,
|
|
42
42
|
},
|
|
43
43
|
};
|
|
44
44
|
/**
|
|
@@ -49,7 +49,6 @@ const ICONS = {
|
|
|
49
49
|
const ArrowButton = (_a) => {
|
|
50
50
|
var { size = 'l', direction = 'right', className, 'data-testid': testId = 'arrow-button' } = _a, buttonProps = __rest(_a, ["size", "direction", "className", 'data-testid']);
|
|
51
51
|
const Icon = ICONS[size][direction];
|
|
52
|
-
return (
|
|
53
|
-
react_1.default.createElement(Icon, { "aria-hidden": true, fill: 'currentColor' })));
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button' }, buttonProps, { className: cx('arrow-button', `size-${size}`, className), "data-testid": testId }, { children: (0, jsx_runtime_1.jsx)(Icon, { "aria-hidden": true, fill: 'currentColor' }) })));
|
|
54
53
|
};
|
|
55
54
|
exports.ArrowButton = ArrowButton;
|
|
@@ -1,27 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
3
|
var t = {};
|
|
27
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -38,7 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
15
|
};
|
|
39
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
17
|
exports.Autocomplete = void 0;
|
|
41
|
-
const
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
const react_1 = require("react");
|
|
42
20
|
const dropdown_1 = require("../dropdown");
|
|
43
21
|
const dropdown_item_1 = require("../dropdown-item");
|
|
44
22
|
const utils_1 = require("../dropdown-item/utils");
|
|
@@ -48,8 +26,8 @@ const input_1 = require("../input");
|
|
|
48
26
|
const hooks_1 = require("../hooks");
|
|
49
27
|
const utils_2 = require("../dropdown/utils");
|
|
50
28
|
const events_1 = require("../helpers/events");
|
|
51
|
-
const
|
|
52
|
-
const
|
|
29
|
+
const Down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Down"));
|
|
30
|
+
const Up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Up"));
|
|
53
31
|
const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
|
|
54
32
|
/**
|
|
55
33
|
* Поле ввода с подсказками.
|
|
@@ -120,54 +98,49 @@ function Autocomplete(_a) {
|
|
|
120
98
|
}
|
|
121
99
|
}
|
|
122
100
|
}, [menuShown, activeIndex, items, selectItem, onKeyDown]);
|
|
123
|
-
return (
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
(_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
167
|
-
!e.defaultPrevented && selectItem(item);
|
|
168
|
-
} })))),
|
|
169
|
-
!loading && items.length === 0 && (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 's', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E")),
|
|
170
|
-
loading && react_1.default.createElement(dropdown_loading_1.DropdownLoading, null))))));
|
|
101
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, Object.assign({}, restProps, {
|
|
102
|
+
autoComplete,
|
|
103
|
+
autoFocus,
|
|
104
|
+
defaultValue,
|
|
105
|
+
disabled,
|
|
106
|
+
id,
|
|
107
|
+
name,
|
|
108
|
+
onInput,
|
|
109
|
+
placeholder,
|
|
110
|
+
readOnly,
|
|
111
|
+
required,
|
|
112
|
+
type,
|
|
113
|
+
value,
|
|
114
|
+
}, { inputRef: inputRef, blockRef: refs.setReference, onFocus: e => {
|
|
115
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
116
|
+
setNeedMenu(true);
|
|
117
|
+
}, onBlur: e => {
|
|
118
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
119
|
+
setNeedMenu(false);
|
|
120
|
+
setActiveIndex(-1);
|
|
121
|
+
}, onChange: e => {
|
|
122
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
123
|
+
setNeedMenu(true);
|
|
124
|
+
setActiveIndex(-1);
|
|
125
|
+
setCurrentValue(e.target.value);
|
|
126
|
+
},
|
|
127
|
+
// @todo выяснить надо ли переключать меню при клике и раскомментировать/убрать
|
|
128
|
+
// blockProps={{
|
|
129
|
+
// onMouseDown: () => {
|
|
130
|
+
// !disabled && setNeedMenu(a => !a);
|
|
131
|
+
// },
|
|
132
|
+
// }}
|
|
133
|
+
baseInputProps: Object.assign(Object.assign({}, baseInputProps), { onKeyDown: handleKeyDown }), adornmentEnd: typeof adornmentEnd === 'function' ? adornmentEnd({ menuShown }) : adornmentEnd })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, Object.assign({ id: '' }, { children: menuShown && ((0, jsx_runtime_1.jsxs)(dropdown_1.Dropdown, Object.assign({ ref: refs.setFloating }, dropdownProps, { style: Object.assign(Object.assign({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style), floatingStyle) }, { children: [!loading &&
|
|
134
|
+
items.length > 0 &&
|
|
135
|
+
items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ checked: index === activeIndex }, item.props, { onMouseDown: e => {
|
|
136
|
+
var _a, _b;
|
|
137
|
+
e.preventDefault();
|
|
138
|
+
(_b = (_a = item.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
139
|
+
}, onClick: e => {
|
|
140
|
+
var _a, _b;
|
|
141
|
+
(_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
142
|
+
!e.defaultPrevented && selectItem(item);
|
|
143
|
+
} }), index))), !loading && items.length === 0 && ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 's', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))), loading && (0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, {})] }))) }))] }));
|
|
171
144
|
}
|
|
172
145
|
exports.Autocomplete = Autocomplete;
|
|
173
146
|
/**
|
|
@@ -185,6 +158,6 @@ function defaultFilterOption(item, inputValue) {
|
|
|
185
158
|
* @return Элемент.
|
|
186
159
|
*/
|
|
187
160
|
function getDefaultAdornmentEnd(data) {
|
|
188
|
-
const ArrowSVG = data.menuShown ?
|
|
189
|
-
return
|
|
161
|
+
const ArrowSVG = data.menuShown ? Up_1.default : Down_1.default;
|
|
162
|
+
return (0, jsx_runtime_1.jsx)(ArrowSVG, { className: autocomplete_module_scss_1.default.arrow, "data-testid": 'autocomplete:arrow-up' });
|
|
190
163
|
}
|
|
@@ -1,27 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
3
|
var t = {};
|
|
27
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -38,13 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
15
|
};
|
|
39
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
17
|
exports.Autocomplete = void 0;
|
|
41
|
-
const
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
const react_1 = require("react");
|
|
42
20
|
const dropdown_1 = require("../dropdown");
|
|
43
21
|
const dropdown_item_1 = require("../dropdown-item");
|
|
44
22
|
const text_field_1 = require("../text-field");
|
|
45
23
|
const dropdown_2 = require("../_internal/utils/dropdown");
|
|
46
|
-
const
|
|
47
|
-
const
|
|
24
|
+
const Down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Down"));
|
|
25
|
+
const Up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Up"));
|
|
48
26
|
const dropdown_loading_1 = require("../_internal/dropdown-loading");
|
|
49
27
|
const bind_1 = __importDefault(require("classnames/bind"));
|
|
50
28
|
const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
|
|
@@ -64,7 +42,7 @@ const Autocomplete = (_a) => {
|
|
|
64
42
|
const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
|
|
65
43
|
const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
|
|
66
44
|
const needMenu = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
|
|
67
|
-
const arrowIcon = needMenu ? (
|
|
45
|
+
const arrowIcon = needMenu ? ((0, jsx_runtime_1.jsx)(Up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : ((0, jsx_runtime_1.jsx)(Down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
|
|
68
46
|
const endAdornment = preset === 'default' ? arrowIcon : undefined;
|
|
69
47
|
(0, react_1.useEffect)(() => {
|
|
70
48
|
setRealValue(value);
|
|
@@ -85,46 +63,44 @@ const Autocomplete = (_a) => {
|
|
|
85
63
|
});
|
|
86
64
|
}
|
|
87
65
|
}, [activeIndex]);
|
|
88
|
-
return (
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
66
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: cx('root', className), "data-testid": dataTestId }, { children: [(0, jsx_runtime_1.jsx)(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
|
|
67
|
+
toggleMenu(true);
|
|
68
|
+
setActiveIndex(null);
|
|
69
|
+
}, onBlur: () => {
|
|
70
|
+
toggleMenu(false);
|
|
71
|
+
}, onChange: (event) => {
|
|
72
|
+
setRealValue(event.target.value);
|
|
73
|
+
setActiveIndex(0);
|
|
74
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
75
|
+
}, onKeyDown: (event) => {
|
|
76
|
+
const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
|
|
77
|
+
let nextIndex;
|
|
78
|
+
switch (event.key) {
|
|
79
|
+
case 'ArrowDown':
|
|
80
|
+
nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
|
|
81
|
+
break;
|
|
82
|
+
case 'ArrowUp':
|
|
83
|
+
nextIndex = (size + Number(activeIndex) - 1) % size;
|
|
84
|
+
break;
|
|
85
|
+
case 'Enter':
|
|
86
|
+
if (items && activeIndex !== null && items.length > activeIndex) {
|
|
87
|
+
onSelect && onSelect(items[activeIndex]);
|
|
88
|
+
toggleMenu(false);
|
|
89
|
+
}
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
if (typeof nextIndex === 'number') {
|
|
93
|
+
event.preventDefault(); // не даём каретке в поле перемещаться
|
|
94
|
+
setActiveIndex(nextIndex);
|
|
95
|
+
}
|
|
96
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
97
|
+
} })), needMenu && ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items && items.length > 0 ? (items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: itemSize, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
|
|
98
|
+
// чтобы при нажатии на опцию предотвратить blur на поле
|
|
99
|
+
event.preventDefault();
|
|
100
|
+
}, onClick: () => {
|
|
101
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
|
|
102
|
+
setActiveIndex(null);
|
|
111
103
|
toggleMenu(false);
|
|
112
|
-
}
|
|
113
|
-
break;
|
|
114
|
-
}
|
|
115
|
-
if (typeof nextIndex === 'number') {
|
|
116
|
-
event.preventDefault(); // не даём каретке в поле перемещаться
|
|
117
|
-
setActiveIndex(nextIndex);
|
|
118
|
-
}
|
|
119
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
120
|
-
} })),
|
|
121
|
-
needMenu && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
|
|
122
|
-
// чтобы при нажатии на опцию предотвратить blur на поле
|
|
123
|
-
event.preventDefault();
|
|
124
|
-
}, onClick: () => {
|
|
125
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
|
|
126
|
-
setActiveIndex(null);
|
|
127
|
-
toggleMenu(false);
|
|
128
|
-
} }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
|
|
104
|
+
} }, { children: renderItem(item) }), index)))) : ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 'm', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))) })) })))] })));
|
|
129
105
|
};
|
|
130
106
|
exports.Autocomplete = Autocomplete;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
|
|
1
3
|
$sizes: 40, 48, 56, 64, 72, 80, 104;
|
|
2
4
|
|
|
3
5
|
$textSizes: (
|
|
@@ -41,7 +43,7 @@ $textSizes: (
|
|
|
41
43
|
width: #{$size}px;
|
|
42
44
|
height: #{$size}px;
|
|
43
45
|
.monogram {
|
|
44
|
-
font-size: #{map
|
|
46
|
+
font-size: #{map.get($textSizes, $size)}px;
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
}
|
package/avatar/index.d.ts
CHANGED
|
@@ -27,4 +27,4 @@ export interface AvatarProps {
|
|
|
27
27
|
* @param props Свойства компонента.
|
|
28
28
|
* @return Элемент.
|
|
29
29
|
*/
|
|
30
|
-
export declare
|
|
30
|
+
export declare function Avatar({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, 'data-testid': testId, }: AvatarProps): JSX.Element;
|