@crispy-seed/data-table 0.1.0 → 0.1.1

package/README.md

@@ -4,11 +4,23 @@ A publishable build of seed-design's Attio-measured `DataTable`, for apps that
 already run `@seed-design/*` (e.g. an existing seed-design-based admin). The
 JS bundle does **not** vendor a second copy of seed-design — every published
 `@seed-design/*` package `DataTable` touches is a peer dependency, so your app
-supplies one shared instance instead of shipping two. The one exception is
-`@seed-design/react-data-table` (the headless data-table primitives this
-`DataTable` is built on): it isn't published to npm yet, so it's bundled in
-rather than declared as a peer — there is no existing instance of it in your
-app to dedupe against.
+supplies one shared instance instead of shipping two. Two exceptions:
+
+- `@seed-design/react-data-table` (the headless data-table primitives this
+  `DataTable` is built on) isn't published to npm yet, so it's bundled in
+  rather than declared as a peer — there is no existing instance of it in your
+  app to dedupe against.
+- `@seed-design/react-primitive` is ALSO bundled in, even though a package by
+  that name and version *is* published upstream: this fork's copy adds
+  `table`/`thead`/`tbody`/`tfoot`/`tr`/`th`/`td` primitives (see
+  `packages/react-headless/primitive/src/index.tsx`) that `DataTable` needs
+  for a real `<table>` grid, without bumping the version number, so a published
+  `@seed-design/react-primitive@2.0.1` installed from the real npm registry
+  (what any existing seed-design app already has) does NOT have them —
+  declaring it a peer crashes at render (`Cannot read properties of undefined
+  (reading 'displayName')`, from `Primitive.tfoot`/`.td` being `undefined`).
+  Bundling means two copies of this (small) module ship if your app already
+  depends on it, which is the right trade against a hard crash.
 
 This is a derivative of [SEED Design](https://github.com/daangn/seed-design)'s
 `DataTable` (`@seed-design/react`), repackaged under a different scope for
@@ -23,14 +35,14 @@ npm install @crispy-seed/data-table react react-dom
 You also need the peer `@seed-design/*` packages `DataTable` imports —
 `@seed-design/dom-utils`, `@seed-design/react-checkbox`,
 `@seed-design/react-field`, `@seed-design/react-image`,
-`@seed-design/react-menu`, `@seed-design/react-primitive`,
-`@seed-design/react-scale-feedback`, `@seed-design/react-segmented-control`,
-`@seed-design/react-select`, `@seed-design/react-switch`,
-`@seed-design/react-text-field` (see `peerDependencies` in `package.json` for
-the version ranges). If your app already depends on `@seed-design/react`, it
-already has all of these transitively — nothing new to install.
-`@seed-design/react-data-table` is bundled in (see above) — do not install it
-separately.
+`@seed-design/react-menu`, `@seed-design/react-scale-feedback`,
+`@seed-design/react-segmented-control`, `@seed-design/react-select`,
+`@seed-design/react-switch`, `@seed-design/react-text-field` (see
+`peerDependencies` in `package.json` for the version ranges). If your app
+already depends on `@seed-design/react`, it already has all of these
+transitively — nothing new to install.
+`@seed-design/react-data-table` and `@seed-design/react-primitive` are bundled
+in (see above) — do not install either separately.
 
 You also need **`@seed-design/css@^2.8.0`** installed, even though it isn't in
 `peerDependencies`: the JS imports 14 of its recipes

package/dist/{DataTable-12s-Bd20OuMs.js → DataTable-12s-D02v6Qj5.js}

@@ -11,20 +11,19 @@ function __insertCSS(code) {
 import * as React from 'react';
 import { forwardRef, useContext, createContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { D as DataTableTable$1, a as DataTableHeader$1, b as DataTableHeaderCell$1, c as DataTableRow$1, d as DataTableCell$1, e as DataTableRoot, f as DataTableBody$1, u as useDataTableContext, g as useDataTableRowContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
+import { D as DataTableTable$1, a as DataTableHeader$1, b as DataTableHeaderCell$1, c as DataTableRow$1, d as DataTableCell$1, e as DataTableRoot, f as DataTableBody$1, u as useDataTableContext, g as useDataTableRowContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
 import { mergeProps as mergeProps$1, dataAttr } from '@seed-design/dom-utils';
-import { Primitive } from '@seed-design/react-primitive';
 import { checkbox } from '@seed-design/css/recipes/checkbox';
 import { checkmark } from '@seed-design/css/recipes/checkmark';
 import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
 import { useScaleFeedback } from '@seed-design/react-scale-feedback';
 import { checkboxGroup } from '@seed-design/css/recipes/checkbox-group';
-import { C as ColumnBodyCells } from './body-cells-12s-BnOVUTKN.js';
-import { C as ColumnCalcCells } from './column-calc-12s-C6IPSOaF.js';
-import { s as stickyProps, u as useEffectiveColumns } from './column-layout-12s-s7wnxkMN.js';
-import { C as ColumnHeaderCells } from './column-menu-12s-mRBk-4oa.js';
-import { L as LoadingStateContent, E as EmptyStateContent, I as InfiniteScrollRow, A as AddRowFooter } from './states-12s-DEFSxJCO.js';
-import { D as DataTableToolbar, S as SearchBox, R as RowCount } from './toolbar-12s-AVU-sbDW.js';
+import { C as ColumnBodyCells } from './body-cells-12s-Ba2uF4T-.js';
+import { C as ColumnCalcCells } from './column-calc-12s-C1-I2KdV.js';
+import { s as stickyProps, u as useEffectiveColumns } from './column-layout-12s-BhQmNTJG.js';
+import { C as ColumnHeaderCells } from './column-menu-12s-6Yvu4SZ0.js';
+import { L as LoadingStateContent, E as EmptyStateContent, I as InfiniteScrollRow, A as AddRowFooter } from './states-12s-m5mBR90e.js';
+import { D as DataTableToolbar, S as SearchBox, R as RowCount } from './toolbar-12s-B1xiS-Zu.js';
 
 // src/IconChevronDownLine.tsx
 var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
@@ -292,176 +291,6 @@ var Icon = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
 var IconCheckmarkFatFill = /*#__PURE__*/ forwardRef(Icon);
 var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
 
-function r(e) {
-    var t, f, n = "";
-    if ("string" == typeof e || "number" == typeof e) n += e;
-    else if ("object" == typeof e) if (Array.isArray(e)) {
-        var o = e.length;
-        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-    } else for(f in e)e[f] && (n && (n += " "), n += f);
-    return n;
-}
-function clsx() {
-    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-    return n;
-}
-
-function splitMultipleVariantsProps(props, recipesMap) {
-    const multipleVariantsProps = {};
-    const extractedKeys = new Set();
-    for(const recipeKey in recipesMap){
-        const recipe = recipesMap[recipeKey];
-        const [variantProps] = recipe.splitVariantProps(props);
-        multipleVariantsProps[recipeKey] = variantProps;
-        for(const variantPropKey in variantProps){
-            extractedKeys.add(variantPropKey);
-        }
-    }
-    const remainingProps = {};
-    for(const propKey in props){
-        if (extractedKeys.has(propKey)) continue;
-        remainingProps[propKey] = props[propKey];
-    }
-    return [
-        multipleVariantsProps,
-        remainingProps
-    ];
-}
-
-/** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
-    if (!defaultProps) return;
-    for (const key of Object.keys(defaultProps)){
-        if (props[key] === undefined) {
-            props[key] = defaultProps[key];
-        }
-    }
-}
-
-function createSlotRecipeContext(recipe) {
-    const ClassNamesContext = /*#__PURE__*/ createContext(null);
-    const PropsContext = /*#__PURE__*/ createContext(null);
-    const ClassNamesProvider = ({ children, value })=>{
-        return /*#__PURE__*/ jsx(ClassNamesContext.Provider, {
-            value: value,
-            children: children
-        });
-    };
-    const PropsProvider = ({ children, value })=>{
-        return /*#__PURE__*/ jsx(PropsContext.Provider, {
-            value: value,
-            children: children
-        });
-    };
-    function useClassNames() {
-        const context = useContext(ClassNamesContext);
-        if (context === null) {
-            throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
-        }
-        return context;
-    }
-    function useProps() {
-        return useContext(PropsContext);
-    }
-    const withRootProvider = (Component, options)=>{
-        const { defaultProps } = options ?? {};
-        const StyledComponent = (innerProps)=>{
-            const props = {
-                ...defaultProps ?? {},
-                ...useProps(),
-                ...innerProps
-            };
-            restoreDefaultProps(props, defaultProps);
-            const [variantProps, otherProps] = recipe.splitVariantProps(props);
-            const classNames = recipe(variantProps); // TODO: should we memoize this?
-            return /*#__PURE__*/ jsx(ClassNamesProvider, {
-                value: classNames,
-                children: /*#__PURE__*/ jsx(Component, {
-                    ...otherProps
-                })
-            });
-        };
-        // @ts-ignore
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    const withProvider = (Component, slot, options)=>{
-        const { defaultProps } = options ?? {};
-        const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
-            const props = {
-                ...defaultProps ?? {},
-                ...useProps(),
-                ...innerProps
-            };
-            restoreDefaultProps(props, defaultProps);
-            const [variantProps, otherProps] = recipe.splitVariantProps(props);
-            const classNames = recipe(variantProps); // TODO: should we memoize this?
-            const className = classNames[slot];
-            return /*#__PURE__*/ jsx(ClassNamesProvider, {
-                value: classNames,
-                children: /*#__PURE__*/ jsx(Component, {
-                    ref: ref,
-                    ...otherProps,
-                    className: clsx(className, props.className)
-                })
-            });
-        });
-        // @ts-ignore
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    const withContext = (Component, slot)=>{
-        const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
-            const classNames = useClassNames();
-            const className = classNames?.[slot];
-            return /*#__PURE__*/ jsx(Component, {
-                ref: ref,
-                ...props,
-                className: clsx(className, props.className)
-            });
-        });
-        // @ts-ignore
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    return {
-        ClassNamesProvider,
-        PropsProvider,
-        useClassNames,
-        useProps,
-        withRootProvider,
-        withProvider,
-        withContext
-    };
-}
-
-function createWithStateProps(useContexts) {
-    return function withStateProps(Component) {
-        const Node = /*#__PURE__*/ forwardRef((props, ref)=>{
-            const stateProps = {};
-            for (const contextConfig of useContexts){
-                if (typeof contextConfig === "function") {
-                    Object.assign(stateProps, contextConfig({
-                        strict: true
-                    })?.stateProps);
-                } else {
-                    const { useContext, strict = false } = contextConfig;
-                    Object.assign(stateProps, useContext({
-                        strict
-                    })?.stateProps);
-                }
-            }
-            // @ts-ignore
-            return /*#__PURE__*/ jsx(Component, {
-                ref: ref,
-                ...stateProps,
-                ...props
-            });
-        });
-        Node.displayName = Component.displayName || Component.name;
-        return Node;
-    };
-}
-
 var __defProp$1 = Object.defineProperty;
 var __name$1 = (target, value)=>__defProp$1(target, "name", {
         value,
@@ -505,20 +334,6 @@ function useComposedRefs(...refs) {
 }
 __name$1(useComposedRefs, "useComposedRefs");
 
-function withScaleFeedback(Component) {
-    const Pressable = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-        const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-        const composedRef = useComposedRefs(scaleFeedbackRef, ref);
-        return /*#__PURE__*/ jsx(Component, {
-            ...props,
-            ref: composedRef,
-            className: clsx(scaleFeedbackClassName, props.className)
-        });
-    });
-    Pressable.displayName = Component.displayName;
-    return Pressable;
-}
-
 var __defProp = Object.defineProperty;
 var __name = (target, value)=>__defProp(target, "name", {
         value,
@@ -664,6 +479,232 @@ var createSlottableError = /* @__PURE__ */ __name((ownerName)=>{
 }, "createSlottableError");
 var use = React[" use ".trim().toString()];
 
+function createPrimitive(node) {
+    const Node = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+        const { asChild, ...primitiveProps } = props;
+        const Comp = asChild ? Slot : node;
+        return /*#__PURE__*/ jsx(Comp, {
+            ...primitiveProps,
+            ref: ref
+        });
+    });
+    Node.displayName = `Primitive.${node}`;
+    return Node;
+}
+const Primitive = {
+    div: createPrimitive("div"),
+    span: createPrimitive("span"),
+    img: createPrimitive("img"),
+    button: createPrimitive("button"),
+    label: createPrimitive("label"),
+    input: createPrimitive("input"),
+    textarea: createPrimitive("textarea"),
+    a: createPrimitive("a"),
+    p: createPrimitive("p"),
+    h2: createPrimitive("h2"),
+    ul: createPrimitive("ul"),
+    li: createPrimitive("li"),
+    nav: createPrimitive("nav"),
+    svg: createPrimitive("svg"),
+    circle: createPrimitive("circle"),
+    // Native table elements -- DataTable's own rendering (crispy-seed's addition, not
+    // upstream seed-design) needs these for a real `<table>` grid rather than a
+    // `display: flex` div grid faked with ARIA roles.
+    table: createPrimitive("table"),
+    thead: createPrimitive("thead"),
+    tbody: createPrimitive("tbody"),
+    tfoot: createPrimitive("tfoot"),
+    tr: createPrimitive("tr"),
+    th: createPrimitive("th"),
+    td: createPrimitive("td"),
+    colgroup: createPrimitive("colgroup"),
+    col: createPrimitive("col")
+};
+
+function r(e) {
+    var t, f, n = "";
+    if ("string" == typeof e || "number" == typeof e) n += e;
+    else if ("object" == typeof e) if (Array.isArray(e)) {
+        var o = e.length;
+        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else for(f in e)e[f] && (n && (n += " "), n += f);
+    return n;
+}
+function clsx() {
+    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+    return n;
+}
+
+function splitMultipleVariantsProps(props, recipesMap) {
+    const multipleVariantsProps = {};
+    const extractedKeys = new Set();
+    for(const recipeKey in recipesMap){
+        const recipe = recipesMap[recipeKey];
+        const [variantProps] = recipe.splitVariantProps(props);
+        multipleVariantsProps[recipeKey] = variantProps;
+        for(const variantPropKey in variantProps){
+            extractedKeys.add(variantPropKey);
+        }
+    }
+    const remainingProps = {};
+    for(const propKey in props){
+        if (extractedKeys.has(propKey)) continue;
+        remainingProps[propKey] = props[propKey];
+    }
+    return [
+        multipleVariantsProps,
+        remainingProps
+    ];
+}
+
+/** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
+    if (!defaultProps) return;
+    for (const key of Object.keys(defaultProps)){
+        if (props[key] === undefined) {
+            props[key] = defaultProps[key];
+        }
+    }
+}
+
+function createSlotRecipeContext(recipe) {
+    const ClassNamesContext = /*#__PURE__*/ createContext(null);
+    const PropsContext = /*#__PURE__*/ createContext(null);
+    const ClassNamesProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsx(ClassNamesContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    const PropsProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsx(PropsContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useClassNames() {
+        const context = useContext(ClassNamesContext);
+        if (context === null) {
+            throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
+        }
+        return context;
+    }
+    function useProps() {
+        return useContext(PropsContext);
+    }
+    const withRootProvider = (Component, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = (innerProps)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            return /*#__PURE__*/ jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsx(Component, {
+                    ...otherProps
+                })
+            });
+        };
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withProvider = (Component, slot, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            const className = classNames[slot];
+            return /*#__PURE__*/ jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsx(Component, {
+                    ref: ref,
+                    ...otherProps,
+                    className: clsx(className, props.className)
+                })
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withContext = (Component, slot)=>{
+        const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+            const classNames = useClassNames();
+            const className = classNames?.[slot];
+            return /*#__PURE__*/ jsx(Component, {
+                ref: ref,
+                ...props,
+                className: clsx(className, props.className)
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    return {
+        ClassNamesProvider,
+        PropsProvider,
+        useClassNames,
+        useProps,
+        withRootProvider,
+        withProvider,
+        withContext
+    };
+}
+
+function createWithStateProps(useContexts) {
+    return function withStateProps(Component) {
+        const Node = /*#__PURE__*/ forwardRef((props, ref)=>{
+            const stateProps = {};
+            for (const contextConfig of useContexts){
+                if (typeof contextConfig === "function") {
+                    Object.assign(stateProps, contextConfig({
+                        strict: true
+                    })?.stateProps);
+                } else {
+                    const { useContext, strict = false } = contextConfig;
+                    Object.assign(stateProps, useContext({
+                        strict
+                    })?.stateProps);
+                }
+            }
+            // @ts-ignore
+            return /*#__PURE__*/ jsx(Component, {
+                ref: ref,
+                ...stateProps,
+                ...props
+            });
+        });
+        Node.displayName = Component.displayName || Component.name;
+        return Node;
+    };
+}
+
+function withScaleFeedback(Component) {
+    const Pressable = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+        const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+        const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+        return /*#__PURE__*/ jsx(Component, {
+            ...props,
+            ref: composedRef,
+            className: clsx(scaleFeedbackClassName, props.className)
+        });
+    });
+    Pressable.displayName = Component.displayName;
+    return Pressable;
+}
+
 const InternalIcon = /*#__PURE__*/ forwardRef(({ svg, ...otherProps }, ref)=>{
     return /*#__PURE__*/ jsx(Slot, {
         ref: ref,
@@ -1479,4 +1520,4 @@ function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
     });
 }
 
-export { dataTable as A, IconMagnifyingglassLine_default as B, CheckboxRoot as C, DataTableCell as D, DataTable as E, InternalIcon as I, createWithStateProps as a, clsx as b, createSlotRecipeContext as c, IconCheckmarkLine_default as d, CheckboxControl as e, CheckboxIndicator as f, CheckboxHiddenInput as g, getColumnValue as h, DataTableFooterCell as i, IconChevronDownLine_default as j, DataTableHeaderCell as k, DataTableHeaderCellInner as l, DataTableHeaderCellLabel as m, DataTableHeaderCellIcon as n, IconSlider2HorizontalLine_default as o, CheckboxLabel as p, IconDot3HorizontalLine_default as q, IconChevronUpLine_default as r, splitMultipleVariantsProps as s, composeRefs as t, IconChevronDownSmallLine_default as u, IconCheckmarkFatFill_default as v, withScaleFeedback as w, IconPersonCircleLine_default as x, IconPlusLine_default as y, withContext as z };
+export { dataTable as A, IconMagnifyingglassLine_default as B, CheckboxRoot as C, DataTableCell as D, DataTable as E, InternalIcon as I, Primitive as P, createWithStateProps as a, clsx as b, createSlotRecipeContext as c, IconCheckmarkLine_default as d, CheckboxControl as e, CheckboxIndicator as f, CheckboxHiddenInput as g, getColumnValue as h, DataTableFooterCell as i, IconChevronDownLine_default as j, DataTableHeaderCell as k, DataTableHeaderCellInner as l, DataTableHeaderCellLabel as m, DataTableHeaderCellIcon as n, IconSlider2HorizontalLine_default as o, CheckboxLabel as p, IconDot3HorizontalLine_default as q, IconChevronUpLine_default as r, splitMultipleVariantsProps as s, composeRefs as t, IconChevronDownSmallLine_default as u, IconCheckmarkFatFill_default as v, withScaleFeedback as w, IconPersonCircleLine_default as x, IconPlusLine_default as y, withContext as z };