impact-ui 4.0.13 → 4.0.14-tableV36-beta.1

package/dist/components/TableV36/NoComments.js

@@ -0,0 +1,236 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/North.js";
+import { Button } from "../Button/index.js";
+import { MentionEditor } from "../common/MentionEditor/index.js";
+const extractMentionedUsers = (editorJSON) => {
+  const mentionedUsers = [];
+  const traverseNodes = (node) => {
+    if (node.type === "mention" && node.attrs) {
+      const user = {
+        id: node.attrs.id,
+        name: node.attrs.label || node.attrs.name,
+        ...node.attrs.avatar && { avatar: node.attrs.avatar },
+        ...node.attrs.status && { status: node.attrs.status }
+      };
+      if (!mentionedUsers.find((u) => u.id === user.id)) {
+        mentionedUsers.push(user);
+      }
+    }
+    if (node.content && Array.isArray(node.content)) {
+      node.content.forEach(traverseNodes);
+    }
+  };
+  if (editorJSON == null ? void 0 : editorJSON.content) {
+    editorJSON.content.forEach(traverseNodes);
+  }
+  return mentionedUsers;
+};
+const NoComments = ({
+  onAddComment,
+  cellId,
+  position,
+  isInsidePortal = false,
+  editCommentText = "",
+  isLoading = false,
+  error = null,
+  onClearError,
+  isEditFlow,
+  onUpdateComment,
+  setEditingComment,
+  loadParticipantsAvatar
+}) => {
+  const [inputValue, setInputValue] = useState(editCommentText);
+  useRef(null);
+  const [isFixed, setIsFixed] = useState(false);
+  const [isScrollable, setIsScrollable] = useState(false);
+  const [height, setHeight] = useState("auto");
+  const [isMultiLine, setIsMultiLine] = useState(false);
+  const editorRef = useRef(null);
+  const prevHeightRef = useRef(null);
+  useRef(false);
+  const checkMultiLineContent = useCallback(() => {
+    var _a;
+    if (!((_a = editorRef.current) == null ? void 0 : _a.editor)) return;
+    try {
+      const editorElement = editorRef.current.editor.view.dom;
+      if (!editorElement) return;
+      const computedStyle = window.getComputedStyle(editorElement);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+      const actualHeight = editorElement.scrollHeight;
+      const isContentMultiLine = actualHeight > lineHeight * 1.5;
+      setIsMultiLine(isContentMultiLine);
+    } catch (error2) {
+      console.warn("Error checking multi-line content:", error2);
+    }
+  }, []);
+  useEffect(() => {
+    if (inputValue === "") {
+      setIsFixed(false);
+      setIsScrollable(false);
+      prevHeightRef.current = null;
+    }
+  }, [inputValue]);
+  useEffect(() => {
+    if (editCommentText === null) {
+      setInputValue("");
+    } else {
+      setInputValue(editCommentText);
+    }
+  }, [editCommentText]);
+  useEffect(() => {
+    let cellElement = null;
+    let styleElement = null;
+    const timer = setTimeout(() => {
+      var _a, _b;
+      if ((_a = editorRef.current) == null ? void 0 : _a.focus) {
+        cellElement = document.querySelector(".ag-cell-focus");
+        if (cellElement) {
+          const rowIndex = (_b = cellElement.closest(".ag-row")) == null ? void 0 : _b.getAttribute("row-index");
+          const colId = cellElement.getAttribute("col-id");
+          if (rowIndex && colId) {
+            const customCSS = `
+              .ag-row[row-index="${rowIndex}"] .ag-cell[col-id="${colId}"]:after {
+                content: " ";
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 3px;
+                background: #4259ee;
+                left: 0;
+              }
+            `;
+            styleElement = document.createElement("style");
+            styleElement.textContent = customCSS;
+            styleElement.setAttribute("data-comment-focus", "true");
+            document.head.appendChild(styleElement);
+            cellElement.setAttribute("data-comment-focused", "true");
+          }
+        }
+        editorRef.current.focus({ preventScroll: true });
+      }
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      if (styleElement) {
+        document.head.removeChild(styleElement);
+      }
+      if (cellElement) {
+        cellElement.removeAttribute("data-comment-focused");
+      }
+    };
+  }, []);
+  const handleAddComment = (e) => {
+    var _a;
+    e.stopPropagation();
+    if (inputValue.trim() && !isLoading) {
+      let taggedUsers = [];
+      try {
+        if ((_a = editorRef.current) == null ? void 0 : _a.editor) {
+          const editorJSON = editorRef.current.editor.getJSON();
+          taggedUsers = extractMentionedUsers(editorJSON);
+        }
+      } catch (error2) {
+        console.warn("Error extracting mentioned users:", error2);
+      }
+      onAddComment(cellId, inputValue, taggedUsers);
+      setInputValue("");
+    }
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e);
+    if (error && onClearError) {
+      onClearError();
+    }
+    setTimeout(() => {
+      checkMultiLineContent();
+    }, 0);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `no-comments-container ${isInsidePortal ? "in-portal" : "as-banner"} ${isFixed ? "stacked" : ""} ${!isFixed || inputValue === "" ? "empty" : ""} ${!isFixed ? "single-line-textarea" : ""}`,
+      style: !isInsidePortal ? {
+        top: position == null ? void 0 : position.top,
+        left: position == null ? void 0 : position.left,
+        maxHeight: "182px"
+        // Match chat-input-wrapper max-height
+      } : {
+        gap: "10px",
+        maxHeight: "182px"
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "comment-input-wrapper",
+            style: {
+              flexDirection: isMultiLine ? "column" : "row",
+              gap: isMultiLine ? "8px" : "0"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                MentionEditor,
+                {
+                  ref: editorRef,
+                  chatId: cellId,
+                  disabled: isLoading,
+                  isMultiLine,
+                  loadParticipantsAvatar,
+                  maxLength: 1e3,
+                  placeholder: "Type message...",
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  onSend: handleAddComment
+                }
+              ),
+              !isEditFlow && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  disabled: isLoading || !inputValue.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim(),
+                  icon: /* @__PURE__ */ jsx(default_1, {}),
+                  size: "small",
+                  style: { display: "flex" },
+                  variant: "primary",
+                  onClick: handleAddComment
+                }
+              )
+            ]
+          }
+        ),
+        isEditFlow && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isLoading,
+              size: "small",
+              variant: "tertiary",
+              onClick: () => {
+                setInputValue("");
+                setEditingComment(null);
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isLoading,
+              loading: isLoading,
+              size: "small",
+              variant: "primary",
+              onClick: () => onUpdateComment(inputValue),
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NoComments as default
+};

