@toolpath/ui 0.1.0

package/src/table/use-checkbox.ts

@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import { Identifier, TableNode } from '@table-library/react-table-library/types/table'
+import { CheckboxChangeEvent } from '../checkbox'
+
+export type UseCheckboxReturn = {
+  isChecked: (item: TableNode) => boolean
+  isIndeterminate: (item: TableNode) => boolean
+  handleCheck: (item: TableNode, checked: boolean, event?: CheckboxChangeEvent) => void
+  checkedItems: Array<Identifier>
+}
+
+export const useCheckbox = (
+  items: Array<TableNode>,
+  initialState?: Array<Identifier>,
+): UseCheckboxReturn => {
+  const [checkedRows, setCheckedRows] = useState<Array<Identifier>>(initialState || [])
+  const [lastCheckedId, setLastCheckedId] = useState<Identifier | null>(null)
+
+  // Flatten the tree into a list in visual order
+  const flattenItems = (nodes: Array<TableNode>): Array<TableNode> => {
+    return nodes.flatMap((node) => [node, ...flattenItems(node.nodes ?? [])])
+  }
+
+  // Find an item by ID in the tree
+  const findItemById = (items: Array<TableNode>, id: Identifier): TableNode | undefined => {
+    return items.reduce<TableNode | undefined>((found, item) => {
+      if (found) {
+        return found
+      }
+      if (item.id === id) {
+        return item
+      }
+      if (item.nodes?.length) {
+        return findItemById(item.nodes, id)
+      }
+      return undefined
+    }, undefined)
+  }
+
+  // Recursively get all descendant IDs from a TreeItem
+  const getAllDescendantIds = (item: TableNode): Array<Identifier> => {
+    if (!item.nodes?.length) {
+      return []
+    }
+    return item.nodes
+      .filter((child) => child && child.id != null)
+      .flatMap((child) => [child.id, ...getAllDescendantIds(child)])
+  }
+
+  // Get all ancestor IDs for an item
+  const getAllAncestorIds = (
+    items: Array<TableNode>,
+    targetId: Identifier,
+    path: Array<Identifier> = [],
+  ): Array<Identifier> => {
+    return items.reduce<Array<Identifier>>((result, item) => {
+      if (result.length > 0) {
+        return result
+      }
+      if (item.id === targetId) {
+        return path
+      }
+      if (item.nodes?.length) {
+        const found = getAllAncestorIds(item.nodes, targetId, [...path, item.id])
+        if (found.length > 0 || item.nodes.some((n) => n.id === targetId)) {
+          return found.length > 0 ? found : [...path, item.id]
+        }
+      }
+      return result
+    }, [])
+  }
+
+  // Get ancestors that should be auto-checked (all their descendants are checked)
+  const getAncestorsToAutoCheck = (
+    items: Array<TableNode>,
+    targetId: Identifier,
+    newCheckedIds: Array<Identifier>,
+  ): Array<Identifier> => {
+    const ancestorIds = getAllAncestorIds(items, targetId)
+
+    // Walk from innermost ancestor to outermost, stop when one fails
+    const result = ancestorIds
+      .slice()
+      .reverse()
+      .reduce<{ stopped: boolean; ids: Array<Identifier> }>(
+        (acc, ancestorId) => {
+          if (acc.stopped) {
+            return acc
+          }
+
+          const ancestor = findItemById(items, ancestorId)
+          if (!ancestor) {
+            return acc
+          }
+
+          const descendantIds = getAllDescendantIds(ancestor)
+          const allDescendantsChecked = descendantIds.every(
+            (id) => newCheckedIds.includes(id) || acc.ids.includes(id),
+          )
+
+          if (allDescendantsChecked) {
+            return { stopped: false, ids: [...acc.ids, ancestorId] }
+          }
+          // If this ancestor isn't fully checked, outer ancestors won't be either
+          return { stopped: true, ids: acc.ids }
+        },
+        { stopped: false, ids: [] },
+      )
+
+    return result.ids
+  }
+
+  const getDescendantCheckState = (item: TableNode) => {
+    const originalItem = findItemById(items, item.id)
+    const descendantIds = originalItem ? getAllDescendantIds(originalItem) : []
+    const checkedCount = descendantIds.filter((id) => checkedRows.includes(id)).length
+
+    return {
+      hasChildren: descendantIds.length > 0,
+      allChecked: descendantIds.length > 0 && checkedCount === descendantIds.length,
+      someChecked: checkedCount > 0 && checkedCount < descendantIds.length,
+      descendantIds,
+    }
+  }
+
+  const isChecked = (item: TableNode): boolean => {
+    const { allChecked } = getDescendantCheckState(item)
+    // If all descendants are checked, treat parent as checked too
+    return checkedRows.includes(item.id) || allChecked
+  }
+
+  const isIndeterminate = (item: TableNode): boolean => {
+    const { hasChildren, someChecked } = getDescendantCheckState(item)
+    // Indeterminate only when some (but not all/none) descendants are checked
+    return hasChildren && !isChecked(item) && someChecked
+  }
+
+  const handleCheck = (item: TableNode, checked: boolean, event?: CheckboxChangeEvent) => {
+    const shiftPressed = event?.shiftKey
+
+    // Handle shift+click range selection
+    if (shiftPressed && lastCheckedId !== null && checked) {
+      const flatList = flattenItems(items)
+      const lastIndex = flatList.findIndex((n) => n.id === lastCheckedId)
+      const currentIndex = flatList.findIndex((n) => n.id === item.id)
+
+      if (lastIndex !== -1 && currentIndex !== -1) {
+        const start = Math.min(lastIndex, currentIndex)
+        const end = Math.max(lastIndex, currentIndex)
+        const itemsInRange = flatList.slice(start, end + 1)
+
+        setCheckedRows((current) => {
+          return itemsInRange.reduce(
+            (newCheckedIds, rangeItem) => {
+              const { descendantIds } = getDescendantCheckState(rangeItem)
+              const allIds = [rangeItem.id, ...descendantIds]
+              const idsToAdd = allIds.filter((id) => !newCheckedIds.includes(id))
+              const withDescendants = [...newCheckedIds, ...idsToAdd]
+
+              // Check if any ancestors should also be auto-checked
+              const ancestorsToCheck = getAncestorsToAutoCheck(
+                items,
+                rangeItem.id,
+                withDescendants,
+              ).filter((id) => !withDescendants.includes(id))
+              return [...withDescendants, ...ancestorsToCheck]
+            },
+            [...current],
+          )
+        })
+
+        setLastCheckedId(item.id)
+        return
+      }
+    }
+
+    const { descendantIds } = getDescendantCheckState(item)
+    const allIds = [item.id, ...descendantIds]
+    const ancestorIds = getAllAncestorIds(items, item.id)
+    setCheckedRows((current) => {
+      if (checked) {
+        // Add this item and descendants (filter duplicates)
+        const idsToAdd = allIds.filter((id) => !current.includes(id))
+        const newCheckedIds = [...current, ...idsToAdd]
+        // Check if any ancestors should also be auto-checked
+        const ancestorsToCheck = getAncestorsToAutoCheck(items, item.id, newCheckedIds).filter(
+          (id) => !newCheckedIds.includes(id),
+        )
+        return [...newCheckedIds, ...ancestorsToCheck]
+      }
+      // When unchecking, also uncheck all ancestors
+      const idsToRemove = [...allIds, ...ancestorIds]
+      return current.filter((id) => !idsToRemove.includes(id))
+    })
+
+    setLastCheckedId(item.id)
+  }
+
+  return { isChecked, isIndeterminate, handleCheck, checkedItems: checkedRows }
+}

