@elabs-ai/components-data 4.1.0 → 4.2.0

package/dist/index.d.ts

@@ -266,6 +266,11 @@ interface DataTableProps<TData, TValue> extends Omit<React.HTMLAttributes<HTMLDi
      * (a `border-border-strong` divider between rows, no stripes).
      */
     zebra?: boolean;
+    /**
+     * Draw a quiet `--rule` hairline between columns (header and body). Off by
+     * default. Pinned cells keep their own seam and never take a divider.
+     */
+    columnDividers?: boolean;
     /**
      * Opt-in row drag-reorder. Off by default — an existing table renders
      * byte-identical markup with no extra DOM per row until this is set.
@@ -366,7 +371,7 @@ declare const DataTableWithRef: <TData, TValue>(props: DataTableProps<TData, TVa
 interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
     value: string;
     onValueChange: (value: string) => void;
-    /** Visually-hidden accessible label. Defaults to "Search". */
+    /** Visually-hidden accessible label. Defaults to the localized "Search" microcopy. */
     label?: string;
     containerClassName?: string;
 }
@@ -379,7 +384,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
  * `<Input>` explicitly AND gates the clear button — while disabled the clear
  * affordance is hidden so it can't mutate the filter mid-request (#269/#8).
  */
-declare function SearchInput({ value, onValueChange, label, placeholder, className, containerClassName, disabled, ...props }: SearchInputProps): react.JSX.Element;
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface FilterBarProps {
     /** Left cluster: search + facet filters. */

package/dist/index.js

@@ -51,6 +51,7 @@ function isActiveTextSelection() {
   return window.getSelection()?.type === "Range";
 }
 var PINNED_SEAM_CLASS = "after:pointer-events-none after:absolute after:inset-y-0 after:w-px after:bg-border-strong after:content-['']";
+var COLUMN_DIVIDER_CLASS = "border-e border-rule last:border-e-0";
 function unsizedColumnIds(defs) {
   const out = /* @__PURE__ */ new Set();
   const walk = (list) => {
@@ -189,6 +190,7 @@ function DataTableInner({
   overscan = 8,
   maxBodyHeight = "32rem",
   zebra = true,
+  columnDividers = false,
   // Row drag-reorder (#13)
   enableRowReorder = false,
   onRowReorder,
@@ -702,7 +704,7 @@ function DataTableInner({
                   // must stay byte-identical to the body's so an
                   // end-aligned numeric column's header lines up with its
                   // own values.
-                  "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
+                  "h-10 px-3 text-start align-middle font-table-header text-muted-foreground",
                   // #69: a numeric column's `meta` overrides the default
                   // `text-start` — placed right after the base string so
                   // tailwind-merge lets it win over that default.
@@ -733,7 +735,8 @@ function DataTableInner({
                   // structural cue between the frozen and scrolling blocks, so
                   // it must not read as a "boundary + fill in one class string"
                   // redundancy (separation:check).
-                  geometry?.edgeClass
+                  geometry?.edgeClass,
+                  columnDividers && !geometry && COLUMN_DIVIDER_CLASS
                 ),
                 children: [
                   header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
@@ -847,14 +850,19 @@ function DataTableInner({
   }
   function rowSeparationClass(rowIndex) {
     if (!zebra) return "border-b border-border-strong last:border-b-0";
-    return rowIndex % 2 === 1 ? "bg-foreground/5" : "";
+    return cn(
+      "border-b-(length:--table-row-rule-width) border-border-strong last:border-b-0",
+      // Separate cn() argument: the stripe and the (theme-gated) rule are
+      // alternative cues, never both at once — see the jsdoc above.
+      rowIndex % 2 === 1 && "bg-table-stripe"
+    );
   }
   function pinnedCellFillClass(rowIndex) {
     return cn(
       "bg-card",
       "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
-      zebra && rowIndex % 2 === 1 && "before:bg-foreground/5",
-      "group-hover/row:before:bg-foreground/10",
+      zebra && rowIndex % 2 === 1 && "before:bg-table-stripe",
+      "group-hover/row:before:bg-table-row-hover",
       "group-data-[state=selected]/row:before:bg-accent"
     );
   }
@@ -883,7 +891,7 @@ function DataTableInner({
           // (only movement is neutralized); the gated duration-fast/ease-standard
           // pair already collapses toward ~0ms via --motion-factor when the user
           // or OS asks for reduced motion, matching the header sort button.
-          "transition-colors duration-fast ease-standard hover:bg-foreground/10 data-[state=selected]:bg-accent",
+          "transition-colors duration-fast ease-standard hover:bg-table-row-hover data-[state=selected]:bg-accent",
           // #13: the dragged row's live `transform` (set inline via `extras.style`,
           // see `SortableDataRow`) is what actually MOVES it — this class only
           // makes that movement glide instead of snapping, through the gated
@@ -944,7 +952,8 @@ function DataTableInner({
                   geometry && "sticky z-10",
                   geometry && pinnedCellFillClass(rowIndex),
                   // Separate cn() argument — see pinnedCellGeometry's edgeClass.
-                  geometry?.edgeClass
+                  geometry?.edgeClass,
+                  columnDividers && !geometry && COLUMN_DIVIDER_CLASS
                 ),
                 children: [
                   clickable && cellIndex === 0 && /* @__PURE__ */ jsx(
@@ -975,7 +984,11 @@ function DataTableInner({
       visibleColumns.map((column) => /* @__PURE__ */ jsx(
         "td",
         {
-          className: cn("px-3 py-2 align-middle", numericColumnClasses(column.columnDef.meta)),
+          className: cn(
+            "px-3 py-2 align-middle",
+            numericColumnClasses(column.columnDef.meta),
+            columnDividers && COLUMN_DIVIDER_CLASS
+          ),
           children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
         },
         column.id
@@ -1111,6 +1124,7 @@ function DataTableInner({
         {
           ref: scrollRef,
           tabIndex: 0,
+          role: "group",
           "aria-label": t("data.table.scrollRegion"),
           "aria-busy": loading || void 0,
           className: "relative overflow-auto rounded-lg border bg-card focus-ring",
@@ -1124,7 +1138,7 @@ function DataTableInner({
                 className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
                 children: [
                   /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading table data\u2026" })
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
                 ]
               }
             ),
@@ -1162,7 +1176,7 @@ function DataTableInner({
               className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
               children: [
                 /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading table data\u2026" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
               ]
             }
           ),
@@ -1172,6 +1186,7 @@ function DataTableInner({
               ref: plainScrollRef,
               "data-slot": "data-table-scroll-region",
               tabIndex: scrollOverflows ? 0 : void 0,
+              role: scrollOverflows ? "group" : void 0,
               "aria-label": scrollOverflows ? t("data.table.scrollRegion") : void 0,
               onScroll: updateScrollAffordance,
               className: "overflow-auto rounded-lg focus-ring-inset",
@@ -1240,24 +1255,39 @@ function DataTableInner({
 var DataTableWithRef = forwardRef(DataTableInner);
 
 // src/search-input/search-input.tsx
-import { useId } from "react";
-import { Input } from "@elabs-ai/components-ui";
+import { forwardRef as forwardRef2, useId, useRef as useRef2 } from "react";
+import { Input, useLocale as useLocale2 } from "@elabs-ai/components-ui";
 import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
 import { SearchIcon } from "@elabs-ai/components-icons";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SearchInput({
+var SearchInput = forwardRef2(function SearchInput2({
   value,
   onValueChange,
-  label = "Search",
-  placeholder = "Search\u2026",
+  label,
+  placeholder,
   className,
   containerClassName,
   disabled,
+  id: idProp,
   ...props
-}) {
-  const id = useId();
+}, forwardedRef) {
+  const { t } = useLocale2();
+  const resolvedLabel = label ?? t("data.searchInput.label");
+  const resolvedPlaceholder = placeholder ?? t("data.searchInput.placeholder");
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const inputRef = useRef2(null);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleClear = () => {
+    onValueChange("");
+    inputRef.current?.focus();
+  };
   return /* @__PURE__ */ jsxs2("div", { className: cn2("relative w-full max-w-xs", containerClassName), children: [
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "sr-only", children: resolvedLabel }),
     /* @__PURE__ */ jsx2(
       SearchIcon,
       {
@@ -1268,10 +1298,11 @@ function SearchInput({
     /* @__PURE__ */ jsx2(
       Input,
       {
+        ref: setRefs,
         id,
         value,
         onChange: (e) => onValueChange(e.target.value),
-        placeholder,
+        placeholder: resolvedPlaceholder,
         disabled,
         className: cn2("ps-8", value && "pe-8", className),
         ...props
@@ -1281,8 +1312,8 @@ function SearchInput({
       "button",
       {
         type: "button",
-        onClick: () => onValueChange(""),
-        "aria-label": "Clear search",
+        onClick: handleClear,
+        "aria-label": t("data.searchInput.clear"),
         className: "absolute end-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-fast ease-standard hover:text-foreground focus-ring animate-in fade-in zoom-in-95 duration-fast ease-entrance",
         children: /* @__PURE__ */ jsx2(
           "svg",
@@ -1302,7 +1333,7 @@ function SearchInput({
       }
     ) : null
   ] });
-}
+});
 
 // src/filter-bar/filter-bar.tsx
 import "react";
@@ -1316,14 +1347,14 @@ function FilterBar({ children, actions, className }) {
 }
 
 // src/filter-bar/filter-chip.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 import {
   FilterChip as BaseFilterChip,
-  useLocale as useLocale2
+  useLocale as useLocale3
 } from "@elabs-ai/components-ui";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var FilterChip = forwardRef2(function FilterChip2({ label, count, countLabel, ...props }, ref) {
-  const { formatNumber } = useLocale2();
+var FilterChip = forwardRef3(function FilterChip2({ label, count, countLabel, ...props }, ref) {
+  const { formatNumber } = useLocale3();
   const countText = count === void 0 ? void 0 : countLabel ? `${countLabel} ${formatNumber(count)}` : formatNumber(count);
   const { trailing: _ignoredTrailing, ...restProps } = props;
   return /* @__PURE__ */ jsx4(
@@ -1339,7 +1370,7 @@ var FilterChip = forwardRef2(function FilterChip2({ label, count, countLabel, ..
 });
 
 // src/facet-filter/facet-filter.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import {
   Badge,
   Button as Button2,
@@ -1349,12 +1380,12 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  useLocale as useLocale3
+  useLocale as useLocale4
 } from "@elabs-ai/components-ui";
 import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var FacetFilter = forwardRef3(function FacetFilter2({ title, options, selected, onSelectedChange, className, ...props }, ref) {
-  const { t } = useLocale3();
+var FacetFilter = forwardRef4(function FacetFilter2({ title, options, selected, onSelectedChange, className, ...props }, ref) {
+  const { t } = useLocale4();
   const selectedSet = new Set(selected);
   const toggle = (value) => {
     const next = new Set(selectedSet);
@@ -1411,7 +1442,7 @@ FacetFilter.displayName = "FacetFilter";
 
 // src/column-picker/column-picker.tsx
 import "@tanstack/react-table";
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import {
   Button as Button3,
   DropdownMenu as DropdownMenu2,
@@ -1420,15 +1451,16 @@ import {
   DropdownMenuLabel as DropdownMenuLabel2,
   DropdownMenuSeparator as DropdownMenuSeparator2,
   DropdownMenuTrigger as DropdownMenuTrigger2,
-  useLocale as useLocale4
+  useLocale as useLocale5
 } from "@elabs-ai/components-ui";
 import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function ColumnPickerInner({ table, label = "Columns", className, ...props }, ref) {
-  const { t } = useLocale4();
+function ColumnPickerInner({ table, label, className, ...props }, ref) {
+  const { t } = useLocale5();
+  const resolvedLabel = label ?? t("data.columnPicker.label");
   const columns = table.getAllColumns().filter((c) => c.getCanHide());
   return /* @__PURE__ */ jsxs5(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx6(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx6(Button3, { ref, variant: "outline", size: "sm", className: cn5(className), ...props, children: label }) }),
+    /* @__PURE__ */ jsx6(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx6(Button3, { ref, variant: "outline", size: "sm", className: cn5(className), ...props, children: resolvedLabel }) }),
     /* @__PURE__ */ jsxs5(DropdownMenuContent2, { align: "end", className: "min-w-[12rem]", children: [
       /* @__PURE__ */ jsx6(DropdownMenuLabel2, { children: t("data.columnPicker.toggleColumns") }),
       /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {}),
@@ -1457,26 +1489,12 @@ function ColumnPickerInner({ table, label = "Columns", className, ...props }, re
   ] });
 }
 ColumnPickerInner.displayName = "ColumnPicker";
-var ColumnPicker = forwardRef4(ColumnPickerInner);
+var ColumnPicker = forwardRef5(ColumnPickerInner);
 
 // src/to-csv.ts
-import { downloadBlob } from "@elabs-ai/components-ui";
-var INJECTION_PREFIXES = ["=", "+", "-", "@"];
-function stringifyValue(value) {
-  if (value === null || value === void 0) return "";
-  if (value instanceof Date) return value.toISOString();
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
-function quoteField(field, delimiter) {
-  if (INJECTION_PREFIXES.some((p) => field.startsWith(p))) {
-    field = "'" + field;
-  }
-  if (field.includes(delimiter) || field.includes('"') || field.includes("\n") || field.includes("\r")) {
-    return '"' + field.replaceAll('"', '""') + '"';
-  }
-  return field;
-}
+import { csvQuoteField, csvStringifyValue, downloadBlob } from "@elabs-ai/components-ui";
+var stringifyValue = csvStringifyValue;
+var quoteField = csvQuoteField;
 function toCsv(rows, opts) {
   const delimiter = opts?.delimiter ?? ",";
   const includeHeader = opts?.header !== false;