@crispy-seed/data-table 0.1.0 → 0.1.2

package/dist/column-menu-12s-mRBk-4oa.js

@@ -1,407 +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))
-}
-
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { c as createSlotRecipeContext, k as DataTableHeaderCell, l as DataTableHeaderCellInner, m as DataTableHeaderCellLabel, n as DataTableHeaderCellIcon, o as IconSlider2HorizontalLine_default, C as CheckboxRoot, e as CheckboxControl, f as CheckboxIndicator, p as CheckboxLabel, g as CheckboxHiddenInput, q as IconDot3HorizontalLine_default, d as IconCheckmarkLine_default, j as IconChevronDownLine_default, r as IconChevronUpLine_default } from './DataTable-12s-Bd20OuMs.js';
-import { dataAttr } from '@seed-design/dom-utils';
-import { M as MenuRoot, a as MenuTrigger, b as MenuPositioner, c as MenuContent, d as MenuScrollArea, e as MenuItem, f as MenuItemLabel } from './Menu-12s-Di5JADW4.js';
-import { segmentedControl } from '@seed-design/css/recipes/segmented-control';
-import { Primitive } from '@seed-design/react-primitive';
-import { SegmentedControl } from '@seed-design/react-segmented-control';
-import { u as useEffectiveColumns, s as stickyProps } from './column-layout-12s-s7wnxkMN.js';
-import { C as ColumnResizeHandle } from './resize-12s-nsMvrmLt.js';
-import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
-
-const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
-const SegmentedControlRoot = withProvider(SegmentedControl.Root, "root");
-const SegmentedControlIndicator = withContext(Primitive.div, "indicator");
-const SegmentedControlItem = withContext(SegmentedControl.Item, "item");
-const SegmentedControlItemHiddenInput = 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__*/ jsx(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__*/ jsx(IconChevronDownLine_default, {
-        size: SORT_ICON_SIZE
-    }),
-    asc: /*#__PURE__*/ jsx(IconChevronUpLine_default, {
-        size: SORT_ICON_SIZE
-    }),
-    desc: /*#__PURE__*/ jsx(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 } = 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__*/ jsx(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 } = 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__*/ jsxs(MenuRoot, {
-        children: [
-            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
-                asChild: true,
-                onClick: stopPropagation,
-                onKeyDown: stopPropagation,
-                draggable: false,
-                children: /*#__PURE__*/ jsx(MenuTrigger, {
-                    "aria-label": `Filter ${columnLabel}`,
-                    "data-active": dataAttr(checkedValues.length > 0),
-                    children: /*#__PURE__*/ jsx(IconSlider2HorizontalLine_default, {
-                        size: 16
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(MenuPositioner, {
-                children: /*#__PURE__*/ jsx(MenuContent, {
-                    style: {
-                        minWidth: 180
-                    },
-                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                style: {
-                                    padding: "0 8px"
-                                },
-                                children: /*#__PURE__*/ jsxs(SegmentedControlRoot, {
-                                    "aria-label": `${columnLabel} filter condition`,
-                                    value: mode,
-                                    onValueChange: (next)=>setFilterMode(column.key, next),
-                                    style: {
-                                        width: "100%"
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ jsxs(SegmentedControlItem, {
-                                            value: "is",
-                                            children: [
-                                                /*#__PURE__*/ jsx(SegmentedControlItemHiddenInput, {}),
-                                                filterConditionLabel("is", hasMultipleValues)
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(SegmentedControlItem, {
-                                            value: "isnot",
-                                            children: [
-                                                /*#__PURE__*/ jsx(SegmentedControlItemHiddenInput, {}),
-                                                filterConditionLabel("isnot", hasMultipleValues)
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ 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__*/ jsxs(CheckboxRoot, {
-                                    checked: checkedValues.includes(value),
-                                    onCheckedChange: ()=>toggleFilterValue(column.key, value),
-                                    style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: 8,
-                                        padding: "4px 8px",
-                                        cursor: "pointer"
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ jsx(CheckboxControl, {
-                                            children: /*#__PURE__*/ jsx(CheckboxIndicator, {
-                                                checked: FILTER_CHECKED_ICON
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(CheckboxLabel, {
-                                            children: value
-                                        }),
-                                        /*#__PURE__*/ jsx(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 } = useDataTableContext();
-    const effective = useEffectiveColumns(columns);
-    const [renamingKey, setRenamingKey] = React.useState(null);
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column, label, width }, index)=>{
-            const isFirst = index === 0;
-            const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
-            return /*#__PURE__*/ jsxs(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": 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__*/ jsx(DataTableHeaderCellInner, {
-                        children: renamingKey === column.key ? /*#__PURE__*/ jsx(ColumnRenameInput, {
-                            column: column,
-                            initialLabel: typeof label === "string" ? label : column.key,
-                            onDone: ()=>setRenamingKey(null)
-                        }) : /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx(DataTableHeaderCellLabel, {
-                                    children: label
-                                }),
-                                column.filterValues && column.filterValues.length > 0 && /*#__PURE__*/ jsx(FilterMenu, {
-                                    column: column
-                                }),
-                                column.sortable && /*#__PURE__*/ jsx(SortIndicator, {
-                                    columnKey: column.key,
-                                    icon: sortIcon
-                                }),
-                                columnMenu && /*#__PURE__*/ jsx(ColumnMenu, {
-                                    column: column,
-                                    onRename: ()=>setRenamingKey(column.key)
-                                })
-                            ]
-                        })
-                    }),
-                    resizable && column.resizable !== false && /*#__PURE__*/ jsx(ColumnResizeHandle, {
-                        columnKey: column.key,
-                        width: width
-                    })
-                ]
-            }, column.key);
-        })
-    });
-}
-function ColumnRenameInput({ column, initialLabel, onDone }) {
-    const { renameColumn } = useDataTableContext();
-    const [value, setValue] = React.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.useRef(false);
-    const inputRef = React.useRef(null);
-    React.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__*/ 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 } = useDataTableContext();
-    const columnLabel = typeof column.header === "string" ? column.header : column.key;
-    const stopPropagation = (event)=>event.stopPropagation();
-    return /*#__PURE__*/ jsxs(MenuRoot, {
-        children: [
-            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
-                asChild: true,
-                "data-column-menu": "",
-                onClick: stopPropagation,
-                onKeyDown: stopPropagation,
-                draggable: false,
-                children: /*#__PURE__*/ jsx(MenuTrigger, {
-                    "aria-label": `${columnLabel} column menu`,
-                    children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
-                        size: 16
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(MenuPositioner, {
-                children: /*#__PURE__*/ jsx(MenuContent, {
-                    style: {
-                        minWidth: 160
-                    },
-                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
-                        children: [
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: onRename,
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Rename"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "left"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move left"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "right"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move right"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>hideColumn(column.key),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Hide column"
-                                })
-                            })
-                        ]
-                    })
-                })
-            })
-        ]
-    });
-}
-
-export { ColumnHeaderCells as C };