@tensor_1/react 2.23.0 → 2.25.0

package/dist/components/TableControls.js

@@ -1,22 +1,210 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
 import { EditorIcon } from "./EditorIcons.js";
 import { Input } from "./Input.js";
+import { Popover } from "./Popover.js";
 import { Segmented, SegmentedOption } from "./Segmented.js";
 import { Switch } from "./Switch.js";
-function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
-  const densityLabelId = useId();
-  const zebraLabelId = useId();
-  const freezeLabelId = useId();
-  return /* @__PURE__ */ jsxs("div", { className: "uix-view-menu", children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+const VIEW_MENU_COLUMN_LABELS = {
+  rowActions: "Column actions: {label}",
+  reorder: "Drag to reorder: {label}",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  hide: "Hide",
+  show: "Show",
+  required: "Always shown",
+  moved: "{label} moved to position {position} of {count}"
+};
+const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+const columnText = (column) => column.textLabel ?? (typeof column.label === "string" ? column.label : column.id);
+const isPopoverOpen = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function ColumnRowMenu({ label, actions, triggerRef }) {
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const button = useRef(null);
+  const items = useRef([]);
+  const wasOpenAtPress = useRef(false);
+  const enabled = () => items.current.filter((el) => !!el && !el.disabled);
+  const close = (returnFocus) => {
+    const el = document.getElementById(menuId);
+    if (isPopoverOpen(el)) el.hidePopover();
+    setOpen(false);
+    if (returnFocus) button.current?.focus();
+  };
+  useEffect(() => {
+    if (!open) return;
+    const el = document.getElementById(menuId);
+    if (el && typeof el.showPopover === "function" && !isPopoverOpen(el)) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+    enabled()[0]?.focus();
+    const onToggle = (event) => {
+      if (event.newState === "closed") setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    };
+    el?.addEventListener("toggle", onToggle);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      el?.removeEventListener("toggle", onToggle);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, menuId]);
+  const onMenuKeyDown = (event) => {
+    const list = enabled();
+    const at = list.indexOf(document.activeElement);
+    const focus = (index) => {
+      event.preventDefault();
+      list[(index + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") focus(at + 1);
+    else if (event.key === "ArrowUp") focus(at - 1);
+    else if (event.key === "Home") focus(0);
+    else if (event.key === "End") focus(list.length - 1);
+    else if (event.key === "Tab") close(false);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__actions", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          button.current = el;
+          triggerRef(el);
+        },
+        type: "button",
+        className: "uix-btn uix-btn--ghost uix-btn--sm uix-btn--icon",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onPointerDown: () => {
+          wasOpenAtPress.current = isPopoverOpen(document.getElementById(menuId));
+        },
+        onClick: () => {
+          const wasOpen = wasOpenAtPress.current;
+          wasOpenAtPress.current = false;
+          if (wasOpen) return;
+          if (open) close(false);
+          else setOpen(true);
+        },
+        children: /* @__PURE__ */ jsx(EditorIcon, { name: "more" })
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Popover, { id: menuId, anchor: button, placement: "bottom-end", offset: 4, role: "menu", "aria-label": label, className: "uix-view-menu__row-menu", onKeyDown: onMenuKeyDown, children: actions.map((action, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          items.current[index] = el;
+        },
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        className: "uix-menu__item",
+        disabled: action.disabled,
+        onClick: () => {
+          close(true);
+          action.onSelect();
+        },
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewMenu({
+  density,
+  densityLabel,
+  densityOptions,
+  onDensityChange,
+  displayLabel,
+  zebra,
+  freeze,
+  columns,
+  columnsLabel,
+  onColumnVisibilityChange,
+  onReorder,
+  columnLabels,
+  footer,
+  className
+}) {
+  const baseId = useId();
+  const densityLabelId = `${baseId}-density`;
+  const zebraLabelId = `${baseId}-zebra`;
+  const freezeLabelId = `${baseId}-freeze`;
+  const columnsLabelId = `${baseId}-columns`;
+  const labels = { ...VIEW_MENU_COLUMN_LABELS, ...columnLabels };
+  const list = columns ?? [];
+  const [draft, setDraft] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const dragStart = useRef(null);
+  const listRef = useRef(null);
+  const triggers = useRef(/* @__PURE__ */ new Map());
+  const refocus = useRef(null);
+  const orderKey = JSON.stringify(list.map((column) => column.id));
+  useEffect(() => setDraft(null), [orderKey]);
+  const order = draft ?? list.map((column) => column.id);
+  const byId = new Map(list.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((column) => !!column);
+  useEffect(() => {
+    const target = refocus.current;
+    refocus.current = null;
+    if (!target) return;
+    const el = target.part === "actions" ? triggers.current.get(target.id) : Array.from(listRef.current?.children ?? []).find((row) => row.dataset.columnId === target.id)?.querySelector(".uix-view-menu__grip");
+    if (el && document.activeElement !== el) el.focus();
+  });
+  const commit = (next, id) => {
+    setDraft(next);
+    onReorder?.([...next]);
+    const column = byId.get(id);
+    if (column) setAnnouncement(fill(labels.moved, { label: columnText(column), position: next.indexOf(id) + 1, count: next.length }));
+  };
+  const move = (id, delta, part) => {
+    const next = placeId(order, id, order.indexOf(id) + delta);
+    if (next === order) return;
+    refocus.current = { id, part };
+    commit(next, id);
+  };
+  const { dragging, start: startDrag } = useRowDrag(".uix-view-menu__col", {
+    over: (id, index) => {
+      const next = placeId(order, id, index);
+      if (next !== order) setDraft(next);
+    },
+    drop: (id) => {
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (start && !sameOrder(start, order)) commit(order, id);
+    }
+  });
+  const rowActions = (column, index) => [
+    { id: "up", label: labels.moveUp, disabled: index === 0, onSelect: () => move(column.id, -1, "actions") },
+    { id: "down", label: labels.moveDown, disabled: index === ordered.length - 1, onSelect: () => move(column.id, 1, "actions") },
+    ...column.required || column.disabled ? [] : [column.visible ? { id: "hide", label: labels.hide, onSelect: () => onColumnVisibilityChange?.(column.id, false) } : { id: "show", label: labels.show, onSelect: () => onColumnVisibilityChange?.(column.id, true) }]
+  ];
+  const showDensity = !!densityOptions?.length && !!onDensityChange;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-view-menu", className), "data-dragging": dragging ? "" : void 0, children: [
+    showDensity && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
       /* @__PURE__ */ jsx("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
-      /* @__PURE__ */ jsx(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
+      /* @__PURE__ */ jsx(Segmented, { value: density ?? "", onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
     ] }),
     (zebra || freeze) && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      displayLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: displayLabel }),
       zebra && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__row", children: [
         /* @__PURE__ */ jsx("span", { id: zebraLabelId, children: zebra.label }),
         /* @__PURE__ */ jsx(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
@@ -26,10 +214,73 @@ function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebr
         /* @__PURE__ */ jsx(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
       ] })
     ] }),
-    columns && columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
-      columnsLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: columnsLabel }),
-      /* @__PURE__ */ jsx("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ jsx(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
-    ] })
+    ordered.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      columnsLabel != null && /* @__PURE__ */ jsx("div", { id: columnsLabelId, className: "uix-view-menu__label", children: columnsLabel }),
+      /* @__PURE__ */ jsx("ul", { ref: listRef, className: "uix-view-menu__cols", "aria-labelledby": columnsLabel != null ? columnsLabelId : void 0, children: ordered.map((column, index) => {
+        const text = columnText(column);
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "uix-view-menu__col",
+            "data-column-id": column.id,
+            "data-visible": String(column.visible),
+            "data-required": column.required ? "true" : void 0,
+            "data-dragging": dragging === column.id || void 0,
+            children: [
+              onReorder && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-view-menu__grip",
+                  tabIndex: -1,
+                  "aria-label": fill(labels.reorder, { label: text }),
+                  onPointerDown: (event) => {
+                    if (event.button !== 0) return;
+                    event.preventDefault();
+                    event.currentTarget.focus({ preventScroll: true });
+                    dragStart.current = order;
+                    startDrag(event, column.id);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+                    event.preventDefault();
+                    move(column.id, event.key === "ArrowUp" ? -1 : 1, "grip");
+                  },
+                  children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
+                }
+              ),
+              column.required ? /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__col-toggle", title: labels.required, children: [
+                /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-box", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label })
+              ] }) : /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  className: "uix-view-menu__col-toggle",
+                  label: /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label }),
+                  checked: column.visible,
+                  disabled: column.disabled,
+                  onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked)
+                }
+              ),
+              onReorder && /* @__PURE__ */ jsx(
+                ColumnRowMenu,
+                {
+                  label: fill(labels.rowActions, { label: text }),
+                  actions: rowActions(column, index),
+                  triggerRef: (el) => {
+                    if (el) triggers.current.set(column.id, el);
+                    else triggers.current.delete(column.id);
+                  }
+                }
+              )
+            ]
+          },
+          column.id
+        );
+      }) })
+    ] }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__footer", children: footer }),
+    onReorder && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement })
   ] });
 }
 function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
