@snack-uikit/table 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.1 (2024-02-12)
+
+
+### Bug Fixes
+
+* **FF-4205:** table default cell for columnDefs ([84cfc41](https://github.com/cloud-ru-tech/snack-uikit/commit/84cfc41d43a605500ec3ef1757e5fb4515d40457))
+* **FF-4205:** update locale usage ([bd4095b](https://github.com/cloud-ru-tech/snack-uikit/commit/bd4095bc875c2efc95a0549a366d5b40dd424741))
+
+
+
+
+
 # 0.14.0 (2024-02-09)
 
 

package/dist/components/Table/Table.js

@@ -39,9 +39,7 @@ export function Table(_a) {
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const tableColumns = useMemo(() => {
-        let cols = columnDefinitions.map(column => column.cell
-            ? column
-            : Object.assign(Object.assign({}, column), { cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }) }));
+        let cols = columnDefinitions;
         if (enableSelection) {
             cols = [getSelectionCellColumnDef(), ...cols];
         }
@@ -73,6 +71,7 @@ export function Table(_a) {
             enableSorting: false,
             enableResizing: false,
             minSize: 40,
+            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
         },
         manualSorting: Boolean(pageCount),
         manualPagination: pageCount !== undefined,
@@ -142,7 +141,7 @@ export function Table(_a) {
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
-    const [locales] = useLocale('Table');
+    const { t } = useLocale('Table');
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const cssPageSize = useMemo(() => {
         const tempPageSize = !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize;
@@ -154,7 +153,7 @@ export function Table(_a) {
                                 value: globalFilter,
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
-                                placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || locales.searchPlaceholder,
+                                placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
                             }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: 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, style: columnSizeVars, 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))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(globalFilter), tableRowsLength: tableRows.length })] })) }) }) }) }), !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 }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;

package/dist/components/Table/hooks.js

@@ -38,15 +38,15 @@ export function useLoadingTable({ pageSize, columnDefinitions, columnPinning })
     return { loadingTable };
 }
 export function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }) {
-    const [locales] = useLocale('Table');
+    const { t } = useLocale('Table');
     return useMemo(() => {
-        const noDataState = Object.assign(Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true } }, locales.noData), noDataStateProp);
-        const noResultsState = Object.assign(Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true } }, locales.noResults), noResultsStateProp);
-        const errorDataState = Object.assign(Object.assign({ icon: { icon: CrossSVG, appearance: 'red', decor: true } }, locales.errorData), errorDataStateProp);
+        const noDataState = Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true }, title: t('noData.title') }, noDataStateProp);
+        const noResultsState = Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true }, title: t('noResults.title'), description: t('noResults.description') }, noResultsStateProp);
+        const errorDataState = Object.assign({ icon: { icon: CrossSVG, appearance: 'red', decor: true }, title: t('errorData.title'), description: t('errorData.description') }, errorDataStateProp);
         return {
             noDataState,
             noResultsState,
             errorDataState,
         };
-    }, [errorDataStateProp, locales.errorData, locales.noData, locales.noResults, noDataStateProp, noResultsStateProp]);
+    }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
 }

package/dist/components/TablePagination/TablePagination.js