package/dist/components/TableV36/Table.types.d.ts

@@ -0,0 +1,111 @@
+import { ReactNode } from 'react';
+import { GetRowIdFunc } from 'ag-grid-community';
+import { AgGridReactProps } from 'ag-grid-react';
+
+/**
+ * AG Grid v36 Table props.
+ *
+ * Extends AgGridReactProps from ag-grid-react v36. Consumers migrating from Table (v32)
+ * should note:
+ * - `enableRangeSelection` → use `cellSelection` (set by TableV36 by default)
+ * - ColDef `suppressMenu` → `suppressHeaderMenuButton` (TableV36 still accepts both)
+ * - `domLayout` defaults to `"normal"` (enables row virtualization). Consumers who previously
+ *   relied on the implicit `"autoHeight"` behavior must explicitly pass `domLayout="autoHeight"`.
+ *   Note: `"autoHeight"` disables row virtualization.
+ * - `animateRows` defaults to `false` for performance (sorting/grouping row animations off).
+ *   Pass `animateRows={true}` to restore animations.
+ * - Provide `getRowId` for immutable updates, transactions, selection persistence, and
+ *   optimal row refresh. TableV36 does not invent a default (no row-index fallback).
+ * - Set `enableValueCache` only when you have expensive `valueGetter`s / immutable updates.
+ * - Minimum TypeScript for AG Grid v36 packages is 5.8.3
+ */
+export interface TableProps extends Omit<AgGridReactProps, 'rowHeight'> {
+    tableHeader?: string;
+    rowHeight?: 'comfort' | 'compact' | number;
+    height?: string | number;
+    topRightOptions?: ReactNode;
+    topLeftOptions?: ReactNode;
+    bottomLeftOptions?: ReactNode;
+    bottomCenterOptions?: ReactNode;
+    cardContainer?: boolean;
+    gridId?: string;
+    hideTableBody?: boolean;
+    onSearchApplyClick?: (filters: unknown[]) => void;
+    onPaginationChanged?: (params: unknown) => void;
+    viewPoint?: string;
+    disableContextualFilter?: boolean;
+    disableTableSettings?: boolean;
+    showBulkActionBar?: boolean;
+    bulkActionBarProps?: {
+        actionBarLabel?: string;
+        enableSelectAll?: boolean;
+        totalRowCount?: number;
+    };
+    onSelectAllRows?: () => void;
+    onClearSelection?: () => void;
+    onSortChanged?: (params: unknown) => void;
+    advanceSortEnabled?: boolean;
+    enableCommentPanel?: boolean;
+    isCommentFeatureEnabled?: boolean;
+    commentProps?: Record<string, unknown>;
+    /**
+     * Opt-in AG Grid value cache. Useful with expensive valueGetters and immutable row updates.
+     * Default: false (avoids stale cache surprises for unaware consumers).
+     */
+    enableValueCache?: boolean;
+    /**
+     * Extra rows rendered outside the viewport (AG Grid rowBuffer). Default: 8.
+     * Lower values speed initial draw; higher values smooth fast scrolling. Benchmark 5 / 8 / 12.
+     */
+    rowBuffer?: number;
+    /**
+     * When false (default), disables row insert/remove/sort animations for better scroll performance.
+     * Set true if you prefer animated sorting/grouping and accept the CPU cost.
+     */
+    animateRows?: boolean;
+    /** Disable column move animation during drag (smoother with many columns). Default: false. */
+    suppressColumnMoveAnimation?: boolean;
+    /** Disable row hover highlight (can improve scroll FPS). Default: false. */
+    suppressRowHoverHighlight?: boolean;
+    /**
+     * When true, body cells wrap and clamp to the current row height (default/comfort).
+     * Compact (30px) always stays single-line ellipsis. Does not grow rows.
+     * Default: false.
+     */
+    enableRowTextWrap?: boolean;
+    /** When true, header titles wrap and clamp to header height. Default: true. */
+    enableHeaderTextWrap?: boolean;
+    /**
+     * Pass-through only — TableV36 does not default to row index.
+     * Required for immutable updates, transactions, and selection persistence.
+     */
+    getRowId?: GetRowIdFunc;
+    /**
+     * Debounced callback (200ms) invoked after column move/resize finishes with column state.
+     * Prefer this over listening to every `columnMoved` pixel for persistence.
+     */
+    onColumnStateChange?: (columnState: unknown[]) => void;
+    /**
+     * Behaviour for column counts large enough that per-column work becomes the bottleneck.
+     *
+     * - `'auto'` (default): enabled automatically above 500 leaf columns.
+     * - `true` / `false`: force it on or off.
+     *
+     * When active, and only where you have not set the option yourself, TableV36 turns off
+     * column-move animation, row animation and cell range selection, stops attaching a filter
+     * to every column by default, and raises `rowBuffer`. Column virtualization is also forced
+     * on, since disabling it at this scale renders every column into the DOM.
+     * `debounceVerticalScrollbar` is left off: it delays viewport updates and shows white
+     * empty rows while scrolling.
+     */
+    largeColumnMode?: boolean | 'auto';
+    /**
+     * AG Grid `context` — merged with TableV36's internal comment helpers.
+     * Your keys are available in cell renderers / value getters via `params.context`.
+     * Reserved keys (comments, popup, comment handlers, configuration, colIdentifierKey)
+     * are owned by TableV36 when comments are enabled.
+     */
+    context?: AgGridReactProps['context'];
+    [key: string]: unknown;
+}
+//# sourceMappingURL=Table.types.d.ts.map