package/src/table/use-column-layout.ts

@@ -0,0 +1,117 @@
+import { Children, ReactElement, ReactNode, isValidElement, useEffect, useState } from 'react'
+import { useTable } from './table-context'
+
+interface ColumnProps {
+  width?: string | number
+  resize?: boolean
+}
+
+interface HeaderProps {
+  children?: ReactNode
+}
+
+export const useColumnLayout = (header: ReactElement<HeaderProps>, id?: string) => {
+  const { select, multiselect } = useTable()
+  const hasSelectionColumn = select || multiselect
+  const columns = Children.toArray(header.props.children).filter(
+    (child): child is ReactElement<ColumnProps> => isValidElement(child),
+  )
+
+  const formatWidth = (width: string | number | undefined): string => {
+    if (width === undefined) {
+      return 'minmax(0px, 1fr)'
+    }
+
+    if (typeof width === 'number') {
+      return `${width}px`
+    }
+
+    return width
+  }
+
+  const initialWidths: string = `${hasSelectionColumn ? '8px' : ''} ${columns
+    .map((child) => {
+      const width = child.props.width
+      return formatWidth(width)
+    })
+    .join(' ')}`
+
+  const [columnLayout, setColumnLayout] = useState<string>(initialWidths)
+
+  // Restore layout from localStorage when columns are available
+  useEffect(() => {
+    // Don't try to restore layout if columns haven't loaded yet
+    // (columns are often loaded asynchronously)
+    if (columns.length === 0) {
+      return
+    }
+
+    // If no id, just use the default widths from props
+    if (!id) {
+      setColumnLayout(initialWidths)
+      return
+    }
+
+    const storageKey = `table-${id}`
+    const storedLayout = localStorage.getItem(storageKey)
+
+    // No stored layout - use the default widths from props
+    if (!storedLayout) {
+      setColumnLayout(initialWidths)
+      return
+    }
+
+    const storedColumns = storedLayout.match(/(?:minmax\([^()]*\)|[^\s]+)/g)
+
+    // Column count mismatch - clear storage and use default widths
+    if (!storedColumns || storedColumns.length !== columns.length + (hasSelectionColumn ? 1 : 0)) {
+      localStorage.removeItem(storageKey)
+      setColumnLayout(initialWidths)
+      return
+    }
+
+    // Restore from localStorage
+    setColumnLayout(storedLayout)
+  }, [columns.length, hasSelectionColumn, id, initialWidths])
+
+  // On layout change, save to local storage.
+  const handleLayoutChange = (newLayout: string) => {
+    if (!id) {
+      return
+    }
+
+    const storageKey = `table-${id}`
+
+    const newLayoutArray = newLayout.match(/(?:minmax\([^()]*\)|[^\s]+)/g)
+    if (!newLayoutArray) {
+      return
+    }
+
+    if (hasSelectionColumn) {
+      newLayoutArray.shift()
+    }
+
+    let newLayoutString = newLayoutArray
+      .map((width, index) => {
+        const column = columns[index]
+        const columnWidth = column?.props?.width
+        const resizeable = column?.props?.resize !== false
+
+        return resizeable || !columnWidth
+          ? width.includes('minmax')
+            ? width
+            : `minmax(${width}, 1fr)`
+          : formatWidth(columnWidth)
+      })
+      .join(' ')
+
+    if (hasSelectionColumn) {
+      newLayoutString = `8px ${newLayoutString}`
+    }
+
+    localStorage.setItem(storageKey, newLayoutString)
+    setColumnLayout(newLayoutString)
+  }
+
+  return { handleLayoutChange, columnLayout }
+}