@@ -45,6 +296,51 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
   ] });
 }
 const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function dropIndex(rows, dragged, clientY) {
+  let index = 0;
+  for (const row of rows) {
+    if (row === dragged) continue;
+    const box = row.getBoundingClientRect();
+    if (clientY > box.top + box.height / 2) index++;
+  }
+  return index;
+}
+function useRowDrag(rowSelector, handlers) {
+  const [dragging, setDragging] = useState(null);
+  const drag = useRef(null);
+  const latest = useRef(handlers);
+  latest.current = handlers;
+  useEffect(() => {
+    if (!dragging) return;
+    const move = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
+    };
+    const end = () => {
+      const current = drag.current;
+      drag.current = null;
+      setDragging(null);
+      if (current) latest.current.drop(current.id);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+  }, [dragging, rowSelector]);
+  const start = (event, id) => {
+    const row = event.currentTarget.closest("li");
+    if (!row?.parentElement) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { id, list: row.parentElement, row };
+    setDragging(id);
+  };
+  return { dragging, start };
+}
 function placeId(ids, id, index) {
   const from = ids.indexOf(id);
   const to = Math.max(0, Math.min(index, ids.length - 1));
@@ -57,8 +353,8 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
   const baseId = useId();
   const groups = sections ?? [{ id: void 0, items: items ?? [] }];
   const [draft, setDraft] = useState(null);
-  const [dragging, setDragging] = useState(null);
   const dragStart = useRef(null);
+  const dragGroup = useRef(void 0);
   const orderKey = JSON.stringify(groups.map((group) => [group.id, group.items.map((item) => item.id)]));
   useEffect(() => setDraft(null), [orderKey]);
   const orderOf = (group) => draft && draft.group === group.id ? draft.ids : group.items.map((item) => item.id);
@@ -69,29 +365,23 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
     setDraft({ group: group.id, ids: next });
     onReorder?.([...next], group.id);
   };
