@snack-uikit/table 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.8.1 (2023-12-14)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/chips@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/chips/CHANGELOG.md)
10
+ * [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
11
+ * [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
12
+ * [@snack-uikit/pagination@0.5.3](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/pagination/CHANGELOG.md)
13
+ * [@snack-uikit/toggles@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
14
+ * [@snack-uikit/toolbar@0.5.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toolbar/CHANGELOG.md)
15
+ * [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
16
+
17
+
18
+
19
+
20
+
6
21
  # 0.8.0 (2023-12-14)
7
22
 
8
23
 
package/README.md CHANGED
@@ -111,9 +111,9 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
111
111
  | data* | `TData[]` | - | Данные для отрисовки |
112
112
  | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
113
113
  | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
114
- | search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | - | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска @default 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска |
115
- | pageSize | `number` | 10 | Максимальное кол-во строк на страницу @default 10 |
116
- | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | - | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации |
114
+ | search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
115
+ | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
116
+ | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
117
117
  | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
118
118
  | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
119
119
  | className | `string` | - | CSS-класс |
@@ -113,7 +113,7 @@ export function Table(_a) {
113
113
  const tableRows = table.getRowModel().rows;
114
114
  const loadingTableRows = loadingTable.getRowModel().rows;
115
115
  const tablePagination = table.getState().pagination;
116
- return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: className }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", Object.assign({ className: styles.header }, { children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", Object.assign({ className: styles.filtersWrapper }, { children: [" ", columnFiltersProp, " "] }))] }))), _jsx("div", Object.assign({ className: styles.scrollWrapper, "data-outline": outline || undefined }, { children: _jsx(Scroll, Object.assign({ size: 's', className: styles.table }, { children: _jsx("div", Object.assign({ className: styles.tableContent }, { children: _jsx(TableContext.Provider, Object.assign({ value: { table } }, { children: loading ? (_jsxs(SkeletonContextProvider, Object.assign({ loading: true }, { children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] }))) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) })) })) })) })), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
116
+ return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: className }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
117
117
  }
118
118
  Table.getStatusColumnDef = getStatusColumnDef;
119
119
  Table.statusAppearances = STATUS_APPEARANCE;
@@ -4,5 +4,5 @@ import { IconPredefined } from '@snack-uikit/icon-predefined';
4
4
  import { Typography } from '@snack-uikit/typography';
5
5
  import styles from './styles.module.css';
6
6
  export function TableEmptyState({ title, description, className, icon, appearance }) {
7
- return (_jsxs("div", Object.assign({ className: cn(styles.tableEmptyStateWrapper, className) }, { children: [_jsx(IconPredefined, { icon: icon, size: 'l', appearance: appearance }), _jsxs("div", Object.assign({ className: styles.textWrapper }, { children: [_jsx(Typography.SansTitleM, { children: title }), description && _jsx(Typography.SansBodyM, { children: description })] }))] })));
7
+ return (_jsxs("div", { className: cn(styles.tableEmptyStateWrapper, className), children: [_jsx(IconPredefined, { icon: icon, size: 'l', appearance: appearance }), _jsxs("div", { className: styles.textWrapper, children: [_jsx(Typography.SansTitleM, { children: title }), description && _jsx(Typography.SansBodyM, { children: description })] })] }));
8
8
  }
@@ -15,5 +15,5 @@ export function TablePagination({ table, options: optionsProp, optionsLabel = 'R
15
15
  if (table.getPageCount() <= 1 && !options) {
16
16
  return null;
17
17
  }
18
- return (_jsxs("div", Object.assign({ className: styles.footer }, { children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', showClearButton: false }))] })));
18
+ return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', showClearButton: false }))] }));
19
19
  }
@@ -20,5 +20,5 @@ export function BodyCell(_a) {
20
20
  var { cell, className } = _a, props = __rest(_a, ["cell", "className"]);
21
21
  const columnDef = cell.column.columnDef;
22
22
  const style = useCellSizes(cell);
23
- return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell }, { children: flexRender(columnDef.cell, cell.getContext()) })));
23
+ return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
24
24
  }
@@ -13,5 +13,5 @@ export function HeaderCell({ header, className }) {
13
13
  const sortIcon = getSortingIcon(sortDirection);
14
14
  const columnDef = header.column.columnDef;
15
15
  const style = useCellSizes(header);
16
- return (_jsxs(Cell, Object.assign({ style: style, onClick: header.column.getToggleSortingHandler(), "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, className: cn(styles.tableHeaderCell, className, columnDef.headerClassName) }, { children: [columnDef.header && (_jsx("div", Object.assign({ className: styles.tableHeaderCellName }, { children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) }))), Boolean(sortIcon) && (_jsx("div", Object.assign({ className: styles.tableHeaderSortIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator }, { children: sortIcon })))] })));
16
+ return (_jsxs(Cell, { style: style, onClick: header.column.getToggleSortingHandler(), "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderSortIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }));
17
17
  }
@@ -18,7 +18,7 @@ function RowActionsCell({ row, actions }) {
18
18
  };
19
19
  return (
20
20
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
21
- _jsx("div", Object.assign({ onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined }, { children: !disabled && Boolean(actions.length) && (_jsx(Droplist, Object.assign({ open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: 's', "data-test-id": TEST_IDS.rowActions.droplist }, { children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) }))) })));
21
+ _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: 's', "data-test-id": TEST_IDS.rowActions.droplist, children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) })) }));
22
22
  }
23
23
  /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
24
24
  export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {
@@ -21,7 +21,7 @@ function SelectionCell(_a) {
21
21
  };
22
22
  return (
23
23
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
24
- _jsx("div", Object.assign({ onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect }, { children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) })));
24
+ _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) }));
25
25
  }
