@purpurds/table 8.6.0 → 8.8.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 (25) hide show
  1. package/dist/LICENSE.txt +16 -16
  2. package/dist/styles.css +1 -1
  3. package/dist/table-column-header-cell.d.ts.map +1 -1
  4. package/dist/table-content.d.ts +16 -27
  5. package/dist/table-content.d.ts.map +1 -1
  6. package/dist/table.cjs.js +65 -65
  7. package/dist/table.cjs.js.map +1 -1
  8. package/dist/table.d.ts.map +1 -1
  9. package/dist/table.es.js +4191 -4249
  10. package/dist/table.es.js.map +1 -1
  11. package/dist/use-drag-handle.hook.d.ts +2 -6
  12. package/dist/use-drag-handle.hook.d.ts.map +1 -1
  13. package/dist/utils/custom-keyboard-coordinates.d.ts +3 -2
  14. package/dist/utils/custom-keyboard-coordinates.d.ts.map +1 -1
  15. package/package.json +25 -25
  16. package/src/cell-types/date-cell.tsx +1 -1
  17. package/src/table-column-header-cell.tsx +9 -5
  18. package/src/table-content-drag.test.tsx +43 -430
  19. package/src/table-content.tsx +62 -118
  20. package/src/table-settings-drawer.tsx +1 -1
  21. package/src/table.stories.tsx +11 -0
  22. package/src/table.tsx +100 -139
  23. package/src/use-drag-handle.hook.tsx +7 -26
  24. package/src/use-drag-handle.test.tsx +21 -174
  25. package/src/utils/custom-keyboard-coordinates.ts +27 -66
package/dist/use-drag-handle.hook.d.ts CHANGED
@@ -1,15 +1,11 @@
1
1
  import { default as React } from 'react';
2
2
 
3
- export declare function useDragHandle(): {
4
- mouseDownActive: boolean;
5
- handleMouseDown: () => void;
6
- };
7
3
  export type TableColumnDragHandleProps = {
8
- onMouseDown: () => void;
9
4
  overlayActive?: boolean;
10
5
  isFirstColumn: boolean;
11
6
  isLastColumn: boolean;
12
7
  columnDragAriaLabel: string;
8
+ [key: string]: unknown;
13
9
  };
14
- export declare function TableColumnDragHandle({ onMouseDown, overlayActive, isFirstColumn, isLastColumn, columnDragAriaLabel, }: TableColumnDragHandleProps): React.JSX.Element;
10
+ export declare function TableColumnDragHandle({ overlayActive, isFirstColumn, isLastColumn, columnDragAriaLabel, ...dragListeners }: TableColumnDragHandleProps): React.JSX.Element;
15
11
  //# sourceMappingURL=use-drag-handle.hook.d.ts.map
package/dist/use-drag-handle.hook.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-drag-handle.hook.d.ts","sourceRoot":"","sources":["../src/use-drag-handle.hook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,wBAAgB,aAAa;;;EAa5B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,GACpB,EAAE,0BAA0B,qBAqB5B"}
1
+ {"version":3,"file":"use-drag-handle.hook.d.ts","sourceRoot":"","sources":["../src/use-drag-handle.hook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAE5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,GAAG,aAAa,EACjB,EAAE,0BAA0B,qBAgB5B"}
package/dist/utils/custom-keyboard-coordinates.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import { KeyboardCoordinateGetter } from '@dnd-kit/core';
2
2
 
3
3
  /**
4
- * Enhanced keyboard coordinate handler that better handles columns of different widths
5
- * by positioning the dragged column appropriately within target columns
4
+ * Simple keyboard coordinate handler that moves the drag overlay
5
+ * left or right incrementally and lets collision detection determine
6
+ * which column we're over.
6
7
  */
7
8
  export declare const enhancedColumnKeyboardCoordinates: KeyboardCoordinateGetter;
8
9
  //# sourceMappingURL=custom-keyboard-coordinates.d.ts.map
package/dist/utils/custom-keyboard-coordinates.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"custom-keyboard-coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/custom-keyboard-coordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,iCAAiC,EAAE,wBAsE/C,CAAC"}
1
+ {"version":3,"file":"custom-keyboard-coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/custom-keyboard-coordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,EAAE,wBAoC/C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purpurds/table",
3
- "version": "8.6.0",
3
+ "version": "8.8.0",
4
4
  "license": "AGPL-3.0-only",
5
5
  "main": "./dist/table.cjs.js",
6
6
  "types": "./dist/table.d.ts",
@@ -21,26 +21,26 @@
21
21
  "@dnd-kit/utilities": "~3.2.2",
22
22
  "@tanstack/react-table": "~8.21.2",
23
23
  "classnames": "~2.5.0",
24
- "@purpurds/heading": "8.6.0",
25
- "@purpurds/button": "8.6.0",
26
- "@purpurds/drawer": "8.6.0",
27
- "@purpurds/icon": "8.6.0",
28
- "@purpurds/link": "8.6.0",
29
- "@purpurds/select": "8.6.0",
30
- "@purpurds/text-field": "8.6.0",
31
- "@purpurds/badge": "8.6.0",
32
- "@purpurds/skeleton": "8.6.0",
33
- "@purpurds/cta-link": "8.6.0",
34
- "@purpurds/toggle": "8.6.0",
35
- "@purpurds/tokens": "8.6.0",
36
- "@purpurds/visually-hidden": "8.6.0",
37
- "@purpurds/checkbox": "8.6.0",
38
- "@purpurds/paragraph": "8.6.0",
39
- "@purpurds/tooltip": "8.6.0"
24
+ "@purpurds/badge": "8.8.0",
25
+ "@purpurds/checkbox": "8.8.0",
26
+ "@purpurds/cta-link": "8.8.0",
27
+ "@purpurds/button": "8.8.0",
28
+ "@purpurds/drawer": "8.8.0",
29
+ "@purpurds/heading": "8.8.0",
30
+ "@purpurds/icon": "8.8.0",
31
+ "@purpurds/paragraph": "8.8.0",
32
+ "@purpurds/link": "8.8.0",
33
+ "@purpurds/select": "8.8.0",
34
+ "@purpurds/skeleton": "8.8.0",
35
+ "@purpurds/text-field": "8.8.0",
36
+ "@purpurds/toggle": "8.8.0",
37
+ "@purpurds/tokens": "8.8.0",
38
+ "@purpurds/tooltip": "8.8.0",
39
+ "@purpurds/visually-hidden": "8.8.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@rushstack/eslint-patch": "~1.10.0",
43
- "@storybook/react-vite": "^9.0.18",
43
+ "@storybook/react-vite": "^10.0.7",
44
44
  "@testing-library/dom": "~10.4.0",
45
45
  "@testing-library/jest-dom": "~6.4.0",
46
46
  "@testing-library/react": "~16.2.0",
@@ -54,19 +54,19 @@
54
54
  "prettier": "~2.8.8",
55
55
  "react-dom": "^19.0.0",
56
56
  "react": "^19.0.0",
57
- "storybook": "^9.0.18",
57
+ "storybook": "^10.0.7",
58
58
  "typescript": "^5.6.3",
59
59
  "vite": "^6.2.1",
60
60
  "vitest-axe": "~0.1.0",
61
61
  "vitest-canvas-mock": "~0.3.3",
62
62
  "vitest": "^3.1.2",
63
- "@purpurds/autocomplete": "8.6.0",
64
- "@purpurds/illustrative-icon": "8.6.0",
63
+ "@purpurds/autocomplete": "8.8.0",
65
64
  "@purpurds/component-rig": "1.0.0",
66
- "@purpurds/grid": "8.6.0",
67
- "@purpurds/label": "8.6.0",
68
- "@purpurds/pagination": "8.6.0",
69
- "@purpurds/listbox": "8.6.0"
65
+ "@purpurds/illustrative-icon": "8.8.0",
66
+ "@purpurds/grid": "8.8.0",
67
+ "@purpurds/label": "8.8.0",
68
+ "@purpurds/listbox": "8.8.0",
69
+ "@purpurds/pagination": "8.8.0"
70
70
  },