-  const dragOver = (event, group, id) => {
-    if (dragging !== id) return;
-    const rows = Array.from(event.currentTarget.closest("ul")?.querySelectorAll(":scope > .uix-saved-views__row") ?? []);
-    let index = rows.length - 1;
-    for (let i = 0; i < rows.length; i++) {
-      const box = rows[i].getBoundingClientRect();
-      if (event.clientY < box.top + box.height / 2) {
-        index = i;
-        break;
-      }
+  const { dragging, start: startDrag } = useRowDrag(".uix-saved-views__row", {
+    over: (id, index) => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      if (!group) return;
+      const current = orderOf(group);
+      const next = placeId(current, id, index);
+      if (next !== current) setDraft({ group: group.id, ids: next });
+    },
+    drop: () => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (!group) return;
+      const end = orderOf(group);
+      if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
     }
-    const current = orderOf(group);
-    const next = placeId(current, id, index);
-    if (next !== current) setDraft({ group: group.id, ids: next });
-  };
-  const drop = (group, id) => {
-    if (dragging !== id) return;
-    setDragging(null);
-    const start = dragStart.current;
-    dragStart.current = null;
-    const end = orderOf(group);
-    if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
-  };
+  });
   const visible = groups.filter((group) => group.items.length > 0);
   const renderRows = (group, groupIndex) => {
     const byId = new Map(group.items.map((item) => [item.id, item]));
@@ -111,13 +401,10 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
             onPointerDown: (event) => {
               if (event.button !== 0) return;
               event.preventDefault();
-              event.currentTarget.setPointerCapture?.(event.pointerId);
               dragStart.current = orderOf(group);
-              setDragging(item.id);
+              dragGroup.current = group.id;
+              startDrag(event, item.id);
             },
-            onPointerMove: (event) => dragOver(event, group, item.id),
-            onPointerUp: () => drop(group, item.id),
-            onPointerCancel: () => drop(group, item.id),
             onKeyDown: (event) => {
               if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
               event.preventDefault();

package/dist/emoji.cjs

@@ -665,7 +665,8 @@ var PATHS = {
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
   clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
-  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
+  more: "M5 12h.01M12 12h.01M19 12h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(