@crispy-seed/data-table 0.1.0 → 0.1.2

package/dist/editors-12s-BO9Mp034.js

@@ -1,525 +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 { S as SelectRoot, a as SelectTrigger, b as SelectValue, c as SelectPlaceholder, d as SelectSuffixIcon, e as SelectPositioner, f as SelectContent, g as SelectScrollArea, h as SelectItem, i as SelectItemBody, j as SelectItemLabel, k as SelectItemIndicator } from './Select-12s-1Uh7XbkG.js';
-import * as React from 'react';
-import React__default, { forwardRef, useRef, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { w as withScaleFeedback, c as createSlotRecipeContext, a as createWithStateProps, s as splitMultipleVariantsProps, b as clsx, I as InternalIcon, t as composeRefs, C as CheckboxRoot, e as CheckboxControl, f as CheckboxIndicator, g as CheckboxHiddenInput, u as IconChevronDownSmallLine_default, v as IconCheckmarkFatFill_default, x as IconPersonCircleLine_default } from './DataTable-12s-Bd20OuMs.js';
-import { R as RATING_FILLED, a as RATING_EMPTY, b as RATING_STAR_D, c as CHECKBOX_CELL_CHECKED_ICON, A as AvatarRoot, d as AvatarImage, e as AvatarFallback, t as toDateTimeInputValue, f as toDateInputValue } from './body-cells-12s-BnOVUTKN.js';
-import { Switch, useSwitchContext } from '@seed-design/react-switch';
-import { switchStyle } from '@seed-design/css/recipes/switch';
-import { switchmark } from '@seed-design/css/recipes/switchmark';
-import { Primitive } from '@seed-design/react-primitive';
-import { TextField, useTextFieldContext } from '@seed-design/react-text-field';
-import { useFieldContext } from '@seed-design/react-field';
-import { textInput } from '@seed-design/css/recipes/text-input';
-import { mergeProps } from '@seed-design/dom-utils';
-
-const { withContext: withContext$1, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
-const { withContext: withControlContext, PropsProvider: ControlPropsProvider, withProvider: withControlProvider } = createSlotRecipeContext(switchmark);
-const withStateProps$1 = createWithStateProps([
-    useSwitchContext
-]);
-const SwitchRoot = /*#__PURE__*/ React__default.forwardRef(({ className, ...props }, ref)=>{
-    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
-        switchmark,
-        switch: switchStyle
-    });
-    const classNames = switchStyle(switchVariantProps);
-    return /*#__PURE__*/ jsx(ControlPropsProvider, {
-        value: switchmarkVariantProps,
-        children: /*#__PURE__*/ jsx(ClassNamesProvider, {
-            value: classNames,
-            children: /*#__PURE__*/ jsx(Switch.Root, {
-                ref: ref,
-                className: clsx(classNames.root, className),
-                ...otherProps
-            })
-        })
-    });
-});
-SwitchRoot.displayName = "SwitchRoot";
-const SwitchControl = withScaleFeedback(withControlProvider(Switch.Control, "root"));
-const SwitchThumb = withControlContext(Switch.Thumb, "thumb");
-withContext$1(withStateProps$1(Primitive.span), "label");
-const SwitchHiddenInput = Switch.HiddenInput;
-
-// src/use-layout-effect.tsx
-var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : ()=>{};
-
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textInput);
-const withFieldStateProps = createWithStateProps([
-    {
-        useContext: useFieldContext,
-        strict: false
-    }
-]);
-const withStateProps = createWithStateProps([
-    useTextFieldContext,
-    {
-        useContext: useFieldContext,
-        strict: false
-    }
-]);
-const TextFieldRoot = withProvider(withFieldStateProps(TextField.Root), "root");
-const TextFieldPrefixIcon = withContext(withStateProps(InternalIcon), "prefixIcon");
-withContext(withStateProps(Primitive.span), "prefixText");
-withContext(withStateProps(InternalIcon), "suffixIcon");
-withContext(withStateProps(Primitive.span), "suffixText");
-const TextFieldInput = /*#__PURE__*/ forwardRef(({ className, ...otherProps }, ref)=>{
-    const classNames = useClassNames();
-    const textFieldContext = useTextFieldContext();
-    const fieldContext = useFieldContext({
-        strict: false
-    });
-    const mergedProps = mergeProps(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
-    if (// if not in field, then must have aria-label or aria-labelledby
-    !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
-        console.warn("TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided.");
-    }
-    return /*#__PURE__*/ jsx(TextField.Input, {
-        ref: ref,
-        ...mergedProps,
-        className: clsx(classNames.value, className)
-    });
-});
-TextFieldInput.displayName = "TextFieldInput";
-const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = true, ...otherProps }, ref)=>{
-    const classNames = useClassNames();
-    const textFieldContext = useTextFieldContext();
-    const fieldContext = useFieldContext({
-        strict: false
-    });
-    const mergedProps = mergeProps(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
-    if (// if not in field, then must have aria-label or aria-labelledby
-    !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
-        console.warn("TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided.");
-    }
-    // referenced from React Spectrum
-    const inputRef = useRef(null);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intended
-    const onHeightChange = useCallback(()=>{
-        if (!inputRef.current) return;
-        if (otherProps.style?.height) return;
-        if (!autoresize) return;
-        // Quiet textareas always grow based on their text content.
-        // Standard textareas also grow by default, unless an explicit height is set.
-        const input = inputRef.current;
-        const prevAlignment = input.style.alignSelf;
-        const prevOverflow = input.style.overflow;
-        // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
-        // The measure/applied height is also incorrect/reset if we turn on and off
-        // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
-        const isFirefox = "MozAppearance" in input.style;
-        if (!isFirefox) {
-            input.style.overflow = "hidden";
-        }
-        input.style.alignSelf = "start";
-        input.style.height = "auto";
-        // offsetHeight - clientHeight accounts for the border/padding.
-        input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
-        input.style.overflow = prevOverflow;
-        input.style.alignSelf = prevAlignment;
-    }, [
-        inputRef,
-        otherProps.style?.height,
-        autoresize
-    ]);
-    useLayoutEffect2(()=>{
-        if (inputRef.current) {
-            onHeightChange();
-        }
-    }, [
-        onHeightChange,
-        textFieldContext.value,
-        inputRef
-    ]);
-    return /*#__PURE__*/ jsx(TextField.Textarea, {
-        ref: composeRefs(inputRef, ref),
-        ...mergedProps,
-        className: clsx(classNames.value, className)
-    });
-});
-TextFieldTextarea.displayName = "TextFieldTextarea";
-
-/** The raw value a live editor reads, distinct from `DataTableColumn.value` (the
- *  accessor sort/search/filter/export share): `editValue` returns whatever TYPE the
- *  editor itself expects -- a real `boolean` for `editor: "switch"`/`type:
- *  "checkbox"`, a `number` for `type: "rating"`, the option's own string for `select`/
- *  `reference`/`actor` -- where `value`/`render` may format that same field for
- *  display. Falls back to the table's own accessor when the column supplies none. */ function resolveEditValue(column, row, fallback) {
-    return column.editValue ? column.editValue(row) : fallback;
-}
-function EditPendingIndicator() {
-    return /*#__PURE__*/ jsxs("svg", {
-        className: "seed-data-table-edit-pending",
-        width: 14,
-        height: 14,
-        viewBox: "0 0 16 16",
-        fill: "none",
-        role: "presentation",
-        "aria-hidden": "true",
-        children: [
-            /*#__PURE__*/ jsx("circle", {
-                cx: 8,
-                cy: 8,
-                r: 6.5,
-                stroke: "currentColor",
-                strokeOpacity: 0.25,
-                strokeWidth: 2
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round"
-            })
-        ]
-    });
-}
-function EditError({ message }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: "seed-data-table-edit-error",
-        children: message
-    });
-}
-////////////////////////////////////////////////////////////////////////////////////
-// -- plain editable: text/number (seed TextField) and date/datetime (a native input,
-//    styled the same way, per `cellType`) -- both double-click gated, Enter/blur
-//    commits, Escape cancels. -------------------------------------------------------
-function TextEditor({ column, value, pending, onCommit, onCancel }) {
-    const [draft, setDraft] = React.useState(()=>value == null ? "" : String(value));
-    return(// `size="medium"` (seed's smallest fixed `TextField` size, 40px min-height,
-    // `text-input.ts`'s own token) -- the default `size="large"` overflowed a 36px
-    // table row (same class of fix as `toolbar.tsx`'s `SearchBox`, which made the
-    // same call for its own 32px-ish search box).
-    /*#__PURE__*/ jsx(TextFieldRoot, {
-        size: "medium",
-        style: {
-            width: "100%"
-        },
-        onClick: (event)=>event.stopPropagation(),
-        onKeyDown: (event)=>event.stopPropagation(),
-        children: /*#__PURE__*/ jsx(TextFieldInput, {
-            autoFocus: true,
-            type: column.cellType === "number" ? "number" : "text",
-            "aria-label": `Edit ${column.key}`,
-            value: draft,
-            disabled: pending,
-            onChange: (event)=>setDraft(event.target.value),
-            onBlur: ()=>onCommit(draft),
-            onKeyDown: (event)=>{
-                if (event.key === "Enter") onCommit(draft);
-                else if (event.key === "Escape") onCancel();
-            }
-        })
-    }));
-}
-function DateEditor({ column, value, pending, onCommit, onCancel }) {
-    const isDateTime = column.cellType === "datetime";
-    const [draft, setDraft] = React.useState(()=>isDateTime ? toDateTimeInputValue(value) : toDateInputValue(value));
-    return(// See `TextEditor`'s own comment above -- same `size="medium"` fix.
-    /*#__PURE__*/ jsx(TextFieldRoot, {
-        size: "medium",
-        style: {
-            width: "100%"
-        },
-        onClick: (event)=>event.stopPropagation(),
-        onKeyDown: (event)=>event.stopPropagation(),
-        children: /*#__PURE__*/ jsx(TextFieldInput, {
-            autoFocus: true,
-            type: isDateTime ? "datetime-local" : "date",
-            "aria-label": `Edit ${column.key}`,
-            value: draft,
-            disabled: pending,
-            onChange: (event)=>setDraft(event.target.value),
-            onBlur: ()=>onCommit(draft),
-            onKeyDown: (event)=>{
-                if (event.key === "Enter") onCommit(draft);
-                else if (event.key === "Escape") onCancel();
-            }
-        })
-    }));
-}
-////////////////////////////////////////////////////////////////////////////////////
-// -- editor: "select" -- double-click opens seed's own Select, auto-opened (seed's
-//    `SelectRoot` takes `defaultOpen` directly -- unlike crisp's closed-API `Select`,
-//    which needs a synthetic click on its own trigger to start open). -------------
-function SelectEditor({ column, value, pending, onCommit, onCancel }) {
-    const options = column.options ?? [];
-    const current = value == null ? "" : String(value);
-    return /*#__PURE__*/ jsxs(SelectRoot, {
-        // Controlled open, per docs/examples/react/select/controlled-open.tsx --
-        // this editor is only ever mounted while the cell IS editing, so it always
-        // wants to start (and stay) open; `onOpenChange(false)` is what tells us
-        // the popover wants to close for ANY reason (Escape, an outside click, OR
-        // the internal auto-close a single-select commit already triggers), so
-        // `onCancel` alone now covers the Escape gap the old raw `document`
-        // listener existed for, without a second, independent listener.
-        open: true,
-        onOpenChange: (next)=>{
-            if (!next) onCancel();
-        },
-        disabled: pending,
-        value: current ? [
-            current
-        ] : [],
-        onValueChange: (next)=>onCommit(next[0] ?? ""),
-        children: [
-            /*#__PURE__*/ jsxs(SelectTrigger, {
-                "aria-label": `Edit ${column.key}`,
-                children: [
-                    /*#__PURE__*/ jsx(SelectValue, {}),
-                    /*#__PURE__*/ jsx(SelectPlaceholder, {
-                        children: "Select…"
-                    }),
-                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
-                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(SelectPositioner, {
-                children: /*#__PURE__*/ jsx(SelectContent, {
-                    children: /*#__PURE__*/ jsx(SelectScrollArea, {
-                        children: options.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
-                                value: option.value,
-                                label: option.label,
-                                children: [
-                                    /*#__PURE__*/ jsx(SelectItemBody, {
-                                        children: /*#__PURE__*/ jsx(SelectItemLabel, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(SelectItemIndicator, {
-                                        selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
-                                    })
-                                ]
-                            }, option.value))
-                    })
-                })
-            })
-        ]
-    });
-}
-////////////////////////////////////////////////////////////////////////////////////
-// -- editor: "reference" / "actor" -- same picker, search-enabled, each option
-//    carrying a small avatar (a photo for a real one, a generic person glyph for
-//    none) -- `actor` is `reference` over people specifically (crisp's own #449/
-//    #432 `ReferenceCell` shape), so the two share one component; only the search
-//    placeholder differs. Seed's `Select` has no built-in search combobox (unlike
-//    crisp's own `Select`), so this filters `refOptions` itself against a small
-//    `TextField` rendered as the content's own first row. --------------------------
-function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
-    const [query, setQuery] = React.useState("");
-    const options = column.refOptions ?? [];
-    const filtered = query.trim() ? options.filter((option)=>option.label.toLowerCase().includes(query.trim().toLowerCase())) : options;
-    const current = value == null ? "" : String(value);
-    const isActor = column.editor === "actor";
-    return /*#__PURE__*/ jsxs(SelectRoot, {
-        // See `SelectEditor`'s own comment above -- same controlled-open wiring.
-        open: true,
-        onOpenChange: (next)=>{
-            if (!next) onCancel();
-        },
-        disabled: pending,
-        value: current ? [
-            current
-        ] : [],
-        onValueChange: (next)=>onCommit(next[0] ?? ""),
-        children: [
-            /*#__PURE__*/ jsxs(SelectTrigger, {
-                "aria-label": `Edit ${column.key}`,
-                children: [
-                    /*#__PURE__*/ jsx(SelectValue, {}),
-                    /*#__PURE__*/ jsx(SelectPlaceholder, {
-                        children: isActor ? "Assign…" : "Select…"
-                    }),
-                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
-                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(SelectPositioner, {
-                children: /*#__PURE__*/ jsxs(SelectContent, {
-                    children: [
-                        /*#__PURE__*/ jsx(TextFieldRoot, {
-                            size: "medium",
-                            style: {
-                                margin: 4
-                            },
-                            onKeyDown: (event)=>{
-                                // The listbox's own typeahead/arrow handling lives on THIS field's
-                                // sibling items, not on the field itself -- stop everything except
-                                // Escape from also driving the listbox's own keyboard nav. Escape
-                                // itself needs no special-casing to "reach" anything any more: it's
-                                // SelectContent's own `DismissibleLayer` (Select.tsx) that closes the
-                                // listbox, and that dismissal is a document-level listener outside
-                                // this React subtree entirely -- a synthetic `stopPropagation` here
-                                // was never able to block it either way, so the controlled `open`
-                                // above (via `onOpenChange`) is what actually ends this cell's edit.
-                                if (event.key !== "Escape") event.stopPropagation();
-                            },
-                            children: /*#__PURE__*/ jsx(TextFieldInput, {
-                                autoFocus: true,
-                                "aria-label": isActor ? "Search people" : `Search ${column.key}`,
-                                placeholder: isActor ? "Search people…" : "Search…",
-                                value: query,
-                                onChange: (event)=>setQuery(event.target.value)
-                            })
-                        }),
-                        /*#__PURE__*/ jsxs(SelectScrollArea, {
-                            children: [
-                                filtered.length === 0 && /*#__PURE__*/ jsx("div", {
-                                    style: {
-                                        padding: "6px 12px",
-                                        opacity: 0.63,
-                                        fontSize: 13
-                                    },
-                                    children: isActor ? "No users" : "No results"
-                                }),
-                                filtered.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
-                                        value: option.value,
-                                        label: option.label,
-                                        children: [
-                                            /*#__PURE__*/ jsxs(SelectItemBody, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(ReferenceAvatar, {
-                                                        avatar: option.avatar
-                                                    }),
-                                                    /*#__PURE__*/ jsx(SelectItemLabel, {})
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
-                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
-                                            })
-                                        ]
-                                    }, option.value))
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-function ReferenceAvatar({ avatar }) {
-    return /*#__PURE__*/ jsxs(AvatarRoot, {
-        size: "20",
-        children: [
-            avatar && /*#__PURE__*/ jsx(AvatarImage, {
-                src: avatar,
-                alt: ""
-            }),
-            /*#__PURE__*/ jsx(AvatarFallback, {
-                children: /*#__PURE__*/ jsx(IconPersonCircleLine_default, {})
-            })
-        ]
-    });
-}
-////////////////////////////////////////////////////////////////////////////////////
-// -- always-live editors: no double-click gate, no separate rest/edit state --
-//    interacting with the widget IS the commit gesture (crisp's own #453/#760/#761).
-function SwitchEditor({ column, value, pending, onCommit }) {
-    const checked = value === true || value === "true";
-    return /*#__PURE__*/ jsxs("span", {
-        className: "seed-data-table-edit-picker",
-        children: [
-            /*#__PURE__*/ jsxs(SwitchRoot, {
-                size: "16",
-                checked: checked,
-                disabled: pending,
-                onCheckedChange: (next)=>onCommit(String(next)),
-                children: [
-                    /*#__PURE__*/ jsx(SwitchControl, {
-                        children: /*#__PURE__*/ jsx(SwitchThumb, {})
-                    }),
-                    /*#__PURE__*/ jsx(SwitchHiddenInput, {
-                        "aria-label": `Edit ${column.key}`
-                    })
-                ]
-            }),
-            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
-        ]
-    });
-}
-function CheckboxEditor({ column, value, pending, onCommit }) {
-    const checked = value === true || value === "true";
-    return /*#__PURE__*/ jsxs("span", {
-        className: "seed-data-table-edit-picker",
-        children: [
-            /*#__PURE__*/ jsxs(CheckboxRoot, {
-                checked: checked,
-                disabled: pending,
-                onCheckedChange: (next)=>onCommit(String(next)),
-                children: [
-                    /*#__PURE__*/ jsx(CheckboxControl, {
-                        children: /*#__PURE__*/ jsx(CheckboxIndicator, {
-                            checked: CHECKBOX_CELL_CHECKED_ICON
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(CheckboxHiddenInput, {
-                        "aria-label": `Edit ${column.key}`
-                    })
-                ]
-            }),
-            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
-        ]
-    });
-}
-function RatingEditor({ column, value, pending, onCommit }) {
-    const maxRating = column.maxRating ?? 5;
-    const rating = typeof value === "number" ? value : Number(value) || 0;
-    return /*#__PURE__*/ jsxs("span", {
-        className: "seed-data-table-edit-picker",
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                role: "group",
-                "aria-label": `Edit ${column.key}`,
-                style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 2
-                },
-                children: Array.from({
-                    length: maxRating
-                }, (_, index)=>{
-                    const starValue = index + 1;
-                    return /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        disabled: pending,
-                        "aria-label": `Set ${starValue} out of ${maxRating}`,
-                        "aria-pressed": starValue <= rating,
-                        onClick: ()=>onCommit(String(starValue)),
-                        style: {
-                            border: "none",
-                            background: "none",
-                            padding: 0,
-                            cursor: "pointer",
-                            lineHeight: 0
-                        },
-                        children: /*#__PURE__*/ jsx("svg", {
-                            width: 16,
-                            height: 16,
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            "aria-hidden": "true",
-                            children: /*#__PURE__*/ jsx("path", {
-                                d: RATING_STAR_D,
-                                fill: starValue <= rating ? RATING_FILLED : RATING_EMPTY
-                            })
-                        })
-                    }, index);
-                })
-            }),
-            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
-        ]
-    });
-}
-
-export { CheckboxEditor as C, DateEditor as D, EditError as E, RatingEditor as R, SwitchEditor as S, TextEditor as T, SelectEditor as a, ReferenceEditor as b, TextFieldRoot as c, TextFieldPrefixIcon as d, TextFieldInput as e, resolveEditValue as r };