@gravity-ui/aikit 2.11.1-beta.29deebcd0f797782b60dc45d89d2ce3405aea560.0 → 2.12.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.
@@ -17,8 +17,10 @@ const b = (0, cn_1.block)('suggestions');
17
17
  */
18
18
  function Suggestions(props) {
19
19
  const { items, onClick, title, layout = 'list', textAlign = 'left', wrapText = false, className, qa, } = props;
20
- const handleClick = (item) => {
21
- onClick(item.title, item.id);
20
+ const handleClick = async (item) => {
21
+ var _a;
22
+ await ((_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item.title, item.id));
23
+ await onClick(item.title, item.id);
22
24
  };
23
25
  const renderButton = (item, index) => {
24
26
  return ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: "m", view: item.view || 'outlined', onClick: () => handleClick(item), className: b('button', { layout }), width: "auto", children: (0, jsx_runtime_1.jsxs)("div", { className: b('button-content', {
@@ -1 +1 @@
1
- {"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":";;AA0CA,kCAqEC;;AA7GD,6CAA4D;AAC5D,6CAA6C;AAG7C,6CAAwC;AACxC,oEAAsD;AAEtD,6BAA4B;AAE5B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,aAAa,CAAC,CAAC;AAwB/B;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,KAAuB;IAC/C,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,IAAkC,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,IAAqB,EAAE,KAAa,EAAE,EAAE;QAC1D,OAAO,CACH,uBAAC,2BAAY,IAET,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC/C,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAC,CAAC,EAChC,KAAK,EAAC,MAAM,YAEZ,iCACI,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE;oBAC3B,MAAM;oBACN,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBAClD,CAAC,aAED,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACrB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,uBAAC,YAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACnC,CACT,EACD,uBAAC,YAAI,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,YACrE,IAAI,CAAC,KAAK,GACR,EACN,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CACtB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,uBAAC,YAAI,IAAC,IAAI,EAAE,oBAAY,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACT,IACC,IA3BD,IAAI,CAAC,EAAE,IAAI,KAAK,CA4BV,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,aAAW,EAAE,aACjD,KAAK,IAAI,CACN,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,YACjC,KAAK,GACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,GACC,CACT,EACD,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAC,CAAC,YACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GACpD,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n /** Array of suggestion items to display */\n items: SuggestionsItem[];\n /** Callback function called when a suggestion is clicked */\n onClick: (content: string, id?: string) => void | Promise<void>;\n /** Title to display above suggestions - can be string or custom React element */\n title?: React.ReactNode;\n /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Text alignment inside buttons: 'left', 'center', or 'right' */\n textAlign?: 'left' | 'center' | 'right';\n /** Enable text wrapping inside buttons instead of ellipsis */\n wrapText?: boolean;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n const {\n items,\n onClick,\n title,\n layout = 'list',\n textAlign = 'left',\n wrapText = false,\n className,\n qa,\n } = props;\n\n const handleClick = (item: {id?: string; title: string}) => {\n onClick(item.title, item.id);\n };\n\n const renderButton = (item: SuggestionsItem, index: number) => {\n return (\n <ActionButton\n key={item.id || index}\n tooltipTitle={wrapText ? undefined : item.title}\n size=\"m\"\n view={item.view || 'outlined'}\n onClick={() => handleClick(item)}\n className={b('button', {layout})}\n width=\"auto\"\n >\n <div\n className={b('button-content', {\n layout,\n 'text-align': item.icon ? undefined : textAlign,\n })}\n >\n {item.icon === 'left' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronLeft} size={16} />\n </div>\n )}\n <Text as=\"div\" className={b(wrapText ? 'button-text-wrap' : 'button-text')}>\n {item.title}\n </Text>\n {item.icon === 'right' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronRight} size={16} />\n </div>\n )}\n </div>\n </ActionButton>\n );\n };\n\n return (\n <div className={b('container', className)} data-qa={qa}>\n {title && (\n <div className={b('title')}>\n {typeof title === 'string' ? (\n <Text variant=\"body-1\" color=\"primary\">\n {title}\n </Text>\n ) : (\n title\n )}\n </div>\n )}\n <div className={b({layout})}>\n {items.map((item, index) => renderButton(item, index))}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":";;AA0CA,kCAsEC;;AA9GD,6CAA4D;AAC5D,6CAA6C;AAG7C,6CAAwC;AACxC,oEAAsD;AAEtD,6BAA4B;AAE5B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,aAAa,CAAC,CAAC;AAwB/B;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,KAAuB;IAC/C,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,KAAK,EAAE,IAAqB,EAAE,EAAE;;QAChD,MAAM,CAAA,MAAA,IAAI,CAAC,OAAO,qDAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA,CAAC;QAC1C,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,IAAqB,EAAE,KAAa,EAAE,EAAE;QAC1D,OAAO,CACH,uBAAC,2BAAY,IAET,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC/C,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAC,CAAC,EAChC,KAAK,EAAC,MAAM,YAEZ,iCACI,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE;oBAC3B,MAAM;oBACN,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBAClD,CAAC,aAED,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACrB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,uBAAC,YAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACnC,CACT,EACD,uBAAC,YAAI,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,YACrE,IAAI,CAAC,KAAK,GACR,EACN,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CACtB,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,uBAAC,YAAI,IAAC,IAAI,EAAE,oBAAY,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACT,IACC,IA3BD,IAAI,CAAC,EAAE,IAAI,KAAK,CA4BV,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,aAAW,EAAE,aACjD,KAAK,IAAI,CACN,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,YACjC,KAAK,GACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,GACC,CACT,EACD,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAC,CAAC,YACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GACpD,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n /** Array of suggestion items to display */\n items: SuggestionsItem[];\n /** Callback function called when a suggestion is clicked */\n onClick: (content: string, id?: string) => void | Promise<void>;\n /** Title to display above suggestions - can be string or custom React element */\n title?: React.ReactNode;\n /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Text alignment inside buttons: 'left', 'center', or 'right' */\n textAlign?: 'left' | 'center' | 'right';\n /** Enable text wrapping inside buttons instead of ellipsis */\n wrapText?: boolean;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n const {\n items,\n onClick,\n title,\n layout = 'list',\n textAlign = 'left',\n wrapText = false,\n className,\n qa,\n } = props;\n\n const handleClick = async (item: SuggestionsItem) => {\n await item.onClick?.(item.title, item.id);\n await onClick(item.title, item.id);\n };\n\n const renderButton = (item: SuggestionsItem, index: number) => {\n return (\n <ActionButton\n key={item.id || index}\n tooltipTitle={wrapText ? undefined : item.title}\n size=\"m\"\n view={item.view || 'outlined'}\n onClick={() => handleClick(item)}\n className={b('button', {layout})}\n width=\"auto\"\n >\n <div\n className={b('button-content', {\n layout,\n 'text-align': item.icon ? undefined : textAlign,\n })}\n >\n {item.icon === 'left' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronLeft} size={16} />\n </div>\n )}\n <Text as=\"div\" className={b(wrapText ? 'button-text-wrap' : 'button-text')}>\n {item.title}\n </Text>\n {item.icon === 'right' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronRight} size={16} />\n </div>\n )}\n </div>\n </ActionButton>\n );\n };\n\n return (\n <div className={b('container', className)} data-qa={qa}>\n {title && (\n <div className={b('title')}>\n {typeof title === 'string' ? (\n <Text variant=\"body-1\" color=\"primary\">\n {title}\n </Text>\n ) : (\n title\n )}\n </div>\n )}\n <div className={b({layout})}>\n {items.map((item, index) => renderButton(item, index))}\n </div>\n </div>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":"2.11.1-beta.29deebcd0f797782b60dc45d89d2ce3405aea560.0","type":"commonjs","sideEffects":["*.css","*.scss"]}
1
+ {"version":"2.12.0","type":"commonjs","sideEffects":["*.css","*.scss"]}
@@ -25,4 +25,6 @@ export type SuggestionsItem = {
25
25
  view?: ButtonButtonProps['view'];
26
26
  /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */
27
27
  icon?: 'left' | 'right';
28
+ /** Additional callback invoked when this suggestion is clicked */
29
+ onClick?: (content: string, id?: string) => void | Promise<void>;
28
30
  };
@@ -1 +1 @@
1
- {"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["types/common.ts"],"names":[],"mappings":"","sourcesContent":["import {ButtonButtonProps} from '@gravity-ui/uikit';\n\n/**\n * Action configuration object with properties\n */\nexport type ActionConfig = {\n actionType?: string;\n label?: string;\n icon?: React.ReactNode;\n} & ButtonButtonProps;\n\n/**\n * Action can be either:\n * - ActionConfig object with properties (label, icon, onClick, view)\n * - React.ReactNode for fully custom content\n */\nexport type Action = ActionConfig | React.ReactNode;\n\n/**\n * Single suggestion item displayed as a button\n */\nexport type SuggestionsItem = {\n /** Optional unique identifier for the item */\n id?: string;\n /** Title text to display on the button */\n title: string;\n /** Button view */\n view?: ButtonButtonProps['view'];\n /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */\n icon?: 'left' | 'right';\n};\n"]}
1
+ {"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["types/common.ts"],"names":[],"mappings":"","sourcesContent":["import {ButtonButtonProps} from '@gravity-ui/uikit';\n\n/**\n * Action configuration object with properties\n */\nexport type ActionConfig = {\n actionType?: string;\n label?: string;\n icon?: React.ReactNode;\n} & ButtonButtonProps;\n\n/**\n * Action can be either:\n * - ActionConfig object with properties (label, icon, onClick, view)\n * - React.ReactNode for fully custom content\n */\nexport type Action = ActionConfig | React.ReactNode;\n\n/**\n * Single suggestion item displayed as a button\n */\nexport type SuggestionsItem = {\n /** Optional unique identifier for the item */\n id?: string;\n /** Title text to display on the button */\n title: string;\n /** Button view */\n view?: ButtonButtonProps['view'];\n /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */\n icon?: 'left' | 'right';\n /** Additional callback invoked when this suggestion is clicked */\n onClick?: (content: string, id?: string) => void | Promise<void>;\n};\n"]}
@@ -14,8 +14,10 @@ const b = block('suggestions');
14
14
  */
15
15
  export function Suggestions(props) {
16
16
  const { items, onClick, title, layout = 'list', textAlign = 'left', wrapText = false, className, qa, } = props;
17
- const handleClick = (item) => {
18
- onClick(item.title, item.id);
17
+ const handleClick = async (item) => {
18
+ var _a;
19
+ await ((_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item.title, item.id));
20
+ await onClick(item.title, item.id);
19
21
  };
20
22
  const renderButton = (item, index) => {
21
23
  return (_jsx(ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: "m", view: item.view || 'outlined', onClick: () => handleClick(item), className: b('button', { layout }), width: "auto", children: _jsxs("div", { className: b('button-content', {
@@ -1 +1 @@
1
- {"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAC,KAAK,EAAC,6BAA0B;AACxC,OAAO,EAAC,YAAY,EAAC,0CAAiC;AAEtD,2BAA4B;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAwB/B;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IAC/C,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,CAAC,IAAkC,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,IAAqB,EAAE,KAAa,EAAE,EAAE;QAC1D,OAAO,CACH,KAAC,YAAY,IAET,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC/C,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAC,CAAC,EAChC,KAAK,EAAC,MAAM,YAEZ,eACI,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE;oBAC3B,MAAM;oBACN,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBAClD,CAAC,aAED,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACrB,cAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACnC,CACT,EACD,KAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,YACrE,IAAI,CAAC,KAAK,GACR,EACN,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CACtB,cAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACT,IACC,IA3BD,IAAI,CAAC,EAAE,IAAI,KAAK,CA4BV,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,aAAW,EAAE,aACjD,KAAK,IAAI,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,YACjC,KAAK,GACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,GACC,CACT,EACD,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAC,CAAC,YACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GACpD,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n /** Array of suggestion items to display */\n items: SuggestionsItem[];\n /** Callback function called when a suggestion is clicked */\n onClick: (content: string, id?: string) => void | Promise<void>;\n /** Title to display above suggestions - can be string or custom React element */\n title?: React.ReactNode;\n /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Text alignment inside buttons: 'left', 'center', or 'right' */\n textAlign?: 'left' | 'center' | 'right';\n /** Enable text wrapping inside buttons instead of ellipsis */\n wrapText?: boolean;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n const {\n items,\n onClick,\n title,\n layout = 'list',\n textAlign = 'left',\n wrapText = false,\n className,\n qa,\n } = props;\n\n const handleClick = (item: {id?: string; title: string}) => {\n onClick(item.title, item.id);\n };\n\n const renderButton = (item: SuggestionsItem, index: number) => {\n return (\n <ActionButton\n key={item.id || index}\n tooltipTitle={wrapText ? undefined : item.title}\n size=\"m\"\n view={item.view || 'outlined'}\n onClick={() => handleClick(item)}\n className={b('button', {layout})}\n width=\"auto\"\n >\n <div\n className={b('button-content', {\n layout,\n 'text-align': item.icon ? undefined : textAlign,\n })}\n >\n {item.icon === 'left' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronLeft} size={16} />\n </div>\n )}\n <Text as=\"div\" className={b(wrapText ? 'button-text-wrap' : 'button-text')}>\n {item.title}\n </Text>\n {item.icon === 'right' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronRight} size={16} />\n </div>\n )}\n </div>\n </ActionButton>\n );\n };\n\n return (\n <div className={b('container', className)} data-qa={qa}>\n {title && (\n <div className={b('title')}>\n {typeof title === 'string' ? (\n <Text variant=\"body-1\" color=\"primary\">\n {title}\n </Text>\n ) : (\n title\n )}\n </div>\n )}\n <div className={b({layout})}>\n {items.map((item, index) => renderButton(item, index))}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Text} from '@gravity-ui/uikit';\n\nimport type {SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n /** Array of suggestion items to display */\n items: SuggestionsItem[];\n /** Callback function called when a suggestion is clicked */\n onClick: (content: string, id?: string) => void | Promise<void>;\n /** Title to display above suggestions - can be string or custom React element */\n title?: React.ReactNode;\n /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Text alignment inside buttons: 'left', 'center', or 'right' */\n textAlign?: 'left' | 'center' | 'right';\n /** Enable text wrapping inside buttons instead of ellipsis */\n wrapText?: boolean;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n const {\n items,\n onClick,\n title,\n layout = 'list',\n textAlign = 'left',\n wrapText = false,\n className,\n qa,\n } = props;\n\n const handleClick = async (item: SuggestionsItem) => {\n await item.onClick?.(item.title, item.id);\n await onClick(item.title, item.id);\n };\n\n const renderButton = (item: SuggestionsItem, index: number) => {\n return (\n <ActionButton\n key={item.id || index}\n tooltipTitle={wrapText ? undefined : item.title}\n size=\"m\"\n view={item.view || 'outlined'}\n onClick={() => handleClick(item)}\n className={b('button', {layout})}\n width=\"auto\"\n >\n <div\n className={b('button-content', {\n layout,\n 'text-align': item.icon ? undefined : textAlign,\n })}\n >\n {item.icon === 'left' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronLeft} size={16} />\n </div>\n )}\n <Text as=\"div\" className={b(wrapText ? 'button-text-wrap' : 'button-text')}>\n {item.title}\n </Text>\n {item.icon === 'right' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronRight} size={16} />\n </div>\n )}\n </div>\n </ActionButton>\n );\n };\n\n return (\n <div className={b('container', className)} data-qa={qa}>\n {title && (\n <div className={b('title')}>\n {typeof title === 'string' ? (\n <Text variant=\"body-1\" color=\"primary\">\n {title}\n </Text>\n ) : (\n title\n )}\n </div>\n )}\n <div className={b({layout})}>\n {items.map((item, index) => renderButton(item, index))}\n </div>\n </div>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":"2.11.1-beta.29deebcd0f797782b60dc45d89d2ce3405aea560.0","type":"module","sideEffects":["*.css","*.scss"]}
1
+ {"version":"2.12.0","type":"module","sideEffects":["*.css","*.scss"]}
@@ -25,4 +25,6 @@ export type SuggestionsItem = {
25
25
  view?: ButtonButtonProps['view'];
26
26
  /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */
27
27
  icon?: 'left' | 'right';
28
+ /** Additional callback invoked when this suggestion is clicked */
29
+ onClick?: (content: string, id?: string) => void | Promise<void>;
28
30
  };
@@ -1 +1 @@
1
- {"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["types/common.ts"],"names":[],"mappings":"","sourcesContent":["import {ButtonButtonProps} from '@gravity-ui/uikit';\n\n/**\n * Action configuration object with properties\n */\nexport type ActionConfig = {\n actionType?: string;\n label?: string;\n icon?: React.ReactNode;\n} & ButtonButtonProps;\n\n/**\n * Action can be either:\n * - ActionConfig object with properties (label, icon, onClick, view)\n * - React.ReactNode for fully custom content\n */\nexport type Action = ActionConfig | React.ReactNode;\n\n/**\n * Single suggestion item displayed as a button\n */\nexport type SuggestionsItem = {\n /** Optional unique identifier for the item */\n id?: string;\n /** Title text to display on the button */\n title: string;\n /** Button view */\n view?: ButtonButtonProps['view'];\n /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */\n icon?: 'left' | 'right';\n};\n"]}
1
+ {"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["types/common.ts"],"names":[],"mappings":"","sourcesContent":["import {ButtonButtonProps} from '@gravity-ui/uikit';\n\n/**\n * Action configuration object with properties\n */\nexport type ActionConfig = {\n actionType?: string;\n label?: string;\n icon?: React.ReactNode;\n} & ButtonButtonProps;\n\n/**\n * Action can be either:\n * - ActionConfig object with properties (label, icon, onClick, view)\n * - React.ReactNode for fully custom content\n */\nexport type Action = ActionConfig | React.ReactNode;\n\n/**\n * Single suggestion item displayed as a button\n */\nexport type SuggestionsItem = {\n /** Optional unique identifier for the item */\n id?: string;\n /** Title text to display on the button */\n title: string;\n /** Button view */\n view?: ButtonButtonProps['view'];\n /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */\n icon?: 'left' | 'right';\n /** Additional callback invoked when this suggestion is clicked */\n onClick?: (content: string, id?: string) => void | Promise<void>;\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/aikit",
3
- "version": "2.11.1-beta.29deebcd0f797782b60dc45d89d2ce3405aea560.0",
3
+ "version": "2.12.0",
4
4
  "description": "Gravity UI base kit for building ai assistant chats",
5
5
  "license": "MIT",
6
6
  "type": "commonjs",