@trackunit/react-table 0.0.314 → 0.0.317

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 (3) hide show
  1. package/index.cjs.js +39 -14
  2. package/index.esm.js +40 -15
  3. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -554,12 +554,38 @@ const Sorting = ({ columns, }) => {
554
554
  const useTable = (_a) => {
555
555
  var _b, _c, _d, _e;
556
556
  var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
557
- const hiddenByDefaultState = React.useMemo(() => {
558
- // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
559
- return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
560
- }, [columns]);
561
- const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
562
- const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
557
+ const updatedInitialColumnVisibility = React.useMemo(() => {
558
+ const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
559
+ const resultFromInitialState = initialStateColumnVisibility
560
+ ? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
561
+ Object.fromEntries(columns
562
+ .map(column => {
563
+ if (column.id && initialStateColumnVisibility[column.id]) {
564
+ return [column.id, column.id && initialStateColumnVisibility[column.id]];
565
+ }
566
+ return null;
567
+ })
568
+ .filter(sharedUtils.truthy))
569
+ : {};
570
+ columns.forEach(column => {
571
+ var _a;
572
+ if (column.id && !resultFromInitialState[column.id]) {
573
+ resultFromInitialState[column.id] = ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) === true ? false : true;
574
+ }
575
+ });
576
+ return resultFromInitialState;
577
+ }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility]);
578
+ const updatedInitialColumnOrder = React.useMemo(() => {
579
+ const resultFromInitialState = (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || [];
580
+ columns.forEach(column => {
581
+ if (column.id && !resultFromInitialState.includes(column.id)) {
582
+ resultFromInitialState.push(column.id);
583
+ }
584
+ });
585
+ return resultFromInitialState;
586
+ }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
587
+ const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
588
+ const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
563
589
  const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
564
590
  const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
565
591
  const isFirstRender = reactComponents.useIsFirstRender();
@@ -571,18 +597,16 @@ const useTable = (_a) => {
571
597
  }, [isFirstRender, columns]);
572
598
  React.useEffect(() => {
573
599
  if (initialState && sharedUtils.objectKeys(initialState || {}).length > 0) {
574
- setColumnVisibility(sharedUtils.objectKeys(initialState.columnVisibility || {}).length > 0
575
- ? initialState.columnVisibility
576
- : hiddenByDefaultState || {});
577
- setColumnOrder(initialState.columnOrder || []);
600
+ setColumnVisibility(sharedUtils.objectKeys(initialState.columnVisibility || {}).length > 0 ? updatedInitialColumnVisibility : {});
601
+ setColumnOrder(updatedInitialColumnOrder || []);
578
602
  setSorting(initialState.sorting || []);
579
603
  setColumnSizing(initialState.columnSizing || {});
580
604
  }
581
605
  }, [
582
- hiddenByDefaultState,
606
+ updatedInitialColumnVisibility,
583
607
  initialState,
584
608
  initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
585
- initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder,
609
+ updatedInitialColumnOrder,
586
610
  initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
587
611
  initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
588
612
  ]);
@@ -665,13 +689,14 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
665
689
  .map(([id]) => id), [rowSelection]);
666
690
  const columnHelper = React.useMemo(() => reactTable.createColumnHelper(), []);
667
691
  const selectionColumn = React.useMemo(() => columnHelper.accessor(row => row.id, {
668
- cell: ({ row }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-1",
692
+ cell: ({ row }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-1 p-1",
669
693
  checked: row.getIsSelected(),
670
694
  disabled: !row.getCanSelect(),
671
695
  indeterminate: row.getIsSomeSelected(),
672
696
  onChange: row.getToggleSelectedHandler(),
673
697
  stopPropagation: true })),
674
- header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: table.getIsAllRowsSelected(),
698
+ header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "p-1",
699
+ checked: table.getIsAllRowsSelected(),
675
700
  indeterminate: table.getIsSomeRowsSelected(),
676
701
  onChange: table.getToggleAllRowsSelectedHandler() })),
677
702
  id: "selection",
package/index.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
3
3
  import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent, useIsFirstRender } from '@trackunit/react-components';
