@salt-ds/lab 1.0.0-alpha.93 → 1.0.0-alpha.94

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

@@ -0,0 +1,743 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var react = require('react');
+var toolbarNextUtils = require('./toolbarNextUtils.js');
+
+const emptyOverflowState = {
+  overflowGroups: [],
+  overflowedIds: /* @__PURE__ */ new Set()
+};
+const bandPositions = ["start", "center", "end"];
+function measureWidth(element) {
+  if (!element) {
+    return 0;
+  }
+  const { width } = element.getBoundingClientRect();
+  return Math.ceil(width);
+}
+function isVisibleMeasurementElement(element) {
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+  const { width, height } = element.getBoundingClientRect();
+  const styles = core.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.ceil(Math.max(rect.width, right - left));
+}
+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 = toolbarNextUtils.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 (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 (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 = window.useWindow();
+  const items = react.useMemo(
+    () => content.flatMap((contentArea) => contentArea.items),
+    [content]
+  );
+  const containerRef = react.useRef(null);
+  const bandRefs = react.useRef({
+    start: null,
+    center: null,
+    end: null
+  });
+  const bandRefCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const contentRefs = react.useRef({});
+  const contentRefCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const itemRefs = react.useRef({});
+  const itemRefCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const namedTriggerRefs = react.useRef({});
+  const namedTriggerRefCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const namedTriggerMeasureRefs = react.useRef(
+    {}
+  );
+  const namedTriggerMeasureCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const triggerMeasureRefs = react.useRef(
+    {}
+  );
+  const triggerMeasureCallbacks = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const rafRef = react.useRef(null);
+  const clearComputingRafRef = react.useRef(null);
+  const isComputingRef = react.useRef(false);
+  const pendingMeasureRef = react.useRef(false);
+  const resizeObserverRef = react.useRef(null);
+  const observedWidthTargetsRef = react.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const cachedItemWidths = react.useRef({});
+  const cachedNamedTriggerWidths = react.useRef({});
+  const cachedSharedTriggerWidths = react.useRef({});
+  const [overflowState, setOverflowState] = react.useState(emptyOverflowState);
+  const namedTriggerItems = react.useMemo(
+    () => items.filter((item) => {
+      return item.overflowMode !== "none" && item.overflowGroup !== "shared";
+    }),
+    [items]
+  );
+  const groupDefinitions = react.useMemo(() => buildGroupDefinitions(items), [items]);
+  const collapseUnits = react.useMemo(() => buildCollapseUnits(items), [items]);
+  const computeOverflow = react.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return emptyOverflowState;
+    }
+    const containerStyles = core.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 = Math.floor(
+      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 = core.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 = core.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 = react.useRef(() => {
+  });
+  const scheduleMeasure = react.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]);
+  core.useIsomorphicLayoutEffect(() => {
+    scheduleMeasureRef.current = scheduleMeasure;
+    return () => {
+      scheduleMeasureRef.current = () => {
+      };
+    };
+  }, [scheduleMeasure]);
+  const getCachedWidthForObservedTarget = react.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 = react.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 = react.useCallback(
+    (node, target) => {
+      var _a;
+      if (!node) {
+        return;
+      }
+      observedWidthTargetsRef.current.set(node, target);
+      (_a = resizeObserverRef.current) == null ? void 0 : _a.observe(node);
+    },
+    []
+  );
+  const unobserveWidthTarget = react.useCallback((node) => {
+    var _a;
+    if (!node) {
+      return;
+    }
+    observedWidthTargetsRef.current.delete(node);
+    (_a = resizeObserverRef.current) == null ? void 0 : _a.unobserve(node);
+  }, []);
+  const updateObservedNode = react.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]
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    scheduleMeasure();
+  }, [scheduleMeasure]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    let cancelled = false;
+    const win = core.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 = react.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 = react.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 = react.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 = react.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 = react.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 = react.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
+  };
+}
+
+exports.useToolbarNextOverflow = useToolbarNextOverflow;
+//# sourceMappingURL=useToolbarNextOverflow.js.map