package/dist/components/TableV36/Table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/Table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,8FAA8F;IAC9F,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC,4EAA4E;IAC5E,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,+EAA+E;IAC/E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAEvD;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAEtC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/dist/components/TableV36/actionBar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export default function BulkActionBar({ showBulkActionBar, bulkActionBarProps, onSelectAllRows, onClearSelection, }: {
+    showBulkActionBar: any;
+    bulkActionBarProps: any;
+    onSelectAllRows: any;
+    onClearSelection: any;
+}): React.JSX.Element;
+//# sourceMappingURL=actionBar.d.ts.map

package/dist/components/TableV36/actionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionBar.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/actionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB;;;;;CAAA,qBA2BA"}

package/dist/components/TableV36/actionBar.js

@@ -0,0 +1,31 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import default_1$1 from "../../node_modules/@mui/icons-material/CheckCircle.js";
+import default_1 from "../../node_modules/@mui/icons-material/Info.js";
+function BulkActionBar({
+  showBulkActionBar,
+  bulkActionBarProps,
+  onSelectAllRows,
+  onClearSelection
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: showBulkActionBar && /* @__PURE__ */ jsxs("div", { className: "ia-bulk-action-bar", children: [
+    /* @__PURE__ */ jsx("span", { className: "icon", children: (bulkActionBarProps == null ? void 0 : bulkActionBarProps.enableSelectAll) ? /* @__PURE__ */ jsx(default_1, {}) : /* @__PURE__ */ jsx(default_1$1, {}) }),
+    /* @__PURE__ */ jsx("span", { className: "ia-bulk-action-bar-text", children: bulkActionBarProps == null ? void 0 : bulkActionBarProps.actionBarLabel }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ia-bulk-action-bar-select-text",
+        onClick: () => {
+          if (bulkActionBarProps == null ? void 0 : bulkActionBarProps.enableSelectAll) {
+            onSelectAllRows == null ? void 0 : onSelectAllRows();
+          } else {
+            onClearSelection == null ? void 0 : onClearSelection();
+          }
+        },
+        children: (bulkActionBarProps == null ? void 0 : bulkActionBarProps.enableSelectAll) ? `Select all ${bulkActionBarProps.totalRowCount} rows across all pages` : "Clear selection"
+      }
+    )
+  ] }) });
+}
+export {
+  BulkActionBar as default
+};

