@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/ColumnHeaderMenu.js

@@ -0,0 +1,173 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import { ArrowUpAZ, ArrowDownZA, ArrowUp01, ArrowDown10, ArrowUpNarrowWide, ArrowDownWideNarrow, Filter, SlidersHorizontal, Pin, PinOff, EyeOff, ArrowLeftToLine, ArrowRightToLine } from "lucide-react";
+import { getSortDirectionLabels } from "../types/perspective.js";
+const ColumnHeaderMenu = ({
+  column,
+  colIndex,
+  anchorRect,
+  isFrozen,
+  onSortAsc,
+  onSortDesc,
+  onQuickFilter,
+  onFilterByField,
+  onFreezeToggle,
+  onHideField,
+  onMoveLeft,
+  onMoveRight,
+  onClose,
+  extraActions,
+  onExtraAction
+}) => {
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const style = {
+    position: "fixed",
+    top: anchorRect.bottom + 4,
+    left: anchorRect.left,
+    zIndex: 9999
+  };
+  if (menuRef.current) {
+    const menuRect = menuRef.current.getBoundingClientRect();
+    if (style.left + menuRect.width > window.innerWidth - 8) {
+      style.left = window.innerWidth - menuRect.width - 8;
+    }
+  }
+  const labels = getSortDirectionLabels(column.type);
+  const AscIcon = column.type === "numeric" || column.type === "date" ? ArrowUp01 : column.type === "boolean" ? ArrowUpNarrowWide : ArrowUpAZ;
+  const DescIcon = column.type === "numeric" || column.type === "date" ? ArrowDown10 : column.type === "boolean" ? ArrowDownWideNarrow : ArrowDownZA;
+  const v2cls = "hot-appearance-v2";
+  const menuContent = /* @__PURE__ */ jsxs("div", { ref: menuRef, className: `hot-col-menu ${v2cls}`.trim(), style, children: [
+    /* @__PURE__ */ jsxs("button", { className: "hot-col-menu-item", onClick: () => {
+      onSortAsc();
+      onClose();
+    }, children: [
+      /* @__PURE__ */ jsx(AscIcon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Sort ",
+        labels.asc
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("button", { className: "hot-col-menu-item", onClick: () => {
+      onSortDesc();
+      onClose();
+    }, children: [
+      /* @__PURE__ */ jsx(DescIcon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Sort ",
+        labels.desc
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "hot-col-menu-item",
+        onClick: () => {
+          if (onQuickFilter) {
+            onQuickFilter();
+            return;
+          }
+          onFilterByField();
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx("span", { children: "Filter by this field" })
+        ]
+      }
+    ),
+    onQuickFilter && /* @__PURE__ */ jsxs("button", { className: "hot-col-menu-item", onClick: () => {
+      onFilterByField();
+      onClose();
+    }, children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Advanced filter\u2026" })
+    ] }),
+    /* @__PURE__ */ jsxs("button", { className: "hot-col-menu-item", onClick: () => {
+      onFreezeToggle();
+      onClose();
+    }, children: [
+      isFrozen ? /* @__PURE__ */ jsx(PinOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Pin, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: isFrozen ? "Unfreeze column" : "Freeze column" })
+    ] }),
+    /* @__PURE__ */ jsxs("button", { className: "hot-col-menu-item", onClick: () => {
+      onHideField();
+      onClose();
+    }, children: [
+      /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Hide field" })
+    ] }),
+    (onMoveLeft || onMoveRight) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "hot-col-menu-divider" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "hot-col-menu-item",
+          disabled: !onMoveLeft,
+          onClick: () => {
+            onMoveLeft?.();
+            onClose();
+          },
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeftToLine, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { children: "Move left" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "hot-col-menu-item",
+          disabled: !onMoveRight,
+          onClick: () => {
+            onMoveRight?.();
+            onClose();
+          },
+          children: [
+            /* @__PURE__ */ jsx(ArrowRightToLine, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { children: "Move right" })
+          ]
+        }
+      )
+    ] }),
+    extraActions && extraActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "hot-col-menu-divider" }),
+      extraActions.map((action) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "hot-col-menu-item",
+          disabled: action.disabled,
+          onClick: () => {
+            onExtraAction?.(action.id);
+            onClose();
+          },
+          children: /* @__PURE__ */ jsx("span", { children: action.label })
+        },
+        action.id
+      ))
+    ] })
+  ] });
+  if (typeof document === "undefined") return menuContent;
+  return ReactDOM.createPortal(menuContent, document.body);
+};
+var ColumnHeaderMenu_default = ColumnHeaderMenu;
+export {
+  ColumnHeaderMenu_default as default
+};
+//# sourceMappingURL=ColumnHeaderMenu.js.map

