@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-WWZZRB7H.mjs

@@ -0,0 +1,121 @@
+// src/utils/overlay-trigger.tsx
+import { cloneElement, isValidElement } from "react";
+import {
+  classNames,
+  shouldMergeOverlayTriggerChild
+} from "@expcat/tigercat-core";
+import { jsxs } from "react/jsx-runtime";
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ;
+        ref.current = node;
+      }
+    }
+  };
+}
+function composeEventHandlers(theirs, ours) {
+  if (!theirs) return ours;
+  if (!ours) return theirs;
+  return (event) => {
+    theirs(event);
+    if (event.defaultPrevented) return;
+    ours(event);
+  };
+}
+function getElementRef(element) {
+  const props = element.props;
+  return props.ref ?? element.ref;
+}
+function renderOverlayTrigger(options) {
+  const {
+    asChild,
+    child,
+    triggerRef,
+    className,
+    disabled,
+    extraChildren,
+    aria,
+    handlers,
+    preventDefaultOnClick
+  } = options;
+  const mergeable = isValidElement(child) && shouldMergeOverlayTriggerChild(asChild, child.type);
+  const onClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (preventDefaultOnClick) event.preventDefault();
+    handlers.onClick?.(event);
+  };
+  if (mergeable && isValidElement(child)) {
+    const childProps = child.props;
+    const childDisabled = Boolean(childProps.disabled) || disabled;
+    return cloneElement(child, {
+      ref: composeRefs(getElementRef(child), triggerRef),
+      className: classNames(childProps.className, className),
+      disabled: childDisabled || void 0,
+      ...aria,
+      onClick: composeEventHandlers(
+        childProps.onClick,
+        onClick
+      ),
+      onKeyDown: composeEventHandlers(
+        childProps.onKeyDown,
+        handlers.onKeyDown
+      ),
+      onMouseEnter: composeEventHandlers(
+        childProps.onMouseEnter,
+        handlers.onMouseEnter
+      ),
+      onMouseLeave: composeEventHandlers(
+        childProps.onMouseLeave,
+        handlers.onMouseLeave
+      ),
+      onFocus: composeEventHandlers(
+        childProps.onFocus,
+        handlers.onFocus
+      ),
+      onBlur: composeEventHandlers(
+        childProps.onBlur,
+        handlers.onBlur
+      ),
+      onContextMenu: composeEventHandlers(
+        childProps.onContextMenu,
+        handlers.onContextMenu
+      )
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      className,
+      disabled,
+      ...aria,
+      onClick,
+      onKeyDown: handlers.onKeyDown,
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseLeave: handlers.onMouseLeave,
+      onFocus: handlers.onFocus,
+      onBlur: handlers.onBlur,
+      onContextMenu: handlers.onContextMenu,
+      children: [
+        child,
+        extraChildren
+      ]
+    }
+  );
+}
+
+export {
+  composeRefs,
+  composeEventHandlers,
+  renderOverlayTrigger
+};

package/dist/chunk-X3KXJKLM.mjs