package/dist/components/TableV36/advanceSearchModal.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+
+export default function AdvanceSearchModal({ isAdvanceSearch, toggleAdvanceSearch, colDefs, actualRef, currentColumnId, savedAdvanceSearchConfig, setInitialFilters, initialFilters, selectedThirdOptionDropdownValue, setSelectedThirdOptionDropdownValue, draftFilter, setDraftFilter, ...args }: {
+    [x: string]: any;
+    isAdvanceSearch: any;
+    toggleAdvanceSearch: any;
+    colDefs: any;
+    actualRef: any;
+    currentColumnId: any;
+    savedAdvanceSearchConfig: any;
+    setInitialFilters: any;
+    initialFilters?: {
+        column: null;
+        operation: null;
+        value: string;
+    }[] | undefined;
+    selectedThirdOptionDropdownValue: any;
+    setSelectedThirdOptionDropdownValue: any;
+    draftFilter: any;
+    setDraftFilter: any;
+}): React.JSX.Element;
+//# sourceMappingURL=advanceSearchModal.d.ts.map

package/dist/components/TableV36/advanceSearchModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanceSearchModal.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/advanceSearchModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAoB/C,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,eAAe,EACf,mBAAmB,EACnB,OAAO,EACP,SAAS,EACT,eAAe,EACf,wBAAwB,EACxB,iBAAiB,EACjB,cAA+D,EAC/D,gCAAgC,EAChC,mCAAmC,EACnC,WAAW,EACX,cAAc,EACd,GAAG,IAAI,EACR;;;;;;;;;;;;;;;;;;CAAA,qBAorBA"}

