impact-ui 4.0.17-alpha.2 → 5.0.0

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

@@ -1,264 +0,0 @@
-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 { useTranslation } from "../../../i18n/useTranslation.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 SETTINGS_COLUMN_INDENT_STEP = 28;
-const SETTINGS_SCROLL_COLUMN_INDENT_BASE = 48;
-const SETTINGS_FROZEN_COLUMN_INDENT_BASE = 20;
-const getSettingsRowPaddingLeft = (rowClassName, level) => {
-  const isFrozen = rowClassName == null ? void 0 : rowClassName.includes("frozen-columns-list-item");
-  const base = isFrozen ? SETTINGS_FROZEN_COLUMN_INDENT_BASE : SETTINGS_SCROLL_COLUMN_INDENT_BASE;
-  return base + level * SETTINGS_COLUMN_INDENT_STEP;
-};
-const ColumnRowContent = memo(function ColumnRowContent2({
-  column,
-  level,
-  isCollapsed,
-  hasChildren,
-  isIndeterminate,
-  checkboxChecked,
-  reserveCollapseSlot,
-  rowClassName,
-  dragIconClass,
-  onToggleCollapse,
-  onToggleVisibility,
-  onKeyboardReorder,
-  dragHandleProps,
-  isOverlay
-}) {
-  const { t } = useTranslation();
-  const rowStyle = useMemo(
-    () => ({
-      ["--indent-level"]: level,
-      // Inline padding wins over legacy Table.scss (8px / 50px list) in virtualized lists.
-      paddingLeft: `${getSettingsRowPaddingLeft(rowClassName, level)}px`,
-      boxSizing: "border-box"
-    }),
-    [level, rowClassName]
-  );
-  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 ? t("table.columns.sortableRole") : 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 ? t("table.columns.expandGroup") : t("table.columns.collapseGroup"),
-              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": t("table.columns.reorder", { name: 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,
-  SETTINGS_COLUMN_INDENT_STEP,
-  SETTINGS_FROZEN_COLUMN_INDENT_BASE,
-  SETTINGS_SCROLL_COLUMN_INDENT_BASE,
-  SortableColumnItem,
-  capitalizeHeader
-};

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

@@ -1,298 +0,0 @@
-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
-};