@salt-ds/lab 1.0.0-alpha.96 → 1.0.0-alpha.98

package/dist-es/toolbar-next/useToolbarNextOverflow.js

@@ -1,743 +0,0 @@
-import { ownerWindow, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { buildContentOverflowRenderSlots } from './toolbarNextUtils.js';
-
-const emptyOverflowState = {
-  overflowGroups: [],
-  overflowedIds: /* @__PURE__ */ new Set()
-};
-const bandPositions = ["start", "center", "end"];
-const WIDTH_EPSILON = 0.5;
-function measureWidth(element) {
-  if (!element) {
-    return 0;
-  }
-  const { width } = element.getBoundingClientRect();
-  return width;
-}
-function isVisibleMeasurementElement(element) {
-  if (!(element instanceof HTMLElement)) {
-    return false;
-  }
-  const { width, height } = element.getBoundingClientRect();
-  const styles = ownerWindow(element).getComputedStyle(element);
-  return width > 0 && height > 0 && styles.display !== "none" && styles.visibility !== "hidden";
-}
-function measureOverflowItemWidth(element) {
-  if (!element) {
-    return 0;
-  }
-  const rect = element.getBoundingClientRect();
-  let left = rect.left;
-  let right = rect.right;
-  for (const descendant of element.querySelectorAll("*")) {
-    if (!isVisibleMeasurementElement(descendant)) {
-      continue;
-    }
-    const descendantRect = descendant.getBoundingClientRect();
-    left = Math.min(left, descendantRect.left);
-    right = Math.max(right, descendantRect.right);
-  }
-  return Math.max(rect.width, right - left);
-}
-function exceedsAvailableWidth(measuredWidth, availableWidth) {
-  return measuredWidth - availableWidth > WIDTH_EPSILON;
-}
-function readGap(gapValue) {
-  return Number.parseFloat(gapValue || "0") || 0;
-}
-function sumFlexWidths(widths, gap) {
-  if (widths.length === 0) {
-    return 0;
-  }
-  return widths.reduce((total, width) => total + width, 0) + gap * (widths.length - 1);
-}
-function buildGroupDefinitions(items) {
-  const groupMap = /* @__PURE__ */ new Map();
-  for (const [sequence, item] of items.entries()) {
-    if (item.overflowMode === "none") {
-      continue;
-    }
-    const existing = groupMap.get(item.overflowGroupKey);
-    if (existing) {
-      if (!existing.named && item.overflowGroup === "shared") {
-        continue;
-      }
-      if (existing.label === item.overflowGroup && item.overflowLabel) {
-        existing.label = item.overflowLabel;
-      }
-      continue;
-    }
-    groupMap.set(item.overflowGroupKey, {
-      id: `${item.overflowGroupKey}-${sequence}`,
-      key: item.overflowGroupKey,
-      label: item.overflowGroup === "shared" ? "More" : item.overflowLabel ?? item.overflowGroup,
-      named: item.overflowGroup !== "shared",
-      order: sequence,
-      overflowGroup: item.overflowGroup,
-      contentKey: item.overflowGroup === "shared" ? void 0 : item.contentKey
-    });
-  }
-  return Array.from(groupMap.values()).sort(
-    (left, right) => left.order - right.order
-  );
-}
-function buildCollapseUnits(items) {
-  const groupedUnits = /* @__PURE__ */ new Map();
-  const units = [];
-  for (const [sequence, item] of items.entries()) {
-    if (item.overflowMode === "none") {
-      continue;
-    }
-    if (item.overflowMode === "grouped" && item.overflowGroup !== "shared") {
-      const existing = groupedUnits.get(item.overflowGroupKey);
-      if (existing) {
-        existing.itemIds.push(item.id);
-        existing.order = Math.max(existing.order, sequence);
-        existing.priority = Math.max(existing.priority, item.overflowPriority);
-        continue;
-      }
-      const unit = {
-        groupKey: item.overflowGroupKey,
-        itemIds: [item.id],
-        order: sequence,
-        priority: item.overflowPriority
-      };
-      groupedUnits.set(item.overflowGroupKey, unit);
-      units.push(unit);
-      continue;
-    }
-    units.push({
-      groupKey: item.overflowGroupKey,
-      itemIds: [item.id],
-      order: sequence,
-      priority: item.overflowPriority
-    });
-  }
-  return units.sort((left, right) => {
-    if (left.priority !== right.priority) {
-      return right.priority - left.priority;
-    }
-    return right.order - left.order;
-  });
-}
-function areOverflowStatesEqual(previous, next) {
-  if (previous.overflowedIds.size !== next.overflowedIds.size) {
-    return false;
-  }
-  for (const itemId of previous.overflowedIds) {
-    if (!next.overflowedIds.has(itemId)) {
-      return false;
-    }
-  }
-  if (previous.overflowGroups.length !== next.overflowGroups.length) {
-    return false;
-  }
-  return previous.overflowGroups.every((group, index) => {
-    const nextGroup = next.overflowGroups[index];
-    if (nextGroup == null || group.id !== nextGroup.id || group.label !== nextGroup.label || group.items.length !== nextGroup.items.length) {
-      return false;
-    }
-    return group.items.every((item, itemIndex) => {
-      var _a;
-      return item.id === ((_a = nextGroup.items[itemIndex]) == null ? void 0 : _a.id);
-    });
-  });
-}
-function computeToolbarNextOverflowState({
-  bandGaps,
-  collapseUnits,
-  containerWidth,
-  groupDefinitions,
-  itemWidths,
-  items,
-  namedTriggerWidths,
-  content,
-  contentGaps,
-  rootGap,
-  triggerWidths
-}) {
-  const hasCenteredLayout = content.some(
-    (contentArea) => contentArea.position === "center"
-  );
-  const contentByPosition = bandPositions.reduce(
-    (bands, position) => {
-      bands[position] = content.filter(
-        (contentArea) => contentArea.position === position
-      );
-      return bands;
-    },
-    {
-      start: [],
-      center: [],
-      end: []
-    }
-  );
-  const overflowedIds = /* @__PURE__ */ new Set();
-  const activeGroups = /* @__PURE__ */ new Set();
-  const getContentWidth = (contentArea) => {
-    const renderSlots = buildContentOverflowRenderSlots(
-      contentArea.items,
-      overflowedIds,
-      new Set(
-        groupDefinitions.filter((group) => {
-          return group.named && group.contentKey === contentArea.key && activeGroups.has(group.key);
-        }).map((group) => group.key)
-      )
-    );
-    const slotWidths = [];
-    for (const slot of renderSlots) {
-      const width = slot.triggerGroupKey != null ? namedTriggerWidths.get(slot.item.id) : itemWidths.get(slot.item.id);
-      if (width == null || width <= 0) {
-        return null;
-      }
-      slotWidths.push(width);
-    }
-    return sumFlexWidths(slotWidths, contentGaps.get(contentArea.key) ?? 0);
-  };
-  const getBandWidth = (position) => {
-    const bandChildWidths = [];
-    for (const contentArea of contentByPosition[position]) {
-      const contentWidth = getContentWidth(contentArea);
-      if (contentWidth == null) {
-        return null;
-      }
-      if (contentWidth > 0) {
-        bandChildWidths.push(contentWidth);
-      }
-    }
-    if (position === "end") {
-      for (const group of groupDefinitions) {
-        if (!group.named && activeGroups.has(group.key)) {
-          const width = triggerWidths.get(group.key);
-          if (width == null || width <= 0) {
-            return null;
-          }
-          bandChildWidths.push(width);
-        }
-      }
-    }
-    return sumFlexWidths(bandChildWidths, bandGaps.get(position) ?? 0);
-  };
-  const getTotalWidth = () => {
-    if (hasCenteredLayout) {
-      const startBandWidth = getBandWidth("start");
-      const centerBandWidth = getBandWidth("center");
-      const endBandWidth = getBandWidth("end");
-      if (startBandWidth == null || centerBandWidth == null || endBandWidth == null) {
-        return null;
-      }
-      return centerBandWidth + Math.max(startBandWidth, endBandWidth) * 2;
-    }
-    const visibleBandWidths = [];
-    for (const position of bandPositions) {
-      const bandWidth = getBandWidth(position);
-      if (bandWidth == null) {
-        return null;
-      }
-      if (bandWidth > 0) {
-        visibleBandWidths.push(bandWidth);
-      }
-    }
-    return sumFlexWidths(visibleBandWidths, rootGap);
-  };
-  const initialWidth = getTotalWidth();
-  if (initialWidth == null) {
-    return emptyOverflowState;
-  }
-  if (exceedsAvailableWidth(initialWidth, containerWidth)) {
-    for (const unit of collapseUnits) {
-      for (const itemId of unit.itemIds) {
-        overflowedIds.add(itemId);
-      }
-      activeGroups.add(unit.groupKey);
-      const nextWidth = getTotalWidth();
-      if (nextWidth == null) {
-        return emptyOverflowState;
-      }
-      if (!exceedsAvailableWidth(nextWidth, containerWidth)) {
-        break;
-      }
-    }
-  }
-  const overflowGroups = groupDefinitions.reduce(
-    (groups, group) => {
-      const hiddenItems = items.filter(
-        (item) => item.overflowGroupKey === group.key && overflowedIds.has(item.id)
-      );
-      if (hiddenItems.length > 0) {
-        groups.push({
-          id: group.id,
-          items: hiddenItems,
-          key: group.key,
-          label: group.label,
-          named: group.named,
-          overflowGroup: group.overflowGroup,
-          contentKey: group.contentKey
-        });
-      }
-      return groups;
-    },
-    []
-  );
-  return {
-    overflowGroups,
-    overflowedIds
-  };
-}
-function useToolbarNextOverflow({
-  content
-}) {
-  const targetWindow = useWindow();
-  const items = useMemo(
-    () => content.flatMap((contentArea) => contentArea.items),
-    [content]
-  );
-  const containerRef = useRef(null);
-  const bandRefs = useRef({
-    start: null,
-    center: null,
-    end: null
-  });
-  const bandRefCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const contentRefs = useRef({});
-  const contentRefCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const itemRefs = useRef({});
-  const itemRefCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const namedTriggerRefs = useRef({});
-  const namedTriggerRefCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const namedTriggerMeasureRefs = useRef(
-    {}
-  );
-  const namedTriggerMeasureCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const triggerMeasureRefs = useRef(
-    {}
-  );
-  const triggerMeasureCallbacks = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const rafRef = useRef(null);
-  const clearComputingRafRef = useRef(null);
-  const isComputingRef = useRef(false);
-  const pendingMeasureRef = useRef(false);
-  const resizeObserverRef = useRef(null);
-  const observedWidthTargetsRef = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const cachedItemWidths = useRef({});
-  const cachedNamedTriggerWidths = useRef({});
-  const cachedSharedTriggerWidths = useRef({});
-  const [overflowState, setOverflowState] = useState(emptyOverflowState);
-  const namedTriggerItems = useMemo(
-    () => items.filter((item) => {
-      return item.overflowMode !== "none" && item.overflowGroup !== "shared";
-    }),
-    [items]
-  );
-  const groupDefinitions = useMemo(() => buildGroupDefinitions(items), [items]);
-  const collapseUnits = useMemo(() => buildCollapseUnits(items), [items]);
-  const computeOverflow = useCallback(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return emptyOverflowState;
-    }
-    const containerStyles = ownerWindow(container).getComputedStyle(container);
-    const paddingLeft = Number.parseFloat(containerStyles.paddingLeft || "0") || 0;
-    const paddingRight = Number.parseFloat(containerStyles.paddingRight || "0") || 0;
-    const borderLeft = Number.parseFloat(containerStyles.borderLeftWidth || "0") || 0;
-    const borderRight = Number.parseFloat(containerStyles.borderRightWidth || "0") || 0;
-    const containerWidth = container.getBoundingClientRect().width - paddingLeft - paddingRight - borderLeft - borderRight;
-    if (containerWidth <= 0) {
-      return emptyOverflowState;
-    }
-    const rootGap = readGap(
-      containerStyles.columnGap || containerStyles.gap || "0"
-    );
-    const bandGaps = /* @__PURE__ */ new Map();
-    const contentGaps = /* @__PURE__ */ new Map();
-    const itemWidths = /* @__PURE__ */ new Map();
-    const namedTriggerWidths = /* @__PURE__ */ new Map();
-    const triggerWidths = /* @__PURE__ */ new Map();
-    for (const position of bandPositions) {
-      const bandElement = bandRefs.current[position];
-      if (!bandElement) {
-        bandGaps.set(position, 0);
-        continue;
-      }
-      const bandStyles = ownerWindow(bandElement).getComputedStyle(bandElement);
-      bandGaps.set(
-        position,
-        readGap(bandStyles.columnGap || bandStyles.gap || "0")
-      );
-    }
-    for (const contentArea of content) {
-      const contentElement = contentRefs.current[contentArea.key];
-      if (!contentElement) {
-        return emptyOverflowState;
-      }
-      const contentStyles = ownerWindow(contentElement).getComputedStyle(contentElement);
-      contentGaps.set(
-        contentArea.key,
-        readGap(contentStyles.columnGap || contentStyles.gap || "0")
-      );
-    }
-    for (const item of items) {
-      const element = itemRefs.current[item.id];
-      if (element) {
-        const width = measureOverflowItemWidth(element);
-        if (width > 0) {
-          itemWidths.set(item.id, width);
-          cachedItemWidths.current[item.id] = width;
-          continue;
-        }
-      }
-      const cached = cachedItemWidths.current[item.id];
-      if (cached != null && cached > 0) {
-        itemWidths.set(item.id, cached);
-        continue;
-      }
-      return emptyOverflowState;
-    }
-    for (const item of namedTriggerItems) {
-      const liveWidth = measureWidth(namedTriggerRefs.current[item.id]);
-      if (liveWidth > 0) {
-        namedTriggerWidths.set(item.id, liveWidth);
-        cachedNamedTriggerWidths.current[item.id] = liveWidth;
-        continue;
-      }
-      const measureWidthForItem = measureWidth(
-        namedTriggerMeasureRefs.current[item.id]
-      );
-      if (measureWidthForItem > 0) {
-        namedTriggerWidths.set(item.id, measureWidthForItem);
-        cachedNamedTriggerWidths.current[item.id] = measureWidthForItem;
-        continue;
-      }
-      const cached = cachedNamedTriggerWidths.current[item.id];
-      if (cached != null && cached > 0) {
-        namedTriggerWidths.set(item.id, cached);
-        continue;
-      }
-      return emptyOverflowState;
-    }
-    for (const group of groupDefinitions.filter((entry) => !entry.named)) {
-      const width = measureWidth(triggerMeasureRefs.current[group.key]);
-      if (width <= 0) {
-        const cached = cachedSharedTriggerWidths.current[group.key];
-        if (cached != null && cached > 0) {
-          triggerWidths.set(group.key, cached);
-          continue;
-        }
-        return emptyOverflowState;
-      }
-      triggerWidths.set(group.key, width);
-      cachedSharedTriggerWidths.current[group.key] = width;
-    }
-    const nextOverflowState = computeToolbarNextOverflowState({
-      bandGaps,
-      collapseUnits,
-      containerWidth,
-      groupDefinitions,
-      itemWidths,
-      items,
-      namedTriggerWidths,
-      content,
-      contentGaps,
-      rootGap,
-      triggerWidths
-    });
-    return nextOverflowState;
-  }, [collapseUnits, groupDefinitions, items, namedTriggerItems, content]);
-  const scheduleMeasureRef = useRef(() => {
-  });
-  const scheduleMeasure = useCallback(() => {
-    if (!targetWindow) {
-      return;
-    }
-    if (isComputingRef.current) {
-      pendingMeasureRef.current = true;
-      return;
-    }
-    if (rafRef.current != null) {
-      targetWindow.cancelAnimationFrame(rafRef.current);
-    }
-    rafRef.current = targetWindow.requestAnimationFrame(() => {
-      rafRef.current = null;
-      isComputingRef.current = true;
-      try {
-        const nextState = computeOverflow();
-        setOverflowState((previous) => {
-          return areOverflowStatesEqual(previous, nextState) ? previous : nextState;
-        });
-      } finally {
-        clearComputingRafRef.current = targetWindow.requestAnimationFrame(
-          () => {
-            clearComputingRafRef.current = null;
-            isComputingRef.current = false;
-            if (pendingMeasureRef.current) {
-              pendingMeasureRef.current = false;
-              scheduleMeasureRef.current();
-            }
-          }
-        );
-      }
-    });
-  }, [computeOverflow, targetWindow]);
-  useIsomorphicLayoutEffect(() => {
-    scheduleMeasureRef.current = scheduleMeasure;
-    return () => {
-      scheduleMeasureRef.current = () => {
-      };
-    };
-  }, [scheduleMeasure]);
-  const getCachedWidthForObservedTarget = useCallback(
-    (target) => {
-      switch (target.kind) {
-        case "item":
-          return cachedItemWidths.current[target.id];
-        case "named-trigger":
-        case "named-trigger-measure":
-          return cachedNamedTriggerWidths.current[target.id];
-        case "shared-trigger-measure":
-          return cachedSharedTriggerWidths.current[target.groupKey];
-      }
-    },
-    []
-  );
-  const setCachedWidthForObservedTarget = useCallback(
-    (target, width) => {
-      switch (target.kind) {
-        case "item":
-          cachedItemWidths.current[target.id] = width;
-          return;
-        case "named-trigger":
-        case "named-trigger-measure":
-          cachedNamedTriggerWidths.current[target.id] = width;
-          return;
-        case "shared-trigger-measure":
-          cachedSharedTriggerWidths.current[target.groupKey] = width;
-          return;
-      }
-    },
-    []
-  );
-  const observeWidthTarget = useCallback(
-    (node, target) => {
-      var _a;
-      if (!node) {
-        return;
-      }
-      observedWidthTargetsRef.current.set(node, target);
-      (_a = resizeObserverRef.current) == null ? void 0 : _a.observe(node);
-    },
-    []
-  );
-  const unobserveWidthTarget = useCallback((node) => {
-    var _a;
-    if (!node) {
-      return;
-    }
-    observedWidthTargetsRef.current.delete(node);
-    (_a = resizeObserverRef.current) == null ? void 0 : _a.unobserve(node);
-  }, []);
-  const updateObservedNode = useCallback(
-    (nodes, key, node, target) => {
-      const previous = nodes[key];
-      if (previous === node) {
-        return;
-      }
-      if (previous) {
-        unobserveWidthTarget(previous);
-      }
-      nodes[key] = node;
-      if (node) {
-        observeWidthTarget(node, target);
-      }
-    },
-    [observeWidthTarget, unobserveWidthTarget]
-  );
-  useIsomorphicLayoutEffect(() => {
-    scheduleMeasure();
-  }, [scheduleMeasure]);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    let cancelled = false;
-    const win = ownerWindow(container);
-    const resizeObserver = new win.ResizeObserver((entries) => {
-      let shouldMeasure = false;
-      for (const entry of entries) {
-        const target = observedWidthTargetsRef.current.get(entry.target);
-        if (!target) {
-          continue;
-        }
-        if (target.kind === "container") {
-          shouldMeasure = true;
-          continue;
-        }
-        const nextWidth = target.kind === "item" ? measureOverflowItemWidth(entry.target) : measureWidth(entry.target);
-        if (nextWidth <= 0) {
-          continue;
-        }
-        const previousWidth = getCachedWidthForObservedTarget(target);
-        if (previousWidth !== nextWidth) {
-          setCachedWidthForObservedTarget(target, nextWidth);
-          shouldMeasure = true;
-        }
-      }
-      if (shouldMeasure) {
-        scheduleMeasureRef.current();
-      }
-    });
-    resizeObserverRef.current = resizeObserver;
-    observeWidthTarget(container, { kind: "container" });
-    for (const node of observedWidthTargetsRef.current.keys()) {
-      resizeObserver.observe(node);
-    }
-    if (win.document.fonts) {
-      void win.document.fonts.ready.then(() => {
-        if (!cancelled) {
-          scheduleMeasureRef.current();
-        }
-      });
-    }
-    return () => {
-      cancelled = true;
-      resizeObserverRef.current = null;
-      resizeObserver.disconnect();
-      if (rafRef.current != null) {
-        win.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      if (clearComputingRafRef.current != null) {
-        win.cancelAnimationFrame(clearComputingRafRef.current);
-        clearComputingRafRef.current = null;
-      }
-      isComputingRef.current = false;
-      pendingMeasureRef.current = false;
-    };
-  }, [
-    getCachedWidthForObservedTarget,
-    observeWidthTarget,
-    setCachedWidthForObservedTarget
-  ]);
-  const getItemRef = useCallback(
-    (id) => {
-      const existing = itemRefCallbacks.current.get(id);
-      if (existing) {
-        return existing;
-      }
-      const callback = (node) => {
-        updateObservedNode(itemRefs.current, id, node, {
-          id,
-          kind: "item"
-        });
-      };
-      itemRefCallbacks.current.set(id, callback);
-      return callback;
-    },
-    [updateObservedNode]
-  );
-  const getNamedTriggerRef = useCallback(
-    (id) => {
-      const existing = namedTriggerRefCallbacks.current.get(id);
-      if (existing) {
-        return existing;
-      }
-      const callback = (node) => {
-        updateObservedNode(namedTriggerRefs.current, id, node, {
-          id,
-          kind: "named-trigger"
-        });
-      };
-      namedTriggerRefCallbacks.current.set(id, callback);
-      return callback;
-    },
-    [updateObservedNode]
-  );
-  const getNamedTriggerMeasureRef = useCallback(
-    (id) => {
-      const existing = namedTriggerMeasureCallbacks.current.get(id);
-      if (existing) {
-        return existing;
-      }
-      const callback = (node) => {
-        updateObservedNode(namedTriggerMeasureRefs.current, id, node, {
-          id,
-          kind: "named-trigger-measure"
-        });
-      };
-      namedTriggerMeasureCallbacks.current.set(id, callback);
-      return callback;
-    },
-    [updateObservedNode]
-  );
-  const getContentRef = useCallback((contentKey) => {
-    const existing = contentRefCallbacks.current.get(contentKey);
-    if (existing) {
-      return existing;
-    }
-    const callback = (node) => {
-      contentRefs.current[contentKey] = node;
-    };
-    contentRefCallbacks.current.set(contentKey, callback);
-    return callback;
-  }, []);
-  const getBandRef = useCallback((position) => {
-    const existing = bandRefCallbacks.current.get(position);
-    if (existing) {
-      return existing;
-    }
-    const callback = (node) => {
-      bandRefs.current[position] = node;
-    };
-    bandRefCallbacks.current.set(position, callback);
-    return callback;
-  }, []);
-  const getTriggerMeasureRef = useCallback(
-    (groupKey) => {
-      const existing = triggerMeasureCallbacks.current.get(groupKey);
-      if (existing) {
-        return existing;
-      }
-      const callback = (node) => {
-        updateObservedNode(triggerMeasureRefs.current, groupKey, node, {
-          groupKey,
-          kind: "shared-trigger-measure"
-        });
-      };
-      triggerMeasureCallbacks.current.set(groupKey, callback);
-      return callback;
-    },
-    [updateObservedNode]
-  );
-  return {
-    containerRef,
-    getBandRef,
-    getItemRef,
-    getNamedTriggerMeasureRef,
-    getNamedTriggerRef,
-    getContentRef,
-    getTriggerMeasureRef,
-    isOverflowing: overflowState.overflowGroups.length > 0,
-    overflowGroups: overflowState.overflowGroups,
-    overflowedIds: overflowState.overflowedIds,
-    overflowTriggerGroups: groupDefinitions
-  };
-}
-
-export { useToolbarNextOverflow };
-//# sourceMappingURL=useToolbarNextOverflow.js.map