@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

package/dist/esm/components/embeds/embed-draggable.d.ts

@@ -1,26 +1,46 @@
 import type { CellInterface } from "@rowsncolumns/grid";
 import React from "react";
 import type { DraggableBounds } from "react-draggable";
-type EmbedDraggableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "onResize" | "children"> & {
+type EmbedDraggableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "onResize" | "children" | "onCopy" | "onCut" | "onPaste" | "onDoubleClick"> & {
     id: string | number;
     height: number;
     width: number;
     offsetXPixels: number;
     offsetYPixels: number;
+    /**
+     * Second anchor of a "Move and size with cells" object: the cell its
+     * bottom-right corner sits in plus the pixel offsets into it. When set the
+     * frame spans the two anchors, so a column / row resize between them
+     * stretches it; `width` / `height` are the fallback size.
+     */
+    toCell?: CellInterface;
+    toOffsetXPixels?: number;
+    toOffsetYPixels?: number;
     isSelected: boolean;
     borderColor?: string;
     lockAspectRatio?: boolean;
+    /**
+     * Stacking rank among the sheet's floating objects (1 = back-most); the
+     * selected object is lifted above every unselected one.
+     */
+    zIndex?: number;
+    /**
+     * Rectangle (grid pixel space) the object must stay inside — the sheet
+     * body. Drags, nudges and resizes are clamped so no edge leaves it.
+     */
     bounds?: DraggableBounds;
     scale?: number;
     resizable?: boolean;
     draggable?: boolean;
     rotatable?: boolean;
     /**
-     * Callback when user moves an embed
+     * Callback when user moves an embed. `width` / `height` are the frame's
+     * on-screen size (grid pixel space), so the host can re-anchor its
+     * bottom-right corner too.
      * @param top
      * @param left
      */
-    onMove?(id: string | number, x: number, y: number): void;
+    onMove?(id: string | number, x: number, y: number, width: number, height: number): void;
     /**
      * Callback when user resizes
      * @param width
@@ -32,12 +52,49 @@ type EmbedDraggableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "on
      * @param id
      */
     onDelete?(id: string | number): void;
+    /**
+     * Ctrl/Cmd + D while the embed has focus
+     * @param id
+     */
+    onDuplicate?(id: string | number): void;
+    /**
+     * Clipboard events while the embed has focus (the grid's cell editor
+     * never sees them — the focused embed is their target)
+     */
+    onCopy?(id: string | number, e: React.ClipboardEvent<HTMLDivElement>): void;
+    onCut?(id: string | number, e: React.ClipboardEvent<HTMLDivElement>): void;
+    onPaste?(id: string | number, e: React.ClipboardEvent<HTMLDivElement>): void;
+    /**
+     * Escape: drop the selection and hand focus back to the grid
+     * @param id
+     */
+    onDeselect?(id: string | number): void;
+    /**
+     * Double-click on the object (Excel opens the format pane; the chart
+     * editor here)
+     * @param id
+     */
+    onDoubleClick?(id: string | number): void;
+    /**
+     * Snap a point (grid pixel space) to the nearest cell corner. Alt-drag / Alt-resize
+     * snap through this; without it the modifier is inert.
+     */
+    snapToGrid?(x: number, y: number): {
+        x: number;
+        y: number;
+    } | undefined;
+    /**
+     * Right-click, Shift+F10 or the ContextMenu key on the object. Receives
+     * the viewport point the menu should open at and the object's element, so
+     * the host can return focus to it once the menu closes.
+     */
+    onRequestContextMenu?(id: string | number, clientX: number, clientY: number, element: HTMLDivElement): void;
     /**
      * Anchor cell
      */
     anchorCell: CellInterface;
     children: (width: number, height: number) => React.ReactNode;
 };
-export declare const EmbedDraggable: ({ id, scale, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, resizable, draggable, children, onMove, onResize, onDelete, onMouseMove, onPointerDown, bounds, anchorCell, }: EmbedDraggableProps) => React.JSX.Element;
+export declare const EmbedDraggable: ({ id, scale, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, zIndex, resizable, draggable, children, onMove, onResize, onDelete, onDuplicate, onCopy, onCut, onPaste, onDeselect, onDoubleClick, snapToGrid, onRequestContextMenu, onMouseMove, onPointerDown, bounds, anchorCell, toCell, toOffsetXPixels, toOffsetYPixels, }: EmbedDraggableProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=embed-draggable.d.ts.map

package/dist/esm/components/embeds/embed-draggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed-draggable.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,iBAAiB,CAAC;AAOzB,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,IAAI,GAAG,UAAU,GAAG,UAAU,CAC/B,GAAG;IACF,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,CACP,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,IAAI,CAAC;IACR;;;OAGG;IACH,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D,CAAC;AAoBF,eAAO,MAAM,cAAc,GAAI,mNAoB5B,mBAAmB,sBA0KrB,CAAC"}
+{"version":3,"file":"embed-draggable.d.ts","sourceRoot":"","sources":["../../../../components/embeds/embed-draggable.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/embeds/embed-draggable.js

@@ -1,9 +1,29 @@
-import { useGridContext } from "@rowsncolumns/grid";
+import { getOwnerDocument, useGridContext } from "@rowsncolumns/grid";
 import { cn } from "@rowsncolumns/ui";
 import React, { useCallback, useRef, useState } from "react";
-import Draggable from "react-draggable";
+import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
 import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+/** Lifts the selected object over every unselected one (ranks count from 1 per object). */
+const SELECTED_Z_INDEX_LIFT = 100_000;
+const ARROW_KEY_DELTAS = {
+    ArrowLeft: [-1, 0],
+    ArrowRight: [1, 0],
+    ArrowUp: [0, -1],
+    ArrowDown: [0, 1],
+};
+/** Excel nudges a selected object 1px per arrow press; Shift makes it a coarse step. */
+const NUDGE_STEP = 1;
+const NUDGE_STEP_SHIFT = 10;
+/** Corner handles are two letters ("ne"); edge handles one ("n"). */
+const isCornerHandle = (handle) => handle.length === 2;
+/** Top-left corner that keeps a `width` × `height` object inside `bounds`; the top-left edges win when it does not fit. */
+const clampToBounds = (x, y, width, height, bounds) => ({
+    x: Math.max(bounds?.left ?? -Infinity, Math.min((bounds?.right ?? Infinity) - width, x)),
+    y: Math.max(bounds?.top ?? -Infinity, Math.min((bounds?.bottom ?? Infinity) - height, y)),
+});
+/** Clamp one edge of a resize into `[min, max]`. */
+const clampEdge = (value, min, max) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));
 const resizeHandles = [
     "se",
     "n",
@@ -14,11 +34,18 @@ const resizeHandles = [
     "nw",
     "sw",
 ];
-export const EmbedDraggable = ({ id, scale = 1, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, resizable = true, draggable = true, children, onMove, onResize, onDelete, onMouseMove, onPointerDown, bounds, anchorCell, }) => {
+export const EmbedDraggable = ({ id, scale = 1, height, width, offsetXPixels, offsetYPixels, isSelected, borderColor, lockAspectRatio, zIndex, resizable = true, draggable = true, children, onMove, onResize, onDelete, onDuplicate, onCopy, onCut, onPaste, onDeselect, onDoubleClick, snapToGrid, onRequestContextMenu, onMouseMove, onPointerDown, bounds, anchorCell, toCell, toOffsetXPixels = 0, toOffsetYPixels = 0, }) => {
     const { getCellOffsetFromCoords } = useGridContext();
     const position = getCellOffsetFromCoords?.(anchorCell);
     const x = (position?.x ?? 0) + offsetXPixels;
     const y = (position?.y ?? 0) + offsetYPixels;
+    // Two anchors: the frame is whatever lies between them (a collapsed span
+    // after a delete draws nothing rather than a negative box)
+    const toPosition = toCell ? getCellOffsetFromCoords?.(toCell) : undefined;
+    if (toPosition) {
+        width = Math.max(0, toPosition.x + toOffsetXPixels - x);
+        height = Math.max(0, toPosition.y + toOffsetYPixels - y);
+    }
     const [dimensions, setDimensions] = useState(() => ({
         internalWidth: width,
         internalHeight: height,
@@ -28,58 +55,153 @@ export const EmbedDraggable = ({ id, scale = 1, height, width, offsetXPixels, of
     const { internalWidth, internalHeight, internalX, internalY } = dimensions;
     const incomingDimensionRef = useRef(undefined);
     const nodeRef = useRef(null);
+    // Geometry currently on screen — what the end-of-gesture callbacks report, independent of
+    // whether the last `setDimensions` has rendered yet.
+    const appliedRef = useRef(dimensions);
+    // Where the pointer would have put the object with no snapping. The displayed geometry is
+    // derived from it on every event, so a snap never feeds back into the next pointer delta.
+    const gestureRef = useRef(dimensions);
+    // Shift on a corner handle keeps the aspect ratio for the rest of the gesture
+    const [shiftLocksAspectRatio, setShiftLocksAspectRatio] = useState(false);
+    const commit = useCallback((next) => {
+        appliedRef.current = next;
+        setDimensions(next);
+    }, []);
     // Focus if selected index changes
     useIsomorphicLayoutEffect(() => {
-        if (isSelected && document.activeElement !== nodeRef.current) {
+        if (isSelected &&
+            getOwnerDocument(nodeRef.current)?.activeElement !== nodeRef.current) {
             nodeRef.current?.focus({ preventScroll: true });
         }
     }, [isSelected]);
-    // Handle move. Update internal state
-    const handleMove = useCallback((e, data) => {
-        setDimensions((prev) => ({
-            ...prev,
-            internalX: data.x,
-            internalY: data.y,
-        }));
+    // Starts moving
+    const handleMoveStart = useCallback((e) => {
+        gestureRef.current = { ...appliedRef.current };
+        if (e.altKey) {
+            // Alt+mousedown must not start a native selection / focus change
+            e.preventDefault();
+        }
     }, []);
+    // Handle move. Update internal state; Alt snaps the top-left corner to the cell grid
+    const handleMove = useCallback((e, data) => {
+        const raw = gestureRef.current;
+        raw.internalX += data.deltaX;
+        raw.internalY += data.deltaY;
+        const { internalWidth, internalHeight } = appliedRef.current;
+        let next = clampToBounds(raw.internalX, raw.internalY, internalWidth, internalHeight, bounds);
+        if (e.altKey && snapToGrid) {
+            const snapped = snapToGrid(next.x, next.y);
+            if (snapped) {
+                next = clampToBounds(snapped.x, snapped.y, internalWidth, internalHeight, bounds);
+            }
+        }
+        commit({ ...appliedRef.current, internalX: next.x, internalY: next.y });
+    }, [bounds, snapToGrid, commit]);
     // Ends moving
-    const handleMoveEnd = useCallback((e, data) => {
-        if (incomingDimensionRef.current?.x === data.x &&
-            incomingDimensionRef.current?.y === data.y) {
+    const handleMoveEnd = useCallback(() => {
+        const { internalX, internalY, internalWidth, internalHeight } = appliedRef.current;
+        if (incomingDimensionRef.current?.x === internalX &&
+            incomingDimensionRef.current?.y === internalY) {
             return;
         }
-        onMove?.(id, data.x, data.y);
+        onMove?.(id, internalX, internalY, internalWidth, internalHeight);
     }, [onMove, id]);
-    // Resizing: Update internal state
+    // Arrow keys nudge the object by whole pixels, clamped like a drag is
+    const handleNudge = useCallback((dx, dy) => {
+        const { x: nextX, y: nextY } = clampToBounds(internalX + dx, internalY + dy, internalWidth, internalHeight, bounds);
+        if (nextX === internalX && nextY === internalY) {
+            return;
+        }
+        commit({ ...appliedRef.current, internalX: nextX, internalY: nextY });
+        onMove?.(id, nextX, nextY, internalWidth, internalHeight);
+    }, [
+        bounds,
+        internalX,
+        internalY,
+        internalWidth,
+        internalHeight,
+        onMove,
+        id,
+        commit,
+    ]);
+    // Starts resizing
+    const handleResizeStart = useCallback((e, { handle }) => {
+        gestureRef.current = { ...appliedRef.current };
+        setShiftLocksAspectRatio(isCornerHandle(handle) && Boolean(e.shiftKey));
+    }, []);
+    // Resizing: Update internal state; Alt snaps the dragged edges to the cell grid
     const handleResize = useCallback((e, { size, handle }) => {
-        setDimensions((prev) => {
-            let internalY = prev.internalY;
-            let internalX = prev.internalX;
-            const deltaHeight = size.height - prev.internalHeight;
-            const deltaWidth = size.width - prev.internalWidth;
-            if (handle[0] === "n") {
-                internalY -= deltaHeight;
+        const { altKey, shiftKey } = e;
+        setShiftLocksAspectRatio(isCornerHandle(handle) && Boolean(shiftKey));
+        // `size` is the rendered size (`dimensions`) plus this event's pointer delta
+        const deltaHeight = size.height - dimensions.internalHeight;
+        const deltaWidth = size.width - dimensions.internalWidth;
+        const raw = gestureRef.current;
+        const movesTop = handle[0] === "n";
+        const movesLeft = handle[handle.length - 1] === "w";
+        raw.internalWidth += deltaWidth;
+        raw.internalHeight += deltaHeight;
+        if (movesTop) {
+            raw.internalY -= deltaHeight;
+        }
+        if (movesLeft) {
+            raw.internalX -= deltaWidth;
+        }
+        const movesRight = handle[handle.length - 1] === "e";
+        const movesBottom = handle[0] === "s";
+        // The dragged edges stop at the sheet body; the opposite edges never move
+        const rawRight = raw.internalX + raw.internalWidth;
+        const rawBottom = raw.internalY + raw.internalHeight;
+        let left = movesLeft
+            ? clampEdge(raw.internalX, bounds?.left, undefined)
+            : raw.internalX;
+        let top = movesTop
+            ? clampEdge(raw.internalY, bounds?.top, undefined)
+            : raw.internalY;
+        let right = movesRight
+            ? clampEdge(rawRight, undefined, bounds?.right)
+            : rawRight;
+        let bottom = movesBottom
+            ? clampEdge(rawBottom, undefined, bounds?.bottom)
+            : rawBottom;
+        if (altKey && snapToGrid) {
+            const snappedLeft = movesLeft ? snapToGrid(left, top)?.x : undefined;
+            const snappedRight = movesRight ? snapToGrid(right, top)?.x : undefined;
+            const snappedTop = movesTop ? snapToGrid(left, top)?.y : undefined;
+            const snappedBottom = movesBottom
+                ? snapToGrid(left, bottom)?.y
+                : undefined;
+            // A snap that would collapse the object keeps the unsnapped edge
+            if (snappedLeft !== undefined && snappedLeft < right) {
+                left = snappedLeft;
+            }
+            if (snappedRight !== undefined && snappedRight > left) {
+                right = snappedRight;
+            }
+            if (snappedTop !== undefined && snappedTop < bottom) {
+                top = snappedTop;
             }
-            if (handle[handle.length - 1] === "w") {
-                internalX -= deltaWidth;
+            if (snappedBottom !== undefined && snappedBottom > top) {
+                bottom = snappedBottom;
             }
-            return {
-                ...prev,
-                internalX,
-                internalY,
-                internalHeight: size.height,
-                internalWidth: size.width,
-            };
+        }
+        commit({
+            internalX: left,
+            internalY: top,
+            internalWidth: right - left,
+            internalHeight: bottom - top,
         });
-    }, []);
+    }, [dimensions, snapToGrid, commit]);
     // Resize ends
-    const handleResizeEnd = useCallback((e, { size }) => {
-        if (incomingDimensionRef.current?.width === size.width &&
-            incomingDimensionRef.current?.height === size.height) {
+    const handleResizeEnd = useCallback(() => {
+        setShiftLocksAspectRatio(false);
+        const { internalX, internalY, internalWidth, internalHeight } = appliedRef.current;
+        if (incomingDimensionRef.current?.width === internalWidth &&
+            incomingDimensionRef.current?.height === internalHeight) {
             return;
         }
-        onResize?.(id, dimensions.internalX, dimensions.internalY, size.width / scale, size.height / scale);
-    }, [onResize, id, scale, dimensions]);
+        onResize?.(id, internalX, internalY, internalWidth / scale, internalHeight / scale);
+    }, [onResize, id, scale]);
     // When state is saved, update internal state
     useIsomorphicLayoutEffect(() => {
         incomingDimensionRef.current = {
@@ -88,28 +210,66 @@ export const EmbedDraggable = ({ id, scale = 1, height, width, offsetXPixels, of
             width,
             height,
         };
-        setDimensions({
+        commit({
             internalX: x,
             internalY: y,
             internalHeight: height,
             internalWidth: width,
         });
-    }, [width, height, x, y]);
-    return (React.createElement(Draggable, { nodeRef: nodeRef, position: {
-            x: internalX,
-            y: internalY,
-        }, bounds: bounds, onDrag: handleMove, onStop: handleMoveEnd, cancel: ".react-resizable-handle, .rnc-draggable-ignore, .plot-container .draglayer", scale: 1, disabled: !draggable },
-        React.createElement(Resizable, { width: internalWidth, height: internalHeight, onResize: handleResize, onResizeStop: handleResizeEnd, lockAspectRatio: lockAspectRatio, resizeHandles: resizable ? resizeHandles : [] },
+    }, [width, height, x, y, commit]);
+    return (React.createElement(DraggableCore, { nodeRef: nodeRef, onStart: handleMoveStart, onDrag: handleMove, onStop: handleMoveEnd, cancel: ".react-resizable-handle, .rnc-draggable-ignore", scale: 1, disabled: !draggable },
+        React.createElement(Resizable, { width: internalWidth, height: internalHeight, onResizeStart: handleResizeStart, onResize: handleResize, onResizeStop: handleResizeEnd, lockAspectRatio: lockAspectRatio || shiftLocksAspectRatio, resizeHandles: resizable ? resizeHandles : [] },
             React.createElement("div", { className: cn("text-rnc-foreground text-sm pointer-events-auto border border-solid border-transparent flex select-none box-content absolute rnc-embed-component outline-none", isSelected ? "[&_.react-resizable-handle]:bg-[#1a73e8]" : undefined, isSelected ? "rnc-embed-active" : undefined), style: {
                     width: internalWidth,
                     height: internalHeight,
+                    transform: `translate(${internalX}px, ${internalY}px)`,
                     borderColor,
-                    zIndex: isSelected ? 1 : undefined,
+                    zIndex: isSelected
+                        ? (zIndex ?? 0) + SELECTED_Z_INDEX_LIFT
+                        : zIndex,
                 }, tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Backspace" || e.key === "Delete") {
                         onDelete?.(id);
+                        return;
+                    }
+                    if ((e.metaKey || e.ctrlKey) &&
+                        !e.altKey &&
+                        !e.shiftKey &&
+                        e.key.toLowerCase() === "d" &&
+                        onDuplicate) {
+                        e.preventDefault();
+                        onDuplicate(id);
+                        return;
                     }
-                }, ref: nodeRef, onMouseMove: onMouseMove, onPointerDown: onPointerDown, onContextMenu: (e) => {
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        onDeselect?.(id);
+                        return;
+                    }
+                    if (e.key === "Alt") {
+                        // Alt is a snap modifier here; keep it from opening the browser menu bar
+                        e.preventDefault();
+                        return;
+                    }
+                    const delta = ARROW_KEY_DELTAS[e.key];
+                    if (delta && draggable) {
+                        // The grid must not scroll while the object is being nudged
+                        e.preventDefault();
+                        const step = e.shiftKey ? NUDGE_STEP_SHIFT : NUDGE_STEP;
+                        handleNudge(delta[0] * step, delta[1] * step);
+                        return;
+                    }
+                    if (e.key === "ContextMenu" || (e.key === "F10" && e.shiftKey)) {
+                        e.preventDefault();
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        onRequestContextMenu?.(id, rect.left, rect.top, e.currentTarget);
+                    }
+                }, onCopy: onCopy ? (e) => onCopy(id, e) : undefined, onCut: onCut ? (e) => onCut(id, e) : undefined, onPaste: onPaste ? (e) => onPaste(id, e) : undefined, ref: nodeRef, onMouseMove: onMouseMove, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick ? () => onDoubleClick(id) : undefined, onContextMenu: (e) => {
                     e.stopPropagation();
+                    if (!onRequestContextMenu) {
+                        return;
+                    }
+                    e.preventDefault();
+                    onRequestContextMenu(id, e.clientX, e.clientY, e.currentTarget);
                 } }, children(internalWidth, internalHeight)))));
 };

package/dist/esm/components/filter-box/date-tree.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Excel groups a date column's AutoFilter checklist into a Year → Month → Day
+ * tree with tri-state parents. The checklist only knows each cell's DISPLAYED
+ * text, so a value is treated as a date when it parses as one AND looks like
+ * one — digits separated by `/ - .` or a month name — which keeps plain
+ * numbers ("2026") and text out. The tree is built only when every non-blank
+ * value in the column is such a date (a mixed column stays a flat list, as a
+ * text column would). Newest first at every level, matching Excel.
+ */
+export type DateTreeNode = {
+    /** Stable key: `y:2026`, `m:2026-09`, `d:2026-09-29`. */
+    key: string;
+    label: string;
+    /** Every checklist value (display text) under this node. */
+    values: string[];
+    children?: DateTreeNode[];
+};
+/** The calendar date a checklist value displays, or `undefined` when it is not a date. */
+export declare const parseFilterDateValue: (value: string) => Date | undefined;
+/**
+ * Year → Month → Day nodes for `values`, or `undefined` when the column is
+ * not a date column. `blankLabel` (the "(Blanks)" entry) is skipped; callers
+ * render it beside the tree.
+ */
+export declare const buildDateTree: (values: readonly string[], blankLabel: string) => DateTreeNode[] | undefined;
+/** `true` all checked, `false` none, `"mixed"` some — the tri-state of a node or the whole list. */
+export declare const triState: (values: readonly string[], isVisible: (value: string) => boolean) => boolean | "mixed";
+//# sourceMappingURL=date-tree.d.ts.map

package/dist/esm/components/filter-box/date-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-tree.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/date-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B,CAAC;AAqBF,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,SAS3D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,SAAS,MAAM,EAAE,EACzB,YAAY,MAAM,KACjB,YAAY,EAAE,GAAG,SAgDnB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,QAAQ,GACnB,QAAQ,SAAS,MAAM,EAAE,EACzB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,KACpC,OAAO,GAAG,OAOZ,CAAC"}

package/dist/esm/components/filter-box/date-tree.js

@@ -0,0 +1,107 @@
+/**
+ * Excel groups a date column's AutoFilter checklist into a Year → Month → Day
+ * tree with tri-state parents. The checklist only knows each cell's DISPLAYED
+ * text, so a value is treated as a date when it parses as one AND looks like
+ * one — digits separated by `/ - .` or a month name — which keeps plain
+ * numbers ("2026") and text out. The tree is built only when every non-blank
+ * value in the column is such a date (a mixed column stays a flat list, as a
+ * text column would). Newest first at every level, matching Excel.
+ */
+const MIN_YEAR = 1900;
+const MAX_YEAR = 2199;
+const DATE_SHAPE = /(\d[/.\-]\d)|([A-Za-z]{3,}.*\d)|(\d.*[A-Za-z]{3,})/;
+const MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+/** The calendar date a checklist value displays, or `undefined` when it is not a date. */
+export const parseFilterDateValue = (value) => {
+    const trimmed = value.trim();
+    if (!trimmed || !DATE_SHAPE.test(trimmed))
+        return undefined;
+    const parsed = new Date(trimmed);
+    const time = parsed.getTime();
+    if (Number.isNaN(time))
+        return undefined;
+    const year = parsed.getFullYear();
+    if (year < MIN_YEAR || year > MAX_YEAR)
+        return undefined;
+    return parsed;
+};
+/**
+ * Year → Month → Day nodes for `values`, or `undefined` when the column is
+ * not a date column. `blankLabel` (the "(Blanks)" entry) is skipped; callers
+ * render it beside the tree.
+ */
+export const buildDateTree = (values, blankLabel) => {
+    const dated = [];
+    for (const value of values) {
+        if (value === blankLabel)
+            continue;
+        const date = parseFilterDateValue(value);
+        if (!date)
+            return undefined;
+        dated.push({ value, date });
+    }
+    if (!dated.length)
+        return undefined;
+    const years = new Map();
+    for (const { value, date } of dated) {
+        const y = date.getFullYear();
+        const m = date.getMonth();
+        const d = date.getDate();
+        const months = years.get(y) ?? new Map();
+        years.set(y, months);
+        const days = months.get(m) ?? new Map();
+        months.set(m, days);
+        const bucket = days.get(d) ?? [];
+        days.set(d, bucket);
+        if (!bucket.includes(value))
+            bucket.push(value);
+    }
+    const desc = (a, b) => b - a;
+    return [...years.keys()].sort(desc).map((y) => {
+        const months = years.get(y);
+        const monthNodes = [...months.keys()].sort(desc).map((m) => {
+            const days = months.get(m);
+            const dayNodes = [...days.keys()].sort(desc).map((d) => ({
+                key: `d:${y}-${m + 1}-${d}`,
+                label: String(d),
+                values: days.get(d),
+            }));
+            return {
+                key: `m:${y}-${m + 1}`,
+                label: MONTH_NAMES[m],
+                values: dayNodes.flatMap((node) => node.values),
+                children: dayNodes,
+            };
+        });
+        return {
+            key: `y:${y}`,
+            label: String(y),
+            values: monthNodes.flatMap((node) => node.values),
+            children: monthNodes,
+        };
+    });
+};
+/** `true` all checked, `false` none, `"mixed"` some — the tri-state of a node or the whole list. */
+export const triState = (values, isVisible) => {
+    let checked = 0;
+    for (const value of values) {
+        if (isVisible(value))
+            checked++;
+    }
+    if (checked === 0)
+        return values.length === 0 ? true : false;
+    return checked === values.length ? true : "mixed";
+};

package/dist/esm/components/filter-box/filter-by-condition.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
-import type { ConditionType } from "../../types";
+import type { ConditionType, FilterConditionJoin } from "../../types";
+/** Excel's "Top 10…" AutoFilter: the four `NUMBER_TOP_*` / `NUMBER_BOTTOM_*` condition types. */
+export declare const isTop10ConditionType: (type: ConditionType | undefined) => type is "NUMBER_TOP_N" | "NUMBER_BOTTOM_N" | "NUMBER_TOP_PERCENT" | "NUMBER_BOTTOM_PERCENT";
+export declare const top10ConditionType: (direction: "top" | "bottom", unit: "items" | "percent") => ConditionType;
 type FilterByConditionProps = {
     conditionType?: ConditionType;
     fromValue: string;
@@ -7,7 +10,16 @@ type FilterByConditionProps = {
     onChangeFromValue(value: string): void;
     onChangeToValue(value: string): void;
     onChangeConditionType?(type: ConditionType | undefined): void;
+    /** Excel's Custom AutoFilter second clause and its And / Or join. */
+    condition2Type?: ConditionType;
+    condition2From: string;
+    condition2To: string;
+    conditionJoin: FilterConditionJoin;
+    onChangeCondition2Type(type: ConditionType | undefined): void;
+    onChangeCondition2From(value: string): void;
+    onChangeCondition2To(value: string): void;
+    onChangeConditionJoin(join: FilterConditionJoin): void;
 };
-export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, }: FilterByConditionProps) => React.JSX.Element;
+export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, onChangeConditionJoin, }: FilterByConditionProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=filter-by-condition.d.ts.map

package/dist/esm/components/filter-box/filter-by-condition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-by-condition.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-condition.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,qBAAqB,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,mGAO/B,sBAAsB,sBA2ExB,CAAC"}
+{"version":3,"file":"filter-by-condition.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-condition.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEtE,iGAAiG;AACjG,eAAO,MAAM,oBAAoB,GAAI,MAAM,aAAa,GAAG,SAAS,gGAIlC,CAAC;AAEnC,eAAO,MAAM,kBAAkB,GAC7B,WAAW,KAAK,GAAG,QAAQ,EAC3B,MAAM,OAAO,GAAG,SAAS,KACxB,aAO4B,CAAC;AAchC,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,qBAAqB,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9D,qEAAqE;IACrE,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,mBAAmB,CAAC;IACnC,sBAAsB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9D,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,qBAAqB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACxD,CAAC;AAsKF,eAAO,MAAM,iBAAiB,GAAI,6PAe/B,sBAAsB,sBAuFxB,CAAC"}