@gravity-ui/querieskit 1.3.1 → 1.4.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 (126) hide show
  1. package/build/cjs/components/AttachmentList/AttachmentList.d.ts +2 -2
  2. package/build/cjs/components/AttachmentList/AttachmentList.js +9 -1
  3. package/build/cjs/components/AttachmentList/AttachmentList.js.map +1 -1
  4. package/build/cjs/components/AttachmentList/AttachmentList.stories.d.ts +36 -20
  5. package/build/cjs/components/AttachmentList/AttachmentList.stories.js +3 -0
  6. package/build/cjs/components/AttachmentList/AttachmentList.stories.js.map +1 -1
  7. package/build/cjs/components/AttachmentList/helpers/isInteractiveTarget.d.ts +2 -0
  8. package/build/cjs/components/AttachmentList/helpers/isInteractiveTarget.js +11 -0
  9. package/build/cjs/components/AttachmentList/helpers/isInteractiveTarget.js.map +1 -0
  10. package/build/cjs/components/LazyList/LazyList.js +12 -1
  11. package/build/cjs/components/LazyList/LazyList.js.map +1 -1
  12. package/build/cjs/components/RowLink/RowLink.d.ts +4 -4
  13. package/build/cjs/components/RowLink/RowLink.js +15 -4
  14. package/build/cjs/components/RowLink/RowLink.js.map +1 -1
  15. package/build/cjs/components/SearchRowLayout/SearchRowLayout.d.ts +2 -0
  16. package/build/cjs/components/SearchRowLayout/SearchRowLayout.js +2 -0
  17. package/build/cjs/components/SearchRowLayout/SearchRowLayout.js.map +1 -1
  18. package/build/cjs/helpers/getListKey.d.ts +1 -0
  19. package/build/cjs/helpers/getListKey.js +5 -4
  20. package/build/cjs/helpers/getListKey.js.map +1 -1
  21. package/build/cjs/helpers/useListKey.d.ts +2 -0
  22. package/build/cjs/helpers/useListKey.js +32 -0
  23. package/build/cjs/helpers/useListKey.js.map +1 -0
  24. package/build/cjs/helpers/useLoadMoreSentinel.d.ts +1 -1
  25. package/build/cjs/helpers/useLoadMoreSentinel.js +12 -3
  26. package/build/cjs/helpers/useLoadMoreSentinel.js.map +1 -1
  27. package/build/cjs/modules/Attachments/Attachments.css +4 -0
  28. package/build/cjs/modules/Attachments/Attachments.css.map +1 -1
  29. package/build/cjs/modules/Attachments/Attachments.d.ts +2 -1
  30. package/build/cjs/modules/Attachments/Attachments.js +8 -1
  31. package/build/cjs/modules/Attachments/Attachments.js.map +1 -1
  32. package/build/cjs/modules/Attachments/Attachments.stories.d.ts +2 -1
  33. package/build/cjs/modules/Attachments/Attachments.stories.js +7 -3
  34. package/build/cjs/modules/Attachments/Attachments.stories.js.map +1 -1
  35. package/build/cjs/modules/HistoryHeader/HistoryHeader.d.ts +1 -0
  36. package/build/cjs/modules/HistoryHeader/HistoryHeader.js +8 -6
  37. package/build/cjs/modules/HistoryHeader/HistoryHeader.js.map +1 -1
  38. package/build/cjs/modules/HistoryRow/HistoryRow.d.ts +1 -1
  39. package/build/cjs/modules/HistoryRow/HistoryRow.js +3 -1
  40. package/build/cjs/modules/HistoryRow/HistoryRow.js.map +1 -1
  41. package/build/cjs/modules/HistorySearchRow/HistorySearchRow.d.ts +1 -1
  42. package/build/cjs/modules/HistorySearchRow/HistorySearchRow.js +3 -1
  43. package/build/cjs/modules/HistorySearchRow/HistorySearchRow.js.map +1 -1
  44. package/build/cjs/modules/QueriesList/QueriesList.d.ts +6 -2
  45. package/build/cjs/modules/QueriesList/QueriesList.js +14 -3
  46. package/build/cjs/modules/QueriesList/QueriesList.js.map +1 -1
  47. package/build/cjs/modules/RowsList/RowsList.d.ts +6 -2
  48. package/build/cjs/modules/RowsList/RowsList.js +13 -7
  49. package/build/cjs/modules/RowsList/RowsList.js.map +1 -1
  50. package/build/cjs/modules/RowsList/helpers/prepareRowData.d.ts +3 -2
  51. package/build/cjs/modules/RowsList/helpers/prepareRowData.js +4 -2
  52. package/build/cjs/modules/RowsList/helpers/prepareRowData.js.map +1 -1
  53. package/build/cjs/types/queryList.d.ts +4 -1
  54. package/build/cjs/types/queryList.js.map +1 -1
  55. package/build/cjs/widgets/QueriesHistory/QueriesHistory.d.ts +6 -2
  56. package/build/cjs/widgets/QueriesHistory/QueriesHistory.js +9 -1
  57. package/build/cjs/widgets/QueriesHistory/QueriesHistory.js.map +1 -1
  58. package/build/cjs/widgets/QueriesHistory/QueriesHistory.stories.d.ts +5 -0
  59. package/build/cjs/widgets/QueriesHistory/QueriesHistory.stories.js +200 -6
  60. package/build/cjs/widgets/QueriesHistory/QueriesHistory.stories.js.map +1 -1
  61. package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.js +3 -1
  62. package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.js.map +1 -1
  63. package/build/esm/components/AttachmentList/AttachmentList.d.ts +2 -2
  64. package/build/esm/components/AttachmentList/AttachmentList.js +9 -1
  65. package/build/esm/components/AttachmentList/AttachmentList.js.map +1 -1
  66. package/build/esm/components/AttachmentList/AttachmentList.stories.d.ts +36 -20
  67. package/build/esm/components/AttachmentList/AttachmentList.stories.js +3 -0
  68. package/build/esm/components/AttachmentList/AttachmentList.stories.js.map +1 -1
  69. package/build/esm/components/AttachmentList/helpers/isInteractiveTarget.d.ts +2 -0
  70. package/build/esm/components/AttachmentList/helpers/isInteractiveTarget.js +5 -0
  71. package/build/esm/components/AttachmentList/helpers/isInteractiveTarget.js.map +1 -0
  72. package/build/esm/components/LazyList/LazyList.js +13 -2
  73. package/build/esm/components/LazyList/LazyList.js.map +1 -1
  74. package/build/esm/components/RowLink/RowLink.d.ts +4 -4
  75. package/build/esm/components/RowLink/RowLink.js +15 -4
  76. package/build/esm/components/RowLink/RowLink.js.map +1 -1
  77. package/build/esm/components/SearchRowLayout/SearchRowLayout.d.ts +2 -0
  78. package/build/esm/components/SearchRowLayout/SearchRowLayout.js +2 -0
  79. package/build/esm/components/SearchRowLayout/SearchRowLayout.js.map +1 -1
  80. package/build/esm/helpers/getListKey.d.ts +1 -0
  81. package/build/esm/helpers/getListKey.js +4 -3
  82. package/build/esm/helpers/getListKey.js.map +1 -1
  83. package/build/esm/helpers/useListKey.d.ts +2 -0
  84. package/build/esm/helpers/useListKey.js +26 -0
  85. package/build/esm/helpers/useListKey.js.map +1 -0
  86. package/build/esm/helpers/useLoadMoreSentinel.d.ts +1 -1
  87. package/build/esm/helpers/useLoadMoreSentinel.js +12 -3
  88. package/build/esm/helpers/useLoadMoreSentinel.js.map +1 -1
  89. package/build/esm/modules/Attachments/Attachments.css +4 -0
  90. package/build/esm/modules/Attachments/Attachments.css.map +1 -1
  91. package/build/esm/modules/Attachments/Attachments.d.ts +2 -1
  92. package/build/esm/modules/Attachments/Attachments.js +8 -1
  93. package/build/esm/modules/Attachments/Attachments.js.map +1 -1
  94. package/build/esm/modules/Attachments/Attachments.scss +5 -0
  95. package/build/esm/modules/Attachments/Attachments.stories.d.ts +2 -1
  96. package/build/esm/modules/Attachments/Attachments.stories.js +7 -3
  97. package/build/esm/modules/Attachments/Attachments.stories.js.map +1 -1
  98. package/build/esm/modules/HistoryHeader/HistoryHeader.d.ts +1 -0
  99. package/build/esm/modules/HistoryHeader/HistoryHeader.js +8 -6
  100. package/build/esm/modules/HistoryHeader/HistoryHeader.js.map +1 -1
  101. package/build/esm/modules/HistoryRow/HistoryRow.d.ts +1 -1
  102. package/build/esm/modules/HistoryRow/HistoryRow.js +3 -1
  103. package/build/esm/modules/HistoryRow/HistoryRow.js.map +1 -1
  104. package/build/esm/modules/HistorySearchRow/HistorySearchRow.d.ts +1 -1
  105. package/build/esm/modules/HistorySearchRow/HistorySearchRow.js +3 -1
  106. package/build/esm/modules/HistorySearchRow/HistorySearchRow.js.map +1 -1
  107. package/build/esm/modules/QueriesList/QueriesList.d.ts +6 -2
  108. package/build/esm/modules/QueriesList/QueriesList.js +14 -3
  109. package/build/esm/modules/QueriesList/QueriesList.js.map +1 -1
  110. package/build/esm/modules/RowsList/RowsList.d.ts +6 -2
  111. package/build/esm/modules/RowsList/RowsList.js +13 -7
  112. package/build/esm/modules/RowsList/RowsList.js.map +1 -1
  113. package/build/esm/modules/RowsList/helpers/prepareRowData.d.ts +3 -2
  114. package/build/esm/modules/RowsList/helpers/prepareRowData.js +4 -2
  115. package/build/esm/modules/RowsList/helpers/prepareRowData.js.map +1 -1
  116. package/build/esm/types/queryList.d.ts +4 -1
  117. package/build/esm/types/queryList.js.map +1 -1
  118. package/build/esm/widgets/QueriesHistory/QueriesHistory.d.ts +6 -2
  119. package/build/esm/widgets/QueriesHistory/QueriesHistory.js +9 -1
  120. package/build/esm/widgets/QueriesHistory/QueriesHistory.js.map +1 -1
  121. package/build/esm/widgets/QueriesHistory/QueriesHistory.stories.d.ts +5 -0
  122. package/build/esm/widgets/QueriesHistory/QueriesHistory.stories.js +200 -6
  123. package/build/esm/widgets/QueriesHistory/QueriesHistory.stories.js.map +1 -1
  124. package/build/esm/widgets/TutorialsHistory/TutorialsHistory.js +3 -1
  125. package/build/esm/widgets/TutorialsHistory/TutorialsHistory.js.map +1 -1
  126. package/package.json +1 -1
@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
3
3
  import { type AttachmentListProps } from './AttachmentList';
