@ynput/ayon-frontend-shared 0.2.2 → 0.2.4

package/dist/shared/src/components/ProjectTableSettings/ColumnsSettings.es.js

@@ -0,0 +1,353 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState, useRef, useEffect, useMemo } from "react";
+import styled from "styled-components";
+import { useColumnSettingsContext } from "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
+import ColumnItem from "./ColumnItem.es.js";
+import SortableColumnItem from "./SortableColumnItem.es.js";
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { toast } from "react-toastify";
+const ColumnsSettings = ({ columns, highlighted }) => {
+  var _a;
+  const {
+    columnVisibility,
+    updateColumnVisibility,
+    columnPinning,
+    updateColumnPinning,
+    columnOrder,
+    setColumnsConfig,
+    columnSizing
+  } = useColumnSettingsContext();
+  const [activeId, setActiveId] = useState(null);
+  const [isHiddenOverVisible, setIsHiddenOverVisible] = useState(false);
+  const [isDraggingOverPinned, setIsDraggingOverPinned] = useState(false);
+  const [isDraggingFromPinned, setIsDraggingFromPinned] = useState(false);
+  const [isHoveringVisibleSection, setIsHoveringVisibleSection] = useState(false);
+  const [isDraggingOverHidden, setIsDraggingOverHidden] = useState(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (menuRef.current && highlighted) {
+      const highlightedElement = menuRef.current.querySelector(`#column-settings-${highlighted}`);
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+  }, [highlighted]);
+  const { visibleColumns, hiddenColumns, pinnedColumns } = useMemo(() => {
+    const visible = columns.filter((col) => columnVisibility[col.value] !== false);
+    const hidden = columns.filter((col) => columnVisibility[col.value] === false);
+    const pinned = visible.filter((col) => {
+      var _a2;
+      return (_a2 = columnPinning.left) == null ? void 0 : _a2.includes(col.value);
+    });
+    const unpinnedVisible = visible.filter((col) => {
+      var _a2;
+      return !((_a2 = columnPinning.left) == null ? void 0 : _a2.includes(col.value));
+    });
+    return {
+      visibleColumns: unpinnedVisible,
+      hiddenColumns: hidden,
+      pinnedColumns: pinned
+    };
+  }, [columns, columnVisibility, columnPinning]);
+  const sortedVisibleColumns = useMemo(() => {
+    const visibleCopy = [...visibleColumns];
+    if (columnOrder.length > 0) {
+      visibleCopy.sort((a, b) => {
+        const indexA = columnOrder.indexOf(a.value);
+        const indexB = columnOrder.indexOf(b.value);
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+      });
+    }
+    return visibleCopy;
+  }, [visibleColumns, columnOrder]);
+  const sortedPinnedColumns = useMemo(() => {
+    const pinnedCopy = [...pinnedColumns];
+    if (columnOrder.length > 0) {
+      pinnedCopy.sort((a, b) => {
+        const indexA = columnOrder.indexOf(a.value);
+        const indexB = columnOrder.indexOf(b.value);
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+      });
+    }
+    return pinnedCopy;
+  }, [pinnedColumns, columnOrder]);
+  const sortedVisibleColumnsIds = useMemo(
+    () => sortedVisibleColumns.map((col) => col.value),
+    [sortedVisibleColumns]
+  );
+  const sortedPinnedColumnsIds = useMemo(
+    () => sortedPinnedColumns.map((col) => col.value),
+    [sortedPinnedColumns]
+  );
+  const toggleVisibility = (columnId) => {
+    const newState = { ...columnVisibility };
+    if (newState[columnId] !== false) {
+      newState[columnId] = false;
+    } else {
+      newState[columnId] = true;
+    }
+    updateColumnVisibility(newState);
+  };
+  const togglePinning = (columnId) => {
+    var _a2;
+    const newState = { ...columnPinning };
+    const newVisibility = { ...columnVisibility };
+    if ((_a2 = newState.left) == null ? void 0 : _a2.includes(columnId)) {
+      newState.left = newState.left.filter((id) => id !== columnId);
+    } else {
+      newState.left = [...newState.left || [], columnId];
+      if (newVisibility[columnId] === false) {
+        newVisibility[columnId] = true;
+        updateColumnVisibility(newVisibility);
+      }
+    }
+    updateColumnPinning(newState);
+  };
+  const handleDragStart = (event) => {
+    var _a2;
+    const id = event.active.id;
+    setActiveId(id);
+    setIsDraggingFromPinned(((_a2 = columnPinning.left) == null ? void 0 : _a2.includes(id)) || false);
+  };
+  const handleDragOver = (event) => {
+    var _a2;
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const isActiveHidden = columnVisibility[active.id] === false;
+      const isOverVisible = columnVisibility[over.id] !== false;
+      const isOverPinned = ((_a2 = columnPinning.left) == null ? void 0 : _a2.includes(over.id)) || false;
+      const isOverHidden = columnVisibility[over.id] === false;
+      setIsHiddenOverVisible(isActiveHidden && isOverVisible && !isOverPinned);
+      setIsDraggingOverPinned(isOverVisible && isOverPinned);
+      setIsDraggingOverHidden(isOverHidden);
+      setIsHoveringVisibleSection(isOverVisible && !isOverPinned);
+    } else {
+      setIsHoveringVisibleSection(false);
+      setIsDraggingOverHidden(false);
+    }
+  };
+  const handleDragEnd = (event) => {
+    var _a2, _b;
+    setIsHiddenOverVisible(false);
+    setIsDraggingOverPinned(false);
+    setIsDraggingFromPinned(false);
+    setIsHoveringVisibleSection(false);
+    setIsDraggingOverHidden(false);
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const activeColumn2 = [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find(
+        (col) => col.value === active.id
+      );
+      const overColumn = [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find(
+        (col) => col.value === over.id
+      );
+      if (activeColumn2 && overColumn) {
+        const activeId2 = active.id;
+        const overId = over.id;
+        const isActiveVisible = columnVisibility[activeId2] !== false;
+        const isOverVisible = columnVisibility[overId] !== false;
+        const isActivePinned = ((_a2 = columnPinning.left) == null ? void 0 : _a2.includes(activeId2)) || false;
+        const isOverPinned = ((_b = columnPinning.left) == null ? void 0 : _b.includes(overId)) || false;
+        const isOverHidden = columnVisibility[overId] === false;
+        const newConfig = {
+          columnVisibility: { ...columnVisibility },
+          columnOrder: [...columnOrder],
+          columnPinning: { ...columnPinning },
+          columnSizing: { ...columnSizing }
+        };
+        if (isActiveVisible && isOverVisible) {
+          let newPinningLeft = [...newConfig.columnPinning.left || []];
+          if (isActivePinned !== isOverPinned) {
+            if (isActivePinned && !isOverPinned) {
+              newPinningLeft = newPinningLeft.filter((id) => id !== activeId2);
+            } else if (!isActivePinned && isOverPinned) {
+              newPinningLeft = [...newPinningLeft, activeId2];
+            }
+          }
+          const allVisibleIds = [...sortedPinnedColumnsIds, ...sortedVisibleColumnsIds];
+          const oldIndex = allVisibleIds.indexOf(activeId2);
+          const newIndex = allVisibleIds.indexOf(overId);
+          if (oldIndex === -1 || newIndex === -1) {
+            console.error("Invalid column order state");
+            toast.error("Invalid column order state");
+            return;
+          }
+          const newOrder = arrayMove(allVisibleIds, oldIndex, newIndex);
+          const newPinningLeftOrdered = newOrder.filter((id) => newPinningLeft.includes(id));
+          newConfig.columnOrder = newOrder;
+          newConfig.columnPinning = {
+            ...newConfig.columnPinning,
+            left: newPinningLeftOrdered
+          };
+          setColumnsConfig(newConfig);
+        } else if (!isActiveVisible && isOverVisible) {
+          newConfig.columnVisibility[activeId2] = true;
+          if (isOverPinned) {
+            const newPinningLeft = [...newConfig.columnPinning.left || [], activeId2];
+            newConfig.columnPinning.left = newPinningLeft;
+          }
+          const allVisibleIds = [...sortedPinnedColumnsIds, ...sortedVisibleColumnsIds];
+          if (!allVisibleIds.includes(activeId2)) {
+            const overIndex = allVisibleIds.indexOf(overId);
+            allVisibleIds.splice(overIndex, 0, activeId2);
+          }
+          newConfig.columnOrder = allVisibleIds;
+          setColumnsConfig(newConfig);
+        } else if (isActiveVisible && isOverHidden) {
+          newConfig.columnVisibility[activeId2] = false;
+          if (isActivePinned) {
+            const newPinningLeft = (newConfig.columnPinning.left || []).filter(
+              (id) => id !== activeId2
+            );
+            newConfig.columnPinning.left = newPinningLeft;
+          }
+          setColumnsConfig(newConfig);
+        }
+      }
+    }
+    setActiveId(null);
+  };
+  const activeColumn = activeId ? [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find((col) => col.value === activeId) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ColumnsContainer, { children: [
+        pinnedColumns.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Section, { className: isDraggingOverPinned && !isDraggingFromPinned ? "drop-target" : "", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle, { children: "Pinned Columns" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SortableContext,
+            {
+              items: sortedPinnedColumns.map((col) => col.value),
+              strategy: verticalListSortingStrategy,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, { children: sortedPinnedColumns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                SortableColumnItem,
+                {
+                  id: column.value,
+                  column,
+                  isPinned: true,
+                  isHidden: false,
+                  isHighlighted: highlighted === column.value,
+                  onTogglePinning: togglePinning,
+                  onToggleVisibility: toggleVisibility
+                },
+                column.value
+              )) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Section,
+          {
+            className: isHiddenOverVisible || isDraggingFromPinned && isHoveringVisibleSection ? "drop-target" : "",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle, { children: "Visible Columns" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                SortableContext,
+                {
+                  items: sortedVisibleColumns.map((col) => col.value),
+                  strategy: verticalListSortingStrategy,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, { children: sortedVisibleColumns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SortableColumnItem,
+                    {
+                      id: column.value,
+                      column,
+                      isPinned: false,
+                      isHidden: false,
+                      isHighlighted: highlighted === column.value,
+                      onTogglePinning: togglePinning,
+                      onToggleVisibility: toggleVisibility
+                    },
+                    column.value
+                  )) })
+                }
+              )
+            ]
+          }
+        ),
+        hiddenColumns.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Section, { className: isDraggingOverHidden ? "drop-target" : "", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle, { children: "Hidden Columns" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, { ref: menuRef, children: hiddenColumns.map((column) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SortableColumnItem,
+              {
+                id: column.value,
+                column,
+                isPinned: ((_a2 = columnPinning.left) == null ? void 0 : _a2.includes(column.value)) || false,
+                isHidden: true,
+                isHighlighted: highlighted === column.value,
+                onTogglePinning: togglePinning,
+                onToggleVisibility: toggleVisibility
+              },
+              column.value
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DragOverlay, { children: activeColumn && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ColumnItem,
+          {
+            column: activeColumn,
+            isPinned: ((_a = columnPinning.left) == null ? void 0 : _a.includes(activeColumn.value)) || false,
+            isHidden: columnVisibility[activeColumn.value] === false,
+            isHighlighted: highlighted === activeColumn.value,
+            dragOverlay: true
+          }
+        ) })
+      ] })
+    }
+  );
+};
+const ColumnsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+`;
+const Section = styled.section`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: background-color 0.2s ease;
+  border-radius: 4px;
+
+  &.drop-target {
+    background-color: var(--md-sys-color-surface-container);
+    box-shadow: 0 0 0 1px var(--md-sys-color-outline);
+  }
+`;
+const SectionTitle = styled.div`
+  font-weight: 500;
+  color: var(--md-sys-color-outline);
+  padding: 4px 0;
+`;
+const Menu = styled.ul`
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+`;
+export {
+  ColumnsSettings as default
+};
+//# sourceMappingURL=ColumnsSettings.es.js.map

package/dist/shared/src/components/ProjectTableSettings/ColumnsSettings.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsSettings.es.js","sources":["../../../../../src/components/ProjectTableSettings/ColumnsSettings.tsx"],"sourcesContent":["// React and Styling imports\nimport { FC, useEffect, useMemo, useRef, useState } from 'react'\nimport styled from 'styled-components'\n\n// Context and Components imports\nimport {\n  ColumnsConfig,\n  useColumnSettingsContext,\n} from '@shared/containers/ProjectTreeTable/context/ColumnSettingsContext'\nimport ColumnItem from './ColumnItem'\nimport SortableColumnItem from './SortableColumnItem'\n\n// DND (Drag and Drop) imports\nimport {\n  DndContext,\n  closestCenter,\n  DragEndEvent,\n  DragStartEvent,\n  useSensor,\n  useSensors,\n  PointerSensor,\n  DragOverlay,\n  DragOverEvent,\n} from '@dnd-kit/core'\nimport { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'\n\n// Notification imports\nimport { toast } from 'react-toastify'\nimport { SettingsPanelItem } from '../SettingsPanel/SettingsPanelItemTemplate'\nimport { SettingHighlightedId } from '@shared/context'\n\ninterface ColumnsSettingsProps {\n  columns: SettingsPanelItem[]\n  highlighted?: SettingHighlightedId\n}\n\nconst ColumnsSettings: FC<ColumnsSettingsProps> = ({ columns, highlighted }) => {\n  const {\n    columnVisibility,\n    updateColumnVisibility,\n    columnPinning,\n    updateColumnPinning,\n    columnOrder,\n    setColumnsConfig,\n    columnSizing,\n  } = useColumnSettingsContext()\n\n  // State for the currently dragged column\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [isHiddenOverVisible, setIsHiddenOverVisible] = useState(false)\n  const [isDraggingOverPinned, setIsDraggingOverPinned] = useState(false)\n  const [isDraggingFromPinned, setIsDraggingFromPinned] = useState(false)\n  // Add a new state to track if we're hovering over the visible section\n  const [isHoveringVisibleSection, setIsHoveringVisibleSection] = useState(false)\n  // Add state to track if dragging over the hidden section\n  const [isDraggingOverHidden, setIsDraggingOverHidden] = useState(false)\n\n  // Setup sensors for dnd-kit\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n  )\n\n  const menuRef = useRef<HTMLUListElement | null>(null)\n\n  // if highlighted is set, scroll to the highlighted column\n  useEffect(() => {\n    if (menuRef.current && highlighted) {\n      const highlightedElement = menuRef.current.querySelector(`#column-settings-${highlighted}`)\n      if (highlightedElement) {\n        highlightedElement.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n        })\n      }\n    }\n  }, [highlighted])\n\n  // Separate columns into visible, hidden, and pinned\n  const { visibleColumns, hiddenColumns, pinnedColumns } = useMemo(() => {\n    // First filter columns by visibility\n    const visible = columns.filter((col) => columnVisibility[col.value] !== false)\n    const hidden = columns.filter((col) => columnVisibility[col.value] === false)\n\n    // Then separate out pinned columns from visible\n    const pinned = visible.filter((col) => columnPinning.left?.includes(col.value))\n    const unpinnedVisible = visible.filter((col) => !columnPinning.left?.includes(col.value))\n\n    return {\n      visibleColumns: unpinnedVisible,\n      hiddenColumns: hidden,\n      pinnedColumns: pinned,\n    }\n  }, [columns, columnVisibility, columnPinning])\n\n  // Sort columns based on columnOrder\n  const sortedVisibleColumns = useMemo(() => {\n    // Create a copy of visible columns\n    const visibleCopy = [...visibleColumns]\n\n    // If we have a column order, use it to sort\n    if (columnOrder.length > 0) {\n      visibleCopy.sort((a, b) => {\n        const indexA = columnOrder.indexOf(a.value)\n        const indexB = columnOrder.indexOf(b.value)\n\n        // If column is not in order array, place at end\n        if (indexA === -1) return 1\n        if (indexB === -1) return -1\n\n        return indexA - indexB\n      })\n    }\n\n    return visibleCopy\n  }, [visibleColumns, columnOrder])\n\n  // Sort pinned columns based on columnOrder\n  const sortedPinnedColumns = useMemo(() => {\n    // Create a copy of pinned columns\n    const pinnedCopy = [...pinnedColumns]\n\n    // If we have a column order, use it to sort\n    if (columnOrder.length > 0) {\n      pinnedCopy.sort((a, b) => {\n        const indexA = columnOrder.indexOf(a.value)\n        const indexB = columnOrder.indexOf(b.value)\n\n        // If column is not in order array, place at end\n        if (indexA === -1) return 1\n        if (indexB === -1) return -1\n\n        return indexA - indexB\n      })\n    }\n\n    return pinnedCopy\n  }, [pinnedColumns, columnOrder])\n\n  const sortedVisibleColumnsIds = useMemo(\n    () => sortedVisibleColumns.map((col) => col.value),\n    [sortedVisibleColumns],\n  )\n\n  const sortedPinnedColumnsIds = useMemo(\n    () => sortedPinnedColumns.map((col) => col.value),\n    [sortedPinnedColumns],\n  )\n\n  // Toggle column visibility\n  const toggleVisibility = (columnId: string) => {\n    const newState = { ...columnVisibility }\n    // If column is currently visible, hide it\n    if (newState[columnId] !== false) {\n      newState[columnId] = false\n    } else {\n      // If column is currently hidden, show it\n      newState[columnId] = true\n    }\n    updateColumnVisibility(newState)\n  }\n\n  // Toggle column pinning\n  const togglePinning = (columnId: string) => {\n    const newState = { ...columnPinning }\n    const newVisibility = { ...columnVisibility }\n\n    // If column is currently pinned, unpin it\n    if (newState.left?.includes(columnId)) {\n      newState.left = newState.left.filter((id) => id !== columnId)\n    } else {\n      // If column is currently unpinned, pin it\n      newState.left = [...(newState.left || []), columnId]\n      // If column is hidden, show it\n      if (newVisibility[columnId] === false) {\n        newVisibility[columnId] = true\n        updateColumnVisibility(newVisibility)\n      }\n    }\n    updateColumnPinning(newState)\n  }\n\n  // When drag starts\n  const handleDragStart = (event: DragStartEvent) => {\n    const id = event.active.id as string\n    setActiveId(id)\n    setIsDraggingFromPinned(columnPinning.left?.includes(id) || false)\n  }\n\n  // Track when dragging over different sections\n  const handleDragOver = (event: DragOverEvent) => {\n    const { active, over } = event\n\n    if (over && active.id !== over.id) {\n      // Check if we're dragging a hidden column over a visible column\n      const isActiveHidden = columnVisibility[active.id as string] === false\n      const isOverVisible = columnVisibility[over.id as string] !== false\n      const isOverPinned = columnPinning.left?.includes(over.id as string) || false\n      const isOverHidden = columnVisibility[over.id as string] === false\n\n      setIsHiddenOverVisible(isActiveHidden && isOverVisible && !isOverPinned)\n      setIsDraggingOverPinned(isOverVisible && isOverPinned)\n      setIsDraggingOverHidden(isOverHidden)\n\n      // Set if we're hovering over the visible (unpinned) section\n      setIsHoveringVisibleSection(isOverVisible && !isOverPinned)\n    } else {\n      // Reset when not over any column\n      setIsHoveringVisibleSection(false)\n      setIsDraggingOverHidden(false)\n    }\n  }\n\n  // When drag ends, reset all states\n  const handleDragEnd = (event: DragEndEvent) => {\n    // Reset states\n    setIsHiddenOverVisible(false)\n    setIsDraggingOverPinned(false)\n    setIsDraggingFromPinned(false)\n    setIsHoveringVisibleSection(false)\n    setIsDraggingOverHidden(false)\n\n    const { active, over } = event\n\n    if (over && active.id !== over.id) {\n      // Find the dragged column and target column\n      const activeColumn = [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find(\n        (col) => col.value === active.id,\n      )\n      const overColumn = [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find(\n        (col) => col.value === over.id,\n      )\n\n      if (activeColumn && overColumn) {\n        const activeId = active.id as string\n        const overId = over.id as string\n        const isActiveVisible = columnVisibility[activeId] !== false\n        const isOverVisible = columnVisibility[overId] !== false\n        const isActivePinned = columnPinning.left?.includes(activeId) || false\n        const isOverPinned = columnPinning.left?.includes(overId) || false\n        const isOverHidden = columnVisibility[overId] === false\n\n        // Create a new config object that we'll update and apply at the end\n        const newConfig: ColumnsConfig = {\n          columnVisibility: { ...columnVisibility },\n          columnOrder: [...columnOrder],\n          columnPinning: { ...columnPinning },\n          columnSizing: { ...columnSizing },\n        }\n\n        // If we're moving a column between visible columns (including pinned)\n        if (isActiveVisible && isOverVisible) {\n          let newPinningLeft = [...(newConfig.columnPinning.left || [])]\n\n          // Handle pinning/unpinning based on target section\n          if (isActivePinned !== isOverPinned) {\n            if (isActivePinned && !isOverPinned) {\n              // Moving from pinned to unpinned section\n              newPinningLeft = newPinningLeft.filter((id) => id !== activeId)\n            } else if (!isActivePinned && isOverPinned) {\n              // Moving from unpinned to pinned section\n              newPinningLeft = [...newPinningLeft, activeId]\n            }\n          }\n\n          // Update order within the appropriate section\n          const allVisibleIds = [...sortedPinnedColumnsIds, ...sortedVisibleColumnsIds]\n          const oldIndex = allVisibleIds.indexOf(activeId)\n          const newIndex = allVisibleIds.indexOf(overId)\n\n          if (oldIndex === -1 || newIndex === -1) {\n            console.error('Invalid column order state')\n            toast.error('Invalid column order state')\n            return\n          }\n\n          const newOrder = arrayMove(allVisibleIds, oldIndex, newIndex)\n\n          // new pinning left should be ordered by the new order\n          const newPinningLeftOrdered = newOrder.filter((id) => newPinningLeft.includes(id))\n\n          // Update config object\n          newConfig.columnOrder = newOrder\n          newConfig.columnPinning = {\n            ...newConfig.columnPinning,\n            left: newPinningLeftOrdered,\n          }\n\n          // Apply all changes at once\n          setColumnsConfig(newConfig)\n        }\n\n        // If we're dragging from hidden to visible\n        else if (!isActiveVisible && isOverVisible) {\n          // Make the column visible\n          newConfig.columnVisibility[activeId] = true\n\n          // If dropping into pinned section, also pin the column\n          if (isOverPinned) {\n            const newPinningLeft = [...(newConfig.columnPinning.left || []), activeId]\n            newConfig.columnPinning.left = newPinningLeft\n          }\n\n          // Update order to place it near the over column\n          const allVisibleIds = [...sortedPinnedColumnsIds, ...sortedVisibleColumnsIds]\n\n          // Add the column to order if not already there\n          if (!allVisibleIds.includes(activeId)) {\n            const overIndex = allVisibleIds.indexOf(overId)\n            allVisibleIds.splice(overIndex, 0, activeId)\n          }\n\n          newConfig.columnOrder = allVisibleIds\n\n          // Apply all changes at once\n          setColumnsConfig(newConfig)\n        }\n\n        // If we're dragging from visible to hidden\n        else if (isActiveVisible && isOverHidden) {\n          // Make the active column hidden\n          newConfig.columnVisibility[activeId] = false\n\n          // If the column was pinned, remove it from pinned\n          if (isActivePinned) {\n            const newPinningLeft = (newConfig.columnPinning.left || []).filter(\n              (id) => id !== activeId,\n            )\n            newConfig.columnPinning.left = newPinningLeft\n          }\n\n          // Apply all changes at once\n          setColumnsConfig(newConfig)\n        }\n      }\n    }\n\n    setActiveId(null)\n  }\n\n  // Find the active column for the drag overlay\n  const activeColumn = activeId\n    ? [...visibleColumns, ...hiddenColumns, ...pinnedColumns].find((col) => col.value === activeId)\n    : null\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      <ColumnsContainer>\n        {/* Pinned Columns Section */}\n        {pinnedColumns.length > 0 && (\n          <Section className={isDraggingOverPinned && !isDraggingFromPinned ? 'drop-target' : ''}>\n            <SectionTitle>Pinned Columns</SectionTitle>\n            <SortableContext\n              items={sortedPinnedColumns.map((col) => col.value)}\n              strategy={verticalListSortingStrategy}\n            >\n              <Menu>\n                {sortedPinnedColumns.map((column) => (\n                  <SortableColumnItem\n                    key={column.value}\n                    id={column.value}\n                    column={column}\n                    isPinned={true}\n                    isHidden={false}\n                    isHighlighted={highlighted === column.value}\n                    onTogglePinning={togglePinning}\n                    onToggleVisibility={toggleVisibility}\n                  />\n                ))}\n              </Menu>\n            </SortableContext>\n          </Section>\n        )}\n\n        {/* Visible Columns Section */}\n        <Section\n          className={\n            isHiddenOverVisible || (isDraggingFromPinned && isHoveringVisibleSection)\n              ? 'drop-target'\n              : ''\n          }\n        >\n          <SectionTitle>Visible Columns</SectionTitle>\n          <SortableContext\n            items={sortedVisibleColumns.map((col) => col.value)}\n            strategy={verticalListSortingStrategy}\n          >\n            <Menu>\n              {sortedVisibleColumns.map((column) => (\n                <SortableColumnItem\n                  key={column.value}\n                  id={column.value}\n                  column={column}\n                  isPinned={false}\n                  isHidden={false}\n                  isHighlighted={highlighted === column.value}\n                  onTogglePinning={togglePinning}\n                  onToggleVisibility={toggleVisibility}\n                />\n              ))}\n            </Menu>\n          </SortableContext>\n        </Section>\n\n        {/* Hidden Columns Section */}\n        {hiddenColumns.length > 0 && (\n          <Section className={isDraggingOverHidden ? 'drop-target' : ''}>\n            <SectionTitle>Hidden Columns</SectionTitle>\n            <Menu ref={menuRef}>\n              {hiddenColumns.map((column) => (\n                <SortableColumnItem\n                  key={column.value}\n                  id={column.value}\n                  column={column}\n                  isPinned={columnPinning.left?.includes(column.value) || false}\n                  isHidden={true}\n                  isHighlighted={highlighted === column.value}\n                  onTogglePinning={togglePinning}\n                  onToggleVisibility={toggleVisibility}\n                />\n              ))}\n            </Menu>\n          </Section>\n        )}\n\n        {/* Drag Overlay */}\n        <DragOverlay>\n          {activeColumn && (\n            <ColumnItem\n              column={activeColumn}\n              isPinned={columnPinning.left?.includes(activeColumn.value) || false}\n              isHidden={columnVisibility[activeColumn.value] === false}\n              isHighlighted={highlighted === activeColumn.value}\n              dragOverlay={true}\n            />\n          )}\n        </DragOverlay>\n      </ColumnsContainer>\n    </DndContext>\n  )\n}\n\n// Styled components\nconst ColumnsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n`\n\nconst Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: background-color 0.2s ease;\n  border-radius: 4px;\n\n  &.drop-target {\n    background-color: var(--md-sys-color-surface-container);\n    box-shadow: 0 0 0 1px var(--md-sys-color-outline);\n  }\n`\n\nconst SectionTitle = styled.div`\n  font-weight: 500;\n  color: var(--md-sys-color-outline);\n  padding: 4px 0;\n`\n\nconst Menu = styled.ul`\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n`\n\nexport default ColumnsSettings\n"],"names":["_a","activeColumn","activeId","jsx","jsxs"],"mappings":";;;;;;;;;AAoCA,MAAM,kBAA4C,CAAC,EAAE,SAAS,kBAAkB;;AACxE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,yBAAyB;AAG7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,KAAK;AACpE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AACtE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAEtE,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,KAAK;AAE9E,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAGtE,QAAM,UAAU;AAAA,IACd,UAAU,eAAe;AAAA,MACvB,sBAAsB;AAAA,QACpB,UAAU;AAAA,MAAA;AAAA,IAEb,CAAA;AAAA,EACH;AAEM,QAAA,UAAU,OAAgC,IAAI;AAGpD,YAAU,MAAM;AACV,QAAA,QAAQ,WAAW,aAAa;AAClC,YAAM,qBAAqB,QAAQ,QAAQ,cAAc,oBAAoB,WAAW,EAAE;AAC1F,UAAI,oBAAoB;AACtB,2BAAmB,eAAe;AAAA,UAChC,UAAU;AAAA,UACV,OAAO;AAAA,QAAA,CACR;AAAA,MAAA;AAAA,IACH;AAAA,EACF,GACC,CAAC,WAAW,CAAC;AAGhB,QAAM,EAAE,gBAAgB,eAAe,cAAc,IAAI,QAAQ,MAAM;AAE/D,UAAA,UAAU,QAAQ,OAAO,CAAC,QAAQ,iBAAiB,IAAI,KAAK,MAAM,KAAK;AACvE,UAAA,SAAS,QAAQ,OAAO,CAAC,QAAQ,iBAAiB,IAAI,KAAK,MAAM,KAAK;AAGtE,UAAA,SAAS,QAAQ,OAAO,CAAC,QAAA;;AAAQ,cAAAA,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAAS,IAAI;AAAA,KAAM;AACxE,UAAA,kBAAkB,QAAQ,OAAO,CAAC,QAAA;;AAAQ,gBAACA,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAAS,IAAI;AAAA,KAAM;AAEjF,WAAA;AAAA,MACL,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,eAAe;AAAA,IACjB;AAAA,EACC,GAAA,CAAC,SAAS,kBAAkB,aAAa,CAAC;AAGvC,QAAA,uBAAuB,QAAQ,MAAM;AAEnC,UAAA,cAAc,CAAC,GAAG,cAAc;AAGlC,QAAA,YAAY,SAAS,GAAG;AACd,kBAAA,KAAK,CAAC,GAAG,MAAM;AACzB,cAAM,SAAS,YAAY,QAAQ,EAAE,KAAK;AAC1C,cAAM,SAAS,YAAY,QAAQ,EAAE,KAAK;AAGtC,YAAA,WAAW,GAAW,QAAA;AACtB,YAAA,WAAW,GAAW,QAAA;AAE1B,eAAO,SAAS;AAAA,MAAA,CACjB;AAAA,IAAA;AAGI,WAAA;AAAA,EAAA,GACN,CAAC,gBAAgB,WAAW,CAAC;AAG1B,QAAA,sBAAsB,QAAQ,MAAM;AAElC,UAAA,aAAa,CAAC,GAAG,aAAa;AAGhC,QAAA,YAAY,SAAS,GAAG;AACf,iBAAA,KAAK,CAAC,GAAG,MAAM;AACxB,cAAM,SAAS,YAAY,QAAQ,EAAE,KAAK;AAC1C,cAAM,SAAS,YAAY,QAAQ,EAAE,KAAK;AAGtC,YAAA,WAAW,GAAW,QAAA;AACtB,YAAA,WAAW,GAAW,QAAA;AAE1B,eAAO,SAAS;AAAA,MAAA,CACjB;AAAA,IAAA;AAGI,WAAA;AAAA,EAAA,GACN,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,0BAA0B;AAAA,IAC9B,MAAM,qBAAqB,IAAI,CAAC,QAAQ,IAAI,KAAK;AAAA,IACjD,CAAC,oBAAoB;AAAA,EACvB;AAEA,QAAM,yBAAyB;AAAA,IAC7B,MAAM,oBAAoB,IAAI,CAAC,QAAQ,IAAI,KAAK;AAAA,IAChD,CAAC,mBAAmB;AAAA,EACtB;AAGM,QAAA,mBAAmB,CAAC,aAAqB;AACvC,UAAA,WAAW,EAAE,GAAG,iBAAiB;AAEnC,QAAA,SAAS,QAAQ,MAAM,OAAO;AAChC,eAAS,QAAQ,IAAI;AAAA,IAAA,OAChB;AAEL,eAAS,QAAQ,IAAI;AAAA,IAAA;AAEvB,2BAAuB,QAAQ;AAAA,EACjC;AAGM,QAAA,gBAAgB,CAAC,aAAqB;;AACpC,UAAA,WAAW,EAAE,GAAG,cAAc;AAC9B,UAAA,gBAAgB,EAAE,GAAG,iBAAiB;AAG5C,SAAIA,MAAA,SAAS,SAAT,gBAAAA,IAAe,SAAS,WAAW;AACrC,eAAS,OAAO,SAAS,KAAK,OAAO,CAAC,OAAO,OAAO,QAAQ;AAAA,IAAA,OACvD;AAEL,eAAS,OAAO,CAAC,GAAI,SAAS,QAAQ,IAAK,QAAQ;AAE/C,UAAA,cAAc,QAAQ,MAAM,OAAO;AACrC,sBAAc,QAAQ,IAAI;AAC1B,+BAAuB,aAAa;AAAA,MAAA;AAAA,IACtC;AAEF,wBAAoB,QAAQ;AAAA,EAC9B;AAGM,QAAA,kBAAkB,CAAC,UAA0B;;AAC3C,UAAA,KAAK,MAAM,OAAO;AACxB,gBAAY,EAAE;AACd,8BAAwBA,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAAS,QAAO,KAAK;AAAA,EACnE;AAGM,QAAA,iBAAiB,CAAC,UAAyB;;AACzC,UAAA,EAAE,QAAQ,KAAA,IAAS;AAEzB,QAAI,QAAQ,OAAO,OAAO,KAAK,IAAI;AAEjC,YAAM,iBAAiB,iBAAiB,OAAO,EAAY,MAAM;AACjE,YAAM,gBAAgB,iBAAiB,KAAK,EAAY,MAAM;AAC9D,YAAM,iBAAeA,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAAS,KAAK,QAAiB;AACxE,YAAM,eAAe,iBAAiB,KAAK,EAAY,MAAM;AAEtC,6BAAA,kBAAkB,iBAAiB,CAAC,YAAY;AACvE,8BAAwB,iBAAiB,YAAY;AACrD,8BAAwB,YAAY;AAGR,kCAAA,iBAAiB,CAAC,YAAY;AAAA,IAAA,OACrD;AAEL,kCAA4B,KAAK;AACjC,8BAAwB,KAAK;AAAA,IAAA;AAAA,EAEjC;AAGM,QAAA,gBAAgB,CAAC,UAAwB;;AAE7C,2BAAuB,KAAK;AAC5B,4BAAwB,KAAK;AAC7B,4BAAwB,KAAK;AAC7B,gCAA4B,KAAK;AACjC,4BAAwB,KAAK;AAEvB,UAAA,EAAE,QAAQ,KAAA,IAAS;AAEzB,QAAI,QAAQ,OAAO,OAAO,KAAK,IAAI;AAE3BC,YAAAA,gBAAe,CAAC,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,EAAE;AAAA,QAC3E,CAAC,QAAQ,IAAI,UAAU,OAAO;AAAA,MAChC;AACM,YAAA,aAAa,CAAC,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,EAAE;AAAA,QACzE,CAAC,QAAQ,IAAI,UAAU,KAAK;AAAA,MAC9B;AAEA,UAAIA,iBAAgB,YAAY;AAC9B,cAAMC,YAAW,OAAO;AACxB,cAAM,SAAS,KAAK;AACd,cAAA,kBAAkB,iBAAiBA,SAAQ,MAAM;AACjD,cAAA,gBAAgB,iBAAiB,MAAM,MAAM;AACnD,cAAM,mBAAiBF,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAASE,eAAa;AACjE,cAAM,iBAAe,mBAAc,SAAd,mBAAoB,SAAS,YAAW;AACvD,cAAA,eAAe,iBAAiB,MAAM,MAAM;AAGlD,cAAM,YAA2B;AAAA,UAC/B,kBAAkB,EAAE,GAAG,iBAAiB;AAAA,UACxC,aAAa,CAAC,GAAG,WAAW;AAAA,UAC5B,eAAe,EAAE,GAAG,cAAc;AAAA,UAClC,cAAc,EAAE,GAAG,aAAa;AAAA,QAClC;AAGA,YAAI,mBAAmB,eAAe;AACpC,cAAI,iBAAiB,CAAC,GAAI,UAAU,cAAc,QAAQ,CAAA,CAAG;AAG7D,cAAI,mBAAmB,cAAc;AAC/B,gBAAA,kBAAkB,CAAC,cAAc;AAEnC,+BAAiB,eAAe,OAAO,CAAC,OAAO,OAAOA,SAAQ;AAAA,YAAA,WACrD,CAAC,kBAAkB,cAAc;AAEzB,+BAAA,CAAC,GAAG,gBAAgBA,SAAQ;AAAA,YAAA;AAAA,UAC/C;AAIF,gBAAM,gBAAgB,CAAC,GAAG,wBAAwB,GAAG,uBAAuB;AACtE,gBAAA,WAAW,cAAc,QAAQA,SAAQ;AACzC,gBAAA,WAAW,cAAc,QAAQ,MAAM;AAEzC,cAAA,aAAa,MAAM,aAAa,IAAI;AACtC,oBAAQ,MAAM,4BAA4B;AAC1C,kBAAM,MAAM,4BAA4B;AACxC;AAAA,UAAA;AAGF,gBAAM,WAAW,UAAU,eAAe,UAAU,QAAQ;AAGtD,gBAAA,wBAAwB,SAAS,OAAO,CAAC,OAAO,eAAe,SAAS,EAAE,CAAC;AAGjF,oBAAU,cAAc;AACxB,oBAAU,gBAAgB;AAAA,YACxB,GAAG,UAAU;AAAA,YACb,MAAM;AAAA,UACR;AAGA,2BAAiB,SAAS;AAAA,QAAA,WAInB,CAAC,mBAAmB,eAAe;AAEhC,oBAAA,iBAAiBA,SAAQ,IAAI;AAGvC,cAAI,cAAc;AACV,kBAAA,iBAAiB,CAAC,GAAI,UAAU,cAAc,QAAQ,IAAKA,SAAQ;AACzE,sBAAU,cAAc,OAAO;AAAA,UAAA;AAIjC,gBAAM,gBAAgB,CAAC,GAAG,wBAAwB,GAAG,uBAAuB;AAG5E,cAAI,CAAC,cAAc,SAASA,SAAQ,GAAG;AAC/B,kBAAA,YAAY,cAAc,QAAQ,MAAM;AAChC,0BAAA,OAAO,WAAW,GAAGA,SAAQ;AAAA,UAAA;AAG7C,oBAAU,cAAc;AAGxB,2BAAiB,SAAS;AAAA,QAAA,WAInB,mBAAmB,cAAc;AAE9B,oBAAA,iBAAiBA,SAAQ,IAAI;AAGvC,cAAI,gBAAgB;AAClB,kBAAM,kBAAkB,UAAU,cAAc,QAAQ,CAAI,GAAA;AAAA,cAC1D,CAAC,OAAO,OAAOA;AAAAA,YACjB;AACA,sBAAU,cAAc,OAAO;AAAA,UAAA;AAIjC,2BAAiB,SAAS;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAGF,gBAAY,IAAI;AAAA,EAClB;AAGA,QAAM,eAAe,WACjB,CAAC,GAAG,gBAAgB,GAAG,eAAe,GAAG,aAAa,EAAE,KAAK,CAAC,QAAQ,IAAI,UAAU,QAAQ,IAC5F;AAGF,SAAAC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,MACpB,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,WAAW;AAAA,MAEX,iDAAC,kBAEE,EAAA,UAAA;AAAA,QAAc,cAAA,SAAS,KACrBC,kCAAAA,KAAA,SAAA,EAAQ,WAAW,wBAAwB,CAAC,uBAAuB,gBAAgB,IAClF,UAAA;AAAA,UAAAD,kCAAAA,IAAC,gBAAa,UAAc,iBAAA,CAAA;AAAA,UAC5BA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,oBAAoB,IAAI,CAAC,QAAQ,IAAI,KAAK;AAAA,cACjD,UAAU;AAAA,cAEV,UAACA,kCAAAA,IAAA,MAAA,EACE,UAAoB,oBAAA,IAAI,CAAC,WACxBA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,OAAO;AAAA,kBACX;AAAA,kBACA,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,eAAe,gBAAgB,OAAO;AAAA,kBACtC,iBAAiB;AAAA,kBACjB,oBAAoB;AAAA,gBAAA;AAAA,gBAPf,OAAO;AAAA,cAAA,CASf,EACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,GACF;AAAA,QAIFC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WACE,uBAAwB,wBAAwB,2BAC5C,gBACA;AAAA,YAGN,UAAA;AAAA,cAAAD,kCAAAA,IAAC,gBAAa,UAAe,kBAAA,CAAA;AAAA,cAC7BA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO,qBAAqB,IAAI,CAAC,QAAQ,IAAI,KAAK;AAAA,kBAClD,UAAU;AAAA,kBAEV,UAACA,kCAAAA,IAAA,MAAA,EACE,UAAqB,qBAAA,IAAI,CAAC,WACzBA,kCAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,IAAI,OAAO;AAAA,sBACX;AAAA,sBACA,UAAU;AAAA,sBACV,UAAU;AAAA,sBACV,eAAe,gBAAgB,OAAO;AAAA,sBACtC,iBAAiB;AAAA,sBACjB,oBAAoB;AAAA,oBAAA;AAAA,oBAPf,OAAO;AAAA,kBAAA,CASf,EACH,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QAGC,cAAc,SAAS,KACtBC,kCAAAA,KAAC,WAAQ,WAAW,uBAAuB,gBAAgB,IACzD,UAAA;AAAA,UAAAD,kCAAAA,IAAC,gBAAa,UAAc,iBAAA,CAAA;AAAA,gDAC3B,MAAK,EAAA,KAAK,SACR,UAAc,cAAA,IAAI,CAAC;;AAClBA,qDAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,OAAO;AAAA,gBACX;AAAA,gBACA,YAAUH,MAAA,cAAc,SAAd,gBAAAA,IAAoB,SAAS,OAAO,WAAU;AAAA,gBACxD,UAAU;AAAA,gBACV,eAAe,gBAAgB,OAAO;AAAA,gBACtC,iBAAiB;AAAA,gBACjB,oBAAoB;AAAA,cAAA;AAAA,cAPf,OAAO;AAAA,YAAA;AAAA,WASf,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QAIFG,kCAAAA,IAAC,eACE,UACC,gBAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,YAAU,mBAAc,SAAd,mBAAoB,SAAS,aAAa,WAAU;AAAA,YAC9D,UAAU,iBAAiB,aAAa,KAAK,MAAM;AAAA,YACnD,eAAe,gBAAgB,aAAa;AAAA,YAC5C,aAAa;AAAA,UAAA;AAAA,QAAA,EAGnB,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;AAGA,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/ProjectTableSettings/ProjectTableSettings.cjs.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+require("../../containers/ProjectTreeTable/ProjectTreeTable.cjs.js");
+require("../../containers/ProjectTreeTable/context/SelectionCellsContext.cjs.js");
+const ProjectTableContext = require("../../containers/ProjectTreeTable/context/ProjectTableContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/SelectedRowsContext.cjs.js");
+const ColumnSettingsContext = require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+require("lodash");
+require("react-toastify");
+require("../../util/pubsub.cjs.js");
+require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("@tanstack/react-table");
+require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/CellWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
+require("../../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
+require("clsx");
+require("../../containers/ProjectTreeTable/components/SelectionCell.cjs.js");
+require("../../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");
+require("react");
+const styled = require("styled-components");
+require("../../context/RemoteModulesContext.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+const SettingsPanelContext = require("../../context/SettingsPanelContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
+const SettingsPanel = require("../SettingsPanel/SettingsPanel.cjs.js");
+require("../SettingsPanel/SettingsPanelItemTemplate.cjs.js");
+const ColumnsSettings = require("./ColumnsSettings.cjs.js");
+const StyledCustomizeButton = styled(ayonReactComponents.Button)`
+  min-width: 120px;
+`;
+const CustomizeButton = ({ defaultSelected = "columns", ...props }) => {
+  const { togglePanel, isPanelOpen } = SettingsPanelContext.useSettingsPanel();
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    StyledCustomizeButton,
+    {
+      onClick: () => togglePanel(defaultSelected),
+      icon: "settings",
+      selected: isPanelOpen,
+      ...props,
+      children: "Customize"
+    }
+  );
+};
+const ProjectTableSettings = ({
+  settings = [],
+  extraColumns = [],
+  highlighted
+}) => {
+  const { attribFields } = ProjectTableContext.useProjectTableContext();
+  const { columnVisibility } = ColumnSettingsContext.useColumnSettingsContext();
+  const columns = [
+    {
+      value: "thumbnail",
+      label: "Thumbnail"
+    },
+    {
+      value: "name",
+      label: "Folder / Task"
+    },
+    {
+      value: "status",
+      label: "Status"
+    },
+    {
+      value: "subType",
+      label: "Type"
+    },
+    {
+      value: "assignees",
+      label: "Assignees"
+    },
+    {
+      value: "tags",
+      label: "Tags"
+    },
+    ...attribFields.map((field) => ({
+      value: "attrib_" + field.name,
+      label: field.data.title || field.name
+    })),
+    ...extraColumns
+  ];
+  const visibleCount = columns.filter(
+    (column) => !(column.value in columnVisibility) || columnVisibility[column.value]
+  ).length;
+  const defaultSettings = [
+    {
+      id: "columns",
+      title: "Columns",
+      icon: "view_column",
+      preview: `${visibleCount}/${columns.length}`,
+      component: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ColumnsSettings, { columns, highlighted })
+    }
+  ];
+  settings.forEach((setting) => defaultSettings.push(setting));
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SettingsPanel.SettingsPanel, { settings: defaultSettings });
+};
+exports.CustomizeButton = CustomizeButton;
+exports.ProjectTableSettings = ProjectTableSettings;
+//# sourceMappingURL=ProjectTableSettings.cjs.js.map