@@ -0,0 +1,297 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Splitter.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useId
+} from "react";
+import {
+  classNames,
+  devWarn,
+  formatSplitterGutterLabel,
+  getPaneStyle,
+  getSplitterContainerClasses,
+  getSplitterGutterClasses,
+  getSplitterGutterCssVars,
+  getSplitterGutterHandleClasses,
+  getSplitterGutterValueNow,
+  getSplitterKeyboardDelta,
+  getSplitterLabels,
+  getSplitterPointerDelta,
+  isSplitterRtl,
+  layoutPanePixels,
+  measureSplitterContainer,
+  panePixelsToRatios,
+  reconcileSplitterRatios,
+  resolveInitialPaneSizes,
+  resizePanes,
+  splitterPaneBaseClasses,
+  createDocumentDragSession
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function flattenSplitterPanes(children) {
+  const out = [];
+  React.Children.forEach(children, (child) => {
+    if (child == null || typeof child === "boolean") return;
+    if (typeof child === "string" || typeof child === "number") {
+      if (String(child).trim() !== "") out.push(child);
+      return;
+    }
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+      out.push(...flattenSplitterPanes(child.props.children));
+      return;
+    }
+    out.push(child);
+  });
+  return out;
+}
+var Splitter = forwardRef(function Splitter2({
+  direction = "horizontal",
+  sizes: controlledSizes,
+  min = 0,
+  max,
+  gutterSize = 4,
+  disabled = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  onSizesChange,
+  children,
+  dir,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const labels = getSplitterLabels(config.locale);
+  const rtl = isSplitterRtl(typeof dir === "string" ? dir : config.direction);
+  const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...domProps } = rest;
+  const panes = flattenSplitterPanes(children);
+  const paneCount = panes.length;
+  const instanceId = useId();
+  const containerRef = useRef(null);
+  const dragSessionRef = useRef(null);
+  const [containerSize, setContainerSize] = useState(0);
+  const [ratioState, setRatioState] = useState({
+    ratios: [],
+    sizesKey: void 0
+  });
+  const [draggingIndex, setDraggingIndex] = useState(-1);
+  const draggingRef = useRef(null);
+  const available = containerSize > 0 ? containerSize - Math.max(0, paneCount - 1) * gutterSize : 0;
+  const reconciled = reconcileSplitterRatios(ratioState, paneCount, controlledSizes, available);
+  if (reconciled !== ratioState) {
+    setRatioState(reconciled);
+  }
+  const ratios = reconciled.ratios;
+  const measured = containerSize > 0;
+  const paneSizes = measured ? layoutPanePixels(ratios, containerSize, gutterSize, min, max) : [];
+  if (controlledSizes && controlledSizes.length !== paneCount) {
+    devWarn(
+      "Splitter.sizes.length",
+      `Splitter sizes length (${controlledSizes.length}) does not match pane count (${paneCount}). Extra panes share remaining space.`
+    );
+  }
+  const setContainerNode = useCallback(
+    (node) => {
+      containerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const applyMeasure = useCallback(() => {
+    const size = measureSplitterContainer(containerRef.current, direction);
+    if (size > 0) setContainerSize(size);
+  }, [direction]);
+  useLayoutEffect(() => {
+    applyMeasure();
+  }, [applyMeasure, paneCount, direction]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => applyMeasure());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [applyMeasure]);
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
+  const mins = useMemo(() => Array.from({ length: paneCount }, () => min), [paneCount, min]);
+  const maxes = useMemo(() => Array.from({ length: paneCount }, () => max), [paneCount, max]);
+  const commitSizes = useCallback(
+    (nextPixels, index, phase) => {
+      setRatioState((prev) => ({
+        ratios: panePixelsToRatios(nextPixels),
+        sizesKey: prev.sizesKey
+      }));
+      onSizesChange?.(nextPixels);
+      onResize?.({ index, sizes: nextPixels });
+      if (phase === "end" || phase === "keyboard") {
+        onResizeEnd?.({ index, sizes: nextPixels });
+      }
+    },
+    [onResize, onResizeEnd, onSizesChange]
+  );
+  const currentPixels = useCallback(
+    (liveSize = containerSize) => {
+      if (liveSize > 0) {
+        return layoutPanePixels(ratios, liveSize, gutterSize, min, max);
+      }
+      return resolveInitialPaneSizes(paneCount, 0, gutterSize, controlledSizes, min, max) ?? [];
+    },
+    [containerSize, controlledSizes, gutterSize, max, min, paneCount, ratios]
+  );
+  const handlePointerDown = useCallback(
+    (index, e) => {
+      if (disabled || e.button !== 0) return;
+      e.preventDefault();
+      cleanupDragSession();
+      const liveSize = measureSplitterContainer(containerRef.current, direction);
+      if (liveSize > 0 && liveSize !== containerSize) setContainerSize(liveSize);
+      const startSizes = currentPixels(liveSize > 0 ? liveSize : containerSize);
+      draggingRef.current = {
+        index,
+        startX: e.clientX,
+        startY: e.clientY,
+        startSizes
+      };
+      setDraggingIndex(index);
+      onResizeStart?.({ index, sizes: startSizes });
+      dragSessionRef.current = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget,
+        lockAxis: direction === "horizontal" ? "x" : "y",
+        onMove: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (!drag) return;
+          const delta = getSplitterPointerDelta(
+            direction,
+            drag.startX,
+            drag.startY,
+            currentX,
+            currentY,
+            rtl
+          );
+          const newSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
+          if (newSizes) commitSizes(newSizes, drag.index, "move");
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (drag) {
+            const delta = getSplitterPointerDelta(
+              direction,
+              drag.startX,
+              drag.startY,
+              currentX,
+              currentY,
+              rtl
+            );
+            const finalSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
+            commitSizes(finalSizes, drag.index, "end");
+          }
+          draggingRef.current = null;
+          dragSessionRef.current = null;
+          setDraggingIndex(-1);
+        }
+      });
+    },
+    [
+      disabled,
+      direction,
+      rtl,
+      mins,
+      maxes,
+      cleanupDragSession,
+      onResizeStart,
+      commitSizes,
+      containerSize,
+      currentPixels
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (gutterIdx, e) => {
+      if (disabled) return;
+      const delta = getSplitterKeyboardDelta(e.key, direction, rtl);
+      if (delta == null) return;
+      e.preventDefault();
+      const newSizes = resizePanes(currentPixels(), gutterIdx, delta, mins, maxes);
+      if (newSizes) commitSizes(newSizes, gutterIdx, "keyboard");
+    },
+    [disabled, direction, rtl, mins, maxes, commitSizes, currentPixels]
+  );
+  const containerClasses = classNames(getSplitterContainerClasses(direction, className));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...domProps,
+      ref: setContainerNode,
+      className: containerClasses,
+      style: { ...style, ...getSplitterGutterCssVars(gutterSize) },
+      dir,
+      "data-direction": direction,
+      "aria-label": typeof ariaLabel === "string" ? ariaLabel : void 0,
+      "aria-labelledby": typeof ariaLabelledby === "string" ? ariaLabelledby : void 0,
+      children: panes.map((child, i) => {
+        const size = measured ? paneSizes[i] : null;
+        const paneStyle = getPaneStyle(size, direction, {
+          ratio: ratios[i] ?? 0,
+          measured
+        });
+        const paneId = `${instanceId}-pane-${i}`;
+        const isDragging = draggingIndex === i;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: paneId,
+              className: splitterPaneBaseClasses,
+              style: paneStyle,
+              "data-pane-index": i,
+              children: child
+            }
+          ),
+          i < panes.length - 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getSplitterGutterClasses(direction, !!isDragging, disabled),
+              role: "separator",
+              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+              "aria-controls": paneId,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": getSplitterGutterValueNow(measured ? paneSizes : [], i),
+              "aria-label": ariaLabelledby ? void 0 : formatSplitterGutterLabel(labels.gutterAriaLabel, i),
+              "aria-labelledby": typeof ariaLabelledby === "string" ? ariaLabelledby : void 0,
+              tabIndex: disabled ? -1 : 0,
+              "data-gutter-index": i,
+              onPointerDown: (e) => handlePointerDown(i, e),
+              onKeyDown: (e) => handleKeyDown(i, e),
+              children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction), "aria-hidden": "true" })
+            }
+          )
+        ] }, i);
+      })
+    }
+  );
+});
+Splitter.displayName = "Splitter";
+var Splitter_default = Splitter;
+
+export {
+  Splitter,
+  Splitter_default
+};