@crispy-seed/data-table 0.1.0

package/dist/column-menu-12s-BPE9N1gs.cjs

@@ -0,0 +1,427 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var DataTable12s = require('./DataTable-12s-8LMBtS2u.cjs');
+var domUtils = require('@seed-design/dom-utils');
+var Menu12s = require('./Menu-12s-Db_zr1AP.cjs');
+var segmentedControl = require('@seed-design/css/recipes/segmented-control');
+var reactPrimitive = require('@seed-design/react-primitive');
+var reactSegmentedControl = require('@seed-design/react-segmented-control');
+var columnLayout12s = require('./column-layout-12s-CTu5yT_D.cjs');
+var resize12s = require('./resize-12s-jQY-PX67.cjs');
+var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const { withProvider, withContext } = DataTable12s.createSlotRecipeContext(segmentedControl.segmentedControl);
+const SegmentedControlRoot = withProvider(reactSegmentedControl.SegmentedControl.Root, "root");
+const SegmentedControlIndicator = withContext(reactPrimitive.Primitive.div, "indicator");
+const SegmentedControlItem = withContext(reactSegmentedControl.SegmentedControl.Item, "item");
+const SegmentedControlItemHiddenInput = reactSegmentedControl.SegmentedControl.ItemHiddenInput;
+
+// Same fix as cells.tsx's `CheckboxCell`/editors.tsx's `CheckboxEditor` -- seed's
+// `CheckboxIndicator` needs a real icon for its `checked` prop (it renders exactly
+// what's passed there, nothing automatically); `checked={null}` here used to render an
+// empty box even once a value was actually checked. 12px, matching the row-selection
+// checkbox's own already-correct icon size (`DataTable.tsx`'s `SELECTION_ICON_SIZE`).
+const FILTER_CHECKED_ICON = /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconCheckmarkLine_default, {
+    size: 12
+});
+// Fix (bug report): karrot icons default to a 24px intrinsic `width`/`height`
+// SVG ATTRIBUTE (not CSS) -- inside a fixed 16px `headerCellIcon` box (a flex
+// item), flexbox only auto-shrinks the MAIN axis (width) to fit, leaving the
+// CROSS axis (height) at its full 24px intrinsic size, so the glyph rendered
+// visibly oversized/non-square and spilled out of its slot (measured live:
+// 16×24, not 16×16). Passing `size` sets both attributes directly, sidestepping
+// the mismatch entirely rather than fighting it with more CSS. Matches crisp's
+// own measured `.crisp-datatable-chevron` size (14px).
+const SORT_ICON_SIZE = 14;
+const DEFAULT_SORT_ICON = {
+    idle: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconChevronDownLine_default, {
+        size: SORT_ICON_SIZE
+    }),
+    asc: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconChevronUpLine_default, {
+        size: SORT_ICON_SIZE
+    }),
+    desc: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconChevronDownLine_default, {
+        size: SORT_ICON_SIZE
+    })
+};
+/**
+ * Rendered for EVERY sortable column, sorted or not -- unlike a naive "only show the
+ * active column's arrow", Attio reveals a neutral chevron on ANY sortable header on
+ * hover (`data-chevron`'s own CSS in `data-table.ts` owns the opacity: 0 at rest, 0.6
+ * on header hover, 1 + full foreground once sorted). Conditionally rendering only the
+ * sorted state, the way this component used to, has nothing for that hover state to
+ * reveal.
+ */ function SortIndicator({ columnKey, icon }) {
+    const { sort } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const isSorted = sort?.key === columnKey;
+    const resolved = isSorted ? sort?.dir === "asc" ? icon?.asc ?? DEFAULT_SORT_ICON.asc : icon?.desc ?? DEFAULT_SORT_ICON.desc : icon?.idle ?? DEFAULT_SORT_ICON.idle;
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableHeaderCellIcon, {
+        "aria-hidden": true,
+        "data-chevron": "",
+        draggable: false,
+        children: resolved
+    });
+}
+/** Attio's own condition word: "Is"/"Is not" alone with zero or one value checked,
+ *  "Is any of"/"Is not any of" once a second value joins the set -- the underlying
+ *  predicate never changes (`useDataTableFilter.ts`'s own comment: membership in a
+ *  set of one IS "is X"), only the word describing it does. */ function filterConditionLabel(mode, hasMultipleValues) {
+    if (mode === "isnot") return hasMultipleValues ? "Is not any of" : "Is not";
+    return hasMultipleValues ? "Is any of" : "Is";
+}
+/**
+ * A column's "is / is not / is any of" checkbox filter picker (DATATABLE-ATTIO-
+ * SPEC.md's Feature contract), Attio's own chrome: a two-way condition control above a
+ * checkbox value list, both built from seed's own documented components -- `Menu` for
+ * the popover shell (`MenuRoot`/`Trigger`/`Positioner`/`Content`, unchanged), seed's
+ * `SegmentedControl` (docs/content/react/components/segmented-control.mdx) for the
+ * is/is-not toggle in place of the two hand-styled buttons (hardcoded hex, no seed
+ * token) this used to be, and plain `<label>` + `CheckboxRoot` rows for the value
+ * list -- NOT `MenuItem` there either: `MenuItem`'s own `getItemProps` (`useMenu.ts`)
+ * closes the menu unconditionally after every click, which is correct for a normal
+ * command menu but would close this ENTIRE popover after a single condition pick or a
+ * single checked value -- exactly wrong for a control meant to stay open while the
+ * condition changes and several boxes get checked. `SegmentedControl` has no such
+ * auto-close (it's a plain controlled radio group, not a menu), which is exactly why
+ * it -- not `MenuItem` -- is the documented component that fits here.
+ */ function FilterMenu({ column }) {
+    const { filters, toggleFilterValue, setFilterMode } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const values = column.filterValues ?? [];
+    const current = filters[column.key];
+    const mode = current?.mode ?? "is";
+    const checkedValues = current?.values ?? [];
+    const hasMultipleValues = checkedValues.length > 1;
+    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    // A filter trigger lives INSIDE a (possibly sortable) header cell, whose own
+    // onClick/onKeyDown toggle sort -- stop the event here so opening the filter
+    // picker never also reorders the rows out from under it.
+    const stopPropagation = (event)=>event.stopPropagation();
+    return /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableHeaderCellIcon, {
+                asChild: true,
+                onClick: stopPropagation,
+                onKeyDown: stopPropagation,
+                draggable: false,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuTrigger, {
+                    "aria-label": `Filter ${columnLabel}`,
+                    "data-active": domUtils.dataAttr(checkedValues.length > 0),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconSlider2HorizontalLine_default, {
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuPositioner, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuContent, {
+                    style: {
+                        minWidth: 180
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                style: {
+                                    padding: "0 8px"
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(SegmentedControlRoot, {
+                                    "aria-label": `${columnLabel} filter condition`,
+                                    value: mode,
+                                    onValueChange: (next)=>setFilterMode(column.key, next),
+                                    style: {
+                                        width: "100%"
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs(SegmentedControlItem, {
+                                            value: "is",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(SegmentedControlItemHiddenInput, {}),
+                                                filterConditionLabel("is", hasMultipleValues)
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs(SegmentedControlItem, {
+                                            value: "isnot",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(SegmentedControlItemHiddenInput, {}),
+                                                filterConditionLabel("isnot", hasMultipleValues)
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(SegmentedControlIndicator, {})
+                                    ]
+                                })
+                            }),
+                            values.map((value)=>// `CheckboxRoot` is ALREADY a `<label>` (`Checkbox.tsx`'s own
+                                // `Primitive.label`) wrapping the hidden input + `CheckboxLabel` text --
+                                // wrapping it in a SECOND `<label>` here used to nest one label inside
+                                // another, which is invalid HTML and made a click on the row's own text
+                                // reach the checkbox's native activation twice (once via each label),
+                                // toggling it on then immediately back off. `CheckboxRoot` takes the
+                                // row's own layout via `style` directly instead.
+                                /*#__PURE__*/ jsxRuntime.jsxs(DataTable12s.CheckboxRoot, {
+                                    checked: checkedValues.includes(value),
+                                    onCheckedChange: ()=>toggleFilterValue(column.key, value),
+                                    style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "4px 8px",
+                                        cursor: "pointer"
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.CheckboxControl, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.CheckboxIndicator, {
+                                                checked: FILTER_CHECKED_ICON
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.CheckboxLabel, {
+                                            children: value
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.CheckboxHiddenInput, {
+                                            "aria-label": value
+                                        })
+                                    ]
+                                }, value))
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+/** Every header cell, in the effective (ordered, visible) order -- a standalone
+ *  component (not inlined in `DataTableInner`'s render) so it alone re-renders when
+ *  `visibleColumnOrder`/labels/widths change, without also re-deriving `sortedData`'s
+ *  render above it. */ function ColumnHeaderCells({ columns, columnMenu, reorderable, resizable, sortIcon, selectable, stickyFirst, stickyLast }) {
+    const { draggingColumnKey, beginColumnDrag, dragOverColumn, endColumnDrag } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const effective = columnLayout12s.useEffectiveColumns(columns);
+    const [renamingKey, setRenamingKey] = React__namespace.useState(null);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: effective.map(({ column, label, width }, index)=>{
+            const isFirst = index === 0;
+            const isLast = index === effective.length - 1;
+            const sticky = columnLayout12s.stickyProps({
+                selectable,
+                stickyFirst,
+                stickyLast,
+                isSelectionCell: false,
+                isFirst,
+                isLast
+            });
+            return /*#__PURE__*/ jsxRuntime.jsxs(DataTable12s.DataTableHeaderCell, {
+                columnKey: column.key,
+                sortable: column.sortable,
+                "data-column-key": column.key,
+                draggable: reorderable && renamingKey !== column.key,
+                onDragStart: (event)=>{
+                    event.dataTransfer.effectAllowed = "move";
+                    beginColumnDrag(column.key);
+                },
+                onDragOver: (event)=>{
+                    event.preventDefault();
+                    if (draggingColumnKey && draggingColumnKey !== column.key) dragOverColumn(column.key);
+                },
+                onDrop: (event)=>event.preventDefault(),
+                onDragEnd: endColumnDrag,
+                "data-dragging": domUtils.dataAttr(draggingColumnKey === column.key),
+                style: sticky.style,
+                "data-sticky": sticky["data-sticky"],
+                "data-sticky-edge": sticky["data-sticky-edge"],
+                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableHeaderCellInner, {
+                        children: renamingKey === column.key ? /*#__PURE__*/ jsxRuntime.jsx(ColumnRenameInput, {
+                            column: column,
+                            initialLabel: typeof label === "string" ? label : column.key,
+                            onDone: ()=>setRenamingKey(null)
+                        }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableHeaderCellLabel, {
+                                    children: label
+                                }),
+                                column.filterValues && column.filterValues.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(FilterMenu, {
+                                    column: column
+                                }),
+                                column.sortable && /*#__PURE__*/ jsxRuntime.jsx(SortIndicator, {
+                                    columnKey: column.key,
+                                    icon: sortIcon
+                                }),
+                                columnMenu && /*#__PURE__*/ jsxRuntime.jsx(ColumnMenu, {
+                                    column: column,
+                                    onRename: ()=>setRenamingKey(column.key)
+                                })
+                            ]
+                        })
+                    }),
+                    resizable && column.resizable !== false && /*#__PURE__*/ jsxRuntime.jsx(resize12s.ColumnResizeHandle, {
+                        columnKey: column.key,
+                        width: width
+                    })
+                ]
+            }, column.key);
+        })
+    });
+}
+function ColumnRenameInput({ column, initialLabel, onDone }) {
+    const { renameColumn } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const [value, setValue] = React__namespace.useState(initialLabel);
+    // Opening this input is ITSELF the result of clicking a `MenuItem` -- the menu's own
+    // close (which happens on that same click) restores focus to its trigger a beat
+    // later, and that focus move fires as a `blur` on this input the instant it mounts
+    // with `autoFocus`. Committing on THAT blur would silently re-close the editor
+    // before anyone saw it (found writing this file's own rename test, which failed
+    // with the header reverting to its plain label with no visible input in between).
+    // `ready` flips true one frame after mount, so only a blur after that -- an actual
+    // click/tab away -- commits.
+    const readyRef = React__namespace.useRef(false);
+    const inputRef = React__namespace.useRef(null);
+    React__namespace.useEffect(()=>{
+        // The menu's close restores focus to its trigger one frame after this input
+        // mounts, stealing focus from `autoFocus`. Re-grab it in the SAME frame (after
+        // the restore) and select the text, so the user can type/replace immediately.
+        const frame = requestAnimationFrame(()=>{
+            readyRef.current = true;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, []);
+    const commit = ()=>{
+        if (value.trim()) renameColumn(column.key, value.trim());
+        onDone();
+    };
+    return(// A bare, minimal input -- NOT seed's `TextField` (its labeled root measures
+    // ~52px tall, per DATATABLE-ATTIO-SPEC.md's own note; this has to fit a 40px
+    // header cell with no label/description chrome of its own). Seed has no lighter
+    // input primitive at this level, so this follows crisp's own measured
+    // `.crisp-datatable-th-rename` (`datatable.recipe.ts`) instead: full-width,
+    // header-row height, a small inset, no border (an inset brand-solid box-shadow
+    // stands in for a focus ring), the header's own font weight/size inherited
+    // rather than a new size introduced for one input.
+    /*#__PURE__*/ jsxRuntime.jsx("input", {
+        ref: inputRef,
+        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own click a moment earlier (crisp's `.crisp-datatable-th-rename` does the same), not an unannounced page-load autofocus.
+        autoFocus: true,
+        "aria-label": `Rename ${initialLabel}`,
+        value: value,
+        onClick: (event)=>event.stopPropagation(),
+        onChange: (event)=>setValue(event.target.value),
+        onBlur: ()=>{
+            if (readyRef.current) commit();
+        },
+        onKeyDown: (event)=>{
+            event.stopPropagation();
+            if (event.key === "Enter") commit();
+            if (event.key === "Escape") onDone();
+        },
+        // Bare inline input: no border/ring/background/radius -- it reads as the
+        // header label made editable in place, not a boxed field.
+        style: {
+            width: "100%",
+            minWidth: 0,
+            height: "100%",
+            margin: 0,
+            padding: 0,
+            border: "none",
+            borderRadius: 0,
+            background: "transparent",
+            boxShadow: "none",
+            font: "inherit",
+            fontWeight: "var(--seed-font-weight-medium)",
+            color: "var(--seed-color-fg-neutral)",
+            outline: "none"
+        }
+    }));
+}
+/** The per-column header menu (rename / hide / move left / move right) -- seed
+ *  `Menu`, opened from the same `headerCellIcon` slot the filter trigger and sort
+ *  chevron already share. Hover/focus-reveal (`data-column-menu`'s own CSS in
+ *  `data-table.ts`) -- crisp's own header shows the trigger only on hover, not
+ *  permanently, so this one carries its own marker attribute distinct from that
+ *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
+ *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
+    const { moveColumn, hideColumn } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    const stopPropagation = (event)=>event.stopPropagation();
+    return /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableHeaderCellIcon, {
+                asChild: true,
+                "data-column-menu": "",
+                onClick: stopPropagation,
+                onKeyDown: stopPropagation,
+                draggable: false,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuTrigger, {
+                    "aria-label": `${columnLabel} column menu`,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconDot3HorizontalLine_default, {
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuPositioner, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuContent, {
+                    style: {
+                        minWidth: 160
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
+                                onClick: onRename,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
+                                    children: "Rename"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "left"),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
+                                    children: "Move left"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "right"),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
+                                    children: "Move right"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
+                                onClick: ()=>hideColumn(column.key),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
+                                    children: "Hide column"
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+exports.ColumnHeaderCells = ColumnHeaderCells;