4
- import { objectValues, objectKeys, objectEntries } from '@trackunit/shared-utils';
4
+ import { objectValues, truthy, objectKeys, objectEntries } from '@trackunit/shared-utils';
5
5
  import * as React from 'react';
6
6
  import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
7
7
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -529,12 +529,38 @@ const Sorting = ({ columns, }) => {
529
529
  const useTable = (_a) => {
530
530
  var _b, _c, _d, _e;
531
531
  var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
532
- const hiddenByDefaultState = useMemo(() => {
533
- // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
534
- return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
535
- }, [columns]);
536
- const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
537
- const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
532
+ const updatedInitialColumnVisibility = useMemo(() => {
533
+ const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
534
+ const resultFromInitialState = initialStateColumnVisibility
535
+ ? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
536
+ Object.fromEntries(columns
537
+ .map(column => {
538
+ if (column.id && initialStateColumnVisibility[column.id]) {
539
+ return [column.id, column.id && initialStateColumnVisibility[column.id]];
540
+ }
541
+ return null;
542
+ })
543
+ .filter(truthy))
544
+ : {};
545
+ columns.forEach(column => {
546
+ var _a;
547
+ if (column.id && !resultFromInitialState[column.id]) {
548
+ resultFromInitialState[column.id] = ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) === true ? false : true;
549
+ }
550
+ });
551
+ return resultFromInitialState;
552
+ }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility]);
553
+ const updatedInitialColumnOrder = useMemo(() => {
554
+ const resultFromInitialState = (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || [];
555
+ columns.forEach(column => {
556
+ if (column.id && !resultFromInitialState.includes(column.id)) {
557
+ resultFromInitialState.push(column.id);
558
+ }
559
+ });
560
+ return resultFromInitialState;
561
+ }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
562
+ const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
563
+ const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
538
564
  const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
539
565
  const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
540
566
  const isFirstRender = useIsFirstRender();
@@ -546,18 +572,16 @@ const useTable = (_a) => {
546
572
  }, [isFirstRender, columns]);
547
573
  useEffect(() => {
548
574
  if (initialState && objectKeys(initialState || {}).length > 0) {
549
- setColumnVisibility(objectKeys(initialState.columnVisibility || {}).length > 0
550
- ? initialState.columnVisibility
551
- : hiddenByDefaultState || {});
552
- setColumnOrder(initialState.columnOrder || []);
575
+ setColumnVisibility(objectKeys(initialState.columnVisibility || {}).length > 0 ? updatedInitialColumnVisibility : {});
576
+ setColumnOrder(updatedInitialColumnOrder || []);
553
577
  setSorting(initialState.sorting || []);
554
578
  setColumnSizing(initialState.columnSizing || {});
555
579
  }
556
580
  }, [
557
- hiddenByDefaultState,
581
+ updatedInitialColumnVisibility,
558
582
  initialState,
559
583
  initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
560
- initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder,
584
+ updatedInitialColumnOrder,
561
585
  initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
562
586
  initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
563
587
  ]);
@@ -640,13 +664,14 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
640
664
  .map(([id]) => id), [rowSelection]);
641
665
  const columnHelper = useMemo(() => createColumnHelper(), []);
642
666
  const selectionColumn = useMemo(() => columnHelper.accessor(row => row.id, {
643
- cell: ({ row }) => (jsx(Checkbox, { className: "ml-1",
667
+ cell: ({ row }) => (jsx(Checkbox, { className: "ml-1 p-1",
644
668
  checked: row.getIsSelected(),
645
669
  disabled: !row.getCanSelect(),
646
670
  indeterminate: row.getIsSomeSelected(),
647
671
  onChange: row.getToggleSelectedHandler(),
648
672
  stopPropagation: true })),
649
- header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllRowsSelected(),
673
+ header: ({ table }) => (jsx(Checkbox, { className: "p-1",
674
+ checked: table.getIsAllRowsSelected(),
650
675
  indeterminate: table.getIsSomeRowsSelected(),
651
676
  onChange: table.getToggleAllRowsSelectedHandler() })),
652
677
  id: "selection",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "0.0.314",
3
+ "version": "0.0.317",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {