@crispy-seed/data-table 0.1.1 → 0.1.3

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

@@ -1,426 +0,0 @@
-'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-Gpv6I4J8.cjs');
-var domUtils = require('@seed-design/dom-utils');
-var Menu12s = require('./Menu-12s-A4lEc__n.cjs');
-var segmentedControl = require('@seed-design/css/recipes/segmented-control');
-var reactSegmentedControl = require('@seed-design/react-segmented-control');
-var columnLayout12s = require('./column-layout-12s-k2fZYeKl.cjs');
-var resize12s = require('./resize-12s-ChLpxb4i.cjs');
-var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.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(DataTable12s.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;