4
4
  declare const meta: {
5
5
  title: string;
6
- component: ({ attachments, onEdit, onDelete, onRevert, wasAddedIds, wasEditedIds, editingIds, renderEditForm, className, isDeleted, ...listProps }: AttachmentListProps) => React.JSX.Element;
6
+ component: ({ attachments, onEdit, onDelete, onRevert, wasAddedIds, wasEditedIds, editingIds, renderEditForm, className, isDeleted, onItemClick, ...listProps }: AttachmentListProps) => React.JSX.Element;
7
7
  tags: string[];
8
8
  parameters: {
9
9
  layout: string;
@@ -18,16 +18,22 @@ declare const meta: {
18
18
  loading?: boolean | undefined;
19
19
  size?: import("@gravity-ui/uikit").TextInputSize | undefined;
20
20
  sortable?: boolean | undefined;
21
- itemHeight?: number | ((item: {
22
- disabled?: boolean;
23
- }, itemIndex: number) => number) | undefined;
24
- renderItem?: ((item: {
25
- disabled?: boolean;
26
- }, isItemActive: boolean, itemIndex: number) => React.ReactNode) | undefined;
21
+ itemHeight?: number | ((item: import("@gravity-ui/uikit").ListItemData<{
22
+ id: string;
23
+ name: string;
24
+ link?: string;
25
+ }>, itemIndex: number) => number) | undefined;
26
+ renderItem?: ((item: import("@gravity-ui/uikit").ListItemData<{
27
+ id: string;
28
+ name: string;
29
+ link?: string;
30
+ }>, isItemActive: boolean, itemIndex: number) => React.ReactNode) | undefined;
27
31
  onLoadMore?: (() => void) | undefined;
28
- onItemClick?: ((item: {
29
- disabled?: boolean;
30
- }, index: number, fromKeyboard?: boolean, event?: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void) | undefined;
32
+ onItemClick?: ((item: import("@gravity-ui/uikit").ListItemData<{
33
+ id: string;
34
+ name: string;
35
+ link?: string;
36
+ }>, index: number, fromKeyboard?: boolean, event?: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void) | undefined;
31
37
  filterable?: boolean | undefined;
32
38
  itemClassName?: string | undefined;
33
39
  itemsClassName?: string | undefined;
@@ -35,20 +41,30 @@ declare const meta: {
35
41
  emptyPlaceholder?: React.ReactNode;
36
42
  filterPlaceholder?: string | undefined;
37
43
  activeItemIndex?: number | undefined;
38
- itemKey?: ((item: {
39
- disabled?: boolean;
40
- }) => string) | undefined;
41
- itemsHeight?: number | ((items: unknown[]) => number) | undefined;
44
+ itemKey?: ((item: import("@gravity-ui/uikit").ListItemData<{
45
+ id: string;
46
+ name: string;
47
+ link?: string;
48
+ }>) => string) | undefined;
49
+ itemsHeight?: number | ((items: {
50
+ id: string;
51
+ name: string;
52
+ link?: string;
53
+ }[]) => number) | undefined;
42
54
  deactivateOnLeave?: boolean | undefined;
43
55
  sortHandleAlign?: import("@gravity-ui/uikit").ListSortHandleAlign | undefined;
44
- filterItem?: ((filter: string) => (item: {
45
- disabled?: boolean;
46
- }) => boolean) | undefined;
56
+ filterItem?: ((filter: string) => (item: import("@gravity-ui/uikit").ListItemData<{
57
+ id: string;
58
+ name: string;
59
+ link?: string;
60
+ }>) => boolean) | undefined;
47
61
  onFilterUpdate?: ((filter: string) => void) | undefined;
48
62
  onFilterEnd?: (({ items }: {
49
- items: {
50
- disabled?: boolean;
51
- }[];
63
+ items: import("@gravity-ui/uikit").ListItemData<{
64
+ id: string;
65
+ name: string;
66
+ link?: string;
67
+ }>[];
52
68
  }) => void) | undefined;
53
69
  onSortEnd?: ((params: import("@gravity-ui/uikit").ListSortParams) => void) | undefined;
54
70
  onChangeActive?: ((index?: number) => void) | undefined;
@@ -127,6 +127,7 @@ var InteractiveAttachmentList = function InteractiveAttachmentList(props) {
127
127
  });
128
128
  });
129
129
  },
130
+ onItemClick: console.info,
130
131
  onEdit: function onEdit(attachment) {
131
132
  var _props$onEdit;
132
133
  (_props$onEdit = props.onEdit) === null || _props$onEdit === void 0 || _props$onEdit.call(props, attachment);
@@ -208,6 +209,7 @@ var EditableAttachmentList = function EditableAttachmentList(props) {
208
209
  }));
209
210
  }
210
211
  },
