@djangocfg/widget-data 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-data",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Data surfaces: file tree, JSON viewer, data grid and table, kanban, listbox, masonry and timeline",
   "keywords": [
     "tree",
@@ -85,25 +85,26 @@
   "scripts": {
     "check": "tsc --noEmit",
     "check-types": "tsc --noEmit",
+    "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-kit": "^0.1.1",
+    "@djangocfg/widget-kit": "^0.1.3",
     "@dnd-kit/core": "^6.3.1",
     "@radix-ui/react-direction": "^1.1.2",
     "@radix-ui/react-slot": "^1.3.0",
     "class-variance-authority": "^0.7.1"
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/ui-core": "^2.1.544",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/typescript-config": "^2.1.544",
+    "@djangocfg/ui-core": "^2.1.544",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/DataGrid/context/DataGridContext.tsx

@@ -25,14 +25,14 @@ import type {
 // Reducer
 // =====================================================================
 
-interface State<T> {
+interface State {
   sort: DataGridSortState;
   filters: DataGridFilterState;
   pagination: DataGridPaginationState;
   selected: Set<DataGridRowId>;
 }
 
-type Action<T> =
+type Action =
   | { type: 'set-sort'; sort: DataGridSortState }
   | { type: 'set-filter'; key: string; value: string }
   | { type: 'clear-filters' }
@@ -44,7 +44,7 @@ type Action<T> =
   | { type: 'select-all'; ids: DataGridRowId[] }
   | { type: 'reset-pagination' };
 
-const reducer = <T,>(state: State<T>, action: Action<T>): State<T> => {
+const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case 'set-sort':
       return { ...state, sort: action.sort };
@@ -203,7 +203,7 @@ export function DataGridProvider<T>(props: DataGridProviderProps<T>) {
   const isControlledFilters = controlledFilters !== undefined;
   const isControlledPagination = controlledPagination !== undefined;
 
-  const [state, dispatch] = useReducer(reducer<T>, undefined, () => ({
+  const [state, dispatch] = useReducer(reducer, undefined, () => ({
     sort: initialSort ?? defaultSort,
     filters: initialFilters ?? {},
     pagination: initialPagination ?? defaultPagination,

package/src/DataGrid/parts/DataGridHeader.tsx

@@ -5,7 +5,6 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
 
 import { useDataGridContext } from '../context/DataGridContext';
-import { DataGridCell } from './DataGridCell';
 
 export function DataGridHeader() {
   const { columns, selectionMode, selectAllVisible, isSelected, rows, getRowId, stickyHeader } =

package/src/DataTable/context/DataTableContext.tsx

@@ -25,14 +25,14 @@ import type {
 // Reducer
 // =====================================================================
 
-interface State<T> {
+interface State {
   sort: DataTableSortState;
   filters: DataTableFilterState;
   pagination: DataTablePaginationState;
   selected: Set<DataTableRowId>;
 }
 
-type Action<T> =
+type Action =
   | { type: 'set-sort'; sort: DataTableSortState }
   | { type: 'set-filter'; key: string; value: string }
   | { type: 'clear-filters' }
@@ -43,7 +43,7 @@ type Action<T> =
   | { type: 'clear-selection' }
   | { type: 'select-all'; ids: DataTableRowId[] };
 
-const reducer = <T,>(state: State<T>, action: Action<T>): State<T> => {
+const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case 'set-sort':
       return { ...state, sort: action.sort };
@@ -197,7 +197,7 @@ export function DataTableProvider<T>(props: DataTableProviderProps<T>) {
   const isControlledFilters = controlledFilters !== undefined;
   const isControlledPagination = controlledPagination !== undefined;
 
-  const [state, dispatch] = useReducer(reducer<T>, undefined, () => ({
+  const [state, dispatch] = useReducer(reducer, undefined, () => ({
     sort: initialSort ?? defaultSort,
     filters: initialFilters ?? {},
     pagination: initialPagination ?? defaultPagination,

package/src/DataTable/parts/DataTable.tsx

@@ -4,13 +4,9 @@ import * as React from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 import {
   Table,
-  TableHeader,
   TableBody,
-  TableFooter,
   TableRow,
-  TableHead,
   TableCell,
-  TableCaption,
 } from '@djangocfg/ui-core/components';
 
 import type { DataTableProps } from '../types';

package/src/FileIcon/treeAdapter.tsx

@@ -37,7 +37,9 @@ export function createFileIconSlot<T>({
   size = 16,
   folderOverrides,
 }: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {
-  return ({ node, isFolder, isExpanded }) => (
+  // Named so the slot shows as `FileIconSlot` in React devtools rather than
+  // as an anonymous function.
+  const FileIconSlot: TreeRowSlot<T> = ({ node, isFolder, isExpanded }) => (
     <FileIcon
       name={getName(node)}
       isFolder={isFolder}
@@ -46,4 +48,5 @@ export function createFileIconSlot<T>({
       folderOverrides={folderOverrides}
     />
   );
+  return FileIconSlot;
 }

package/src/JsonTree/JsonViewer.tsx

@@ -99,11 +99,17 @@ function hasSearchMatch(value: JsonValue, key: string | number, query: string):
  * brick-red strings, forest-green numbers) — pastels read as washed-out
  * on a white background. Dark mirrors the One Dark family.
  */
+// Syntax-highlighting hues, not status colours: `violet` names "this is a key",
+// not "info", and `emerald` names "this is a string", not "success". A semantic
+// token here would assert a meaning the value does not have, and re-theming
+// would silently recolour the grammar.
 const TOKEN_CLASS: Record<string, string> = {
+  /* eslint-disable no-restricted-syntax */
   key: 'text-[#001080] dark:text-violet-400',
   string: 'text-[#a31515] dark:text-emerald-400',
   number: 'text-[#098658] dark:text-sky-400',
   boolean: 'text-[#0550ae] dark:text-amber-400',
+  /* eslint-enable no-restricted-syntax */
   null: 'text-muted-foreground/70 dark:text-muted-foreground/60',
   punctuation: 'text-muted-foreground dark:text-muted-foreground',
 };

package/src/Kanban/parts/KanbanColumn.tsx

@@ -13,7 +13,7 @@ interface KanbanColumnProps {
 }
 
 export function KanbanColumn({ column }: KanbanColumnProps) {
-  const { renderColumnHeader, emptyColumnMessage, dragState, setDragState, moveCard, reorderCard } =
+  const { renderColumnHeader, emptyColumnMessage, dragState, setDragState, moveCard } =
     useKanbanContext();
 
   const handlePointerEnter = React.useCallback(() => {

package/src/Listbox/parts/ListboxGroup.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { useComposedRefs } from "@djangocfg/ui-core/lib";
 import { cn } from "@djangocfg/ui-core/lib";
 import type { ListboxGroupProps, ListboxGroupLabelProps } from "../types";
 

package/src/Listbox/parts/ListboxItem.tsx

@@ -47,8 +47,16 @@ const ListboxItem = React.forwardRef<HTMLDivElement, ListboxItemProps>(
       );
     }, [value, isDisabled, context.onItemRegister, groupContext?.id, onSelect]);
 
+    // The handlers below depend on individual context MEMBERS, not on
+    // `context`. Every one is a `useCallback` in ListboxProvider and the
+    // context is a `useMemo` over exactly them, so a member is stable whenever
+    // it matters. Depending on the whole object instead would rebuild all six
+    // handlers — and re-register the item — whenever any unrelated context
+    // field moved. The linter cannot see through the member access, hence the
+    // per-hook disables.
     const onBlur = React.useCallback(() => {
       context.onItemBlur();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [context.onItemBlur]);
 
     const onClick = React.useCallback(
@@ -59,6 +67,7 @@ const ListboxItem = React.forwardRef<HTMLDivElement, ListboxItemProps>(
           context.onItemSelect(value, isMultipleSelectionKey);
         }
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [context.onItemSelect, value, isDisabled, context.multiple],
     );
 
@@ -67,6 +76,7 @@ const ListboxItem = React.forwardRef<HTMLDivElement, ListboxItemProps>(
         context.onItemFocus(value);
         context.onItemHighlight(value);
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [context.onItemFocus, context.onItemHighlight, isDisabled, value]);
 
     const onKeyDown = React.useCallback(
@@ -78,17 +88,20 @@ const ListboxItem = React.forwardRef<HTMLDivElement, ListboxItemProps>(
           return;
         }
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [context.onItemBlur],
     );
 
     const onPointerLeave = React.useCallback(() => {
       context.onItemHighlight(null);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [context.onItemHighlight]);
 
     const onPointerMove = React.useCallback(() => {
       if (!isDisabled) {
         context.onItemHighlight(value);
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [context.onItemHighlight, isDisabled, value]);
 
     const ItemPrimitive = asChild ? Slot : "div";

package/src/Masonry/context/MasonryProvider.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { useComposedRefs } from "@djangocfg/ui-core/lib";
-import { cn } from "@djangocfg/ui-core/lib";
 import type { MasonryProps, MasonryItemProps, Positioner, PositionerItem } from "../types";
 
 // ============================================================================
@@ -615,13 +614,6 @@ function useDebouncedWindowSize(options: DebouncedWindowSizeOptions) {
   return size;
 }
 
-function useLazyRef<T>(init: () => T): React.RefObject<T> {
-  const ref = React.useRef<T | null>(null);
-  if (ref.current === null) {
-    ref.current = init();
-  }
-  return ref as React.RefObject<T>;
-}
 
 type OnRafScheduleReturn<T extends unknown[]> = { (...args: T): void; cancel: () => void };
 

package/src/Tree/context/TreeContext.tsx

@@ -24,7 +24,7 @@ import { useSelection } from './selection';
 import { useRename } from './rename';
 import { useClipboard } from './clipboard';
 import { useResolvedMenu, renderItemsAsContextMenu, tidyMenuItems } from './menu';
-import { useDnd, type UseDndReturn } from './dnd';
+import { useDnd } from './dnd';
 import { usePersistSync } from './persist';
 import type { TreeContextValue } from './TreeContextValue';
 
@@ -189,6 +189,11 @@ export function TreeProvider<T>(props: TreeProviderProps<T>) {
         cache,
         filterNode,
       }),
+    // `state.cacheTick` reads as unnecessary because `cache` is a stable
+    // ref-backed Map whose identity never changes when it mutates. It is the
+    // only invalidation signal: drop it and rows for async-loaded children are
+    // never flattened, so an expanded folder stays visually empty.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [data, state.expanded, state.cacheTick, cache, filterNode],
   );
 

package/src/Tree/context/async-children/use-async-children.ts

@@ -104,6 +104,11 @@ export function useAsyncChildren<T>({
     };
     walk(data);
     return map;
+    // `cacheTick` reads as unnecessary because the walk reaches the cache
+    // through `cacheRef.current`, which the linter cannot track. It is the only
+    // invalidation signal the cache has: drop it and `nodeById` keeps the map
+    // built before the async load, so loaded children stay invisible.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, cacheTick]);
 
   // Auto-fetch every expanded folder that isn't already in cache. Cheap

package/src/Tree/context/rename/use-rename.ts

@@ -50,7 +50,6 @@ export function useRename<T>({
       if (!enableInlineRename) return;
       if (!adapter?.rename) {
         if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
           console.warn(
             '[Tree] startRename called but adapter.rename is not defined.',
           );

package/src/Tree/data/dnd.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import type { FlatRow, TreeItemId, TreeMovePosition, TreeNode } from '../types';
+import type { TreeItemId, TreeMovePosition, TreeNode } from '../types';
 
 // =====================================================================
 // Drag-and-drop primitives — pure, framework-agnostic.

package/src/Tree/hooks/keyboard/activation.ts

@@ -9,12 +9,12 @@ import type { FlatRow } from '../../types';
  *
  * Always selects (single-select semantics for keyboard input).
  */
-export type ActivateOutcome<T> =
+export type ActivateOutcome =
   | { kind: 'toggle-folder'; id: string; willExpand: boolean }
   | { kind: 'activate-leaf'; id: string }
   | { kind: 'noop' };
 
-export function resolveActivate<T>(current: FlatRow<T> | null): ActivateOutcome<T> {
+export function resolveActivate<T>(current: FlatRow<T> | null): ActivateOutcome {
   if (!current) return { kind: 'noop' };
   if (current.isFolder) {
     return {

package/src/Tree/hooks/keyboard/expand-collapse.ts

@@ -9,7 +9,7 @@ import type { FlatRow } from '../../types';
  *   - expanded folder  → jump to first visible child
  *   - leaf             → no-op
  */
-export type RightArrowOutcome<T> =
+export type RightArrowOutcome =
   | { kind: 'expand'; id: string }
   | { kind: 'focus'; id: string }
   | { kind: 'noop' };
@@ -18,7 +18,7 @@ export function resolveRightArrow<T>(
   current: FlatRow<T> | null,
   rows: readonly FlatRow<T>[],
   idx: number,
-): RightArrowOutcome<T> {
+): RightArrowOutcome {
   if (!current) return { kind: 'noop' };
   if (current.isFolder && !current.isExpanded) {
     return { kind: 'expand', id: current.node.id };
@@ -37,12 +37,12 @@ export function resolveRightArrow<T>(
  *   - leaf / collapsed w/ parent → focus parent
  *   - root leaf                  → no-op
  */
-export type LeftArrowOutcome<T> =
+export type LeftArrowOutcome =
   | { kind: 'collapse'; id: string }
   | { kind: 'focus'; id: string }
   | { kind: 'noop' };
 
-export function resolveLeftArrow<T>(current: FlatRow<T> | null): LeftArrowOutcome<T> {
+export function resolveLeftArrow<T>(current: FlatRow<T> | null): LeftArrowOutcome {
   if (!current) return { kind: 'noop' };
   if (current.isFolder && current.isExpanded) {
     return { kind: 'collapse', id: current.node.id };