impact-ui 4.0.15 → 4.0.17

package/dist/components/shared/tableColumnSettings/columnsSettingsVirtualList.js

@@ -0,0 +1,298 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useRef, useCallback, useEffect, useLayoutEffect, memo } from "react";
+import { FixedSizeList } from "react-window";
+import { SortableColumnItem, NestedColumnItem } from "./columnsSettingsColumnRow.js";
+import { useTranslation } from "../../../i18n/useTranslation.js";
+const SETTINGS_ROW_HEIGHT = 28;
+const SETTINGS_VIRTUALIZE_THRESHOLD = 300;
+const SETTINGS_FROZEN_LIST_MAX_HEIGHT = 204;
+const SETTINGS_SCROLL_LIST_MAX_HEIGHT = 408;
+const SETTINGS_FROZEN_SECTION_CHROME = 31;
+const SETTINGS_SCROLL_SECTION_CHROME = 68;
+const SETTINGS_SECTION_GAP = 8;
+const SETTINGS_LIST_SAFETY_MARGIN = 4;
+const SETTINGS_MIN_LIST_HEIGHT = SETTINGS_ROW_HEIGHT * 2;
+const SETTINGS_FROZEN_HEIGHT_SHARE = 0.35;
+const SETTINGS_AUTO_SCROLL_EDGE = 36;
+const SETTINGS_AUTO_SCROLL_STEP = 16;
+const scrollListTowardPointer = (listEl, clientY) => {
+  if (!listEl || clientY == null) return false;
+  const rect = listEl.getBoundingClientRect();
+  if (clientY < rect.top || clientY > rect.bottom) return false;
+  if (clientY - rect.top < SETTINGS_AUTO_SCROLL_EDGE) {
+    listEl.scrollTop -= SETTINGS_AUTO_SCROLL_STEP;
+    return true;
+  }
+  if (rect.bottom - clientY < SETTINGS_AUTO_SCROLL_EDGE) {
+    listEl.scrollTop += SETTINGS_AUTO_SCROLL_STEP;
+    return true;
+  }
+  return false;
+};
+const buildCheckStateMap = (columnGroups) => {
+  const map = /* @__PURE__ */ new Map();
+  const visit = (column) => {
+    var _a;
+    if (!((_a = column.children) == null ? void 0 : _a.length)) {
+      map.set(column.colId, { checked: !!column.isVisible, indeterminate: false });
+      return { leaves: 1, visible: column.isVisible ? 1 : 0 };
+    }
+    let leaves = 0;
+    let visible = 0;
+    column.children.forEach((child) => {
+      const result = visit(child);
+      leaves += result.leaves;
+      visible += result.visible;
+    });
+    map.set(column.colId, {
+      checked: visible > 0,
+      indeterminate: visible > 0 && visible < leaves
+    });
+    return { leaves, visible };
+  };
+  columnGroups.forEach((columns) => (columns || []).forEach(visit));
+  return map;
+};
+const flattenColumnRows = (columns, collapsedMap, section) => {
+  const rows = [];
+  const walk = (cols, level) => {
+    (cols || []).forEach((column) => {
+      if (level === 0 && column.headerName === "N/A") return;
+      const hasChildren = Array.isArray(column.children) && column.children.length > 0;
+      const isCollapsed = !!collapsedMap[column.colId];
+      rows.push({ column, level, section, hasChildren, isCollapsed });
+      if (hasChildren && !isCollapsed) {
+        walk(column.children, level + 1);
+      }
+    });
+  };
+  walk(columns, 0);
+  return rows;
+};
+const computeSettingsListHeights = ({
+  shouldVirtualize,
+  listViewportHeight,
+  frozenRowCount,
+  scrollableRowCount
+}) => {
+  const frozenNatural = frozenRowCount * SETTINGS_ROW_HEIGHT;
+  const scrollNatural = scrollableRowCount * SETTINGS_ROW_HEIGHT;
+  if (!shouldVirtualize || !listViewportHeight) {
+    return {
+      frozen: Math.min(frozenNatural, SETTINGS_FROZEN_LIST_MAX_HEIGHT),
+      scrollable: Math.min(scrollNatural, SETTINGS_SCROLL_LIST_MAX_HEIGHT)
+    };
+  }
+  const hasFrozen = frozenRowCount > 0;
+  const hasScrollable = scrollableRowCount > 0;
+  const chrome = (hasFrozen ? SETTINGS_FROZEN_SECTION_CHROME : 0) + (hasScrollable ? SETTINGS_SCROLL_SECTION_CHROME : 0) + (hasFrozen && hasScrollable ? SETTINGS_SECTION_GAP : 0) + SETTINGS_LIST_SAFETY_MARGIN;
+  const available = listViewportHeight - chrome;
+  if (frozenNatural + scrollNatural <= available) {
+    return { frozen: frozenNatural, scrollable: scrollNatural };
+  }
+  if (!hasFrozen || !hasScrollable) {
+    const single = Math.max(SETTINGS_MIN_LIST_HEIGHT, available);
+    return {
+      frozen: hasFrozen ? single : 0,
+      scrollable: hasScrollable ? single : 0
+    };
+  }
+  const frozenCap = Math.max(
+    SETTINGS_MIN_LIST_HEIGHT,
+    Math.floor(available * SETTINGS_FROZEN_HEIGHT_SHARE)
+  );
+  const frozen = Math.min(frozenNatural, frozenCap);
+  return {
+    frozen,
+    scrollable: Math.max(SETTINGS_MIN_LIST_HEIGHT, available - frozen)
+  };
+};
+const VirtualizedColumnRow = memo(function VirtualizedColumnRow2({ index, style, data }) {
+  const { column, level, section, hasChildren, isCollapsed } = data.rows[index];
+  const isFrozen = section === "frozen";
+  const checkState = data.checkStateMap.get(column.colId) || {
+    checked: !!column.isVisible,
+    indeterminate: false
+  };
+  const rowProps = {
+    checkboxChecked: checkState.checked,
+    column,
+    dragIconClass: isFrozen ? "table-setting-frozen-columns-list-drag-icon" : "table-setting-scroll-columns-list-drag-icon",
+    hasChildren,
+    isCollapsed,
+    isIndeterminate: checkState.indeterminate,
+    level,
+    reserveCollapseSlot: isFrozen ? hasChildren : true,
+    rowClassName: isFrozen ? "table-setting-frozen-columns-list-item" : "table-setting-scroll-inner-column",
+    onToggleCollapse: isFrozen ? data.onToggleFrozenCollapse : data.onToggleScrollCollapse,
+    onToggleVisibility: isFrozen ? data.onToggleVisibilityFrozen : data.onToggleVisibilityScroll
+  };
+  return /* @__PURE__ */ jsx("div", { className: "table-setting-column-virtual-row", style, children: column.isVisible !== false ? /* @__PURE__ */ jsx(SortableColumnItem, { ...rowProps, onKeyboardReorder: data.onKeyboardReorder }) : /* @__PURE__ */ jsx(NestedColumnItem, { ...rowProps }) });
+});
+const getVirtualRowKey = (index, data) => data.rows[index].column.colId;
+const createTreeListOuter = (labelKey) => {
+  const TreeListOuter = React__default.forwardRef((props, ref) => {
+    const { t } = useTranslation();
+    return /* @__PURE__ */ jsx("div", { ref, "aria-label": t(labelKey), role: "tree", ...props });
+  });
+  TreeListOuter.displayName = `TreeListOuter(${labelKey})`;
+  return TreeListOuter;
+};
+const FrozenListOuter = createTreeListOuter("table.columns.frozen");
+const ScrollableListOuter = createTreeListOuter("table.columns.scrollable");
+const getScrollRange = (el) => Math.max(0, el.scrollHeight - el.clientHeight);
+const getListScrollRange = (rowCount, viewportHeight) => Math.max(0, rowCount * SETTINGS_ROW_HEIGHT - viewportHeight);
+const VirtualColumnList = ({
+  className,
+  itemData,
+  maxHeight,
+  outerElementType,
+  outerRef,
+  rows
+}) => {
+  const fixedListRef = useRef(null);
+  const listOuterRef = useRef(null);
+  const scrollbarRef = useRef(null);
+  const isDraggingBarRef = useRef(false);
+  const releaseBarRef = useRef(null);
+  const listScrollRangeRef = useRef(0);
+  const setOuterRef = useCallback(
+    (node) => {
+      listOuterRef.current = node;
+      if (typeof outerRef === "function") {
+        outerRef(node);
+      } else if (outerRef) {
+        outerRef.current = node;
+      }
+    },
+    [outerRef]
+  );
+  const scrollListToOffset = useCallback((offset) => {
+    var _a;
+    const range = listScrollRangeRef.current;
+    const clamped = Math.max(0, Math.min(offset, range));
+    if ((_a = fixedListRef.current) == null ? void 0 : _a.scrollTo) {
+      fixedListRef.current.scrollTo(clamped);
+    } else if (listOuterRef.current) {
+      listOuterRef.current.scrollTop = clamped;
+    }
+  }, []);
+  const syncBarToListOffset = useCallback((listOffset) => {
+    const bar = scrollbarRef.current;
+    const listRange = listScrollRangeRef.current;
+    if (!bar || listRange <= 0) return;
+    const barRange = getScrollRange(bar);
+    const ratio = listOffset / listRange;
+    bar.scrollTop = ratio * barRange;
+  }, []);
+  const handleScrollbarPointerDown = useCallback((event) => {
+    isDraggingBarRef.current = true;
+    if (event.currentTarget.setPointerCapture) {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    const release = (ev) => {
+      var _a;
+      isDraggingBarRef.current = false;
+      if (((_a = scrollbarRef.current) == null ? void 0 : _a.releasePointerCapture) && (ev == null ? void 0 : ev.pointerId) != null) {
+        try {
+          scrollbarRef.current.releasePointerCapture(ev.pointerId);
+        } catch {
+        }
+      }
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("pointercancel", release);
+      releaseBarRef.current = null;
+    };
+    releaseBarRef.current = release;
+    window.addEventListener("pointerup", release);
+    window.addEventListener("pointercancel", release);
+  }, []);
+  useEffect(() => () => {
+    var _a;
+    return (_a = releaseBarRef.current) == null ? void 0 : _a.call(releaseBarRef);
+  }, []);
+  const handleListScroll = useCallback(
+    ({ scrollOffset }) => {
+      if (isDraggingBarRef.current) return;
+      syncBarToListOffset(scrollOffset);
+    },
+    [syncBarToListOffset]
+  );
+  const handleScrollbarScroll = useCallback(
+    (event) => {
+      const bar = event.currentTarget;
+      const barRange = getScrollRange(bar);
+      const listRange = listScrollRangeRef.current;
+      if (barRange <= 0 || listRange <= 0) return;
+      const ratio = bar.scrollTop / barRange;
+      scrollListToOffset(ratio * listRange);
+    },
+    [scrollListToOffset]
+  );
+  const contentHeight = rows.length * SETTINGS_ROW_HEIGHT;
+  const height = Math.max(
+    SETTINGS_ROW_HEIGHT,
+    Math.min(contentHeight || SETTINGS_ROW_HEIGHT, maxHeight)
+  );
+  const needsScrollbar = rows.length > 0 && contentHeight > height;
+  listScrollRangeRef.current = getListScrollRange(rows.length, height);
+  useLayoutEffect(() => {
+    var _a;
+    if (!needsScrollbar) return;
+    const listOffset = ((_a = listOuterRef.current) == null ? void 0 : _a.scrollTop) ?? 0;
+    syncBarToListOffset(listOffset);
+  }, [needsScrollbar, height, rows.length, syncBarToListOffset]);
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `table-setting-column-virtual-wrapper ${needsScrollbar ? "has-detached-scrollbar" : ""}`,
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsx(
+          FixedSizeList,
+          {
+            ref: fixedListRef,
+            className: `${className} table-setting-column-virtual-list`,
+            height,
+            itemCount: rows.length,
+            itemData,
+            itemKey: getVirtualRowKey,
+            itemSize: SETTINGS_ROW_HEIGHT,
+            outerElementType,
+            outerRef: setOuterRef,
+            overscanCount: 8,
+            width: "100%",
+            onScroll: handleListScroll,
+            children: VirtualizedColumnRow
+          }
+        ),
+        needsScrollbar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollbarRef,
+            "aria-hidden": "true",
+            className: "table-setting-column-virtual-scrollbar",
+            style: { height },
+            onPointerDown: handleScrollbarPointerDown,
+            onScroll: handleScrollbarScroll,
+            children: /* @__PURE__ */ jsx("div", { style: { height: contentHeight, width: 1 } })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FrozenListOuter,
+  SETTINGS_FROZEN_LIST_MAX_HEIGHT,
+  SETTINGS_ROW_HEIGHT,
+  SETTINGS_SCROLL_LIST_MAX_HEIGHT,
+  SETTINGS_VIRTUALIZE_THRESHOLD,
+  ScrollableListOuter,
+  VirtualColumnList,
+  buildCheckStateMap,
+  computeSettingsListHeights,
+  flattenColumnRows,
+  scrollListTowardPointer
+};

package/dist/components/shared/tableColumnSettings/columnsTabV36.d.ts

@@ -0,0 +1,2 @@
+export declare const ColumnsV36: import('react').ForwardRefExoticComponent<import('react').RefAttributes<unknown>>;
+//# sourceMappingURL=columnsTabV36.d.ts.map

package/dist/components/shared/tableColumnSettings/columnsTabV36.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnsTabV36.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/tableColumnSettings/columnsTabV36.tsx"],"names":[],"mappings":"AAugBA,eAAO,MAAM,UAAU,mFA48CrB,CAAC"}