212
+ onItemClick: console.info,
211
213
  renderEditForm: function renderEditForm(attachment) {
212
214
  var isLink = typeof attachment.link === 'string';
213
215
  if (isLink) {
@@ -260,6 +262,7 @@ var SortableAttachmentList = function SortableAttachmentList(props) {
260
262
  setOrderedAttachments = _useState12[1];
261
263
  return /*#__PURE__*/_jsx(AttachmentList, _objectSpread(_objectSpread({}, props), {}, {
262
264
  attachments: orderedAttachments,
265
+ onItemClick: console.info,
263
266
  onSortEnd: function onSortEnd(_ref) {
264
267
  var _props$onSortEnd;
265
268
  var oldIndex = _ref.oldIndex,
@@ -1 +1 @@
1
- {"version":3,"names":["React","useState","Text","EditAttachmentItem","fn","AttachmentList","jsx","_jsx","attachments","id","name","link","meta","title","component","tags","parameters","layout","decorators","Story","style","width","height","children","args","onDelete","onEdit","Default","ChangeStates","wasAddedIds","wasEditedIds","Filterable","filterable","filterPlaceholder","filterItem","filter","attachment","toLocaleLowerCase","includes","InteractiveAttachmentList","props","_useState","_useState2","_slicedToArray","currentAttachments","setCurrentAttachments","_useState3","_useState4","editedIds","setEditedIds","_objectSpread","_props$onDelete","call","current","item","_props$onEdit","concat","_toConsumableArray","InteractiveActions","render","EditableAttachmentList","_useState5","_useState6","_useState7","_useState8","editingId","setEditingId","_useState9","_useState0","draftName","setDraftName","_useState1","token","_useState10","draftLink","setDraftLink","handleAcceptDraft","prevState","map","attach","undefined","editingIds","list","l","_props$onEdit2","renderEditForm","isLink","onCancel","onAccept","values","onChange","tokens","value","type","fileName","onChangeFileName","CustomEditForm","SortableAttachmentList","_useState11","_useState12","orderedAttachments","setOrderedAttachments","onSortEnd","_ref","_props$onSortEnd","oldIndex","newIndex","next","_next$splice","splice","_next$splice2","movedAttachment","Sortable","sortable","sortHandleAlign","Empty","emptyPlaceholder","color","Loading","loading"],"sources":["AttachmentList.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Text} from '@gravity-ui/uikit';\nimport {EditAttachmentItem, EditLinkValues} from './internal/EditAttachmentItem';\nimport {fn} from 'storybook/test';\n\nimport {AttachmentList, type AttachmentListProps} from './AttachmentList';\n\nconst attachments: AttachmentListProps['attachments'] = [\n {id: 'readme', name: 'README'},\n {id: 'javascript', name: 'index.js'},\n {id: 'python', name: 'main.py'},\n {id: 'csv', name: 'sales.csv'},\n {id: 'link-image', name: 'https://home/tutorial', link: 'https://home/tutorial'},\n {id: 'excel', name: 'forecast.xlsx'},\n {id: 'cpp', name: 'processor.cpp'},\n {id: 'ql', name: 'analytics.ql'},\n {id: 'yql', name: 'events.yql'},\n {id: 'sql', name: 'report.sql'},\n {id: 'link', name: 'link to file.cpp', link: 'link/to/file.cpp'},\n];\n\nconst meta = {\n title: 'Components/AttachmentList',\n component: AttachmentList,\n tags: ['autodocs'],\n parameters: {\n layout: 'padded',\n },\n decorators: [\n (Story) => (\n <div style={{width: 360, height: 360}}>\n <Story />\n </div>\n ),\n ],\n args: {\n attachments,\n onDelete: fn(),\n onEdit: fn(),\n },\n} satisfies Meta<typeof AttachmentList>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n/** Attachments with supported extensions use their corresponding icons. Row actions appear on hover. */\nexport const Default: Story = {};\n\n/** `wasAddedIds` and `wasEditedIds` highlight attachments with their current change state. */\nexport const ChangeStates: Story = {\n args: {\n wasAddedIds: ['javascript', 'csv'],\n wasEditedIds: ['python', 'sql'],\n },\n};\n\n/** The inherited List filtering API can be enabled when a consumer needs local attachment search. */\nexport const Filterable: Story = {\n args: {\n filterable: true,\n filterPlaceholder: 'Filter by attachment name',\n filterItem: (filter) => (attachment) =>\n (attachment as AttachmentListProps['attachments'][number]).name\n .toLocaleLowerCase()\n .includes(filter.toLocaleLowerCase()),\n },\n};\n\nconst InteractiveAttachmentList = (props: AttachmentListProps) => {\n const [currentAttachments, setCurrentAttachments] = useState(props.attachments);\n const [editedIds, setEditedIds] = useState<string[]>([]);\n\n return (\n <AttachmentList\n {...props}\n attachments={currentAttachments}\n wasEditedIds={editedIds}\n onDelete={(attachment) => {\n props.onDelete?.(attachment);\n setCurrentAttachments((current) =>\n current.filter((item) => item.id !== attachment.id),\n );\n setEditedIds((current) => current.filter((id) => id !== attachment.id));\n }}\n onEdit={(attachment) => {\n props.onEdit?.(attachment);\n setEditedIds((current) =>\n current.includes(attachment.id)\n ? current.filter((id) => id !== attachment.id)\n : [...current, attachment.id],\n );\n }}\n />\n );\n};\n\n/** Hover a row: edit toggles its edited state and delete removes it from the list. */\nexport const InteractiveActions: Story = {\n render: (args) => <InteractiveAttachmentList {...args} />,\n};\n\nconst EditableAttachmentList = (props: AttachmentListProps) => {\n const [currentAttachments, setCurrentAttachments] = useState(props.attachments);\n const [editingId, setEditingId] = useState<string>();\n const [draftName, setDraftName] = useState('');\n const [draftLink, setDraftLink] = useState<EditLinkValues>({\n link: '',\n token: '',\n name: '',\n });\n\n const handleAcceptDraft = () => {\n setCurrentAttachments((prevState) => {\n return prevState.map((attach) => {\n if (attach.id === editingId && attach.link === undefined) {\n return {\n ...attach,\n name: draftName,\n };\n }\n if (attach.id === editingId && typeof attach.link === 'string') {\n return {\n ...attach,\n name: draftLink.name,\n link: draftLink.link,\n };\n }\n return attach;\n });\n });\n setDraftName('');\n setEditingId('');\n };\n\n return (\n <AttachmentList\n {...props}\n attachments={currentAttachments}\n editingIds={editingId ? [editingId] : []}\n onDelete={(attach) =>\n setCurrentAttachments((list) => list.filter((l) => l.id !== attach.id))\n }\n onEdit={(attachment) => {\n props.onEdit?.(attachment);\n setEditingId(attachment.id);\n setDraftName(attachment.name);\n if (typeof attachment.link === 'string') {\n setDraftLink({...draftLink, name: attachment.name, link: attachment.link});\n }\n }}\n renderEditForm={(attachment) => {\n const isLink = typeof attachment.link === 'string';\n\n if (isLink) {\n return (\n <EditAttachmentItem\n onCancel={() => setEditingId('')}\n onAccept={handleAcceptDraft}\n values={draftLink}\n onChange={setDraftLink}\n tokens={[\n {value: 'default_database_logs', title: 'default_database_logs'},\n {value: 'default_yt', title: 'default_yt'},\n {value: 'default_yql', title: 'default_yql'},\n {\n value: 'default_long_token_title',\n title: 'default_long_token_title',\n },\n ]}\n type={'link'}\n />\n );\n }\n\n return (\n <EditAttachmentItem\n fileName={draftName}\n onChangeFileName={setDraftName}\n onCancel={() => setEditingId('')}\n onAccept={handleAcceptDraft}\n type={'file'}\n />\n );\n }}\n />\n );\n};\n\n/** Hover a row and click edit to replace it with a consumer-provided rename form. */\nexport const CustomEditForm: Story = {\n render: (args) => <EditableAttachmentList {...args} />,\n};\n\nconst SortableAttachmentList = (props: AttachmentListProps) => {\n const [orderedAttachments, setOrderedAttachments] = useState(props.attachments);\n\n return (\n <AttachmentList\n {...props}\n attachments={orderedAttachments}\n onSortEnd={({oldIndex, newIndex}) => {\n props.onSortEnd?.({oldIndex, newIndex});\n setOrderedAttachments((current) => {\n const next = [...current];\n const [movedAttachment] = next.splice(oldIndex, 1);\n\n if (movedAttachment) {\n next.splice(newIndex, 0, movedAttachment);\n }\n\n return next;\n });\n }}\n />\n );\n};\n\n/** Drag attachments by the handle to reorder them using the inherited List sorting API. */\nexport const Sortable: Story = {\n args: {\n sortable: true,\n sortHandleAlign: 'left',\n onSortEnd: fn(),\n },\n render: (args) => <SortableAttachmentList {...args} />,\n};\n\n/** Consumer-provided content is displayed when the attachment array is empty. */\nexport const Empty: Story = {\n args: {\n attachments: [],\n emptyPlaceholder: <Text color=\"secondary\">No attachments yet</Text>,\n },\n};\n\n/** The inherited loading state can be used while the attachment collection is being fetched. */\nexport const Loading: Story = {\n args: {\n attachments: [],\n loading: true,\n },\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAGC,QAAQ,QAAO,OAAO;AAErC,SAAQC,IAAI,QAAO,mBAAmB;AACtC,SAAQC,kBAAkB;AAC1B,SAAQC,EAAE,QAAO,gBAAgB;AAEjC,SAAQC,cAAc;AAAoD,SAAAC,GAAA,IAAAC,IAAA;AAE1E,IAAMC,WAA+C,GAAG,CACpD;EAACC,EAAE,EAAE,QAAQ;EAAEC,IAAI,EAAE;AAAQ,CAAC,EAC9B;EAACD,EAAE,EAAE,YAAY;EAAEC,IAAI,EAAE;AAAU,CAAC,EACpC;EAACD,EAAE,EAAE,QAAQ;EAAEC,IAAI,EAAE;AAAS,CAAC,EAC/B;EAACD,EAAE,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAW,CAAC,EAC9B;EAACD,EAAE,EAAE,YAAY;EAAEC,IAAI,EAAE,uBAAuB;EAAEC,IAAI,EAAE;AAAuB,CAAC,EAChF;EAACF,EAAE,EAAE,OAAO;EAAEC,IAAI,EAAE;AAAe,CAAC,EACpC;EAACD,EAAE,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAe,CAAC,EAClC;EAACD,EAAE,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAc,CAAC,EAChC;EAACD,EAAE,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAY,CAAC,EAC/B;EAACD,EAAE,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAY,CAAC,EAC/B;EAACD,EAAE,EAAE,MAAM;EAAEC,IAAI,EAAE,kBAAkB;EAAEC,IAAI,EAAE;AAAkB,CAAC,CACnE;AAED,IAAMC,IAAI,GAAG;EACTC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAET,cAAc;EACzBU,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,UAAU,EAAE,CACR,UAACC,KAAK;IAAA,oBACFZ,IAAA;MAAKa,KAAK,EAAE;QAACC,KAAK,EAAE,GAAG;QAAEC,MAAM,EAAE;MAAG,CAAE;MAAAC,QAAA,eAClChB,IAAA,CAACY,KAAK,IAAE;IAAC,CACR,CAAC;EAAA,CACT,CACJ;EACDK,IAAI,EAAE;IACFhB,WAAW,EAAXA,WAAW;IACXiB,QAAQ,EAAErB,EAAE,CAAC,CAAC;IACdsB,MAAM,EAAEtB,EAAE,CAAC;EACf;AACJ,CAAuC;AAEvC,eAAeQ,IAAI;AAGnB;AACA,OAAO,IAAMe,OAAc,GAAG,CAAC,CAAC;;AAEhC;AACA,OAAO,IAAMC,YAAmB,GAAG;EAC/BJ,IAAI,EAAE;IACFK,WAAW,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC;IAClCC,YAAY,EAAE,CAAC,QAAQ,EAAE,KAAK;EAClC;AACJ,CAAC;;AAED;AACA,OAAO,IAAMC,UAAiB,GAAG;EAC7BP,IAAI,EAAE;IACFQ,UAAU,EAAE,IAAI;IAChBC,iBAAiB,EAAE,2BAA2B;IAC9CC,UAAU,EAAE,SAAZA,UAAUA,CAAGC,MAAM;MAAA,OAAK,UAACC,UAAU;QAAA,OAC9BA,UAAU,CAAgD1B,IAAI,CAC1D2B,iBAAiB,CAAC,CAAC,CACnBC,QAAQ,CAACH,MAAM,CAACE,iBAAiB,CAAC,CAAC,CAAC;MAAA;IAAA;EACjD;AACJ,CAAC;AAED,IAAME,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAIC,KAA0B,EAAK;EAC9D,IAAAC,SAAA,GAAoDxC,QAAQ,CAACuC,KAAK,CAAChC,WAAW,CAAC;IAAAkC,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxEG,kBAAkB,GAAAF,UAAA;IAAEG,qBAAqB,GAAAH,UAAA;EAChD,IAAAI,UAAA,GAAkC7C,QAAQ,CAAW,EAAE,CAAC;IAAA8C,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAAjDE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAE9B,oBACIxC,IAAA,CAACF,cAAc,EAAA6C,aAAA,CAAAA,aAAA,KACPV,KAAK;IACThC,WAAW,EAAEoC,kBAAmB;IAChCd,YAAY,EAAEkB,SAAU;IACxBvB,QAAQ,EAAE,SAAVA,QAAQA,CAAGW,UAAU,EAAK;MAAA,IAAAe,eAAA;MACtB,CAAAA,eAAA,GAAAX,KAAK,CAACf,QAAQ,cAAA0B,eAAA,eAAdA,eAAA,CAAAC,IAAA,CAAAZ,KAAK,EAAYJ,UAAU,CAAC;MAC5BS,qBAAqB,CAAC,UAACQ,OAAO;QAAA,OAC1BA,OAAO,CAAClB,MAAM,CAAC,UAACmB,IAAI;UAAA,OAAKA,IAAI,CAAC7C,EAAE,KAAK2B,UAAU,CAAC3B,EAAE;QAAA,EAAC;MAAA,CACvD,CAAC;MACDwC,YAAY,CAAC,UAACI,OAAO;QAAA,OAAKA,OAAO,CAAClB,MAAM,CAAC,UAAC1B,EAAE;UAAA,OAAKA,EAAE,KAAK2B,UAAU,CAAC3B,EAAE;QAAA,EAAC;MAAA,EAAC;IAC3E,CAAE;IACFiB,MAAM,EAAE,SAARA,MAAMA,CAAGU,UAAU,EAAK;MAAA,IAAAmB,aAAA;MACpB,CAAAA,aAAA,GAAAf,KAAK,CAACd,MAAM,cAAA6B,aAAA,eAAZA,aAAA,CAAAH,IAAA,CAAAZ,KAAK,EAAUJ,UAAU,CAAC;MAC1Ba,YAAY,CAAC,UAACI,OAAO;QAAA,OACjBA,OAAO,CAACf,QAAQ,CAACF,UAAU,CAAC3B,EAAE,CAAC,GACzB4C,OAAO,CAAClB,MAAM,CAAC,UAAC1B,EAAE;UAAA,OAAKA,EAAE,KAAK2B,UAAU,CAAC3B,EAAE;QAAA,EAAC,MAAA+C,MAAA,CAAAC,kBAAA,CACxCJ,OAAO,IAAEjB,UAAU,CAAC3B,EAAE,EAAC;MAAA,CACrC,CAAC;IACL;EAAE,EACL,CAAC;AAEV,CAAC;;AAED;AACA,OAAO,IAAMiD,kBAAyB,GAAG;EACrCC,MAAM,EAAE,SAARA,MAAMA,CAAGnC,IAAI;IAAA,oBAAKjB,IAAA,CAACgC,yBAAyB,EAAAW,aAAA,KAAK1B,IAAI,CAAG,CAAC;EAAA;AAC7D,CAAC;AAED,IAAMoC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIpB,KAA0B,EAAK;EAC3D,IAAAqB,UAAA,GAAoD5D,QAAQ,CAACuC,KAAK,CAAChC,WAAW,CAAC;IAAAsD,UAAA,GAAAnB,cAAA,CAAAkB,UAAA;IAAxEjB,kBAAkB,GAAAkB,UAAA;IAAEjB,qBAAqB,GAAAiB,UAAA;EAChD,IAAAC,UAAA,GAAkC9D,QAAQ,CAAS,CAAC;IAAA+D,UAAA,GAAArB,cAAA,CAAAoB,UAAA;IAA7CE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAAG,UAAA,GAAkClE,QAAQ,CAAC,EAAE,CAAC;IAAAmE,UAAA,GAAAzB,cAAA,CAAAwB,UAAA;IAAvCE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAAG,UAAA,GAAkCtE,QAAQ,CAAiB;MACvDU,IAAI,EAAE,EAAE;MACR6D,KAAK,EAAE,EAAE;MACT9D,IAAI,EAAE;IACV,CAAC,CAAC;IAAA+D,WAAA,GAAA9B,cAAA,CAAA4B,UAAA;IAJKG,SAAS,GAAAD,WAAA;IAAEE,YAAY,GAAAF,WAAA;EAM9B,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;IAC5B/B,qBAAqB,CAAC,UAACgC,SAAS,EAAK;MACjC,OAAOA,SAAS,CAACC,GAAG,CAAC,UAACC,MAAM,EAAK;QAC7B,IAAIA,MAAM,CAACtE,EAAE,KAAKwD,SAAS,IAAIc,MAAM,CAACpE,IAAI,KAAKqE,SAAS,EAAE;UACtD,OAAA9B,aAAA,CAAAA,aAAA,KACO6B,MAAM;YACTrE,IAAI,EAAE2D;UAAS;QAEvB;QACA,IAAIU,MAAM,CAACtE,EAAE,KAAKwD,SAAS,IAAI,OAAOc,MAAM,CAACpE,IAAI,KAAK,QAAQ,EAAE;UAC5D,OAAAuC,aAAA,CAAAA,aAAA,KACO6B,MAAM;YACTrE,IAAI,EAAEgE,SAAS,CAAChE,IAAI;YACpBC,IAAI,EAAE+D,SAAS,CAAC/D;UAAI;QAE5B;QACA,OAAOoE,MAAM;MACjB,CAAC,CAAC;IACN,CAAC,CAAC;IACFT,YAAY,CAAC,EAAE,CAAC;IAChBJ,YAAY,CAAC,EAAE,CAAC;EACpB,CAAC;EAED,oBACI3D,IAAA,CAACF,cAAc,EAAA6C,aAAA,CAAAA,aAAA,KACPV,KAAK;IACThC,WAAW,EAAEoC,kBAAmB;IAChCqC,UAAU,EAAEhB,SAAS,GAAG,CAACA,SAAS,CAAC,GAAG,EAAG;IACzCxC,QAAQ,EAAE,SAAVA,QAAQA,CAAGsD,MAAM;MAAA,OACblC,qBAAqB,CAAC,UAACqC,IAAI;QAAA,OAAKA,IAAI,CAAC/C,MAAM,CAAC,UAACgD,CAAC;UAAA,OAAKA,CAAC,CAAC1E,EAAE,KAAKsE,MAAM,CAACtE,EAAE;QAAA,EAAC;MAAA,EAAC;IAAA,CAC1E;IACDiB,MAAM,EAAE,SAARA,MAAMA,CAAGU,UAAU,EAAK;MAAA,IAAAgD,cAAA;MACpB,CAAAA,cAAA,GAAA5C,KAAK,CAACd,MAAM,cAAA0D,cAAA,eAAZA,cAAA,CAAAhC,IAAA,CAAAZ,KAAK,EAAUJ,UAAU,CAAC;MAC1B8B,YAAY,CAAC9B,UAAU,CAAC3B,EAAE,CAAC;MAC3B6D,YAAY,CAAClC,UAAU,CAAC1B,IAAI,CAAC;MAC7B,IAAI,OAAO0B,UAAU,CAACzB,IAAI,KAAK,QAAQ,EAAE;QACrCgE,YAAY,CAAAzB,aAAA,CAAAA,aAAA,KAAKwB,SAAS;UAAEhE,IAAI,EAAE0B,UAAU,CAAC1B,IAAI;UAAEC,IAAI,EAAEyB,UAAU,CAACzB;QAAI,EAAC,CAAC;MAC9E;IACJ,CAAE;IACF0E,cAAc,EAAE,SAAhBA,cAAcA,CAAGjD,UAAU,EAAK;MAC5B,IAAMkD,MAAM,GAAG,OAAOlD,UAAU,CAACzB,IAAI,KAAK,QAAQ;MAElD,IAAI2E,MAAM,EAAE;QACR,oBACI/E,IAAA,CAACJ,kBAAkB;UACfoF,QAAQ,EAAE,SAAVA,QAAQA,CAAA;YAAA,OAAQrB,YAAY,CAAC,EAAE,CAAC;UAAA,CAAC;UACjCsB,QAAQ,EAAEZ,iBAAkB;UAC5Ba,MAAM,EAAEf,SAAU;UAClBgB,QAAQ,EAAEf,YAAa;UACvBgB,MAAM,EAAE,CACJ;YAACC,KAAK,EAAE,uBAAuB;YAAE/E,KAAK,EAAE;UAAuB,CAAC,EAChE;YAAC+E,KAAK,EAAE,YAAY;YAAE/E,KAAK,EAAE;UAAY,CAAC,EAC1C;YAAC+E,KAAK,EAAE,aAAa;YAAE/E,KAAK,EAAE;UAAa,CAAC,EAC5C;YACI+E,KAAK,EAAE,0BAA0B;YACjC/E,KAAK,EAAE;UACX,CAAC,CACH;UACFgF,IAAI,EAAE;QAAO,CAChB,CAAC;MAEV;MAEA,oBACItF,IAAA,CAACJ,kBAAkB;QACf2F,QAAQ,EAAEzB,SAAU;QACpB0B,gBAAgB,EAAEzB,YAAa;QAC/BiB,QAAQ,EAAE,SAAVA,QAAQA,CAAA;UAAA,OAAQrB,YAAY,CAAC,EAAE,CAAC;QAAA,CAAC;QACjCsB,QAAQ,EAAEZ,iBAAkB;QAC5BiB,IAAI,EAAE;MAAO,CAChB,CAAC;IAEV;EAAE,EACL,CAAC;AAEV,CAAC;;AAED;AACA,OAAO,IAAMG,cAAqB,GAAG;EACjCrC,MAAM,EAAE,SAARA,MAAMA,CAAGnC,IAAI;IAAA,oBAAKjB,IAAA,CAACqD,sBAAsB,EAAAV,aAAA,KAAK1B,IAAI,CAAG,CAAC;EAAA;AAC1D,CAAC;AAED,IAAMyE,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIzD,KAA0B,EAAK;EAC3D,IAAA0D,WAAA,GAAoDjG,QAAQ,CAACuC,KAAK,CAAChC,WAAW,CAAC;IAAA2F,WAAA,GAAAxD,cAAA,CAAAuD,WAAA;IAAxEE,kBAAkB,GAAAD,WAAA;IAAEE,qBAAqB,GAAAF,WAAA;EAEhD,oBACI5F,IAAA,CAACF,cAAc,EAAA6C,aAAA,CAAAA,aAAA,KACPV,KAAK;IACThC,WAAW,EAAE4F,kBAAmB;IAChCE,SAAS,EAAE,SAAXA,SAASA,CAAAC,IAAA,EAA4B;MAAA,IAAAC,gBAAA;MAAA,IAAxBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;QAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;MAC3B,CAAAF,gBAAA,GAAAhE,KAAK,CAAC8D,SAAS,cAAAE,gBAAA,eAAfA,gBAAA,CAAApD,IAAA,CAAAZ,KAAK,EAAa;QAACiE,QAAQ,EAARA,QAAQ;QAAEC,QAAQ,EAARA;MAAQ,CAAC,CAAC;MACvCL,qBAAqB,CAAC,UAAChD,OAAO,EAAK;QAC/B,IAAMsD,IAAI,GAAAlD,kBAAA,CAAOJ,OAAO,CAAC;QACzB,IAAAuD,YAAA,GAA0BD,IAAI,CAACE,MAAM,CAACJ,QAAQ,EAAE,CAAC,CAAC;UAAAK,aAAA,GAAAnE,cAAA,CAAAiE,YAAA;UAA3CG,eAAe,GAAAD,aAAA;QAEtB,IAAIC,eAAe,EAAE;UACjBJ,IAAI,CAACE,MAAM,CAACH,QAAQ,EAAE,CAAC,EAAEK,eAAe,CAAC;QAC7C;QAEA,OAAOJ,IAAI;MACf,CAAC,CAAC;IACN;EAAE,EACL,CAAC;AAEV,CAAC;;AAED;AACA,OAAO,IAAMK,QAAe,GAAG;EAC3BxF,IAAI,EAAE;IACFyF,QAAQ,EAAE,IAAI;IACdC,eAAe,EAAE,MAAM;IACvBZ,SAAS,EAAElG,EAAE,CAAC;EAClB,CAAC;EACDuD,MAAM,EAAE,SAARA,MAAMA,CAAGnC,IAAI;IAAA,oBAAKjB,IAAA,CAAC0F,sBAAsB,EAAA/C,aAAA,KAAK1B,IAAI,CAAG,CAAC;EAAA;AAC1D,CAAC;;AAED;AACA,OAAO,IAAM2F,KAAY,GAAG;EACxB3F,IAAI,EAAE;IACFhB,WAAW,EAAE,EAAE;IACf4G,gBAAgB,eAAE7G,IAAA,CAACL,IAAI;MAACmH,KAAK,EAAC,WAAW;MAAA9F,QAAA,EAAC;IAAkB,CAAM;EACtE;AACJ,CAAC;;AAED;AACA,OAAO,IAAM+F,OAAc,GAAG;EAC1B9F,IAAI,EAAE;IACFhB,WAAW,EAAE,EAAE;IACf+G,OAAO,EAAE;EACb;AACJ,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","useState","Text","EditAttachmentItem","fn","AttachmentList","jsx","_jsx","attachments","id","name","link","meta","title","component","tags","parameters","layout","decorators","Story","style","width","height","children","args","onDelete","onEdit","Default","ChangeStates","wasAddedIds","wasEditedIds","Filterable","filterable","filterPlaceholder","filterItem","filter","attachment","toLocaleLowerCase","includes","InteractiveAttachmentList","props","_useState","_useState2","_slicedToArray","currentAttachments","setCurrentAttachments","_useState3","_useState4","editedIds","setEditedIds","_objectSpread","_props$onDelete","call","current","item","onItemClick","console","info","_props$onEdit","concat","_toConsumableArray","InteractiveActions","render","EditableAttachmentList","_useState5","_useState6","_useState7","_useState8","editingId","setEditingId","_useState9","_useState0","draftName","setDraftName","_useState1","token","_useState10","draftLink","setDraftLink","handleAcceptDraft","prevState","map","attach","undefined","editingIds","list","l","_props$onEdit2","renderEditForm","isLink","onCancel","onAccept","values","onChange","tokens","value","type","fileName","onChangeFileName","CustomEditForm","SortableAttachmentList","_useState11","_useState12","orderedAttachments","setOrderedAttachments","onSortEnd","_ref","_props$onSortEnd","oldIndex","newIndex","next","_next$splice","splice","_next$splice2","movedAttachment","Sortable","sortable","sortHandleAlign","Empty","emptyPlaceholder","color","Loading","loading"],"sources":["AttachmentList.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Text} from '@gravity-ui/uikit';\nimport {EditAttachmentItem, EditLinkValues} from './internal/EditAttachmentItem';\nimport {fn} from 'storybook/test';\n\nimport {AttachmentList, type AttachmentListProps} from './AttachmentList';\n\nconst attachments: AttachmentListProps['attachments'] = [\n {id: 'readme', name: 'README'},\n {id: 'javascript', name: 'index.js'},\n {id: 'python', name: 'main.py'},\n {id: 'csv', name: 'sales.csv'},\n {id: 'link-image', name: 'https://home/tutorial', link: 'https://home/tutorial'},\n {id: 'excel', name: 'forecast.xlsx'},\n {id: 'cpp', name: 'processor.cpp'},\n {id: 'ql', name: 'analytics.ql'},\n {id: 'yql', name: 'events.yql'},\n {id: 'sql', name: 'report.sql'},\n {id: 'link', name: 'link to file.cpp', link: 'link/to/file.cpp'},\n];\n\nconst meta = {\n title: 'Components/AttachmentList',\n component: AttachmentList,\n tags: ['autodocs'],\n parameters: {\n layout: 'padded',\n },\n decorators: [\n (Story) => (\n <div style={{width: 360, height: 360}}>\n <Story />\n </div>\n ),\n ],\n args: {\n attachments,\n onDelete: fn(),\n onEdit: fn(),\n },\n} satisfies Meta<typeof AttachmentList>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n/** Attachments with supported extensions use their corresponding icons. Row actions appear on hover. */\nexport const Default: Story = {};\n\n/** `wasAddedIds` and `wasEditedIds` highlight attachments with their current change state. */\nexport const ChangeStates: Story = {\n args: {\n wasAddedIds: ['javascript', 'csv'],\n wasEditedIds: ['python', 'sql'],\n },\n};\n\n/** The inherited List filtering API can be enabled when a consumer needs local attachment search. */\nexport const Filterable: Story = {\n args: {\n filterable: true,\n filterPlaceholder: 'Filter by attachment name',\n filterItem: (filter) => (attachment) =>\n (attachment as AttachmentListProps['attachments'][number]).name\n .toLocaleLowerCase()\n .includes(filter.toLocaleLowerCase()),\n },\n};\n\nconst InteractiveAttachmentList = (props: AttachmentListProps) => {\n const [currentAttachments, setCurrentAttachments] = useState(props.attachments);\n const [editedIds, setEditedIds] = useState<string[]>([]);\n\n return (\n <AttachmentList\n {...props}\n attachments={currentAttachments}\n wasEditedIds={editedIds}\n onDelete={(attachment) => {\n props.onDelete?.(attachment);\n setCurrentAttachments((current) =>\n current.filter((item) => item.id !== attachment.id),\n );\n setEditedIds((current) => current.filter((id) => id !== attachment.id));\n }}\n onItemClick={console.info}\n onEdit={(attachment) => {\n props.onEdit?.(attachment);\n setEditedIds((current) =>\n current.includes(attachment.id)\n ? current.filter((id) => id !== attachment.id)\n : [...current, attachment.id],\n );\n }}\n />\n );\n};\n\n/** Hover a row: edit toggles its edited state and delete removes it from the list. */\nexport const InteractiveActions: Story = {\n render: (args) => <InteractiveAttachmentList {...args} />,\n};\n\nconst EditableAttachmentList = (props: AttachmentListProps) => {\n const [currentAttachments, setCurrentAttachments] = useState(props.attachments);\n const [editingId, setEditingId] = useState<string>();\n const [draftName, setDraftName] = useState('');\n const [draftLink, setDraftLink] = useState<EditLinkValues>({\n link: '',\n token: '',\n name: '',\n });\n\n const handleAcceptDraft = () => {\n setCurrentAttachments((prevState) => {\n return prevState.map((attach) => {\n if (attach.id === editingId && attach.link === undefined) {\n return {\n ...attach,\n name: draftName,\n };\n }\n if (attach.id === editingId && typeof attach.link === 'string') {\n return {\n ...attach,\n name: draftLink.name,\n link: draftLink.link,\n };\n }\n return attach;\n });\n });\n setDraftName('');\n setEditingId('');\n };\n\n return (\n <AttachmentList\n {...props}\n attachments={currentAttachments}\n editingIds={editingId ? [editingId] : []}\n onDelete={(attach) =>\n setCurrentAttachments((list) => list.filter((l) => l.id !== attach.id))\n }\n onEdit={(attachment) => {\n props.onEdit?.(attachment);\n setEditingId(attachment.id);\n setDraftName(attachment.name);\n if (typeof attachment.link === 'string') {\n setDraftLink({...draftLink, name: attachment.name, link: attachment.link});\n }\n }}\n onItemClick={console.info}\n renderEditForm={(attachment) => {\n const isLink = typeof attachment.link === 'string';\n\n if (isLink) {\n return (\n <EditAttachmentItem\n onCancel={() => setEditingId('')}\n onAccept={handleAcceptDraft}\n values={draftLink}\n onChange={setDraftLink}\n tokens={[\n {value: 'default_database_logs', title: 'default_database_logs'},\n {value: 'default_yt', title: 'default_yt'},\n {value: 'default_yql', title: 'default_yql'},\n {\n value: 'default_long_token_title',\n title: 'default_long_token_title',\n },\n ]}\n type={'link'}\n />\n );\n }\n\n return (\n <EditAttachmentItem\n fileName={draftName}\n onChangeFileName={setDraftName}\n onCancel={() => setEditingId('')}\n onAccept={handleAcceptDraft}\n type={'file'}\n />\n );\n }}\n />\n );\n};\n\n/** Hover a row and click edit to replace it with a consumer-provided rename form. */\nexport const CustomEditForm: Story = {\n render: (args) => <EditableAttachmentList {...args} />,\n};\n\nconst SortableAttachmentList = (props: AttachmentListProps) => {\n const [orderedAttachments, setOrderedAttachments] = useState(props.attachments);\n\n return (\n <AttachmentList\n {...props}\n attachments={orderedAttachments}\n onItemClick={console.info}\n onSortEnd={({oldIndex, newIndex}) => {\n props.onSortEnd?.({oldIndex, newIndex});\n setOrderedAttachments((current) => {\n const next = [...current];\n const [movedAttachment] = next.splice(oldIndex, 1);\n\n if (movedAttachment) {\n next.splice(newIndex, 0, movedAttachment);\n }\n\n return next;\n });\n }}\n />\n );\n};\n\n/** Drag attachments by the handle to reorder them using the inherited List sorting API. */\nexport const Sortable: Story = {\n args: {\n sortable: true,\n sortHandleAlign: 'left',\n onSortEnd: fn(),\n },\n render: (args) => <SortableAttachmentList {...args} />,\n};\n\n/** Consumer-provided content is displayed when the attachment array is empty. */\nexport const Empty: Story = {\n args: {\n attachments: [],\n emptyPlaceholder: <Text color=\"secondary\">No attachments yet</Text>,\n },\n};\n\n/** The inherited loading state can be used while the attachment collection is being fetched. */\nexport const Loading: Story = {\n args: {\n attachments: [],\n loading: true,\n },\n};\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export declare const INTERACITVE_SELECTOR = "a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [role=\"menuitem\"], [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])";
2
+ export declare const isInteractiveTarget: (target: EventTarget | null | undefined) => boolean;
@@ -0,0 +1,5 @@
1
+ export var INTERACITVE_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [role="link"], [role="menuitem"], [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
2
+ export var isInteractiveTarget = function isInteractiveTarget(target) {
3
+ return target instanceof Element && Boolean(target.closest(INTERACITVE_SELECTOR));
4
+ };
5
+ // #sourceMappingURL=isInteractiveTarget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["INTERACITVE_SELECTOR","isInteractiveTarget","target","Element","Boolean","closest"],"sources":["isInteractiveTarget.ts"],"sourcesContent":["export const INTERACITVE_SELECTOR =\n 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [role=\"menuitem\"], [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])';\n\nexport const isInteractiveTarget = (target: EventTarget | null | undefined) => {\n return target instanceof Element && Boolean(target.closest(INTERACITVE_SELECTOR));\n};\n"],"mappings":"AAAA,OAAO,IAAMA,oBAAoB,GAC7B,yJAAyJ;AAE7J,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,MAAsC,EAAK;EAC3E,OAAOA,MAAM,YAAYC,OAAO,IAAIC,OAAO,CAACF,MAAM,CAACG,OAAO,CAACL,oBAAoB,CAAC,CAAC;AACrF,CAAC","ignoreList":[]}
@@ -5,7 +5,7 @@ import "core-js/modules/es.array.reduce.js";
5
5
  import "core-js/modules/es.iterator.constructor.js";
6
6
  import "core-js/modules/es.iterator.reduce.js";
7
7
  import "core-js/modules/es.object.to-string.js";
8
- import React, { useMemo } from 'react';
8
+ import React, { useLayoutEffect, useMemo, useRef } from 'react';
9
9
  import { List } from '@gravity-ui/uikit';
10
10
  import cn from 'bem-cn-lite';
11
11
  import { useLoadMoreSentinel } from "../../helpers/useLoadMoreSentinel";
@@ -32,7 +32,9 @@ export var LazyList = function LazyList(_ref) {
32
32
  emptyContent = _ref.emptyContent,
33
33
  isEmpty = _ref.isEmpty,
34
34
  className = _ref.className;
35
- var sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);
35
+ var listRef = useRef(null);
36
+ var previousItemsLengthRef = useRef(items.length);
37
+ var sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore, loading, items.length);
36
38
  var rows = useMemo(function () {
37
39
  return hasMore ? [].concat(_toConsumableArray(items), [{
38
40
  __sentinel: true
@@ -41,6 +43,14 @@ export var LazyList = function LazyList(_ref) {
41
43
  var getRowHeight = function getRowHeight(row) {
42
44
  return isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);
43
45
  };
46
+ useLayoutEffect(function () {
47
+ var previousItemsLength = previousItemsLengthRef.current;
48
+ if (previousItemsLength !== items.length) {
49
+ var _listRef$current;
50
+ (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current = _listRef$current.refContainer.current) === null || _listRef$current === void 0 || _listRef$current.resetAfterIndex(Math.min(previousItemsLength, items.length), true);
51
+ previousItemsLengthRef.current = items.length;
52
+ }
53
+ }, [items.length]);
44
54
  if (error) {
45
55
  return /*#__PURE__*/_jsx(React.Fragment, {
46
56
  children: error
@@ -58,6 +68,7 @@ export var LazyList = function LazyList(_ref) {
58
68
  });
59
69
  }
60
70
  return /*#__PURE__*/_jsx(List, {
71
+ ref: listRef,
61
72
  className: block(null, className),
62
73
  filterable: filterable,
63
74
  items: rows,
@@ -1 +1 @@
1
- {"version":3,"names":["React","useMemo","List","cn","useLoadMoreSentinel","ListSpinner","jsx","_jsx","block","SENTINEL_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","sentinelRef","rows","concat","_toConsumableArray","__sentinel","getRowHeight","Fragment","children","empty","length","itemsHeight","listRows","reduce","total","isActive","index","ref"],"sources":["LazyList.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport {List} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';\nimport {ListSpinner} from '../ListSpinner';\nimport './LazyList.scss';\n\nconst block = cn('qp-lazy-list');\n\nconst SENTINEL_ROW_HEIGHT = 1;\n\ntype SentinelRow = {__sentinel: true};\ntype LazyListRow<T> = T | SentinelRow;\n\nconst isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>\n Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);\n\nexport type LazyListProps<T extends object> = {\n items: T[];\n itemHeight: (item: T) => number;\n renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;\n hasMore?: boolean;\n onLoadMore?: () => void;\n onItemClick?: (item: T, index: number) => void;\n selectedItemIndex?: T[keyof T] | number;\n filterable?: boolean;\n loading?: boolean;\n error?: React.ReactNode;\n emptyContent?: React.ReactNode;\n isEmpty?: boolean;\n className?: string;\n};\n\nexport const LazyList = <T extends object>({\n items,\n itemHeight,\n renderItem,\n hasMore,\n onLoadMore,\n onItemClick,\n selectedItemIndex,\n filterable = false,\n loading,\n error,\n emptyContent,\n isEmpty,\n className,\n}: LazyListProps<T>) => {\n const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);\n\n const rows: LazyListRow<T>[] = useMemo(\n () => (hasMore ? [...items, {__sentinel: true}] : items),\n [items, hasMore],\n );\n\n const getRowHeight = (row: LazyListRow<T>) =>\n isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);\n\n if (error) {\n return <React.Fragment>{error}</React.Fragment>;\n }\n\n const empty = isEmpty ?? !items.length;\n\n if (loading && empty) {\n return <ListSpinner className={block('spinner', className)} />;\n }\n\n if (empty) {\n return <React.Fragment>{emptyContent}</React.Fragment>;\n }\n\n return (\n <List<LazyListRow<T>>\n className={block(null, className)}\n filterable={filterable}\n items={rows}\n itemHeight={getRowHeight}\n itemsHeight={(listRows) =>\n listRows.reduce((total, row) => total + getRowHeight(row), 0)\n }\n renderItem={(row, isActive, index) =>\n isSentinelRow(row) ? (\n <div ref={sentinelRef} className={block('sentinel')} />\n ) : (\n renderItem(row, isActive, index)\n )\n }\n selectedItemIndex={selectedItemIndex as never}\n onItemClick={(row, index) => {\n if (!isSentinelRow(row)) {\n onItemClick?.(row, index);\n }\n }}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useLayoutEffect","useMemo","useRef","List","cn","useLoadMoreSentinel","ListSpinner","jsx","_jsx","block","SENTINEL_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","listRef","previousItemsLengthRef","length","sentinelRef","rows","concat","_toConsumableArray","__sentinel","getRowHeight","previousItemsLength","current","_listRef$current","refContainer","resetAfterIndex","Math","min","Fragment","children","empty","ref","itemsHeight","listRows","reduce","total","isActive","index"],"sources":["LazyList.tsx"],"sourcesContent":["import React, {useLayoutEffect, useMemo, useRef} from 'react';\nimport {List} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';\nimport {ListSpinner} from '../ListSpinner';\nimport './LazyList.scss';\n\nconst block = cn('qp-lazy-list');\n\nconst SENTINEL_ROW_HEIGHT = 1;\n\ntype SentinelRow = {__sentinel: true};\ntype LazyListRow<T> = T | SentinelRow;\n\nconst isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>\n Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);\n\nexport type LazyListProps<T extends object> = {\n items: T[];\n itemHeight: (item: T) => number;\n renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;\n hasMore?: boolean;\n onLoadMore?: () => void;\n onItemClick?: (item: T, index: number) => void;\n selectedItemIndex?: T[keyof T] | number;\n filterable?: boolean;\n loading?: boolean;\n error?: React.ReactNode;\n emptyContent?: React.ReactNode;\n isEmpty?: boolean;\n className?: string;\n};\n\nexport const LazyList = <T extends object>({\n items,\n itemHeight,\n renderItem,\n hasMore,\n onLoadMore,\n onItemClick,\n selectedItemIndex,\n filterable = false,\n loading,\n error,\n emptyContent,\n isEmpty,\n className,\n}: LazyListProps<T>) => {\n const listRef = useRef<List<LazyListRow<T>>>(null);\n const previousItemsLengthRef = useRef(items.length);\n const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore, loading, items.length);\n\n const rows: LazyListRow<T>[] = useMemo(\n () => (hasMore ? [...items, {__sentinel: true}] : items),\n [items, hasMore],\n );\n\n const getRowHeight = (row: LazyListRow<T>) =>\n isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);\n\n useLayoutEffect(() => {\n const previousItemsLength = previousItemsLengthRef.current;\n\n if (previousItemsLength !== items.length) {\n listRef.current?.refContainer.current?.resetAfterIndex(\n Math.min(previousItemsLength, items.length),\n true,\n );\n previousItemsLengthRef.current = items.length;\n }\n }, [items.length]);\n\n if (error) {\n return <React.Fragment>{error}</React.Fragment>;\n }\n\n const empty = isEmpty ?? !items.length;\n\n if (loading && empty) {\n return <ListSpinner className={block('spinner', className)} />;\n }\n\n if (empty) {\n return <React.Fragment>{emptyContent}</React.Fragment>;\n }\n\n return (\n <List<LazyListRow<T>>\n ref={listRef}\n className={block(null, className)}\n filterable={filterable}\n items={rows}\n itemHeight={getRowHeight}\n itemsHeight={(listRows) =>\n listRows.reduce((total, row) => total + getRowHeight(row), 0)\n }\n renderItem={(row, isActive, index) =>\n isSentinelRow(row) ? (\n <div ref={sentinelRef} className={block('sentinel')} />\n ) : (\n renderItem(row, isActive, index)\n )\n }\n selectedItemIndex={selectedItemIndex as never}\n onItemClick={(row, index) => {\n if (!isSentinelRow(row)) {\n onItemClick?.(row, index);\n }\n }}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
@@ -1,9 +1,9 @@
1
- import { FC, ReactNode } from 'react';
1
+ import React, { FC } from 'react';
2
+ import { QueryListLinkRenderer } from '../../types/queryList';
2
3
  import './RowLink.scss';
3
- export type RowLinkProps = {
4
+ export type RowLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> & {
4
5
  href?: string;
5
6
  disabled?: boolean;
6
- className?: string;
7
- children: ReactNode;
7
+ renderLink?: QueryListLinkRenderer;
8
8
  };
9
9
  export declare const RowLink: FC<RowLinkProps>;
@@ -1,3 +1,6 @@
1
+ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["href", "disabled", "renderLink", "className", "children"];
1
4
  import React from 'react';
2
5
  import cn from 'bem-cn-lite';
3
6
  import "./RowLink.css";
@@ -6,14 +9,22 @@ var block = cn('qp-row-link');
6
9
  export var RowLink = function RowLink(_ref) {
7
10
  var href = _ref.href,
8
11
  disabled = _ref.disabled,
12
+ renderLink = _ref.renderLink,
9
13
  className = _ref.className,
10
- children = _ref.children;
14
+ children = _ref.children,
15
+ linkProps = _objectWithoutProperties(_ref, _excluded);
11
16
  var isLink = Boolean(href) && !disabled;
12
- var Wrap = isLink ? 'a' : 'div';
13
- return /*#__PURE__*/_jsx(Wrap, {
14
- href: isLink ? href : undefined,
17
+ if (!isLink) {
18
+ return /*#__PURE__*/_jsx("div", {
19
+ className: block(null, className),
20
+ children: children
21
+ });
22
+ }
23
+ var props = _objectSpread(_objectSpread({}, linkProps), {}, {
24
+ href: href,
15
25
  className: block(null, className),
16
26
  children: children
17
27
  });
28
+ return renderLink ? renderLink(props) : /*#__PURE__*/_jsx("a", _objectSpread({}, props));
18
29
  };
19
30
  // #sourceMappingURL=RowLink.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","cn","jsx","_jsx","block","RowLink","_ref","href","disabled","className","children","isLink","Boolean","Wrap","undefined"],"sources":["RowLink.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport cn from 'bem-cn-lite';\nimport './RowLink.scss';\n\nconst block = cn('qp-row-link');\n\nexport type RowLinkProps = {\n href?: string;\n disabled?: boolean;\n className?: string;\n children: ReactNode;\n};\n\nexport const RowLink: FC<RowLinkProps> = ({href, disabled, className, children}) => {\n const isLink = Boolean(href) && !disabled;\n const Wrap = isLink ? 'a' : 'div';\n\n return (\n <Wrap href={isLink ? href : undefined} className={block(null, className)}>\n {children}\n </Wrap>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,OAAOC,EAAE,MAAM,aAAa;AAC5B;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAExB,IAAMC,KAAK,GAAGH,EAAE,CAAC,aAAa,CAAC;AAS/B,OAAO,IAAMI,OAAyB,GAAG,SAA5BA,OAAyBA,CAAAC,IAAA,EAA8C;EAAA,IAAzCC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EAC1E,IAAMC,MAAM,GAAGC,OAAO,CAACL,IAAI,CAAC,IAAI,CAACC,QAAQ;EACzC,IAAMK,IAAI,GAAGF,MAAM,GAAG,GAAG,GAAG,KAAK;EAEjC,oBACIR,IAAA,CAACU,IAAI;IAACN,IAAI,EAAEI,MAAM,GAAGJ,IAAI,GAAGO,SAAU;IAACL,SAAS,EAAEL,KAAK,CAAC,IAAI,EAAEK,SAAS,CAAE;IAAAC,QAAA,EACpEA;EAAQ,CACP,CAAC;AAEf,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","cn","jsx","_jsx","block","RowLink","_ref","href","disabled","renderLink","className","children","linkProps","_objectWithoutProperties","_excluded","isLink","Boolean","props","_objectSpread"],"sources":["RowLink.tsx"],"sourcesContent":["import React, {FC} from 'react';\nimport cn from 'bem-cn-lite';\nimport {QueryListLinkRenderer} from '../../types/queryList';\nimport './RowLink.scss';\n\nconst block = cn('qp-row-link');\n\nexport type RowLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> & {\n href?: string;\n disabled?: boolean;\n renderLink?: QueryListLinkRenderer;\n};\n\nexport const RowLink: FC<RowLinkProps> = ({\n href,\n disabled,\n renderLink,\n className,\n children,\n ...linkProps\n}) => {\n const isLink = Boolean(href) && !disabled;\n\n if (!isLink) {\n return <div className={block(null, className)}>{children}</div>;\n }\n\n const props: React.ComponentPropsWithoutRef<'a'> = {\n ...linkProps,\n href,\n className: block(null, className),\n children,\n };\n\n return renderLink ? renderLink(props) : <a {...props} />;\n};\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAY,OAAO;AAC/B,OAAOC,EAAE,MAAM,aAAa;AAE5B;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAExB,IAAMC,KAAK,GAAGH,EAAE,CAAC,aAAa,CAAC;AAQ/B,OAAO,IAAMI,OAAyB,GAAG,SAA5BA,OAAyBA,CAAAC,IAAA,EAOhC;EAAA,IANFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACLC,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEZ,IAAMC,MAAM,GAAGC,OAAO,CAACT,IAAI,CAAC,IAAI,CAACC,QAAQ;EAEzC,IAAI,CAACO,MAAM,EAAE;IACT,oBAAOZ,IAAA;MAAKO,SAAS,EAAEN,KAAK,CAAC,IAAI,EAAEM,SAAS,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAM,CAAC;EACnE;EAEA,IAAMM,KAA0C,GAAAC,aAAA,CAAAA,aAAA,KACzCN,SAAS;IACZL,IAAI,EAAJA,IAAI;IACJG,SAAS,EAAEN,KAAK,CAAC,IAAI,EAAEM,SAAS,CAAC;IACjCC,QAAQ,EAARA;EAAQ,EACX;EAED,OAAOF,UAAU,GAAGA,UAAU,CAACQ,KAAK,CAAC,gBAAGd,IAAA,MAAAe,aAAA,KAAOD,KAAK,CAAG,CAAC;AAC5D,CAAC","ignoreList":[]}
@@ -1,4 +1,5 @@
1
1
  import { FC, ReactNode } from 'react';
2
+ import { QueryListLinkRenderer } from '../../types/queryList';
2
3
  import './SearchRowLayout.scss';
3
4
  export type SearchRowLayoutProps = {
4
5
  header: ReactNode;
@@ -6,6 +7,7 @@ export type SearchRowLayoutProps = {
6
7
  language: string;
7
8
  href?: string;
8
9
  disabled?: boolean;
10
+ renderLink?: QueryListLinkRenderer;
9
11
  className?: string;
10
12
  };
11
13
  export declare const SearchRowLayout: FC<SearchRowLayoutProps>;
@@ -14,10 +14,12 @@ export var SearchRowLayout = function SearchRowLayout(_ref) {
14
14
  language = _ref.language,
15
15
  href = _ref.href,
16
16
  disabled = _ref.disabled,
17
+ renderLink = _ref.renderLink,
17
18
  className = _ref.className;
18
19
  return /*#__PURE__*/_jsx(RowLink, {
19
20
  href: href,
20
21
  disabled: disabled,
22
+ renderLink: renderLink,
21
23
  className: block(null, className),
22
24
  children: /*#__PURE__*/_jsxs(Flex, {
23
25
  direction: "column",
@@ -1 +1 @@
1
- {"version":3,"names":["React","Flex","cn","MonacoEditor","RowLink","fitQueryToVisibleLines","MONACO_CONFIG","jsx","_jsx","jsxs","_jsxs","block","SearchRowLayout","_ref","header","query","language","href","disabled","className","children","direction","gap","alignItems","value","readOnly","monacoConfig"],"sources":["SearchRowLayout.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport {Flex} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {MonacoEditor} from '../MonacoEditor';\nimport {RowLink} from '../RowLink';\nimport {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';\nimport {MONACO_CONFIG} from './helpers/monacoConfig';\nimport './SearchRowLayout.scss';\n\nconst block = cn('qp-search-row-layout');\n\nexport type SearchRowLayoutProps = {\n header: ReactNode;\n query?: string;\n language: string;\n href?: string;\n disabled?: boolean;\n className?: string;\n};\n\nexport const SearchRowLayout: FC<SearchRowLayoutProps> = ({\n header,\n query,\n language,\n href,\n disabled,\n className,\n}) => {\n return (\n <RowLink href={href} disabled={disabled} className={block(null, className)}>\n <Flex direction=\"column\" gap={2} className={block('content')}>\n <Flex gap={2} alignItems=\"center\">\n {header}\n </Flex>\n <MonacoEditor\n value={fitQueryToVisibleLines(query)}\n language={language}\n readOnly\n monacoConfig={MONACO_CONFIG}\n className={block('monaco')}\n />\n </Flex>\n </RowLink>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAAQC,IAAI,QAAO,mBAAmB;AACtC,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,YAAY;AACpB,SAAQC,OAAO;AACf,SAAQC,sBAAsB;AAC9B,SAAQC,aAAa;AACrB;AAAgC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhC,IAAMC,KAAK,GAAGT,EAAE,CAAC,sBAAsB,CAAC;AAWxC,OAAO,IAAMU,eAAyC,GAAG,SAA5CA,eAAyCA,CAAAC,IAAA,EAOhD;EAAA,IANFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,SAAS,GAAAN,IAAA,CAATM,SAAS;EAET,oBACIX,IAAA,CAACJ,OAAO;IAACa,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAER,KAAK,CAAC,IAAI,EAAEQ,SAAS,CAAE;IAAAC,QAAA,eACvEV,KAAA,CAACT,IAAI;MAACoB,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACH,SAAS,EAAER,KAAK,CAAC,SAAS,CAAE;MAAAS,QAAA,gBACzDZ,IAAA,CAACP,IAAI;QAACqB,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAH,QAAA,EAC5BN;MAAM,CACL,CAAC,eACPN,IAAA,CAACL,YAAY;QACTqB,KAAK,EAAEnB,sBAAsB,CAACU,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBS,QAAQ;QACRC,YAAY,EAAEpB,aAAc;QAC5Ba,SAAS,EAAER,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","Flex","cn","MonacoEditor","RowLink","fitQueryToVisibleLines","MONACO_CONFIG","jsx","_jsx","jsxs","_jsxs","block","SearchRowLayout","_ref","header","query","language","href","disabled","renderLink","className","children","direction","gap","alignItems","value","readOnly","monacoConfig"],"sources":["SearchRowLayout.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport {Flex} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {MonacoEditor} from '../MonacoEditor';\nimport {RowLink} from '../RowLink';\nimport {QueryListLinkRenderer} from '../../types/queryList';\nimport {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';\nimport {MONACO_CONFIG} from './helpers/monacoConfig';\nimport './SearchRowLayout.scss';\n\nconst block = cn('qp-search-row-layout');\n\nexport type SearchRowLayoutProps = {\n header: ReactNode;\n query?: string;\n language: string;\n href?: string;\n disabled?: boolean;\n renderLink?: QueryListLinkRenderer;\n className?: string;\n};\n\nexport const SearchRowLayout: FC<SearchRowLayoutProps> = ({\n header,\n query,\n language,\n href,\n disabled,\n renderLink,\n className,\n}) => {\n return (\n <RowLink\n href={href}\n disabled={disabled}\n renderLink={renderLink}\n className={block(null, className)}\n >\n <Flex direction=\"column\" gap={2} className={block('content')}>\n <Flex gap={2} alignItems=\"center\">\n {header}\n </Flex>\n <MonacoEditor\n value={fitQueryToVisibleLines(query)}\n language={language}\n readOnly\n monacoConfig={MONACO_CONFIG}\n className={block('monaco')}\n />\n </Flex>\n </RowLink>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAAQC,IAAI,QAAO,mBAAmB;AACtC,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,YAAY;AACpB,SAAQC,OAAO;AAEf,SAAQC,sBAAsB;AAC9B,SAAQC,aAAa;AACrB;AAAgC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhC,IAAMC,KAAK,GAAGT,EAAE,CAAC,sBAAsB,CAAC;AAYxC,OAAO,IAAMU,eAAyC,GAAG,SAA5CA,eAAyCA,CAAAC,IAAA,EAQhD;EAAA,IAPFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,SAAS,GAAAP,IAAA,CAATO,SAAS;EAET,oBACIZ,IAAA,CAACJ,OAAO;IACJa,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAET,KAAK,CAAC,IAAI,EAAES,SAAS,CAAE;IAAAC,QAAA,eAElCX,KAAA,CAACT,IAAI;MAACqB,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACH,SAAS,EAAET,KAAK,CAAC,SAAS,CAAE;MAAAU,QAAA,gBACzDb,IAAA,CAACP,IAAI;QAACsB,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAH,QAAA,EAC5BP;MAAM,CACL,CAAC,eACPN,IAAA,CAACL,YAAY;QACTsB,KAAK,EAAEpB,sBAAsB,CAACU,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBU,QAAQ;QACRC,YAAY,EAAErB,aAAc;QAC5Bc,SAAS,EAAET,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}
@@ -1,2 +1,3 @@
1
1
  import { QueryListItem, QueryListRow, QueryListRowVariant } from '../types/queryList';
2
+ export declare const getListItemKey: <T extends QueryListRow>(item: QueryListItem<T>) => string;
2
3
  export declare const getListKey: <T extends QueryListRow>(items: QueryListItem<T>[], variant: QueryListRowVariant) => string;
@@ -4,10 +4,11 @@ import "core-js/modules/es.array.map.js";
4
4
  import "core-js/modules/es.iterator.constructor.js";
5
5
  import "core-js/modules/es.iterator.map.js";
6
6
  import "core-js/modules/es.object.to-string.js";
7
+ export var getListItemKey = function getListItemKey(item) {
8
+ return 'header' in item ? "h:".concat(item.header) : "r:".concat(item.id);
9
+ };
7
10
  export var getListKey = function getListKey(items, variant) {
8
- var itemsKey = items.map(function (item) {
9
- return 'header' in item ? "h:".concat(item.header) : "r:".concat(item.id);
10
- }).join(',');
11
+ var itemsKey = items.map(getListItemKey).join(',');
11
12
  return "".concat(variant, ":").concat(itemsKey);
12
13
  };
13
14
  // #sourceMappingURL=getListKey.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["getListKey","items","variant","itemsKey","map","item","concat","header","id","join"],"sources":["getListKey.ts"],"sourcesContent":["import {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\nexport const getListKey = <T extends QueryListRow>(\n items: QueryListItem<T>[],\n variant: QueryListRowVariant,\n): string => {\n const itemsKey = items\n .map((item) => ('header' in item ? `h:${item.header}` : `r:${item.id}`))\n .join(',');\n\n return `${variant}:${itemsKey}`;\n};\n"],"mappings":";;;;;;AAEA,OAAO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,OAA4B,EACnB;EACT,IAAMC,QAAQ,GAAGF,KAAK,CACjBG,GAAG,CAAC,UAACC,IAAI;IAAA,OAAM,QAAQ,IAAIA,IAAI,QAAAC,MAAA,CAAQD,IAAI,CAACE,MAAM,SAAAD,MAAA,CAAUD,IAAI,CAACG,EAAE,CAAE;EAAA,CAAC,CAAC,CACvEC,IAAI,CAAC,GAAG,CAAC;EAEd,UAAAH,MAAA,CAAUJ,OAAO,OAAAI,MAAA,CAAIH,QAAQ;AACjC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["getListItemKey","item","concat","header","id","getListKey","items","variant","itemsKey","map","join"],"sources":["getListKey.ts"],"sourcesContent":["import {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\nexport const getListItemKey = <T extends QueryListRow>(item: QueryListItem<T>): string =>\n 'header' in item ? `h:${item.header}` : `r:${item.id}`;\n\nexport const getListKey = <T extends QueryListRow>(\n items: QueryListItem<T>[],\n variant: QueryListRowVariant,\n): string => {\n const itemsKey = items.map(getListItemKey).join(',');\n\n return `${variant}:${itemsKey}`;\n};\n"],"mappings":";;;;;;AAEA,OAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAA4BC,IAAsB;EAAA,OACzE,QAAQ,IAAIA,IAAI,QAAAC,MAAA,CAAQD,IAAI,CAACE,MAAM,SAAAD,MAAA,CAAUD,IAAI,CAACG,EAAE,CAAE;AAAA;AAE1D,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,OAA4B,EACnB;EACT,IAAMC,QAAQ,GAAGF,KAAK,CAACG,GAAG,CAACT,cAAc,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC;EAEpD,UAAAR,MAAA,CAAUK,OAAO,OAAAL,MAAA,CAAIM,QAAQ;AACjC,CAAC","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ import { QueryListItem, QueryListRow, QueryListRowVariant } from '../types/queryList';
2
+ export declare const useListKey: <T extends QueryListRow>(items: QueryListItem<T>[], rowVariant: QueryListRowVariant, paginationEnabled: boolean) => string;
@@ -0,0 +1,26 @@
1
+ import "core-js/modules/es.array.every.js";
2
+ import "core-js/modules/es.array.map.js";
3
+ import "core-js/modules/es.iterator.constructor.js";
4
+ import "core-js/modules/es.iterator.every.js";
5
+ import "core-js/modules/es.iterator.map.js";
6
+ import "core-js/modules/es.object.to-string.js";
7
+ import { useRef } from 'react';
8
+ import { getListItemKey, getListKey } from "./getListKey";
9
+ export var useListKey = function useListKey(items, rowVariant, paginationEnabled) {
10
+ var itemKeys = items.map(getListItemKey);
11
+ var currentKey = getListKey(items, rowVariant);
12
+ var stateRef = useRef(undefined);
13
+ var previousState = stateRef.current;
14
+ var isAppend = (previousState === null || previousState === void 0 ? void 0 : previousState.paginationEnabled) && previousState.rowVariant === rowVariant && previousState.itemKeys.length <= itemKeys.length && previousState.itemKeys.every(function (key, index) {
15
+ return key === itemKeys[index];
16
+ });
17
+ var key = paginationEnabled && isAppend ? previousState.key : currentKey;
18
+ stateRef.current = {
19
+ key: key,
20
+ itemKeys: itemKeys,
21
+ rowVariant: rowVariant,
22
+ paginationEnabled: paginationEnabled
23
+ };
24
+ return key;
25
+ };
26
+ // #sourceMappingURL=useListKey.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useRef","getListItemKey","getListKey","useListKey","items","rowVariant","paginationEnabled","itemKeys","map","currentKey","stateRef","undefined","previousState","current","isAppend","length","every","key","index"],"sources":["useListKey.ts"],"sourcesContent":["import {useRef} from 'react';\nimport {getListItemKey, getListKey} from './getListKey';\nimport {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\ntype ListKeyState = {\n key: string;\n itemKeys: string[];\n rowVariant: QueryListRowVariant;\n paginationEnabled: boolean;\n};\n\nexport const useListKey = <T extends QueryListRow>(\n items: QueryListItem<T>[],\n rowVariant: QueryListRowVariant,\n paginationEnabled: boolean,\n) => {\n const itemKeys = items.map(getListItemKey);\n const currentKey = getListKey(items, rowVariant);\n const stateRef = useRef<ListKeyState | undefined>(undefined);\n const previousState = stateRef.current;\n const isAppend =\n previousState?.paginationEnabled &&\n previousState.rowVariant === rowVariant &&\n previousState.itemKeys.length <= itemKeys.length &&\n previousState.itemKeys.every((key, index) => key === itemKeys[index]);\n const key = paginationEnabled && isAppend ? previousState.key : currentKey;\n\n stateRef.current = {key, itemKeys, rowVariant, paginationEnabled};\n\n return key;\n};\n"],"mappings":";;;;;;AAAA,SAAQA,MAAM,QAAO,OAAO;AAC5B,SAAQC,cAAc,EAAEC,UAAU;AAUlC,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,UAA+B,EAC/BC,iBAA0B,EACzB;EACD,IAAMC,QAAQ,GAAGH,KAAK,CAACI,GAAG,CAACP,cAAc,CAAC;EAC1C,IAAMQ,UAAU,GAAGP,UAAU,CAACE,KAAK,EAAEC,UAAU,CAAC;EAChD,IAAMK,QAAQ,GAAGV,MAAM,CAA2BW,SAAS,CAAC;EAC5D,IAAMC,aAAa,GAAGF,QAAQ,CAACG,OAAO;EACtC,IAAMC,QAAQ,GACV,CAAAF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEN,iBAAiB,KAChCM,aAAa,CAACP,UAAU,KAAKA,UAAU,IACvCO,aAAa,CAACL,QAAQ,CAACQ,MAAM,IAAIR,QAAQ,CAACQ,MAAM,IAChDH,aAAa,CAACL,QAAQ,CAACS,KAAK,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAAKD,GAAG,KAAKV,QAAQ,CAACW,KAAK,CAAC;EAAA,EAAC;EACzE,IAAMD,GAAG,GAAGX,iBAAiB,IAAIQ,QAAQ,GAAGF,aAAa,CAACK,GAAG,GAAGR,UAAU;EAE1EC,QAAQ,CAACG,OAAO,GAAG;IAACI,GAAG,EAAHA,GAAG;IAAEV,QAAQ,EAARA,QAAQ;IAAEF,UAAU,EAAVA,UAAU;IAAEC,iBAAiB,EAAjBA;EAAiB,CAAC;EAEjE,OAAOW,GAAG;AACd,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- export declare function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void): (node: HTMLElement | null) => void;
1
+ export declare function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void, loading?: boolean, itemsCount?: number): (node: HTMLElement | null) => void;
@@ -3,18 +3,26 @@ import "core-js/modules/es.iterator.constructor.js";
3
3
  import "core-js/modules/es.iterator.some.js";
4
4
  import "core-js/modules/es.object.to-string.js";
5
5
  import { useCallback, useEffect, useRef } from 'react';
6
- export function useLoadMoreSentinel(hasMore, onLoadMore) {
6
+ export function useLoadMoreSentinel(hasMore, onLoadMore, loading, itemsCount) {
7
7
  var observerRef = useRef(null);
8
+ var loadRequestedRef = useRef(false);
8
9
  var hasMoreRef = useRef(hasMore);
9
10
  hasMoreRef.current = hasMore;
10
11
  var onLoadMoreRef = useRef(onLoadMore);
11
12
  onLoadMoreRef.current = onLoadMore;
13
+ var preventRepeatedLoad = loading !== undefined;
12
14
  useEffect(function () {
13
15
  return function () {
14
16
  var _observerRef$current;
15
17
  (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
16
18
  };
17
19
  }, []);
20
+ useEffect(function () {
21
+ if (!loading) {
22
+ // Cached pages can add items without changing the loading state.
23
+ loadRequestedRef.current = false;
24
+ }
25
+ }, [loading, itemsCount]);
18
26
  return useCallback(function (node) {
19
27
  var _observerRef$current2;
20
28
  (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
@@ -24,12 +32,13 @@ export function useLoadMoreSentinel(hasMore, onLoadMore) {
24
32
  observerRef.current = new IntersectionObserver(function (entries) {
25
33
  if (entries.some(function (entry) {
26
34
  return entry.isIntersecting;
27
- }) && hasMoreRef.current) {
35
+ }) && hasMoreRef.current && !loading && (!preventRepeatedLoad || !loadRequestedRef.current) && onLoadMoreRef.current) {
28
36
  var _onLoadMoreRef$curren;
37
+ loadRequestedRef.current = preventRepeatedLoad;
29
38
  (_onLoadMoreRef$curren = onLoadMoreRef.current) === null || _onLoadMoreRef$curren === void 0 || _onLoadMoreRef$curren.call(onLoadMoreRef);
30
39
  }
31
40
  });
32
41
  observerRef.current.observe(node);
33
- }, []);
42
+ }, [loading, preventRepeatedLoad]);
34
43
  }
35
44
  // #sourceMappingURL=useLoadMoreSentinel.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useCallback","useEffect","useRef","useLoadMoreSentinel","hasMore","onLoadMore","observerRef","hasMoreRef","current","onLoadMoreRef","_observerRef$current","disconnect","node","_observerRef$current2","IntersectionObserver","entries","some","entry","isIntersecting","_onLoadMoreRef$curren","call","observe"],"sources":["useLoadMoreSentinel.ts"],"sourcesContent":["import {useCallback, useEffect, useRef} from 'react';\n\nexport function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void) {\n const observerRef = useRef<IntersectionObserver | null>(null);\n const hasMoreRef = useRef(hasMore);\n hasMoreRef.current = hasMore;\n const onLoadMoreRef = useRef(onLoadMore);\n onLoadMoreRef.current = onLoadMore;\n\n useEffect(() => {\n return () => {\n observerRef.current?.disconnect();\n };\n }, []);\n\n return useCallback((node: HTMLElement | null) => {\n observerRef.current?.disconnect();\n\n if (!node) {\n return;\n }\n\n observerRef.current = new IntersectionObserver((entries) => {\n if (entries.some((entry) => entry.isIntersecting) && hasMoreRef.current) {\n onLoadMoreRef.current?.();\n }\n });\n\n observerRef.current.observe(node);\n }, []);\n}\n"],"mappings":";;;;AAAA,SAAQA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAO,OAAO;AAEpD,OAAO,SAASC,mBAAmBA,CAACC,OAA4B,EAAEC,UAAuB,EAAE;EACvF,IAAMC,WAAW,GAAGJ,MAAM,CAA8B,IAAI,CAAC;EAC7D,IAAMK,UAAU,GAAGL,MAAM,CAACE,OAAO,CAAC;EAClCG,UAAU,CAACC,OAAO,GAAGJ,OAAO;EAC5B,IAAMK,aAAa,GAAGP,MAAM,CAACG,UAAU,CAAC;EACxCI,aAAa,CAACD,OAAO,GAAGH,UAAU;EAElCJ,SAAS,CAAC,YAAM;IACZ,OAAO,YAAM;MAAA,IAAAS,oBAAA;MACT,CAAAA,oBAAA,GAAAJ,WAAW,CAACE,OAAO,cAAAE,oBAAA,eAAnBA,oBAAA,CAAqBC,UAAU,CAAC,CAAC;IACrC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOX,WAAW,CAAC,UAACY,IAAwB,EAAK;IAAA,IAAAC,qBAAA;IAC7C,CAAAA,qBAAA,GAAAP,WAAW,CAACE,OAAO,cAAAK,qBAAA,eAAnBA,qBAAA,CAAqBF,UAAU,CAAC,CAAC;IAEjC,IAAI,CAACC,IAAI,EAAE;MACP;IACJ;IAEAN,WAAW,CAACE,OAAO,GAAG,IAAIM,oBAAoB,CAAC,UAACC,OAAO,EAAK;MACxD,IAAIA,OAAO,CAACC,IAAI,CAAC,UAACC,KAAK;QAAA,OAAKA,KAAK,CAACC,cAAc;MAAA,EAAC,IAAIX,UAAU,CAACC,OAAO,EAAE;QAAA,IAAAW,qBAAA;QACrE,CAAAA,qBAAA,GAAAV,aAAa,CAACD,OAAO,cAAAW,qBAAA,eAArBA,qBAAA,CAAAC,IAAA,CAAAX,aAAwB,CAAC;MAC7B;IACJ,CAAC,CAAC;IAEFH,WAAW,CAACE,OAAO,CAACa,OAAO,CAACT,IAAI,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;AACV","ignoreList":[]}
1
+ {"version":3,"names":["useCallback","useEffect","useRef","useLoadMoreSentinel","hasMore","onLoadMore","loading","itemsCount","observerRef","loadRequestedRef","hasMoreRef","current","onLoadMoreRef","preventRepeatedLoad","undefined","_observerRef$current","disconnect","node","_observerRef$current2","IntersectionObserver","entries","some","entry","isIntersecting","_onLoadMoreRef$curren","call","observe"],"sources":["useLoadMoreSentinel.ts"],"sourcesContent":["import {useCallback, useEffect, useRef} from 'react';\n\nexport function useLoadMoreSentinel(\n hasMore: boolean | undefined,\n onLoadMore?: () => void,\n loading?: boolean,\n itemsCount?: number,\n) {\n const observerRef = useRef<IntersectionObserver | null>(null);\n const loadRequestedRef = useRef(false);\n const hasMoreRef = useRef(hasMore);\n hasMoreRef.current = hasMore;\n const onLoadMoreRef = useRef(onLoadMore);\n onLoadMoreRef.current = onLoadMore;\n const preventRepeatedLoad = loading !== undefined;\n\n useEffect(() => {\n return () => {\n observerRef.current?.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (!loading) {\n // Cached pages can add items without changing the loading state.\n loadRequestedRef.current = false;\n }\n }, [loading, itemsCount]);\n\n return useCallback(\n (node: HTMLElement | null) => {\n observerRef.current?.disconnect();\n\n if (!node) {\n return;\n }\n\n observerRef.current = new IntersectionObserver((entries) => {\n if (\n entries.some((entry) => entry.isIntersecting) &&\n hasMoreRef.current &&\n !loading &&\n (!preventRepeatedLoad || !loadRequestedRef.current) &&\n onLoadMoreRef.current\n ) {\n loadRequestedRef.current = preventRepeatedLoad;\n onLoadMoreRef.current?.();\n }\n });\n\n observerRef.current.observe(node);\n },\n [loading, preventRepeatedLoad],\n );\n}\n"],"mappings":";;;;AAAA,SAAQA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAO,OAAO;AAEpD,OAAO,SAASC,mBAAmBA,CAC/BC,OAA4B,EAC5BC,UAAuB,EACvBC,OAAiB,EACjBC,UAAmB,EACrB;EACE,IAAMC,WAAW,GAAGN,MAAM,CAA8B,IAAI,CAAC;EAC7D,IAAMO,gBAAgB,GAAGP,MAAM,CAAC,KAAK,CAAC;EACtC,IAAMQ,UAAU,GAAGR,MAAM,CAACE,OAAO,CAAC;EAClCM,UAAU,CAACC,OAAO,GAAGP,OAAO;EAC5B,IAAMQ,aAAa,GAAGV,MAAM,CAACG,UAAU,CAAC;EACxCO,aAAa,CAACD,OAAO,GAAGN,UAAU;EAClC,IAAMQ,mBAAmB,GAAGP,OAAO,KAAKQ,SAAS;EAEjDb,SAAS,CAAC,YAAM;IACZ,OAAO,YAAM;MAAA,IAAAc,oBAAA;MACT,CAAAA,oBAAA,GAAAP,WAAW,CAACG,OAAO,cAAAI,oBAAA,eAAnBA,oBAAA,CAAqBC,UAAU,CAAC,CAAC;IACrC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,YAAM;IACZ,IAAI,CAACK,OAAO,EAAE;MACV;MACAG,gBAAgB,CAACE,OAAO,GAAG,KAAK;IACpC;EACJ,CAAC,EAAE,CAACL,OAAO,EAAEC,UAAU,CAAC,CAAC;EAEzB,OAAOP,WAAW,CACd,UAACiB,IAAwB,EAAK;IAAA,IAAAC,qBAAA;IAC1B,CAAAA,qBAAA,GAAAV,WAAW,CAACG,OAAO,cAAAO,qBAAA,eAAnBA,qBAAA,CAAqBF,UAAU,CAAC,CAAC;IAEjC,IAAI,CAACC,IAAI,EAAE;MACP;IACJ;IAEAT,WAAW,CAACG,OAAO,GAAG,IAAIQ,oBAAoB,CAAC,UAACC,OAAO,EAAK;MACxD,IACIA,OAAO,CAACC,IAAI,CAAC,UAACC,KAAK;QAAA,OAAKA,KAAK,CAACC,cAAc;MAAA,EAAC,IAC7Cb,UAAU,CAACC,OAAO,IAClB,CAACL,OAAO,KACP,CAACO,mBAAmB,IAAI,CAACJ,gBAAgB,CAACE,OAAO,CAAC,IACnDC,aAAa,CAACD,OAAO,EACvB;QAAA,IAAAa,qBAAA;QACEf,gBAAgB,CAACE,OAAO,GAAGE,mBAAmB;QAC9C,CAAAW,qBAAA,GAAAZ,aAAa,CAACD,OAAO,cAAAa,qBAAA,eAArBA,qBAAA,CAAAC,IAAA,CAAAb,aAAwB,CAAC;MAC7B;IACJ,CAAC,CAAC;IAEFJ,WAAW,CAACG,OAAO,CAACe,OAAO,CAACT,IAAI,CAAC;EACrC,CAAC,EACD,CAACX,OAAO,EAAEO,mBAAmB,CACjC,CAAC;AACL","ignoreList":[]}
@@ -5,4 +5,8 @@
5
5
  display: flex;
6
6
  gap: var(--g-spacing-2);
7
7
  }
8
+ .qp-attachments__tab-list {
9
+ padding-left: var(--g-spacing-4);
10
+ padding-right: var(--g-spacing-4);
11
+ }
8
12
  /*# sourceMappingURL=Attachments.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["Attachments.scss"],"names":[],"mappings":"AACI;EACI,OAAA;AAAR;AAGI;EACI,aAAA;EACA,uBAAA;AADR","file":"Attachments.css","sourcesContent":[".qp-attachments {\n &__panel {\n flex: 1;\n }\n\n &__tab .g-tab__title {\n display: flex;\n gap: var(--g-spacing-2)\n }\n}"],"sourceRoot":""}
1
+ {"version":3,"sources":["Attachments.scss"],"names":[],"mappings":"AACI;EACI,OAAA;AAAR;AAGI;EACI,aAAA;EACA,uBAAA;AADR;AAII;EACI,gCAAA;EACA,iCAAA;AAFR","file":"Attachments.css","sourcesContent":[".qp-attachments {\n &__panel {\n flex: 1;\n }\n\n &__tab .g-tab__title {\n display: flex;\n gap: var(--g-spacing-2)\n }\n\n &__tab-list {\n padding-left: var(--g-spacing-4);\n padding-right: var(--g-spacing-4);\n }\n}"],"sourceRoot":""}
@@ -14,9 +14,10 @@ export type AttachmentsProps = {
14
14
  attachmentListProps?: Pick<AttachmentListProps, 'className'>;
15
15
  attachments?: AttachItem[];
16
16
  deletedAttachments?: AttachItem[];
17
+ onItemClick?: AttachmentListProps<AttachItem>['onItemClick'];
17
18
  onChange?: (payload: {
18
19
  attachments: AttachItem[];
19
20
  deletedAttachments: AttachItem[];
20
21
  }) => void;
21
22
  };
22
- export declare const Attachments: ({ tokens, placeholderProps, attachmentListProps, onChange, attachments: customerAttachments, deletedAttachments: customerDeletedAttachments, }: AttachmentsProps) => React.JSX.Element;
23
+ export declare const Attachments: ({ tokens, placeholderProps, attachmentListProps, onChange, onItemClick, attachments: customerAttachments, deletedAttachments: customerDeletedAttachments, }: AttachmentsProps) => React.JSX.Element;