feat: multiselect support

.changeset/chilly-dingos-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Checkbox now supports an indeterminate state.

.changeset/great-points-hide.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added useMultiSelect hook that tracks multiselect state. It supports selection, shift-selecting for ranges, deselection, and works across pagination.

.changeset/mean-candles-develop.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added MultiSelectMenu. The component can be used along with useMultiSelect for batch menus.

.changeset/sharp-apples-love.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Checkbox light mode background color is now white.

.changeset/sixty-ways-leave.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Table column sort icons are now chevrons to differentiate from context menus which often use carets.

.changeset/wild-forks-unite.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Table now supports custom column heading components.

libs/design-system/src/components/Table/index.tsx

@@ -5,7 +5,7 @@ import { Panel } from '../../core/Panel'
 import { Text } from '../../core/Text'
 import { useCallback, useMemo } from 'react'
 import { cx } from 'class-variance-authority'
-import { CaretDown16, CaretUp16 } from '@siafoundation/react-icons'
+import { ChevronDown16, ChevronUp16 } from '@siafoundation/react-icons'
 import { times } from '@technically/lodash'
 import {
   DndContext,
@@ -42,6 +42,7 @@ export type TableColumn<Columns, Data, Context> = {
   id: Columns
   label: string
   icon?: React.ReactNode
+  heading?: React.FC<{ context: Context }>
   tip?: string
   size?: number | string
   cellClassName?: string
@@ -208,7 +209,15 @@ export function Table<
             <tr>
               {columns.map(
                 (
-                  { id, icon, label, tip, cellClassName, contentClassName },
+                  {
+                    id,
+                    icon,
+                    heading: Heading,
+                    label,
+                    tip,
+                    cellClassName,
+                    contentClassName,
+                  },
                   i
                 ) => {
                   const isSortable =
@@ -236,6 +245,7 @@ export function Table<
                             isSortable ? 'cursor-pointer' : ''
                           )}
                         >
+                          {Heading ? <Heading context={context} /> : null}
                           <Tooltip content={tip}>
                             <Text
                               color="subtle"
@@ -251,15 +261,15 @@ export function Table<
                           {isSortActive && (
                             <Text color="contrast">
                               {sortDirection === 'asc' ? (
-                                <CaretUp16 className="scale-75" />
+                                <ChevronUp16 className="scale-75" />
                               ) : (
-                                <CaretDown16 className="scale-75" />
+                                <ChevronDown16 className="scale-75" />
                               )}
                             </Text>
                           )}
                           {isSortable && !isSortActive && (
                             <Text color="verySubtle">
-                              <CaretUp16 className="scale-75" />
+                              <ChevronUp16 className="scale-75" />
                             </Text>
                           )}
                         </div>

libs/design-system/src/core/Checkbox.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Checkmark16 } from '@siafoundation/react-icons'
+import { Checkmark16, Subtract16 } from '@siafoundation/react-icons'
 import { Text } from './Text'
 import { cva } from 'class-variance-authority'
 import { VariantProps } from '../types'
@@ -14,7 +14,7 @@ const styles = cva(
 
     'focus:ring ring-blue-500 dark:ring-blue-200',
     'border',
-    'bg-gray-300 dark:bg-graydark-50',
+    'bg-white dark:bg-graydark-50',
     'autofill:bg-blue-100 autofill:dark:bg-blue-800',
     'border-gray-400 dark:border-graydark-400',
     'enabled:hover:border-gray-500 enabled:hover:dark:border-graydark-500',
@@ -39,13 +39,21 @@ const styles = cva(
 export const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   VariantProps<typeof styles> & CheckboxPrimitive.CheckboxProps
->(({ size, children, ...props }, ref) => (
-  <div className="flex gap-2 items-center">
+>(({ size, children, ...props }, ref) => {
+  const el = (
     <CheckboxPrimitive.Root className={styles({ size })} {...props} ref={ref}>
       <CheckboxPrimitive.Indicator className="flex items-center justify-center h-full w-full text-white">
-        <Checkmark16 />
+        {props.checked === 'indeterminate' ? <Subtract16 /> : <Checkmark16 />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-    <Text color={props.disabled ? 'subtle' : 'contrast'}>{children}</Text>
-  </div>
-))
+  )
+  if (!children) {
+    return el
+  }
+  return (
+    <div className="flex gap-2 items-center">
+      {el}
+      <Text color={props.disabled ? 'subtle' : 'contrast'}>{children}</Text>
+    </div>
+  )
+})

libs/design-system/src/index.ts

@@ -166,6 +166,10 @@ export * from './hooks/useDatasetEmptyState'
 export * from './hooks/useSiacoinFiat'
 export * from './hooks/useOS'
 
+// multi
+export * from './multi/useMultiSelect'
+export * from './multi/MultiSelectionMenu'
+
 // data
 export * from './data/webLinks'
 

libs/design-system/src/multi/MultiSelectionMenu.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import { Button } from '../core/Button'
+import { Panel } from '../core/Panel'
+import { Text } from '../core/Text'
+import { pluralize } from '@siafoundation/units'
+import { Close16 } from '@siafoundation/react-icons'
+
+export function MultiSelectionMenu({
+  isVisible,
+  selectionCount,
+  isPageAllSelected,
+  deselectAll,
+  pageCount,
+  children,
+  entityWord,
+  entityWordPlural,
+}: {
+  isVisible: boolean
+  selectionCount: number
+  isPageAllSelected: boolean | 'indeterminate'
+  pageCount: number
+  children: React.ReactNode
+  deselectAll: () => void
+  entityWord: string
+  entityWordPlural?: string
+}) {
+  return (
+    <div className="fixed bottom-4 left-0 right-0 flex justify-center p-4 dark">
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial={{ y: 100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 100, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Panel
+              aria-label={entityWord + ' multiselect menu'}
+              className="pl-3 pr-2 py-2 min-w-[250px] flex gap-2 items-center rounded-lg light:bg-black"
+            >
+              {!!selectionCount && (
+                <Text size="14">
+                  {pluralize(selectionCount, entityWord, {
+                    plural: entityWordPlural,
+                  })}{' '}
+                  selected
+                </Text>
+              )}
+              {isPageAllSelected && selectionCount > pageCount && (
+                <Text>across multiple pages</Text>
+              )}
+              <div className="flex-1" />
+              {children}
+              <Button tip="Deselect all" onClick={deselectAll} size="small">
+                <Close16 />
+              </Button>
+            </Panel>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}