71
71
  "scripts": {
72
72
  "build:dev": "vite",
package/src/cell-types/date-cell.tsx CHANGED
@@ -18,7 +18,7 @@ export const DateCell = <TData extends RowData>({ cell }: DateCellProps<TData>)
18
18
  return <EmptyCell />;
19
19
  }
20
20
 
21
- const showTime = cell.column.columnDef.meta?.showTime || true;
21
+ const showTime = cell.column.columnDef.meta?.showTime ?? true;
22
22
 
23
23
  const dateObj = new Date(dateString);
24
24
  const date = dateObj.toLocaleDateString("sv-SE");
package/src/table-column-header-cell.tsx CHANGED
@@ -22,7 +22,7 @@ import c from "classnames/bind";
22
22
 
23
23
  import { DragIndicatorCircle } from "./drag-indicator-circle";
24
24
  import styles from "./table.module.scss";
25
- import { TableColumnDragHandle, useDragHandle } from "./use-drag-handle.hook";
25
+ import { TableColumnDragHandle } from "./use-drag-handle.hook";
26
26
  import { useDragIndicatorPosition } from "./use-drag-indicator-position.hook";
27
27
  import { useDropIndicator } from "./use-drop-indicator.hook";
28
28
  import { useElementVisibility } from "./use-element-visibility.hook";
@@ -100,9 +100,8 @@ export const TableColumnHeaderCell = <TData extends RowData>({
100
100
  disabled: !enableColumnDrag || activeId !== null,
101
101
  });
102
102
 
103
- const { mouseDownActive, handleMouseDown } = useDragHandle();
104
103
  const isActiveColumn = activeId === header.id || sortableId === activeId;
105
- const draggingActive = (overlayActive || isSorting || mouseDownActive) && isActiveColumn;
104
+ const draggingActive = (overlayActive || isSorting) && isActiveColumn;
106
105
  const isCheckBox = header.column.id === "row-selection" || header.id === "row-selection";
107
106
  const isRadiobutton = header.column.id === "row-radio" || header.id === "row-radio";
108
107
  const canSort = enableSorting && header.column.getCanSort();
@@ -184,12 +183,17 @@ export const TableColumnHeaderCell = <TData extends RowData>({
184
183
  aria-sort={getSortingDirection(header.column.getIsSorted())}
185
184
  aria-label={ariaLabel}
186
185
  {...(enableColumnDrag
187
- ? { ...attributes, ...listeners, id: `header-${sortableId || header.id}` }
186
+ ? {
187
+ ...attributes,
188
+ role: "columnheader", // Override the role="button" from useSortable
189
+ tabIndex: -1, // Make th non-focusable
190
+ id: `header-${sortableId || header.id}`,
191
+ }
188
192
  : {})}
189
193
  >
190
194
  {enableColumnDrag && (
191
195
  <TableColumnDragHandle
192
- onMouseDown={handleMouseDown}
196
+ {...listeners}
193
197
  overlayActive={overlayActive}
194
198
  isFirstColumn={isFirstColumn}
195
199
  isLastColumn={isLastColumn}