package/dist/components/TableV36/columnsSettingsColumnRow.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+/** Top-level sortable row — groups drag as a unit with nested children inside. */
+export declare const SortableColumnItem: React.NamedExoticComponent<object>;
+/** Nested child row — not individually sortable (AG Grid group constraint). */
+export declare const NestedColumnItem: React.NamedExoticComponent<object>;
+//# sourceMappingURL=columnsSettingsColumnRow.d.ts.map

package/dist/components/TableV36/columnsSettingsColumnRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnsSettingsColumnRow.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/columnsSettingsColumnRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAoL1D,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,oCAqDN,CAAC;AAE1B,+EAA+E;AAC/E,eAAO,MAAM,gBAAgB,oCAgC3B,CAAC"}

package/dist/components/TableV36/columnsSettingsColumnRow.js

@@ -0,0 +1,247 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
+import { Checkbox } from "../Checkbox/index.js";
+import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
+import DragIndicator from "../../node_modules/@mui/icons-material/esm/DragIndicator.js";
+const capitalizeHeader = (name) => name ? name.charAt(0).toUpperCase() + name.slice(1) : "";
+const ColumnRowContent = memo(function ColumnRowContent2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  onKeyboardReorder,
+  dragHandleProps,
+  isOverlay
+}) {
+  const rowStyle = useMemo(
+    () => ({
+      ["--indent-level"]: level
+    }),
+    [level]
+  );
+  const handleCollapseClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+    },
+    [onToggleCollapse, column.colId]
+  );
+  const handleVisibilityChange = useCallback(() => {
+    onToggleVisibility == null ? void 0 : onToggleVisibility(column.colId);
+  }, [onToggleVisibility, column.colId]);
+  const handleRowKeyDown = useCallback(
+    (e) => {
+      var _a, _b, _c, _d;
+      if (isOverlay) return;
+      const current = e.currentTarget;
+      if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+        e.preventDefault();
+        onKeyboardReorder == null ? void 0 : onKeyboardReorder(column.colId, e.key === "ArrowUp" ? -1 : 1);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = (_b = (_a = current.parentElement) == null ? void 0 : _a.nextElementSibling) == null ? void 0 : _b.querySelector('[role="treeitem"]');
+          next == null ? void 0 : next.focus();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = (_d = (_c = current.parentElement) == null ? void 0 : _c.previousElementSibling) == null ? void 0 : _d.querySelector('[role="treeitem"]');
+          prev == null ? void 0 : prev.focus();
+          break;
+        }
+        case "ArrowRight": {
+          if (hasChildren && isCollapsed) {
+            e.preventDefault();
+            onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          if (hasChildren && !isCollapsed) {
+            e.preventDefault();
+            onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+          }
+          break;
+        }
+        case "Enter":
+        case " ": {
+          if (column.disabled) break;
+          e.preventDefault();
+          onToggleVisibility == null ? void 0 : onToggleVisibility(column.colId);
+          break;
+        }
+      }
+    },
+    [
+      isOverlay,
+      level,
+      hasChildren,
+      isCollapsed,
+      onToggleCollapse,
+      onToggleVisibility,
+      onKeyboardReorder,
+      column.colId,
+      column.disabled
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-checked": isIndeterminate ? "mixed" : checkboxChecked,
+      "aria-expanded": hasChildren ? !isCollapsed : void 0,
+      "aria-label": column.headerName,
+      "aria-roledescription": !isOverlay && dragHandleProps ? "sortable column" : void 0,
+      "aria-selected": !!checkboxChecked,
+      className: rowClassName,
+      "data-col-id": column.colId,
+      role: "treeitem",
+      style: rowStyle,
+      tabIndex: isOverlay ? -1 : 0,
+      onKeyDown: handleRowKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "table-setting-column-leading", children: [
+          reserveCollapseSlot && /* @__PURE__ */ jsx("span", { "aria-hidden": !hasChildren, className: "table-setting-column-collapse-slot", children: hasChildren ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": isCollapsed ? "Expand column group" : "Collapse column group",
+              className: "table-setting-column-collapse-btn",
+              onClick: handleCollapseClick,
+              children: isCollapsed ? /* @__PURE__ */ jsx(default_1, {}) : /* @__PURE__ */ jsx(default_1$1, {})
+            }
+          ) : null }),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: checkboxChecked,
+              disabled: column.disabled || isOverlay,
+              variant: isIndeterminate ? "dashed" : "default",
+              onChange: handleVisibilityChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "table-setting-column-trailing", children: [
+          dragHandleProps && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "table-setting-column-drag-handle",
+              ...dragHandleProps,
+              "aria-label": `Reorder ${column.headerName}`,
+              children: /* @__PURE__ */ jsx(DragIndicator, { className: dragIconClass })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "table-setting-column-name", children: capitalizeHeader(column.headerName) })
+        ] })
+      ]
+    }
+  );
+});
+const areSortablePropsEqual = (prev, next) => prev.column.colId === next.column.colId && prev.column.isVisible === next.column.isVisible && prev.column.headerName === next.column.headerName && prev.column.disabled === next.column.disabled && prev.isIndeterminate === next.isIndeterminate && prev.checkboxChecked === next.checkboxChecked && prev.reserveCollapseSlot === next.reserveCollapseSlot && prev.level === next.level && prev.isCollapsed === next.isCollapsed && prev.hasChildren === next.hasChildren && prev.rowClassName === next.rowClassName && prev.dragIconClass === next.dragIconClass && prev.onToggleCollapse === next.onToggleCollapse && prev.onToggleVisibility === next.onToggleVisibility && prev.onKeyboardReorder === next.onKeyboardReorder && prev.children === next.children;
+const SortableColumnItem = memo(function SortableColumnItem2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  onKeyboardReorder,
+  children
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: column.colId
+  });
+  const style = useMemo(
+    () => ({
+      transform: CSS.Transform.toString(transform),
+      transition,
+      opacity: isDragging ? 0 : void 0,
+      zIndex: isDragging ? 0 : void 0
+    }),
+    [transform, transition, isDragging]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: isDragging ? "table-setting-column-sortable--dragging" : void 0,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          ColumnRowContent,
+          {
+            checkboxChecked,
+            column,
+            dragHandleProps: { ...attributes, ...listeners },
+            dragIconClass,
+            hasChildren,
+            isCollapsed,
+            isIndeterminate,
+            level,
+            reserveCollapseSlot,
+            rowClassName,
+            onKeyboardReorder,
+            onToggleCollapse,
+            onToggleVisibility
+          }
+        ),
+        hasChildren && !isCollapsed && children
+      ]
+    }
+  );
+}, areSortablePropsEqual);
+const NestedColumnItem = memo(function NestedColumnItem2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      ColumnRowContent,
+      {
+        checkboxChecked,
+        column,
+        dragIconClass,
+        hasChildren,
+        isCollapsed,
+        isIndeterminate,
+        level,
+        reserveCollapseSlot,
+        rowClassName,
+        onToggleCollapse,
+        onToggleVisibility
+      }
+    ),
+    hasChildren && !isCollapsed && children
+  ] });
+});
+export {
+  NestedColumnItem,
+  SortableColumnItem
+};