@freighttech/ui 0.13.18

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

@@ -0,0 +1,592 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import {
+  Sheet,
+  SheetContent
+} from "@freighttech/ui/primitives/sheet";
+import { ChevronDown, ChevronUp, Eye, Filter, ArrowUpDown, Layers, Link2, CalendarClock, ListTree, Palette, Sigma, X } from "lucide-react";
+import {
+  generatePerspectiveId,
+  BASE_VIEW_PERSPECTIVE_NAME,
+  PERSPECTIVE_NAME_MAX_LENGTH
+} from "../types/perspective.js";
+import ConfigureViewFields from "./ConfigureViewFields.js";
+import ConfigureViewFilters from "./ConfigureViewFilters.js";
+import ConfigureViewSorting from "./ConfigureViewSorting.js";
+import ConfigureViewGrouping from "./ConfigureViewGrouping.js";
+import ConfigureViewLinkedColumns from "./ConfigureViewLinkedColumns.js";
+import ConfigureViewRollups from "./ConfigureViewRollups.js";
+import ConfigureViewFormatting from "./ConfigureViewFormatting.js";
+import ConfigureViewFormulas from "./ConfigureViewFormulas.js";
+import SelectMenu from "./SelectMenu.js";
+import { isFormulaColumnKey } from "../utils/formulaColumns.js";
+import { Button, IconButton, Input } from "../../../primitives-v2/index.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const COLOR_PALETTE = [
+  { color: "blue" },
+  { color: "green" },
+  { color: "teal" },
+  { color: "purple" },
+  { color: "pink" },
+  { color: "red" },
+  { color: "orange" },
+  { color: "yellow" }
+];
+const ConfigureViewPanel = ({
+  isOpen,
+  onOpenChange,
+  columns,
+  visibleColumns,
+  hiddenColumns,
+  filters,
+  sortRules,
+  onColumnVisibilityChange,
+  onFiltersChange,
+  onSortRulesChange,
+  groupRules = [],
+  aggregations = [],
+  lookupColumns = [],
+  rollupColumns = [],
+  formulas = [],
+  conditionalFormats = [],
+  sampleRow,
+  dateFormat,
+  dateFormatOptions = [],
+  onGroupRulesChange,
+  onAggregationsChange,
+  onLookupColumnsChange,
+  onRollupColumnsChange,
+  onFormulasChange,
+  onConditionalFormatsChange,
+  onDateFormatChange,
+  viewMode,
+  onSavePerspective,
+  activePerspectiveId,
+  editingPerspective,
+  baseViewPerspective,
+  isBaseViewMode = false,
+  loadFilterSuggestions,
+  loadLookupSources,
+  loadRollupSources,
+  initialExpandedSection
+}) => {
+  const t = useT();
+  const [openSections, setOpenSections] = useState(/* @__PURE__ */ new Set());
+  const [saveName, setSaveName] = useState("");
+  const [saveColor, setSaveColor] = useState(null);
+  useEffect(() => {
+    if (isOpen && initialExpandedSection) {
+      setOpenSections(/* @__PURE__ */ new Set([initialExpandedSection]));
+    }
+  }, [isOpen, initialExpandedSection]);
+  useEffect(() => {
+    if (isOpen) {
+      setSaveName(editingPerspective?.name ?? "");
+      setSaveColor(editingPerspective?.color ?? null);
+    }
+  }, [isOpen, editingPerspective]);
+  const snapshotRef = useRef(null);
+  const wasOpenRef = useRef(false);
+  const savingRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      snapshotRef.current = {
+        visibleColumns,
+        hiddenColumns,
+        filters,
+        sortRules,
+        groupRules,
+        aggregations,
+        lookupColumns,
+        rollupColumns,
+        formulas,
+        conditionalFormats,
+        dateFormat
+      };
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  const revertToSnapshot = useCallback(() => {
+    const snap = snapshotRef.current;
+    if (!snap) return;
+    const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+    if (!same(snap.visibleColumns, visibleColumns) || !same(snap.hiddenColumns, hiddenColumns)) {
+      onColumnVisibilityChange(snap.visibleColumns, snap.hiddenColumns);
+    }
+    if (!same(snap.filters, filters)) onFiltersChange(snap.filters);
+    if (!same(snap.sortRules, sortRules)) onSortRulesChange(snap.sortRules);
+    if (onGroupRulesChange && !same(snap.groupRules, groupRules)) onGroupRulesChange(snap.groupRules);
+    if (onAggregationsChange && !same(snap.aggregations, aggregations)) {
+      onAggregationsChange(snap.aggregations);
+    }
+    if (onLookupColumnsChange && !same(snap.lookupColumns, lookupColumns)) {
+      onLookupColumnsChange(snap.lookupColumns);
+    }
+    if (onRollupColumnsChange && !same(snap.rollupColumns, rollupColumns)) {
+      onRollupColumnsChange(snap.rollupColumns);
+    }
+    if (onFormulasChange && !same(snap.formulas, formulas)) onFormulasChange(snap.formulas);
+    if (onConditionalFormatsChange && !same(snap.conditionalFormats, conditionalFormats)) {
+      onConditionalFormatsChange(snap.conditionalFormats);
+    }
+    if (onDateFormatChange && snap.dateFormat !== dateFormat) onDateFormatChange(snap.dateFormat);
+  }, [
+    visibleColumns,
+    hiddenColumns,
+    filters,
+    sortRules,
+    groupRules,
+    aggregations,
+    lookupColumns,
+    rollupColumns,
+    formulas,
+    conditionalFormats,
+    dateFormat,
+    onColumnVisibilityChange,
+    onFiltersChange,
+    onSortRulesChange,
+    onGroupRulesChange,
+    onAggregationsChange,
+    onLookupColumnsChange,
+    onRollupColumnsChange,
+    onFormulasChange,
+    onConditionalFormatsChange,
+    onDateFormatChange
+  ]);
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (!open) {
+        if (savingRef.current) {
+          savingRef.current = false;
+        } else {
+          revertToSnapshot();
+        }
+        snapshotRef.current = null;
+      }
+      onOpenChange(open);
+    },
+    [onOpenChange, revertToSnapshot]
+  );
+  const toggleSection = (section) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+  const filterableColumns = useMemo(() => {
+    const visible = new Set(visibleColumns);
+    const referenced = new Set(filters.map((f) => f.field));
+    return columns.filter((c) => visible.has(c.data) || referenced.has(c.data));
+  }, [columns, visibleColumns, filters]);
+  const hiddenCount = hiddenColumns.length;
+  const visibleCount = visibleColumns.length;
+  const filterCount = filters.length;
+  const sortCount = sortRules.length;
+  const groupCount = groupRules.length;
+  const linkedCount = new Set(lookupColumns.map((r) => r.source)).size;
+  const rollupCount = rollupColumns.length;
+  const formulaCount = formulas.length;
+  const formattingCount = conditionalFormats.length;
+  const formulaSourceColumns = useMemo(
+    () => columns.filter((c) => !isFormulaColumnKey(c.data)),
+    [columns]
+  );
+  const activeDateFormatLabel = dateFormat ? dateFormatOptions.find((o) => o.value === dateFormat)?.label : void 0;
+  const rulesLabel = (count) => String(count);
+  const onBaseView = isBaseViewMode && !editingPerspective && (!activePerspectiveId || activePerspectiveId === baseViewPerspective?.id);
+  const savesBaseView = onBaseView && !saveName.trim();
+  const canSave = savesBaseView || !!saveName.trim();
+  const handleSave = () => {
+    if (!canSave) return;
+    const perspective = {
+      // Preserve the id of the row being edited. Minting a new one every time
+      // meant the host could only match the save back to a row BY NAME — so
+      // renaming a view in this drawer cloned it instead of renaming it.
+      id: savesBaseView ? baseViewPerspective?.id ?? generatePerspectiveId() : editingPerspective?.id ?? generatePerspectiveId(),
+      name: savesBaseView ? BASE_VIEW_PERSPECTIVE_NAME : saveName.trim(),
+      color: savesBaseView ? void 0 : saveColor || void 0,
+      columns: {
+        visible: visibleColumns,
+        hidden: hiddenColumns
+      },
+      filters,
+      sorting: sortRules,
+      grouping: groupRules,
+      aggregations,
+      lookupColumns,
+      rollupColumns,
+      formulas,
+      conditionalFormats,
+      dateFormat,
+      viewMode,
+      // Carry the origin forward: a view copied from a shared template keeps
+      // knowing which template and version it came from across every later edit.
+      origin: savesBaseView ? void 0 : editingPerspective?.origin,
+      publication: savesBaseView ? void 0 : editingPerspective?.publication,
+      ...savesBaseView ? { isBaseView: true } : {}
+    };
+    savingRef.current = true;
+    onSavePerspective(perspective);
+    setSaveName("");
+    setSaveColor(null);
+    handleOpenChange(false);
+  };
+  const sectionIcon = (section) => {
+    switch (section) {
+      case "fields":
+        return /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" });
+      case "filters":
+        return /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" });
+      case "sorting":
+        return /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-4 h-4" });
+      case "grouping":
+        return /* @__PURE__ */ jsx(Layers, { className: "w-4 h-4" });
+      case "linked":
+        return /* @__PURE__ */ jsx(Link2, { className: "w-4 h-4" });
+      case "rollups":
+        return /* @__PURE__ */ jsx(ListTree, { className: "w-4 h-4" });
+      case "formulas":
+        return /* @__PURE__ */ jsx(Sigma, { className: "w-4 h-4" });
+      case "formatting":
+        return /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" });
+      case "dateFormat":
+        return /* @__PURE__ */ jsx(CalendarClock, { className: "w-4 h-4" });
+      default:
+        return null;
+    }
+  };
+  const v2cls = "hot-appearance-v2";
+  return /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
+    SheetContent,
+    {
+      side: "right",
+      ariaTitle: t("dynamicTable.configureView.title", "Configure View"),
+      hideCloseButton: true,
+      className: `hot-config-panel ${v2cls}`.trim(),
+      overlayClassName: "hot-config-overlay !backdrop-blur-none",
+      onPointerDownOutside: (e) => {
+        const target = e.target;
+        if (target.closest(".hot-container")) {
+          e.preventDefault();
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-inner", children: [
+        /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-header-row", children: [
+            /* @__PURE__ */ jsx("h3", { className: "hot-config-panel-title", children: t("dynamicTable.configureView.title", "Configure View") }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                "aria-label": "Close",
+                icon: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }),
+                onClick: () => handleOpenChange(false)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "hot-config-panel-subtitle", children: t("dynamicTable.configureView.subtitle", "Customize the fields, filters and sorting of this view.") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("fields") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("fields"),
+                children: [
+                  sectionIcon("fields"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.hideFields", "Hide fields") }),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: t("dynamicTable.configureView.fieldsVisible", "{visible} of {total} visible", {
+                    visible: visibleCount,
+                    total: visibleCount + hiddenCount
+                  }) }),
+                  openSections.has("fields") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("fields") && /* @__PURE__ */ jsx(
+              ConfigureViewFields,
+              {
+                columns,
+                visibleColumns,
+                hiddenColumns,
+                onColumnVisibilityChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("filters") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("filters"),
+                children: [
+                  sectionIcon("filters"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.filter", "Filter") }),
+                  filterCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: rulesLabel(filterCount) }),
+                  openSections.has("filters") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("filters") && /* @__PURE__ */ jsx(
+              ConfigureViewFilters,
+              {
+                columns: filterableColumns,
+                filters,
+                onFiltersChange,
+                loadFilterSuggestions
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("sorting") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("sorting"),
+                children: [
+                  sectionIcon("sorting"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.sort", "Sort") }),
+                  sortCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: rulesLabel(sortCount) }),
+                  openSections.has("sorting") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("sorting") && /* @__PURE__ */ jsx(
+              ConfigureViewSorting,
+              {
+                columns,
+                sortRules,
+                onSortRulesChange
+              }
+            )
+          ] }),
+          loadLookupSources && onLookupColumnsChange && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("linked") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("linked"),
+                children: [
+                  sectionIcon("linked"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.linkedSources", "Linked sources") }),
+                  linkedCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: linkedCount }),
+                  openSections.has("linked") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("linked") && /* @__PURE__ */ jsx(
+              ConfigureViewLinkedColumns,
+              {
+                lookupColumns,
+                onLookupColumnsChange,
+                loadLookupSources,
+                visibleColumns,
+                hiddenColumns,
+                onColumnVisibilityChange
+              }
+            )
+          ] }),
+          loadRollupSources && onRollupColumnsChange && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("rollups") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("rollups"),
+                children: [
+                  sectionIcon("rollups"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.rollupColumns", "Summarised columns") }),
+                  rollupCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: rollupCount }),
+                  openSections.has("rollups") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("rollups") && /* @__PURE__ */ jsx(
+              ConfigureViewRollups,
+              {
+                rollupColumns,
+                onRollupColumnsChange,
+                loadRollupSources,
+                visibleColumns,
+                hiddenColumns,
+                onColumnVisibilityChange
+              }
+            )
+          ] }),
+          onFormulasChange && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("formulas") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("formulas"),
+                children: [
+                  sectionIcon("formulas"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.formulas", "Calculated columns") }),
+                  formulaCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: formulaCount }),
+                  openSections.has("formulas") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("formulas") && /* @__PURE__ */ jsx(
+              ConfigureViewFormulas,
+              {
+                formulas,
+                onFormulasChange,
+                columns: formulaSourceColumns,
+                visibleColumns,
+                hiddenColumns,
+                onColumnVisibilityChange,
+                sampleRow
+              }
+            )
+          ] }),
+          onConditionalFormatsChange && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("formatting") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("formatting"),
+                children: [
+                  sectionIcon("formatting"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.conditionalFormat.title", "Highlighting") }),
+                  formattingCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: rulesLabel(formattingCount) }),
+                  openSections.has("formatting") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("formatting") && /* @__PURE__ */ jsx(
+              ConfigureViewFormatting,
+              {
+                columns: filterableColumns,
+                rules: conditionalFormats,
+                onRulesChange: onConditionalFormatsChange
+              }
+            )
+          ] }),
+          onGroupRulesChange && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("grouping") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("grouping"),
+                children: [
+                  sectionIcon("grouping"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.group", "Group") }),
+                  groupCount > 0 && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: rulesLabel(groupCount) }),
+                  openSections.has("grouping") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("grouping") && /* @__PURE__ */ jsx(
+              ConfigureViewGrouping,
+              {
+                columns,
+                groupRules,
+                onGroupRulesChange,
+                aggregations,
+                onAggregationsChange
+              }
+            )
+          ] }),
+          onDateFormatChange && dateFormatOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: `hot-config-section ${openSections.has("dateFormat") ? "is-open" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "hot-config-section-header",
+                onClick: () => toggleSection("dateFormat"),
+                children: [
+                  sectionIcon("dateFormat"),
+                  /* @__PURE__ */ jsx("span", { className: "hot-config-section-title", children: t("dynamicTable.configureView.dateFormat", "Date format") }),
+                  activeDateFormatLabel && /* @__PURE__ */ jsx("span", { className: "hot-config-section-badge", children: activeDateFormatLabel }),
+                  openSections.has("dateFormat") ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 hot-config-section-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-section-chevron" })
+                ]
+              }
+            ),
+            openSections.has("dateFormat") && /* @__PURE__ */ jsx("div", { className: "hot-config-section-body", children: /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                className: "hot-config-filter-select w-full",
+                value: dateFormat ?? "",
+                onChange: (next) => onDateFormatChange(next || void 0),
+                options: dateFormatOptions,
+                emptyOptionLabel: t("dynamicTable.configureView.dateFormatDefault", "Default"),
+                ariaLabel: t("dynamicTable.configureView.dateFormat", "Date format")
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-save", children: [
+          /* @__PURE__ */ jsx("label", { className: "hot-config-save-label", children: t("dynamicTable.configureView.viewName", "View name") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              inputSize: "md",
+              value: saveName,
+              onChange: (e) => setSaveName(e.target.value),
+              maxLength: PERSPECTIVE_NAME_MAX_LENGTH,
+              placeholder: t("dynamicTable.configureView.viewNamePlaceholder", "e.g. Active contractors"),
+              className: "w-full",
+              onKeyDown: (e) => {
+                if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && canSave) {
+                  handleSave();
+                }
+              }
+            }
+          ),
+          saveName.length >= PERSPECTIVE_NAME_MAX_LENGTH && /* @__PURE__ */ jsx("p", { className: "hot-config-save-hint hot-config-save-hint-limit", role: "status", children: t(
+            "dynamicTable.configureView.viewNameTooLong",
+            "A view name can be at most {max} characters.",
+            { max: String(PERSPECTIVE_NAME_MAX_LENGTH) }
+          ) }),
+          onBaseView && /* @__PURE__ */ jsx("p", { className: "hot-config-save-hint", children: t(
+            "dynamicTable.configureView.baseViewHint",
+            "Leave the name empty to keep these settings on your Default view. They are yours alone \u2014 nobody else sees the change."
+          ) }),
+          !savesBaseView && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("label", { className: "hot-config-save-label", children: t("dynamicTable.configureView.color", "Color") }),
+            /* @__PURE__ */ jsx("div", { className: "hot-config-save-colors", children: COLOR_PALETTE.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setSaveColor(item.color),
+                className: `hot-config-save-color-btn hot-config-color-${item.color} ${saveColor === item.color ? "selected" : ""}`,
+                title: item.color
+              },
+              item.color
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hot-config-panel-footer", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "flex-1",
+              onClick: () => handleOpenChange(false),
+              children: t("dynamicTable.configureView.cancel", "Cancel")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              className: "flex-1",
+              disabled: !canSave,
+              onClick: handleSave,
+              children: savesBaseView ? t("dynamicTable.configureView.saveBaseView", "Save Default view") : editingPerspective ? t("dynamicTable.configureView.saveView", "Save view") : t("dynamicTable.configureView.saveAsNewView", "Save as new view")
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+};
+var ConfigureViewPanel_default = ConfigureViewPanel;
+export {
+  ConfigureViewPanel_default as default
+};
+//# sourceMappingURL=ConfigureViewPanel.js.map