package/src/table/use-groups.ts

@@ -0,0 +1,134 @@
+import { isNumber } from 'lodash-es'
+import { ReactNode, RefObject, useCallback, useMemo, useState } from 'react'
+import { createGroupEmptyStateMarker } from './is-group-empty-state'
+import { getRowHeight } from './table'
+import { useTable } from './table-context'
+
+export const useGroups = (
+  data: Array<any>,
+  tableRef: RefObject<any>,
+  grouped?: {
+    counts: Array<number>
+    header: (index: number) => ReactNode
+    emptyState?: (index: number) => ReactNode
+  },
+) => {
+  const { collapsedGroups, density } = useTable()
+  const rowHeight = getRowHeight(density)
+  const [firstIndex, setFirstIndex] = useState(0)
+
+  if (grouped) {
+    if (!Array.isArray(grouped.counts)) {
+      throw new Error('Grouped counts must be an array.')
+    }
+
+    const totalGroupedItems = grouped.counts.reduce((prev, current) => prev + current, 0)
+    if (totalGroupedItems !== data?.length) {
+      throw new Error('All items must be assigned to a group.')
+    }
+  }
+
+  const groupedData = useMemo(() => {
+    if (!grouped) {
+      return data || []
+    }
+
+    let offset = 0
+    const groups = grouped.counts.map((count, i) => {
+      const isCollapsed = collapsedGroups?.includes(i)
+      const rows = !isCollapsed ? data.slice(offset, offset + count) : []
+
+      const group = [grouped.header(i), ...rows]
+
+      if (count === 0 && !isCollapsed && grouped.emptyState) {
+        group.push(createGroupEmptyStateMarker(), createGroupEmptyStateMarker(true))
+      }
+
+      offset += count
+      return group
+    })
+    return groups.flat()
+  }, [data, grouped, collapsedGroups])
+
+  const groupIndexByItemIndex = useMemo(() => {
+    if (!grouped) {
+      return []
+    }
+
+    const items: Array<number> = []
+    grouped.counts.forEach((count, i) => {
+      if (!collapsedGroups?.includes(i)) {
+        const hasEmptyState = count === 0 && grouped.emptyState
+        for (let j = 0; j < count + 1 + (hasEmptyState ? 2 : 0); j++) {
+          items.push(i)
+        }
+      } else {
+        items.push(i)
+      }
+    })
+
+    return items
+  }, [grouped, collapsedGroups])
+
+  const getGroupIndex = useCallback(
+    (rowIndex: number): number => {
+      return groupIndexByItemIndex[rowIndex] ?? 0
+    },
+    [groupIndexByItemIndex],
+  )
+
+  const currentGroupIndex = useMemo(() => {
+    if (!grouped) {
+      return undefined
+    }
+    return getGroupIndex(firstIndex)
+  }, [grouped, firstIndex, getGroupIndex])
+
+  const currentGroup = useMemo(() => {
+    if (!grouped || grouped.counts.length === 0) {
+      return null
+    }
+    const groupIndex = getGroupIndex(firstIndex)
+    return grouped.header(groupIndex)
+  }, [grouped, firstIndex, getGroupIndex])
+
+  const handleScroll = useCallback(() => {
+    if (!grouped || !tableRef.current) {
+      return
+    }
+    const scrollTop: number = Number(
+      tableRef.current.querySelector('[data-table-library_table] > div > div')?.scrollTop,
+    )
+
+    if (scrollTop >= 0 && scrollTop <= rowHeight) {
+      setFirstIndex(0)
+    } else {
+      try {
+        groupedData.reduce((prev, _, currentIndex) => {
+          const height = rowHeight
+          const start = isNumber(prev) ? prev : rowHeight
+          const end = start + height
+
+          if (scrollTop >= start && scrollTop <= end) {
+            setFirstIndex(currentIndex)
+            throw 'BREAK'
+          }
+
+          return end
+        })
+      } catch (e) {
+        if (e !== 'BREAK') {
+          throw e
+        }
+      }
+    }
+  }, [grouped, tableRef, groupedData, rowHeight])
+
+  return {
+    data: groupedData,
+    handleScroll,
+    currentGroup,
+    getGroupIndex,
+    currentGroupIndex,
+  }
+}