package/dist/shared/src/components/ProjectTableSettings/ProjectTableSettings.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectTableSettings.cjs.js","sources":["../../../../../src/components/ProjectTableSettings/ProjectTableSettings.tsx"],"sourcesContent":["import {\n  useColumnSettingsContext,\n  useProjectTableContext,\n} from '@shared/containers/ProjectTreeTable'\nimport { Button, ButtonProps } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { SettingHighlightedId, useSettingsPanel } from '@shared/context'\nimport { SettingsPanel, SettingConfig } from '@shared/components/SettingsPanel'\nimport ColumnsSettings from './ColumnsSettings'\n\nconst StyledCustomizeButton = styled(Button)`\n  min-width: 120px;\n`\n\ninterface Props extends ButtonProps {\n  defaultSelected?: string | null\n}\n\nexport const CustomizeButton = ({ defaultSelected = 'columns', ...props }: Props) => {\n  const { togglePanel, isPanelOpen } = useSettingsPanel()\n\n  return (\n    <StyledCustomizeButton\n      onClick={() => togglePanel(defaultSelected)}\n      icon=\"settings\"\n      selected={isPanelOpen}\n      {...props}\n    >\n      Customize\n    </StyledCustomizeButton>\n  )\n}\n\ntype ProjectTableSettingsProps = {\n  settings?: SettingConfig[]\n  extraColumns?: { value: string; label: string }[]\n  highlighted?: SettingHighlightedId\n}\n\nexport const ProjectTableSettings: FC<ProjectTableSettingsProps> = ({\n  settings = [],\n  extraColumns = [],\n  highlighted,\n}) => {\n  const { attribFields } = useProjectTableContext()\n  const { columnVisibility } = useColumnSettingsContext()\n\n  const columns = [\n    {\n      value: 'thumbnail',\n      label: 'Thumbnail',\n    },\n    {\n      value: 'name',\n      label: 'Folder / Task',\n    },\n    {\n      value: 'status',\n      label: 'Status',\n    },\n    {\n      value: 'subType',\n      label: 'Type',\n    },\n    {\n      value: 'assignees',\n      label: 'Assignees',\n    },\n    {\n      value: 'tags',\n      label: 'Tags',\n    },\n    ...attribFields.map((field) => ({\n      value: 'attrib_' + field.name,\n      label: field.data.title || field.name,\n    })),\n    ...extraColumns,\n  ]\n\n  const visibleCount = columns.filter(\n    (column) => !(column.value in columnVisibility) || columnVisibility[column.value],\n  ).length\n\n  const defaultSettings: SettingConfig[] = [\n    {\n      id: 'columns',\n      title: 'Columns',\n      icon: 'view_column',\n      preview: `${visibleCount}/${columns.length}`,\n      component: <ColumnsSettings columns={columns} highlighted={highlighted} />,\n    },\n  ]\n\n  settings.forEach((setting) => defaultSettings.push(setting))\n\n  return <SettingsPanel settings={defaultSettings} />\n}\n"],"names":["Button","useSettingsPanel","jsx","useProjectTableContext","useColumnSettingsContext","SettingsPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,wBAAwB,OAAOA,0BAAM;AAAA;AAAA;AAQpC,MAAM,kBAAkB,CAAC,EAAE,kBAAkB,WAAW,GAAG,YAAmB;AACnF,QAAM,EAAE,aAAa,YAAY,IAAIC,sCAAiB;AAGpD,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM,YAAY,eAAe;AAAA,MAC1C,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MACL,UAAA;AAAA,IAAA;AAAA,EAED;AAEJ;AAQO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW,CAAC;AAAA,EACZ,eAAe,CAAC;AAAA,EAChB;AACF,MAAM;AACE,QAAA,EAAE,aAAa,IAAIC,2CAAuB;AAC1C,QAAA,EAAE,iBAAiB,IAAIC,+CAAyB;AAEtD,QAAM,UAAU;AAAA,IACd;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA,GAAG,aAAa,IAAI,CAAC,WAAW;AAAA,MAC9B,OAAO,YAAY,MAAM;AAAA,MACzB,OAAO,MAAM,KAAK,SAAS,MAAM;AAAA,IAAA,EACjC;AAAA,IACF,GAAG;AAAA,EACL;AAEA,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,WAAW,EAAE,OAAO,SAAS,qBAAqB,iBAAiB,OAAO,KAAK;AAAA,EAAA,EAChF;AAEF,QAAM,kBAAmC;AAAA,IACvC;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS,GAAG,YAAY,IAAI,QAAQ,MAAM;AAAA,MAC1C,WAAWF,2BAAAA,kBAAAA,IAAC,iBAAgB,EAAA,SAAkB,YAA0B,CAAA;AAAA,IAAA;AAAA,EAE5E;AAEA,WAAS,QAAQ,CAAC,YAAY,gBAAgB,KAAK,OAAO,CAAC;AAEpD,SAAAA,2BAAA,kBAAA,IAACG,cAAc,eAAA,EAAA,UAAU,gBAAiB,CAAA;AACnD;;;"}

package/dist/shared/src/components/ProjectTableSettings/ProjectTableSettings.es.js

@@ -0,0 +1,113 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
+import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
+import { useProjectTableContext } from "../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
+import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
+import { useColumnSettingsContext } from "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
+import { Button } from "@ynput/ayon-react-components";
+import "lodash";
+import "react-toastify";
+import "../../util/pubsub.es.js";
+import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "@tanstack/react-table";
+import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "clsx";
+import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
+import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
+import "react";
+import styled from "styled-components";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import { useSettingsPanel } from "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+import { SettingsPanel } from "../SettingsPanel/SettingsPanel.es.js";
+import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import ColumnsSettings from "./ColumnsSettings.es.js";
+const StyledCustomizeButton = styled(Button)`
+  min-width: 120px;
+`;
+const CustomizeButton = ({ defaultSelected = "columns", ...props }) => {
+  const { togglePanel, isPanelOpen } = useSettingsPanel();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledCustomizeButton,
+    {
+      onClick: () => togglePanel(defaultSelected),
+      icon: "settings",
+      selected: isPanelOpen,
+      ...props,
+      children: "Customize"
+    }
+  );
+};
+const ProjectTableSettings = ({
+  settings = [],
+  extraColumns = [],
+  highlighted
+}) => {
+  const { attribFields } = useProjectTableContext();
+  const { columnVisibility } = useColumnSettingsContext();
+  const columns = [
+    {
+      value: "thumbnail",
+      label: "Thumbnail"
+    },
+    {
+      value: "name",
+      label: "Folder / Task"
+    },
+    {
+      value: "status",
+      label: "Status"
+    },
+    {
+      value: "subType",
+      label: "Type"
+    },
+    {
+      value: "assignees",
+      label: "Assignees"
+    },
+    {
+      value: "tags",
+      label: "Tags"
+    },
+    ...attribFields.map((field) => ({
+      value: "attrib_" + field.name,
+      label: field.data.title || field.name
+    })),
+    ...extraColumns
+  ];
+  const visibleCount = columns.filter(
+    (column) => !(column.value in columnVisibility) || columnVisibility[column.value]
+  ).length;
+  const defaultSettings = [
+    {
+      id: "columns",
+      title: "Columns",
+      icon: "view_column",
+      preview: `${visibleCount}/${columns.length}`,
+      component: /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnsSettings, { columns, highlighted })
+    }
+  ];
+  settings.forEach((setting) => defaultSettings.push(setting));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel, { settings: defaultSettings });
+};
+export {
+  CustomizeButton,
+  ProjectTableSettings
+};
+//# sourceMappingURL=ProjectTableSettings.es.js.map