package/dist/backend/dynamic-table/components/ColumnHeaderMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ColumnHeaderMenu.tsx"],
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ArrowUpAZ, ArrowDownZA, ArrowUp01, ArrowDown10, ArrowUpNarrowWide, ArrowDownWideNarrow, Filter, SlidersHorizontal, Pin, PinOff, EyeOff, ArrowLeftToLine, ArrowRightToLine } from 'lucide-react';\nimport { ColumnDef, ContextMenuAction } from '../types/index';\nimport { getSortDirectionLabels } from '../types/perspective';\n\ninterface ColumnHeaderMenuProps {\n  column: ColumnDef;\n  colIndex: number;\n  anchorRect: DOMRect;\n  isFrozen: boolean;\n  onSortAsc: () => void;\n  onSortDesc: () => void;\n  /**\n   * Opens the per-column quick filter (the funnel dropdown). When supplied it\n   * takes the \"Filter by this field\" slot, and the Configure View route moves\n   * down to \"Advanced filter\u2026\". Omitted for a column the quick filter cannot\n   * serve (a calculated column), which falls back to the old behaviour.\n   */\n  onQuickFilter?: () => void;\n  onFilterByField: () => void;\n  onFreezeToggle: () => void;\n  onHideField: () => void;\n  /**\n   * A16 \u2014 the keyboard/menu route to column reordering. Supplied only when the\n   * move is legal: `undefined` at either end of the column's pinned run, so the\n   * menu never offers a move the drag would refuse.\n   */\n  onMoveLeft?: () => void;\n  onMoveRight?: () => void;\n  onClose: () => void;\n  extraActions?: ContextMenuAction[];\n  onExtraAction?: (actionId: string) => void;\n}\n\nconst ColumnHeaderMenu: React.FC<ColumnHeaderMenuProps> = ({\n  column,\n  colIndex,\n  anchorRect,\n  isFrozen,\n  onSortAsc,\n  onSortDesc,\n  onQuickFilter,\n  onFilterByField,\n  onFreezeToggle,\n  onHideField,\n  onMoveLeft,\n  onMoveRight,\n  onClose,\n  extraActions,\n  onExtraAction,\n}) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  // Close on outside click\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        onClose();\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    };\n    // Capture phase: the grid's own mousedown handlers call stopPropagation,\n    // so a bubbling listener never sees outside clicks on the table. Capture\n    // fires before any stopPropagation, so the menu reliably closes.\n    document.addEventListener('mousedown', handleClickOutside, true);\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside, true);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [onClose]);\n\n  // Position below anchor, clamped to viewport\n  const style: React.CSSProperties = {\n    position: 'fixed',\n    top: anchorRect.bottom + 4,\n    left: anchorRect.left,\n    zIndex: 9999,\n  };\n\n  // Clamp to right edge\n  if (menuRef.current) {\n    const menuRect = menuRef.current.getBoundingClientRect();\n    if (style.left as number + menuRect.width > window.innerWidth - 8) {\n      style.left = window.innerWidth - menuRect.width - 8;\n    }\n  }\n\n  const labels = getSortDirectionLabels(column.type);\n  // Match the icon to the column type so the menu reads at a glance\n  // (calendar/number/text orderings all look distinct).\n  const AscIcon = column.type === 'numeric' || column.type === 'date'\n    ? ArrowUp01\n    : column.type === 'boolean'\n      ? ArrowUpNarrowWide\n      : ArrowUpAZ;\n  const DescIcon = column.type === 'numeric' || column.type === 'date'\n    ? ArrowDown10\n    : column.type === 'boolean'\n      ? ArrowDownWideNarrow\n      : ArrowDownZA;\n\n  const v2cls = 'hot-appearance-v2';\n  const menuContent = (\n    <div ref={menuRef} className={`hot-col-menu ${v2cls}`.trim()} style={style}>\n      <button className=\"hot-col-menu-item\" onClick={() => { onSortAsc(); onClose(); }}>\n        <AscIcon className=\"w-4 h-4\" />\n        <span>Sort {labels.asc}</span>\n      </button>\n      <button className=\"hot-col-menu-item\" onClick={() => { onSortDesc(); onClose(); }}>\n        <DescIcon className=\"w-4 h-4\" />\n        <span>Sort {labels.desc}</span>\n      </button>\n      <button\n        className=\"hot-col-menu-item\"\n        onClick={() => {\n          if (onQuickFilter) { onQuickFilter(); return; }\n          onFilterByField();\n          onClose();\n        }}\n      >\n        <Filter className=\"w-4 h-4\" />\n        <span>Filter by this field</span>\n      </button>\n      {onQuickFilter && (\n        <button className=\"hot-col-menu-item\" onClick={() => { onFilterByField(); onClose(); }}>\n          <SlidersHorizontal className=\"w-4 h-4\" />\n          <span>Advanced filter\u2026</span>\n        </button>\n      )}\n      <button className=\"hot-col-menu-item\" onClick={() => { onFreezeToggle(); onClose(); }}>\n        {isFrozen ? <PinOff className=\"w-4 h-4\" /> : <Pin className=\"w-4 h-4\" />}\n        <span>{isFrozen ? 'Unfreeze column' : 'Freeze column'}</span>\n      </button>\n      <button className=\"hot-col-menu-item\" onClick={() => { onHideField(); onClose(); }}>\n        <EyeOff className=\"w-4 h-4\" />\n        <span>Hide field</span>\n      </button>\n      {(onMoveLeft || onMoveRight) && (\n        <>\n          <div className=\"hot-col-menu-divider\" />\n          <button\n            className=\"hot-col-menu-item\"\n            disabled={!onMoveLeft}\n            onClick={() => { onMoveLeft?.(); onClose(); }}\n          >\n            <ArrowLeftToLine className=\"w-4 h-4\" />\n            <span>Move left</span>\n          </button>\n          <button\n            className=\"hot-col-menu-item\"\n            disabled={!onMoveRight}\n            onClick={() => { onMoveRight?.(); onClose(); }}\n          >\n            <ArrowRightToLine className=\"w-4 h-4\" />\n            <span>Move right</span>\n          </button>\n        </>\n      )}\n\n      {extraActions && extraActions.length > 0 && (\n        <>\n          <div className=\"hot-col-menu-divider\" />\n          {extraActions.map(action => (\n            <button\n              key={action.id}\n              className=\"hot-col-menu-item\"\n              disabled={action.disabled}\n              onClick={() => {\n                onExtraAction?.(action.id);\n                onClose();\n              }}\n            >\n              <span>{action.label}</span>\n            </button>\n          ))}\n        </>\n      )}\n    </div>\n  );\n\n  if (typeof document === 'undefined') return menuContent;\n  return ReactDOM.createPortal(menuContent, document.body);\n};\n\nexport default ColumnHeaderMenu;\n"],
+  "mappings": "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",
+  "names": []
+}