@gravity-ui/aikit 2.8.1-beta.d7e9382274f46ab9d82e62cb80dca80e4bba34e2.0 → 2.9.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.
- package/build/cjs/components/templates/EmptyContainer/EmptyContainer.css +13 -0
- package/build/cjs/components/templates/EmptyContainer/EmptyContainer.js +1 -1
- package/build/cjs/components/templates/EmptyContainer/EmptyContainer.js.map +1 -1
- package/build/cjs/package.json +1 -1
- package/build/esm/components/templates/EmptyContainer/EmptyContainer.css +13 -0
- package/build/esm/components/templates/EmptyContainer/EmptyContainer.js +1 -1
- package/build/esm/components/templates/EmptyContainer/EmptyContainer.js.map +1 -1
- package/build/esm/package.json +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
height: 100%;
|
|
5
5
|
width: 100%;
|
|
6
|
+
min-height: 0;
|
|
7
|
+
overflow: hidden;
|
|
6
8
|
background: var(--g-aikit-empty-container-background);
|
|
7
9
|
}
|
|
8
10
|
.g-aikit-empty-container__content {
|
|
@@ -10,12 +12,14 @@
|
|
|
10
12
|
display: flex;
|
|
11
13
|
flex-direction: column;
|
|
12
14
|
align-self: stretch;
|
|
15
|
+
min-height: 0;
|
|
13
16
|
gap: var(--g-aikit-empty-container-content-gap);
|
|
14
17
|
padding: var(--g-aikit-empty-container-padding);
|
|
15
18
|
}
|
|
16
19
|
.g-aikit-empty-container__welcome-section {
|
|
17
20
|
display: flex;
|
|
18
21
|
flex-direction: column;
|
|
22
|
+
flex-shrink: 0;
|
|
19
23
|
gap: var(--g-spacing-6);
|
|
20
24
|
}
|
|
21
25
|
.g-aikit-empty-container__text-container {
|
|
@@ -47,18 +51,27 @@
|
|
|
47
51
|
}
|
|
48
52
|
.g-aikit-empty-container__suggestions-section {
|
|
49
53
|
display: flex;
|
|
54
|
+
flex: 1 1 auto;
|
|
50
55
|
flex-direction: column;
|
|
56
|
+
min-height: 0;
|
|
51
57
|
gap: var(--g-spacing-3);
|
|
52
58
|
}
|
|
53
59
|
.g-aikit-empty-container__suggestions-title {
|
|
54
60
|
display: flex;
|
|
61
|
+
flex-shrink: 0;
|
|
55
62
|
padding: 0 var(--g-spacing-2);
|
|
56
63
|
align-items: flex-start;
|
|
57
64
|
gap: var(--g-spacing-2);
|
|
58
65
|
align-self: stretch;
|
|
59
66
|
}
|
|
67
|
+
.g-aikit-empty-container__suggestions-list {
|
|
68
|
+
flex: 1 1 auto;
|
|
69
|
+
min-height: 70px;
|
|
70
|
+
overflow-y: auto;
|
|
71
|
+
}
|
|
60
72
|
.g-aikit-empty-container__show-more {
|
|
61
73
|
display: flex;
|
|
74
|
+
flex-shrink: 0;
|
|
62
75
|
justify-content: flex-start;
|
|
63
76
|
padding-top: var(--g-spacing-2);
|
|
64
77
|
}
|
|
@@ -25,6 +25,6 @@ function EmptyContainer(props) {
|
|
|
25
25
|
const descriptionAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.description) || 'left';
|
|
26
26
|
// Define text for "Show more" button with localization support
|
|
27
27
|
const showMoreButtonText = showMoreText || (0, i18n_1.i18n)('show-more-button');
|
|
28
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), "data-qa": qa, children: (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: hasContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('welcome-section'), children: [image && ((0, jsx_runtime_1.jsx)("div", { className: b('image-container', { align: imageAlignment }), children: image })), (0, jsx_runtime_1.jsxs)("div", { className: b('text-container'), children: [title && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && ((0, jsx_runtime_1.jsxs)("div", { className: b('suggestions-section'), children: [suggestionTitle && ((0, jsx_runtime_1.jsx)("div", { className: b('suggestions-title'), children: typeof suggestionTitle === 'string' ? ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-3", color: "primary", children: suggestionTitle })) : (suggestionTitle) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Suggestions_1.Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: layout, wrapText: wrapText }) }), showMore && ((0, jsx_runtime_1.jsx)("div", { className: b('show-more'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), "data-qa": qa, children: (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: hasContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('welcome-section'), children: [image && ((0, jsx_runtime_1.jsx)("div", { className: b('image-container', { align: imageAlignment }), children: image })), (0, jsx_runtime_1.jsxs)("div", { className: b('text-container'), children: [title && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && ((0, jsx_runtime_1.jsxs)("div", { className: b('suggestions-section'), children: [suggestionTitle && ((0, jsx_runtime_1.jsx)("div", { className: b('suggestions-title'), children: typeof suggestionTitle === 'string' ? ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-3", color: "primary", children: suggestionTitle })) : (suggestionTitle) })), (0, jsx_runtime_1.jsx)("div", { className: b('suggestions-list'), children: (0, jsx_runtime_1.jsx)(Suggestions_1.Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: layout, wrapText: wrapText }) }), showMore && ((0, jsx_runtime_1.jsx)("div", { className: b('show-more'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
|
|
29
29
|
}
|
|
30
30
|
//# sourceMappingURL=EmptyContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyContainer.js","sourceRoot":"../../../../../src","sources":["components/templates/EmptyContainer/EmptyContainer.tsx"],"names":[],"mappings":";;AA4EA,wCAwGC;;AAlLD,6CAAmD;AACnD,6CAA+C;AAG/C,6CAAwC;AACxC,sEAAwD;AAExD,0CAA4B;AAE5B,gCAA+B;AAE/B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,iBAAiB,CAAC,CAAC;AAwDnC;;;;;;GAMG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACrD,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,WAAW,GAAG,EAAE,EAChB,iBAAiB,EACjB,SAAS,EACT,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,KAAK,IAAI,WAAW,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEnF,oCAAoC;IACpC,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,MAAM,CAAC;IAClD,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,MAAM,CAAC;IAClD,MAAM,oBAAoB,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,MAAM,CAAC;IAE9D,+DAA+D;IAC/D,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAA,WAAI,EAAC,kBAAkB,CAAC,CAAC;IAEpE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC3C,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACvB,UAAU,IAAI,CACX,6DACI,iCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,aAC/B,KAAK,IAAI,CACN,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC,CAAC,YACxD,KAAK,GACJ,CACT,EAED,iCAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAC9B,KAAK,IAAI,CACN,uBAAC,YAAI,IACD,OAAO,EAAC,UAAU,EAClB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC,CAAC,YAE7C,KAAK,GACH,CACV,EAEA,WAAW,IAAI,CACZ,uBAAC,YAAI,IACD,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,KAAK,EAAE,oBAAoB,EAAC,CAAC,YAEzD,WAAW,GACT,CACV,IACC,IACJ,EAEL,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,IAAI,CAC3D,iCAAK,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,aACnC,eAAe,IAAI,CAChB,gCAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YACjC,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnC,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,SAAS,YACtC,eAAe,GACb,CACV,CAAC,CAAC,CAAC,CACA,eAAe,CAClB,GACC,CACT,EACD,
|
|
1
|
+
{"version":3,"file":"EmptyContainer.js","sourceRoot":"../../../../../src","sources":["components/templates/EmptyContainer/EmptyContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {Suggestions} from '../../molecules/Suggestions';\n\nimport {i18n} from './i18n';\n\nimport './EmptyContainer.scss';\n\nconst b = block('empty-container');\n\n/**\n * Suggestion item for EmptyContainer\n */\nexport type Suggestion = SuggestionsItem;\n\n/**\n * Alignment options for content elements\n */\nexport type ContentAlignment = 'left' | 'center' | 'right';\n\n/**\n * Alignment configuration for different sections\n */\nexport interface AlignmentConfig {\n /** Alignment for the image */\n image?: ContentAlignment;\n /** Alignment for the title */\n title?: ContentAlignment;\n /** Alignment for the description */\n description?: ContentAlignment;\n}\n\n/**\n * Props for the EmptyContainer component\n */\nexport interface EmptyContainerProps {\n /** Image or icon to display at the top */\n image?: React.ReactNode;\n /** Title text or custom React element for the welcome screen */\n title?: React.ReactNode;\n /** Description text or custom React element explaining the functionality */\n description?: React.ReactNode;\n /** Title for the suggestions section - can be string or custom React element */\n suggestionTitle?: React.ReactNode;\n /** Array of suggestion items */\n suggestions?: Suggestion[];\n /** Callback when a suggestion is clicked */\n onSuggestionClick?: (content: string, id?: string) => void;\n /** Alignment configuration for image, title, and description */\n alignment?: AlignmentConfig;\n /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Enable text wrapping inside suggestion buttons instead of ellipsis */\n wrapText?: boolean;\n /** Callback for showing more suggestions */\n showMore?: () => void;\n /** Custom text for the show more button */\n showMoreText?: string;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n}\n\n/**\n * EmptyContainer component - displays a welcome screen with image, title, description,\n * and suggestions\n *\n * @param props - Component props\n * @returns React component\n */\nexport function EmptyContainer(props: EmptyContainerProps) {\n const {\n image,\n title,\n description,\n suggestionTitle,\n suggestions = [],\n onSuggestionClick,\n alignment,\n layout = 'grid',\n wrapText = false,\n showMore,\n showMoreText,\n className,\n qa,\n } = props;\n\n const hasContent = title || description || (suggestions && suggestions.length > 0);\n\n // Define alignment for each element\n const imageAlignment = alignment?.image || 'left';\n const titleAlignment = alignment?.title || 'left';\n const descriptionAlignment = alignment?.description || 'left';\n\n // Define text for \"Show more\" button with localization support\n const showMoreButtonText = showMoreText || i18n('show-more-button');\n\n return (\n <div className={b(null, className)} data-qa={qa}>\n <div className={b('content')}>\n {hasContent && (\n <>\n <div className={b('welcome-section')}>\n {image && (\n <div className={b('image-container', {align: imageAlignment})}>\n {image}\n </div>\n )}\n\n <div className={b('text-container')}>\n {title && (\n <Text\n variant=\"header-2\"\n className={b('title', {align: titleAlignment})}\n >\n {title}\n </Text>\n )}\n\n {description && (\n <Text\n variant=\"body-2\"\n color=\"complementary\"\n className={b('description', {align: descriptionAlignment})}\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n\n {suggestions && suggestions.length > 0 && onSuggestionClick && (\n <div className={b('suggestions-section')}>\n {suggestionTitle && (\n <div className={b('suggestions-title')}>\n {typeof suggestionTitle === 'string' ? (\n <Text variant=\"subheader-3\" color=\"primary\">\n {suggestionTitle}\n </Text>\n ) : (\n suggestionTitle\n )}\n </div>\n )}\n <div className={b('suggestions-list')}>\n <Suggestions\n items={suggestions}\n onClick={onSuggestionClick}\n layout={layout}\n wrapText={wrapText}\n />\n </div>\n {showMore && (\n <div className={b('show-more')}>\n <Button\n view=\"flat-secondary\"\n size=\"l\"\n onClick={showMore}\n className={b('show-more-button')}\n >\n <Button.Icon>\n <ArrowRotateRight />\n </Button.Icon>\n {showMoreButtonText}\n </Button>\n </div>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n );\n}\n"]}
|
package/build/cjs/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"2.
|
|
1
|
+
{"version":"2.9.0","type":"commonjs","sideEffects":["*.css","*.scss"]}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
height: 100%;
|
|
5
5
|
width: 100%;
|
|
6
|
+
min-height: 0;
|
|
7
|
+
overflow: hidden;
|
|
6
8
|
background: var(--g-aikit-empty-container-background);
|
|
7
9
|
}
|
|
8
10
|
.g-aikit-empty-container__content {
|
|
@@ -10,12 +12,14 @@
|
|
|
10
12
|
display: flex;
|
|
11
13
|
flex-direction: column;
|
|
12
14
|
align-self: stretch;
|
|
15
|
+
min-height: 0;
|
|
13
16
|
gap: var(--g-aikit-empty-container-content-gap);
|
|
14
17
|
padding: var(--g-aikit-empty-container-padding);
|
|
15
18
|
}
|
|
16
19
|
.g-aikit-empty-container__welcome-section {
|
|
17
20
|
display: flex;
|
|
18
21
|
flex-direction: column;
|
|
22
|
+
flex-shrink: 0;
|
|
19
23
|
gap: var(--g-spacing-6);
|
|
20
24
|
}
|
|
21
25
|
.g-aikit-empty-container__text-container {
|
|
@@ -47,18 +51,27 @@
|
|
|
47
51
|
}
|
|
48
52
|
.g-aikit-empty-container__suggestions-section {
|
|
49
53
|
display: flex;
|
|
54
|
+
flex: 1 1 auto;
|
|
50
55
|
flex-direction: column;
|
|
56
|
+
min-height: 0;
|
|
51
57
|
gap: var(--g-spacing-3);
|
|
52
58
|
}
|
|
53
59
|
.g-aikit-empty-container__suggestions-title {
|
|
54
60
|
display: flex;
|
|
61
|
+
flex-shrink: 0;
|
|
55
62
|
padding: 0 var(--g-spacing-2);
|
|
56
63
|
align-items: flex-start;
|
|
57
64
|
gap: var(--g-spacing-2);
|
|
58
65
|
align-self: stretch;
|
|
59
66
|
}
|
|
67
|
+
.g-aikit-empty-container__suggestions-list {
|
|
68
|
+
flex: 1 1 auto;
|
|
69
|
+
min-height: 70px;
|
|
70
|
+
overflow-y: auto;
|
|
71
|
+
}
|
|
60
72
|
.g-aikit-empty-container__show-more {
|
|
61
73
|
display: flex;
|
|
74
|
+
flex-shrink: 0;
|
|
62
75
|
justify-content: flex-start;
|
|
63
76
|
padding-top: var(--g-spacing-2);
|
|
64
77
|
}
|
|
@@ -22,6 +22,6 @@ export function EmptyContainer(props) {
|
|
|
22
22
|
const descriptionAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.description) || 'left';
|
|
23
23
|
// Define text for "Show more" button with localization support
|
|
24
24
|
const showMoreButtonText = showMoreText || i18n('show-more-button');
|
|
25
|
-
return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx("div", { className: b('content'), children: hasContent && (_jsxs(_Fragment, { children: [_jsxs("div", { className: b('welcome-section'), children: [image && (_jsx("div", { className: b('image-container', { align: imageAlignment }), children: image })), _jsxs("div", { className: b('text-container'), children: [title && (_jsx(Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && (_jsx(Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && (_jsxs("div", { className: b('suggestions-section'), children: [suggestionTitle && (_jsx("div", { className: b('suggestions-title'), children: typeof suggestionTitle === 'string' ? (_jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle })) : (suggestionTitle) })), _jsx("div", { children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: layout, wrapText: wrapText }) }), showMore && (_jsx("div", { className: b('show-more'), children: _jsxs(Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [_jsx(Button.Icon, { children: _jsx(ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
|
|
25
|
+
return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx("div", { className: b('content'), children: hasContent && (_jsxs(_Fragment, { children: [_jsxs("div", { className: b('welcome-section'), children: [image && (_jsx("div", { className: b('image-container', { align: imageAlignment }), children: image })), _jsxs("div", { className: b('text-container'), children: [title && (_jsx(Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && (_jsx(Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && (_jsxs("div", { className: b('suggestions-section'), children: [suggestionTitle && (_jsx("div", { className: b('suggestions-title'), children: typeof suggestionTitle === 'string' ? (_jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle })) : (suggestionTitle) })), _jsx("div", { className: b('suggestions-list'), children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: layout, wrapText: wrapText }) }), showMore && (_jsx("div", { className: b('show-more'), children: _jsxs(Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [_jsx(Button.Icon, { children: _jsx(ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
|
|
26
26
|
}
|
|
27
27
|
//# sourceMappingURL=EmptyContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyContainer.js","sourceRoot":"../../../../../src","sources":["components/templates/EmptyContainer/EmptyContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,6BAA0B;AACxC,OAAO,EAAC,WAAW,EAAC,6CAAoC;AAExD,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,8BAA+B;AAE/B,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAwDnC;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACrD,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,WAAW,GAAG,EAAE,EAChB,iBAAiB,EACjB,SAAS,EACT,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,KAAK,IAAI,WAAW,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEnF,oCAAoC;IACpC,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,MAAM,CAAC;IAClD,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,MAAM,CAAC;IAClD,MAAM,oBAAoB,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,MAAM,CAAC;IAE9D,+DAA+D;IAC/D,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAEpE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC3C,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACvB,UAAU,IAAI,CACX,8BACI,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,aAC/B,KAAK,IAAI,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC,CAAC,YACxD,KAAK,GACJ,CACT,EAED,eAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAC9B,KAAK,IAAI,CACN,KAAC,IAAI,IACD,OAAO,EAAC,UAAU,EAClB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC,CAAC,YAE7C,KAAK,GACH,CACV,EAEA,WAAW,IAAI,CACZ,KAAC,IAAI,IACD,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,KAAK,EAAE,oBAAoB,EAAC,CAAC,YAEzD,WAAW,GACT,CACV,IACC,IACJ,EAEL,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,IAAI,CAC3D,eAAK,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,aACnC,eAAe,IAAI,CAChB,cAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YACjC,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnC,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,SAAS,YACtC,eAAe,GACb,CACV,CAAC,CAAC,CAAC,CACA,eAAe,CAClB,GACC,CACT,EACD,
|
|
1
|
+
{"version":3,"file":"EmptyContainer.js","sourceRoot":"../../../../../src","sources":["components/templates/EmptyContainer/EmptyContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ArrowRotateRight} from '@gravity-ui/icons';\nimport {Button, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {Suggestions} from '../../molecules/Suggestions';\n\nimport {i18n} from './i18n';\n\nimport './EmptyContainer.scss';\n\nconst b = block('empty-container');\n\n/**\n * Suggestion item for EmptyContainer\n */\nexport type Suggestion = SuggestionsItem;\n\n/**\n * Alignment options for content elements\n */\nexport type ContentAlignment = 'left' | 'center' | 'right';\n\n/**\n * Alignment configuration for different sections\n */\nexport interface AlignmentConfig {\n /** Alignment for the image */\n image?: ContentAlignment;\n /** Alignment for the title */\n title?: ContentAlignment;\n /** Alignment for the description */\n description?: ContentAlignment;\n}\n\n/**\n * Props for the EmptyContainer component\n */\nexport interface EmptyContainerProps {\n /** Image or icon to display at the top */\n image?: React.ReactNode;\n /** Title text or custom React element for the welcome screen */\n title?: React.ReactNode;\n /** Description text or custom React element explaining the functionality */\n description?: React.ReactNode;\n /** Title for the suggestions section - can be string or custom React element */\n suggestionTitle?: React.ReactNode;\n /** Array of suggestion items */\n suggestions?: Suggestion[];\n /** Callback when a suggestion is clicked */\n onSuggestionClick?: (content: string, id?: string) => void;\n /** Alignment configuration for image, title, and description */\n alignment?: AlignmentConfig;\n /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Enable text wrapping inside suggestion buttons instead of ellipsis */\n wrapText?: boolean;\n /** Callback for showing more suggestions */\n showMore?: () => void;\n /** Custom text for the show more button */\n showMoreText?: string;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n}\n\n/**\n * EmptyContainer component - displays a welcome screen with image, title, description,\n * and suggestions\n *\n * @param props - Component props\n * @returns React component\n */\nexport function EmptyContainer(props: EmptyContainerProps) {\n const {\n image,\n title,\n description,\n suggestionTitle,\n suggestions = [],\n onSuggestionClick,\n alignment,\n layout = 'grid',\n wrapText = false,\n showMore,\n showMoreText,\n className,\n qa,\n } = props;\n\n const hasContent = title || description || (suggestions && suggestions.length > 0);\n\n // Define alignment for each element\n const imageAlignment = alignment?.image || 'left';\n const titleAlignment = alignment?.title || 'left';\n const descriptionAlignment = alignment?.description || 'left';\n\n // Define text for \"Show more\" button with localization support\n const showMoreButtonText = showMoreText || i18n('show-more-button');\n\n return (\n <div className={b(null, className)} data-qa={qa}>\n <div className={b('content')}>\n {hasContent && (\n <>\n <div className={b('welcome-section')}>\n {image && (\n <div className={b('image-container', {align: imageAlignment})}>\n {image}\n </div>\n )}\n\n <div className={b('text-container')}>\n {title && (\n <Text\n variant=\"header-2\"\n className={b('title', {align: titleAlignment})}\n >\n {title}\n </Text>\n )}\n\n {description && (\n <Text\n variant=\"body-2\"\n color=\"complementary\"\n className={b('description', {align: descriptionAlignment})}\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n\n {suggestions && suggestions.length > 0 && onSuggestionClick && (\n <div className={b('suggestions-section')}>\n {suggestionTitle && (\n <div className={b('suggestions-title')}>\n {typeof suggestionTitle === 'string' ? (\n <Text variant=\"subheader-3\" color=\"primary\">\n {suggestionTitle}\n </Text>\n ) : (\n suggestionTitle\n )}\n </div>\n )}\n <div className={b('suggestions-list')}>\n <Suggestions\n items={suggestions}\n onClick={onSuggestionClick}\n layout={layout}\n wrapText={wrapText}\n />\n </div>\n {showMore && (\n <div className={b('show-more')}>\n <Button\n view=\"flat-secondary\"\n size=\"l\"\n onClick={showMore}\n className={b('show-more-button')}\n >\n <Button.Icon>\n <ArrowRotateRight />\n </Button.Icon>\n {showMoreButtonText}\n </Button>\n </div>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n );\n}\n"]}
|
package/build/esm/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"2.
|
|
1
|
+
{"version":"2.9.0","type":"module","sideEffects":["*.css","*.scss"]}
|