26
26
  export function getSelectionCellColumnDef() {
27
27
  return {
@@ -7,7 +7,7 @@ import styles from './styles.module.css';
7
7
  export { STATUS_APPEARANCE };
8
8
  function StatusCell({ appearance, label }) {
9
9
  const isLoading = appearance === STATUS_APPEARANCE.Loading;
10
- return (_jsxs("div", Object.assign({ className: styles.statusCell, "data-no-label": !label || undefined }, { children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", Object.assign({ className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel }, { children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) })))] })));
10
+ return (_jsxs("div", { className: styles.statusCell, "data-no-label": !label || undefined, children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", { className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel, children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) }))] }));
11
11
  }
12
12
  /** Вспомогательная функция для создания ячейки со статусом */
13
13
  export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, }) {
@@ -7,7 +7,7 @@ import { exportToCSV, exportToXLSX } from '../../exportTable';
7
7
  export function ExportButton({ fileName, data, columnDefinitions }) {
8
8
  const [isOpen, setIsOpen] = useState(false);
9
9
  const { firstElementRefCallback, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, triggerElementRef, } = Droplist.useKeyboardNavigation({ setDroplistOpen: setIsOpen });
10
- return (_jsx(Droplist, Object.assign({ firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, onFocusLeave: handleDroplistFocusLeave, open: isOpen, onOpenChange: setIsOpen, useScroll: true, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'm', onKeyDown: handleTriggerKeyDown, icon: _jsx(DownloadSVG, {}) }) }, { children: [
10
+ return (_jsx(Droplist, { firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, onFocusLeave: handleDroplistFocusLeave, open: isOpen, onOpenChange: setIsOpen, useScroll: true, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'm', onKeyDown: handleTriggerKeyDown, icon: _jsx(DownloadSVG, {}) }), children: [
11
11
  {
12
12
  option: 'Export to CSV',
13
13
  onClick: () => {
@@ -23,5 +23,5 @@ export function ExportButton({ fileName, data, columnDefinitions }) {
23
23
  ].map(({ option, onClick }) => (_jsx(Droplist.ItemSingle, { option: option, onKeyDown: handleDroplistItemKeyDown, onClick: e => {
24
24
  handleDroplistItemClick(e);
25
25
  onClick === null || onClick === void 0 ? void 0 : onClick();
26
- } }, option))) })));
26
+ } }, option))) }));
27
27
  }
@@ -21,5 +21,5 @@ export function BodyRow({ row, onRowClick }) {
21
21
  toggleSelected: row.toggleSelected,
22
22
  });
23
23
  };
24
- return (_jsx(RowContext.Provider, Object.assign({ value: { droplistOpened, setDroplistOpen } }, { children: _jsxs(Row, Object.assign({ onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": droplistOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow }, { children: [pinnedLeft && (_jsx(PinnedCells, Object.assign({ position: COLUMN_PIN_POSITION.Left }, { children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, Object.assign({ position: COLUMN_PIN_POSITION.Right }, { children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })))] })) })));
24
+ return (_jsx(RowContext.Provider, { value: { droplistOpened, setDroplistOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": droplistOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
25
25
  }
@@ -7,5 +7,5 @@ import { Row } from './Row';
7
7
  import styles from './styles.module.css';
8
8
  export function HeaderRow() {
9
9
  const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
10
- return (_jsxs(Row, Object.assign({ className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader' }, { children: [leftPinned && (_jsx(PinnedCells, Object.assign({ position: COLUMN_PIN_POSITION.Left }, { children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, Object.assign({ position: COLUMN_PIN_POSITION.Right }, { children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })))] })));
10
+ return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader', children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))] }));
11
11
  }
@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { TEST_IDS } from '../../constants';
3
3
  import styles from './styles.module.css';
4
4
  export function PinnedCells({ position, children }) {
5
- return (_jsx("div", Object.assign({ "data-position": position, "data-test-id": TEST_IDS.pinnedCells, className: styles.rowPinnedCells }, { children: children })));
5
+ return (_jsx("div", { "data-position": position, "data-test-id": TEST_IDS.pinnedCells, className: styles.rowPinnedCells, children: children }));
6
6
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Table",
7
- "version": "0.8.0",
7
+ "version": "0.8.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,16 +33,16 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/button": "0.15.0",
36
- "@snack-uikit/chips": "0.10.0",
37
- "@snack-uikit/droplist": "0.12.0",
36
+ "@snack-uikit/chips": "0.10.1",
37
+ "@snack-uikit/droplist": "0.12.1",
38
38
  "@snack-uikit/icon-predefined": "0.4.0",
39
- "@snack-uikit/icons": "0.19.0",
40
- "@snack-uikit/pagination": "0.5.2",
39
+ "@snack-uikit/icons": "0.19.1",
40
+ "@snack-uikit/pagination": "0.5.3",
41
41
  "@snack-uikit/scroll": "0.5.0",
42
42
  "@snack-uikit/skeleton": "0.3.2",
43
- "@snack-uikit/toggles": "0.9.0",
44
- "@snack-uikit/toolbar": "0.5.0",
45
- "@snack-uikit/truncate-string": "0.4.0",
43
+ "@snack-uikit/toggles": "0.9.1",
44
+ "@snack-uikit/toolbar": "0.5.1",
45
+ "@snack-uikit/truncate-string": "0.4.1",
46
46
  "@snack-uikit/typography": "0.6.0",
47
47
  "@snack-uikit/utils": "3.2.0",
48
48
  "@tanstack/match-sorter-utils": "8.8.4",
@@ -51,5 +51,5 @@
51
51
  "uncontrollable": "8.0.0",
52
52
  "xlsx": "0.18.5"
53
53
  },
54
- "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
54
+ "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
55
55
  }