@@ -5,8 +5,8 @@ import { useLocale } from '@snack-uikit/locale';
 import { Pagination } from '@snack-uikit/pagination';
 import styles from './styles.module.css';
 export function TablePagination({ table, options: optionsProp, optionsLabel: optionsLabelProp, }) {
-    const [locales] = useLocale('Table');
-    const optionsLabel = optionsLabelProp !== null && optionsLabelProp !== void 0 ? optionsLabelProp : locales.rowsOptionsLabel;
+    const { t } = useLocale('Table');
+    const optionsLabel = optionsLabelProp !== null && optionsLabelProp !== void 0 ? optionsLabelProp : t('rowsOptionsLabel');
     const handlePaginationOnChange = useCallback((pageIndex) => {
         table.setPageIndex(pageIndex - 1);
     }, [table]);

package/dist/helperComponents/ExportButton/ExportButton.js

@@ -7,17 +7,17 @@ import { useLocale } from '@snack-uikit/locale';
 import { exportToCSV, exportToXLSX } from '../../exportTable';
 export function ExportButton({ fileName, data, columnDefinitions }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [locales] = useLocale('Table');
+    const { t } = useLocale('Table');
     return (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, scroll: true, placement: 'bottom-end', items: [
             {
-                content: { option: locales.export + 'CSV' },
+                content: { option: t('export') + 'CSV' },
                 onClick: () => {
                     exportToCSV({ fileName, columnDefinitions, data });
                     setIsOpen(false);
                 },
             },
             {
-                content: { option: locales.export + 'XLSX' },
+                content: { option: t('export') + 'XLSX' },
                 onClick: () => {
                     exportToXLSX({ fileName, columnDefinitions, data });
                     setIsOpen(false);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,12 +33,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.16.0",
-    "@snack-uikit/chips": "0.11.5",
+    "@snack-uikit/chips": "0.11.6",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/info-block": "0.1.2",
     "@snack-uikit/list": "0.3.2",
-    "@snack-uikit/locale": "0.3.0",
     "@snack-uikit/pagination": "0.6.3",
     "@snack-uikit/scroll": "0.5.1",
     "@snack-uikit/skeleton": "0.3.2",
@@ -56,5 +55,8 @@
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "3a1dd5498600db7f34a4681a70254b81337ddeb4"
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
+  "gitHead": "5e7b0b6d34f40c4266070bf918e9cdf127ac882c"
 }

package/src/components/Table/Table.tsx

@@ -212,14 +212,7 @@ export function Table<TData extends object>({
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
-    let cols: ColumnDefinition<TData>[] = columnDefinitions.map(column =>
-      column.cell
-        ? column
-        : {
-            ...column,
-            cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
-          },
-    );
+    let cols: ColumnDefinition<TData>[] = columnDefinitions;
 
     if (enableSelection) {
       cols = [getSelectionCellColumnDef(), ...cols];
@@ -260,6 +253,7 @@ export function Table<TData extends object>({
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
+      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
     },
 
     manualSorting: Boolean(pageCount),
@@ -354,7 +348,7 @@ export function Table<TData extends object>({
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;
 
-  const [locales] = useLocale('Table');
+  const { t } = useLocale('Table');
   const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
 
   const cssPageSize = useMemo(() => {
@@ -379,7 +373,7 @@ export function Table<TData extends object>({
                 value: globalFilter,
                 onChange: onGlobalFilterChange,
                 loading: search?.loading,
-                placeholder: search?.placeholder || locales.searchPlaceholder,
+                placeholder: search?.placeholder || t('searchPlaceholder'),
               }}
               checked={table.getIsAllPageRowsSelected()}
               indeterminate={table.getIsSomePageRowsSelected()}

package/src/components/Table/hooks.tsx

@@ -78,24 +78,26 @@ export function useEmptyState({
   noResultsState?: EmptyStateProps;
   errorDataState?: EmptyStateProps;
 }) {
-  const [locales] = useLocale('Table');
+  const { t } = useLocale('Table');
 
   return useMemo(() => {
     const noDataState: EmptyStateProps = {
       icon: { icon: SearchSVG, appearance: 'neutral', decor: true },
-      ...locales.noData,
+      title: t('noData.title'),
       ...noDataStateProp,
     };
 
     const noResultsState: EmptyStateProps = {
       icon: { icon: SearchSVG, appearance: 'neutral', decor: true },
-      ...locales.noResults,
+      title: t('noResults.title'),
+      description: t('noResults.description'),
       ...noResultsStateProp,
     };
 
     const errorDataState: EmptyStateProps = {
       icon: { icon: CrossSVG, appearance: 'red', decor: true },
-      ...locales.errorData,
+      title: t('errorData.title'),
+      description: t('errorData.description'),
       ...errorDataStateProp,
     };
 
@@ -104,5 +106,5 @@ export function useEmptyState({
       noResultsState,
       errorDataState,
     };
-  }, [errorDataStateProp, locales.errorData, locales.noData, locales.noResults, noDataStateProp, noResultsStateProp]);
+  }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
 }

package/src/components/TablePagination/TablePagination.tsx

@@ -19,8 +19,8 @@ export function TablePagination<TData>({
   options: optionsProp,
   optionsLabel: optionsLabelProp,
 }: TablePaginationProps<TData>) {
-  const [locales] = useLocale('Table');
-  const optionsLabel = optionsLabelProp ?? locales.rowsOptionsLabel;
+  const { t } = useLocale('Table');
+  const optionsLabel = optionsLabelProp ?? t('rowsOptionsLabel');
 
   const handlePaginationOnChange = useCallback(
     (pageIndex: number) => {

package/src/helperComponents/ExportButton/ExportButton.tsx

@@ -19,7 +19,7 @@ type ExportButtonProps<TData extends object> = {
 
 export function ExportButton<TData extends object>({ fileName, data, columnDefinitions }: ExportButtonProps<TData>) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [locales] = useLocale('Table');
+  const { t } = useLocale('Table');
 
   return (
     <Droplist
@@ -30,14 +30,14 @@ export function ExportButton<TData extends object>({ fileName, data, columnDefin
       placement='bottom-end'
       items={[
         {
-          content: { option: locales.export + 'CSV' },
+          content: { option: t('export') + 'CSV' },
           onClick: () => {
             exportToCSV<TData>({ fileName, columnDefinitions, data });
             setIsOpen(false);
           },
         },
         {
-          content: { option: locales.export + 'XLSX' },
+          content: { option: t('export') + 'XLSX' },
           onClick: () => {
             exportToXLSX<TData>({ fileName, columnDefinitions, data });
             setIsOpen(false);