package/dist/shared/src/components/ProjectTableSettings/ProjectTableSettings.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectTableSettings.es.js","sources":["../../../../../src/components/ProjectTableSettings/ProjectTableSettings.tsx"],"sourcesContent":["import {\n  useColumnSettingsContext,\n  useProjectTableContext,\n} from '@shared/containers/ProjectTreeTable'\nimport { Button, ButtonProps } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { SettingHighlightedId, useSettingsPanel } from '@shared/context'\nimport { SettingsPanel, SettingConfig } from '@shared/components/SettingsPanel'\nimport ColumnsSettings from './ColumnsSettings'\n\nconst StyledCustomizeButton = styled(Button)`\n  min-width: 120px;\n`\n\ninterface Props extends ButtonProps {\n  defaultSelected?: string | null\n}\n\nexport const CustomizeButton = ({ defaultSelected = 'columns', ...props }: Props) => {\n  const { togglePanel, isPanelOpen } = useSettingsPanel()\n\n  return (\n    <StyledCustomizeButton\n      onClick={() => togglePanel(defaultSelected)}\n      icon=\"settings\"\n      selected={isPanelOpen}\n      {...props}\n    >\n      Customize\n    </StyledCustomizeButton>\n  )\n}\n\ntype ProjectTableSettingsProps = {\n  settings?: SettingConfig[]\n  extraColumns?: { value: string; label: string }[]\n  highlighted?: SettingHighlightedId\n}\n\nexport const ProjectTableSettings: FC<ProjectTableSettingsProps> = ({\n  settings = [],\n  extraColumns = [],\n  highlighted,\n}) => {\n  const { attribFields } = useProjectTableContext()\n  const { columnVisibility } = useColumnSettingsContext()\n\n  const columns = [\n    {\n      value: 'thumbnail',\n      label: 'Thumbnail',\n    },\n    {\n      value: 'name',\n      label: 'Folder / Task',\n    },\n    {\n      value: 'status',\n      label: 'Status',\n    },\n    {\n      value: 'subType',\n      label: 'Type',\n    },\n    {\n      value: 'assignees',\n      label: 'Assignees',\n    },\n    {\n      value: 'tags',\n      label: 'Tags',\n    },\n    ...attribFields.map((field) => ({\n      value: 'attrib_' + field.name,\n      label: field.data.title || field.name,\n    })),\n    ...extraColumns,\n  ]\n\n  const visibleCount = columns.filter(\n    (column) => !(column.value in columnVisibility) || columnVisibility[column.value],\n  ).length\n\n  const defaultSettings: SettingConfig[] = [\n    {\n      id: 'columns',\n      title: 'Columns',\n      icon: 'view_column',\n      preview: `${visibleCount}/${columns.length}`,\n      component: <ColumnsSettings columns={columns} highlighted={highlighted} />,\n    },\n  ]\n\n  settings.forEach((setting) => defaultSettings.push(setting))\n\n  return <SettingsPanel settings={defaultSettings} />\n}\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,wBAAwB,OAAO,MAAM;AAAA;AAAA;AAQpC,MAAM,kBAAkB,CAAC,EAAE,kBAAkB,WAAW,GAAG,YAAmB;AACnF,QAAM,EAAE,aAAa,YAAY,IAAI,iBAAiB;AAGpD,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM,YAAY,eAAe;AAAA,MAC1C,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MACL,UAAA;AAAA,IAAA;AAAA,EAED;AAEJ;AAQO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW,CAAC;AAAA,EACZ,eAAe,CAAC;AAAA,EAChB;AACF,MAAM;AACE,QAAA,EAAE,aAAa,IAAI,uBAAuB;AAC1C,QAAA,EAAE,iBAAiB,IAAI,yBAAyB;AAEtD,QAAM,UAAU;AAAA,IACd;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA,GAAG,aAAa,IAAI,CAAC,WAAW;AAAA,MAC9B,OAAO,YAAY,MAAM;AAAA,MACzB,OAAO,MAAM,KAAK,SAAS,MAAM;AAAA,IAAA,EACjC;AAAA,IACF,GAAG;AAAA,EACL;AAEA,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,WAAW,EAAE,OAAO,SAAS,qBAAqB,iBAAiB,OAAO,KAAK;AAAA,EAAA,EAChF;AAEF,QAAM,kBAAmC;AAAA,IACvC;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS,GAAG,YAAY,IAAI,QAAQ,MAAM;AAAA,MAC1C,WAAWA,kCAAAA,IAAC,iBAAgB,EAAA,SAAkB,YAA0B,CAAA;AAAA,IAAA;AAAA,EAE5E;AAEA,WAAS,QAAQ,CAAC,YAAY,gBAAgB,KAAK,OAAO,CAAC;AAEpD,SAAAA,kCAAA,IAAC,eAAc,EAAA,UAAU,gBAAiB,CAAA;AACnD;"}