hazo_ui 6.15.0 → 6.18.0

package/dist/index.cjs

@@ -877,6 +877,8 @@ var en_default = {
   "locale_picker.change_language": "Change language",
   "app_logo.alt_fallback": "Logo",
   "app_header.aria_label": "Application header",
+  "app_header.menu_label": "Menu",
+  "app_header.nav_title": "Navigation",
   "skeleton.loading_content": "Loading content",
   "spinner.loading": "Loading",
   "spinner.loading_text": "Loading...",
@@ -934,7 +936,11 @@ var en_default = {
   "charts.pct_of_first": "% of first: {{pct}}%",
   "charts.pct_of_prev": "% of prev: {{pct}}%",
   "charts.dropoff": "Drop-off: \u2212{{value}}",
-  "toast.missing_prefix": "Missing: {{items}}"
+  "toast.missing_prefix": "Missing: {{items}}",
+  "editable_data_table.add": "Add",
+  "editable_data_table.delete": "Delete row",
+  "editable_data_table.empty": "No rows yet. Click Add to start.",
+  "editable_data_table.drag_to_reorder": "Drag to reorder"
 };
 var default_t = i18n.createPackageT("hazo_ui", en_default);
 var defaultHazoUiT = default_t;
@@ -12527,6 +12533,7 @@ function Logo({
 }
 function AppHeader({ identity, homeHref, navItems, actions, className }) {
   const t = useHazoUiT();
+  const [drawerOpen, setDrawerOpen] = React27__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
@@ -12546,9 +12553,34 @@ function AppHeader({ identity, homeHref, navItems, actions, className }) {
               href: homeHref
             }
           ),
-          navItems
+          navItems && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center", children: navItems })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: actions })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          navItems && /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "md:hidden rounded-md p-1.5 hover:bg-navbar-active/10",
+                "aria-label": t("app_header.menu_label"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: t("app_header.nav_title") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "p-4 [&_nav]:flex-col [&_nav]:gap-2 [&_nav]:items-stretch",
+                  onClick: (e) => {
+                    if (e.target.closest("a")) setDrawerOpen(false);
+                  },
+                  children: navItems
+                }
+              )
+            ] })
+          ] })
+        ] })
       ]
     }
   );
@@ -13196,6 +13228,506 @@ function useHazoEvent(pkg, event, handler) {
     return () => window.removeEventListener(event_name, listener);
   }, [pkg, event]);
 }
+function EditableCell({
+  value,
+  type,
+  options,
+  defaultColorValue,
+  clearable,
+  onCommit,
+  editable,
+  forceEdit,
+  onTabOut,
+  onEnterDown,
+  onPaste,
+  onActivated
+}) {
+  const [editing, setEditing] = React27.useState(false);
+  const [draft, setDraft] = React27.useState(String(value ?? ""));
+  const inputRef = React27.useRef(null);
+  React27.useEffect(() => {
+    if (forceEdit) {
+      setDraft(String(value ?? ""));
+      setEditing(true);
+    }
+  }, [forceEdit]);
+  React27.useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      if (forceEdit) {
+        onActivated?.();
+      }
+    }
+  }, [editing]);
+  const commit = React27.useCallback(() => {
+    setEditing(false);
+    if (type === "number") {
+      const n = Number(draft);
+      onCommit(Number.isNaN(n) || draft.trim() === "" ? 0 : n);
+    } else {
+      onCommit(draft);
+    }
+  }, [draft, onCommit, type]);
+  const cancel = React27.useCallback(() => {
+    setEditing(false);
+    setDraft(String(value ?? ""));
+  }, [value]);
+  const handleKeyDown = React27.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onEnterDown?.();
+        commit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Tab") {
+        const direction = e.shiftKey ? -1 : 1;
+        const handled = onTabOut?.(direction) ?? false;
+        if (handled) {
+          e.preventDefault();
+          commit();
+        }
+      }
+    },
+    [commit, cancel, onTabOut, onEnterDown]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate block px-1 py-1.5", children: String(value ?? "") });
+  }
+  if (type === "color") {
+    const colorValue = String(
+      value ?? defaultColorValue ?? "#94a3b8"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "color",
+          className: "h-7 w-8 cursor-pointer border border-border rounded p-0.5",
+          value: colorValue,
+          onChange: (e) => onCommit(e.target.value)
+        }
+      ),
+      clearable && value != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs leading-none text-muted-foreground hover:text-foreground px-0.5",
+          onClick: () => onCommit(void 0),
+          children: "\xD7"
+        }
+      )
+    ] });
+  }
+  if (type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: String(value ?? ""),
+        onValueChange: (v) => onCommit(v),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (options ?? []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    );
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "text-xs truncate block px-1 py-1.5 cursor-text hover:bg-muted/50 rounded",
+        onClick: () => {
+          setDraft(String(value ?? ""));
+          setEditing(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setDraft(String(value ?? ""));
+            setEditing(true);
+          }
+        },
+        children: String(value ?? "")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: type === "number" ? "number" : "text",
+      className: "h-7 text-xs border border-input rounded-md px-2 bg-background focus:outline-none focus:ring-1 focus:ring-ring w-full",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: handleKeyDown,
+      onPaste: (e) => {
+        const text = e.clipboardData.getData("text/plain") || e.clipboardData.getData("text");
+        if (!text) return;
+        const handled = onPaste?.(text) ?? false;
+        if (handled) {
+          e.preventDefault();
+          setEditing(false);
+        }
+      },
+      onBlur: commit
+    }
+  );
+}
+var SortableRow = React27__namespace.default.memo(function SortableRow2({
+  id,
+  highlighted,
+  children
+}) {
+  const t = useHazoUiT();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableRow2,
+    {
+      ref: setNodeRef,
+      style,
+      "data-sortable-id": id,
+      className: cn(highlighted && "bg-blue-50 ring-1 ring-blue-300"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: "cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground flex items-center justify-center",
+            title: t("editable_data_table.drag_to_reorder"),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+});
+SortableRow.displayName = "SortableRow";
+var EditableTableRow = React27__namespace.default.memo(function EditableTableRow2({
+  row,
+  rowIndex,
+  rowKey,
+  isHighlighted,
+  columns,
+  activeEditColKey,
+  deleteLabel,
+  onCellCommit,
+  onDeleteRow,
+  onTabOutCell,
+  onEnterDownCell,
+  onPasteCell,
+  onActivated
+}) {
+  const renderCountRef = React27.useRef(0);
+  renderCountRef.current += 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(SortableRow, { id: rowKey, highlighted: isHighlighted, children: [
+    columns.map((col, colIndex) => {
+      const resolvedOptions = typeof col.options === "function" ? col.options(row) : col.options;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
+        {
+          className: cn("px-1 py-0.5", col.width),
+          "data-row-render-count": colIndex === 0 ? renderCountRef.current : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            EditableCell,
+            {
+              value: row[col.key],
+              type: col.type ?? "text",
+              options: resolvedOptions,
+              defaultColorValue: col.defaultValue?.(rowIndex),
+              clearable: col.clearable,
+              editable: col.editable !== false,
+              forceEdit: activeEditColKey === col.key,
+              onTabOut: (direction) => onTabOutCell(rowIndex, col.key, direction),
+              onEnterDown: () => onEnterDownCell(rowIndex, col.key),
+              onPaste: (text) => onPasteCell(rowIndex, col.key, text),
+              onActivated,
+              onCommit: (v) => onCellCommit(rowIndex, col.key, v)
+            }
+          )
+        },
+        col.key
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+        onClick: () => onDeleteRow(rowIndex),
+        "aria-label": deleteLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+      }
+    ) })
+  ] });
+});
+EditableTableRow.displayName = "EditableTableRow";
+function EditableDataTable({
+  columns,
+  rows,
+  onChange,
+  getRowKey,
+  createRow,
+  highlightedKey,
+  className,
+  label
+}) {
+  const t = useHazoUiT();
+  const editableColumns = React27.useMemo(
+    () => columns.filter(
+      (col) => col.editable !== false && (col.type ?? "text") !== "select" && (col.type ?? "text") !== "color"
+    ).map((col) => col.key),
+    [columns]
+  );
+  const [activeEditCell, setActiveEditCell] = React27.useState(null);
+  const rowsRef = React27.useRef(rows);
+  rowsRef.current = rows;
+  const onChangeRef = React27.useRef(onChange);
+  onChangeRef.current = onChange;
+  const handleTabOut = React27.useCallback(
+    (rowIndex, colKey, direction) => {
+      const idx = editableColumns.indexOf(colKey);
+      if (idx === -1) return false;
+      if (direction === 1) {
+        if (idx < editableColumns.length - 1) {
+          setActiveEditCell({ row: rowIndex, col: editableColumns[idx + 1] });
+          return true;
+        }
+        if (rowIndex + 1 < rows.length) {
+          setActiveEditCell({ row: rowIndex + 1, col: editableColumns[0] });
+          return true;
+        }
+        return false;
+      }
+      if (idx > 0) {
+        setActiveEditCell({ row: rowIndex, col: editableColumns[idx - 1] });
+        return true;
+      }
+      if (rowIndex - 1 >= 0) {
+        setActiveEditCell({
+          row: rowIndex - 1,
+          col: editableColumns[editableColumns.length - 1]
+        });
+        return true;
+      }
+      return false;
+    },
+    [editableColumns, rows.length]
+  );
+  const handleEnterDown = React27.useCallback(
+    (rowIndex, colKey) => {
+      if (rowIndex + 1 < rows.length) {
+        setActiveEditCell({ row: rowIndex + 1, col: colKey });
+        return true;
+      }
+      return false;
+    },
+    [rows.length]
+  );
+  const handlePaste = React27.useCallback(
+    (rowIndex, colKey, text) => {
+      const startColIdx = editableColumns.indexOf(
+        colKey
+      );
+      if (startColIdx === -1) return false;
+      const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+      const lines = normalized.split("\n");
+      if (lines.length > 1 && lines[lines.length - 1] === "") {
+        lines.pop();
+      }
+      const hasTab = normalized.includes("	");
+      const delimiter = hasTab ? "	" : ",";
+      const grid = lines.map((line) => line.split(delimiter));
+      const isSingleCell = grid.length === 1 && grid[0].length === 1;
+      if (isSingleCell) return false;
+      const currentRows = rowsRef.current;
+      const nextRows = currentRows.slice();
+      grid.forEach((lineCells, rowOffset) => {
+        const targetRowIndex = rowIndex + rowOffset;
+        while (targetRowIndex >= nextRows.length) {
+          nextRows.push(createRow());
+        }
+        const targetRow = {
+          ...nextRows[targetRowIndex]
+        };
+        lineCells.forEach((cellValue, colOffset) => {
+          const targetColIdx = startColIdx + colOffset;
+          if (targetColIdx >= editableColumns.length) return;
+          const targetColKey = editableColumns[targetColIdx];
+          const col = columns.find((c) => c.key === targetColKey);
+          if (col?.type === "number") {
+            const n = Number(cellValue);
+            targetRow[targetColKey] = Number.isNaN(n) || cellValue.trim() === "" ? 0 : n;
+          } else {
+            targetRow[targetColKey] = cellValue;
+          }
+        });
+        nextRows[targetRowIndex] = targetRow;
+      });
+      onChangeRef.current(nextRows);
+      return true;
+    },
+    [editableColumns, columns, createRow]
+  );
+  const handleCellChange = React27.useCallback(
+    (rowIndex, colKey, value) => {
+      const currentRows = rowsRef.current;
+      const next = currentRows.map(
+        (row, i) => i === rowIndex ? { ...row, [colKey]: value } : row
+      );
+      onChangeRef.current(next);
+    },
+    []
+  );
+  const handleDelete = React27.useCallback((rowIndex) => {
+    const currentRows = rowsRef.current;
+    onChangeRef.current(currentRows.filter((_, i) => i !== rowIndex));
+  }, []);
+  const onCellActivated = React27.useCallback(() => setActiveEditCell(null), []);
+  const handleAdd = () => {
+    onChange([...rows, createRow()]);
+  };
+  const sensors = core$1.useSensors(
+    core$1.useSensor(core$1.PointerSensor),
+    core$1.useSensor(core$1.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const rowKeys = React27.useMemo(
+    () => rows.map((row, i) => getRowKey(row, i)),
+    [rows, getRowKey]
+  );
+  const handleDragEnd = React27.useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === active.id
+      );
+      const newIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === over.id
+      );
+      if (oldIndex === -1 || newIndex === -1) return;
+      onChange(sortable.arrayMove(rows, oldIndex, newIndex));
+    },
+    [rows, getRowKey, onChange]
+  );
+  return (
+    // DndContext wraps the whole component rather than just <TableBody> —
+    // it renders its own hidden accessibility helpers (RestoreFocus,
+    // live-region announcer) as DOM siblings of its children. Nesting it
+    // directly inside <tbody> would make those helpers invalid children of
+    // <tbody> (only <tr> is valid there); wrapping the outer <div> instead
+    // gives them a valid home. <SortableContext> is a plain context
+    // provider with no DOM output of its own, so it can stay right inside
+    // <TableBody>, wrapping only the actual <tr> rows.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core$1.DndContext,
+      {
+        sensors,
+        collisionDetection: core$1.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-editable-data-table": true, className: cn("flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 px-2 text-xs ml-auto",
+                onClick: handleAdd,
+                "aria-label": t("editable_data_table.add"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
+                  t("editable_data_table.add")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow2, { className: "bg-muted/60 hover:bg-muted/60 border-b-2 border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-6 px-0" }),
+              columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                TableHead,
+                {
+                  className: cn(
+                    "text-[11px] font-semibold uppercase tracking-wide text-foreground px-1 py-1 h-8",
+                    col.width
+                  ),
+                  children: col.label
+                },
+                col.key
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-8 px-0" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
+              rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                TableCell2,
+                {
+                  colSpan: columns.length + 2,
+                  className: "text-center text-xs text-muted-foreground italic py-4",
+                  children: t("editable_data_table.empty")
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                sortable.SortableContext,
+                {
+                  items: rowKeys,
+                  strategy: sortable.verticalListSortingStrategy,
+                  children: rows.map((row, rowIndex) => {
+                    const key = rowKeys[rowIndex];
+                    const isHighlighted = highlightedKey != null && key === highlightedKey;
+                    const activeEditColKey = activeEditCell?.row === rowIndex ? activeEditCell.col : null;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      EditableTableRow,
+                      {
+                        row,
+                        rowIndex,
+                        rowKey: key,
+                        isHighlighted,
+                        columns,
+                        activeEditColKey,
+                        deleteLabel: t("editable_data_table.delete"),
+                        onCellCommit: handleCellChange,
+                        onDeleteRow: handleDelete,
+                        onTabOutCell: handleTabOut,
+                        onEnterDownCell: handleEnterDown,
+                        onPasteCell: handlePaste,
+                        onActivated: onCellActivated
+                      },
+                      key
+                    );
+                  })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  );
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -13288,6 +13820,7 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EditableDataTable = EditableDataTable;
 exports.EmptyState = EmptyState;
 exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;