@crispy-seed/data-table 0.12.0 → 0.12.1

package/dist/index.cjs

@@ -1340,13 +1340,15 @@ const EMPTY_RECORD = {};
             })), [
         setColumnWidths
     ]);
-    const moveColumn = React.useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(current ?? columnKeys, key, direction)), [
+    const moveColumn = React.useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(reconcileColumnOrder(current ?? columnKeys, columnKeys, actionsColumnKey), key, direction)), [
         setRawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
-    const reorderColumn = React.useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(current ?? columnKeys, dragKey, dropKey)), [
+    const reorderColumn = React.useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(reconcileColumnOrder(current ?? columnKeys, columnKeys, actionsColumnKey), dragKey, dropKey)), [
         setRawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     // -- drag-to-reorder ---------------------------------------------------------------
     // Live state only (which column is currently being dragged) -- the styled layer's
@@ -1514,11 +1516,11 @@ function sameCell(a, id, key) {
                 key
             });
             result.then(()=>{
-                setPendingCell(null);
-                setEditingCell(null);
+                setPendingCell((c)=>sameCell(c, id, key) ? null : c);
+                setEditingCell((c)=>sameCell(c, id, key) ? null : c);
             }, (err)=>{
-                setPendingCell(null);
-                setEditingCell(null);
+                setPendingCell((c)=>sameCell(c, id, key) ? null : c);
+                setEditingCell((c)=>sameCell(c, id, key) ? null : c);
                 setEditError({
                     id,
                     key,
@@ -2444,9 +2446,20 @@ DataTableCell$1.displayName = "DataTableCell";
 
 const EMPTY_VIEWS = [];
 function readStoredViews(storageKey) {
-    if (!storageKey || typeof window === "undefined") return EMPTY_VIEWS;
+    if (!storageKey || typeof window === "undefined") return null;
     try {
-        return deserializeDataTableViews(window.localStorage.getItem(storageKey));
+        const raw = window.localStorage.getItem(storageKey);
+        if (raw === null) return null;
+        // Only a well-formed array counts as "stored" -- `[]` is a real answer (the user
+        // deleted every view), whereas garbage/non-array JSON is treated as absent so the
+        // defaults still seed.
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        } catch  {
+            return null;
+        }
+        return Array.isArray(parsed) ? deserializeDataTableViews(raw) : null;
     } catch  {
         // A private-browsing tab / blocked storage throws on access, not just on quota --
         // this hook degrades to in-memory-only rather than crash the table over it.
@@ -2484,7 +2497,7 @@ function readStoredViews(storageKey) {
             // Nothing in storage yet (first run, or no `storageKey` at all) -- seed from
             // `defaultViews` instead of an empty list, matching every other hook's own
             // `defaultProp` semantics.
-            initialViewsRef.current = stored.length > 0 ? stored : defaultViews;
+            initialViewsRef.current = stored !== null ? stored : defaultViews;
         }
     }
     const [views = EMPTY_VIEWS, setViews] = useControllableState$1({
@@ -4480,6 +4493,10 @@ const { ClassNamesProvider, withContext: withContext$1, useClassNames } = create
     });
 }
 
+/** Attribute on the floating-ui-portaled option list of the `select`/`reference`/`actor`
+ *  editors. The portal lands in `document.body`, outside the cell and its expand overlay,
+ *  so `body-cells.tsx`'s outside-click detector checks for this marker to avoid reading an
+ *  option click as "outside" and cancelling the edit before it commits. */ const EDITOR_PORTAL_ATTR = "data-datatable-editor-portal";
 /** 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:
@@ -4628,6 +4645,7 @@ function SelectEditor({ column, value, pending, onCommit, onCancel }) {
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(SelectPositioner, {
+                [EDITOR_PORTAL_ATTR]: "",
                 children: /*#__PURE__*/ jsxRuntime.jsxs(SelectContent, {
                     children: [
                         searchable && /*#__PURE__*/ jsxRuntime.jsx(SelectSearchField, {
@@ -4703,6 +4721,7 @@ function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(SelectPositioner, {
+                [EDITOR_PORTAL_ATTR]: "",
                 children: /*#__PURE__*/ jsxRuntime.jsxs(SelectContent, {
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(SelectSearchField, {
@@ -5318,8 +5337,14 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         function isInside(target) {
             return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
+        // The select/reference/actor editor's option list is portaled to `document.body` by
+        // floating-ui, outside both `cellRef` and `expandOverlayRef`; `editors.tsx` marks its
+        // positioner with `EDITOR_PORTAL_ATTR`, so a click on an option is not an outside click.
+        function isInsideEditorPortal(target) {
+            return target instanceof Element && target.closest(`[${EDITOR_PORTAL_ATTR}]`) != null;
+        }
         function handlePointerDown(event) {
-            if (!isInside(event.target)) {
+            if (!isInside(event.target) && !isInsideEditorPortal(event.target)) {
                 setOverlayOpen(false);
                 setPopoverStyle(null);
                 closePeek();
@@ -11193,7 +11218,13 @@ const toDateOrNull = (v)=>{
                 return f.op === "before" ? d < cd : d > cd;
             }
             const t = asText(raw).toLowerCase();
-            if (f.op === "isanyof") return (f.values ?? []).some((v)=>v.toLowerCase() === t);
+            if (f.op === "isanyof") {
+                const wanted = (f.values ?? []).map((v)=>v.toLowerCase());
+                const cells = Array.isArray(raw) ? raw.map((x)=>asText(x).toLowerCase()) : [
+                    t
+                ];
+                return cells.some((c)=>wanted.includes(c));
+            }
             const v = f.value.trim().toLowerCase();
             if (f.op === "contains") return t.includes(v);
             if (f.op === "doesnotcontain") return !t.includes(v);

package/dist/index.js

@@ -1321,13 +1321,15 @@ const EMPTY_RECORD = {};
             })), [
         setColumnWidths
     ]);
-    const moveColumn = useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(current ?? columnKeys, key, direction)), [
+    const moveColumn = useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(reconcileColumnOrder(current ?? columnKeys, columnKeys, actionsColumnKey), key, direction)), [
         setRawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
-    const reorderColumn = useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(current ?? columnKeys, dragKey, dropKey)), [
+    const reorderColumn = useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(reconcileColumnOrder(current ?? columnKeys, columnKeys, actionsColumnKey), dragKey, dropKey)), [
         setRawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     // -- drag-to-reorder ---------------------------------------------------------------
     // Live state only (which column is currently being dragged) -- the styled layer's
@@ -1495,11 +1497,11 @@ function sameCell(a, id, key) {
                 key
             });
             result.then(()=>{
-                setPendingCell(null);
-                setEditingCell(null);
+                setPendingCell((c)=>sameCell(c, id, key) ? null : c);
+                setEditingCell((c)=>sameCell(c, id, key) ? null : c);
             }, (err)=>{
-                setPendingCell(null);
-                setEditingCell(null);
+                setPendingCell((c)=>sameCell(c, id, key) ? null : c);
+                setEditingCell((c)=>sameCell(c, id, key) ? null : c);
                 setEditError({
                     id,
                     key,
@@ -2425,9 +2427,20 @@ DataTableCell$1.displayName = "DataTableCell";
 
 const EMPTY_VIEWS = [];
 function readStoredViews(storageKey) {
-    if (!storageKey || typeof window === "undefined") return EMPTY_VIEWS;
+    if (!storageKey || typeof window === "undefined") return null;
     try {
-        return deserializeDataTableViews(window.localStorage.getItem(storageKey));
+        const raw = window.localStorage.getItem(storageKey);
+        if (raw === null) return null;
+        // Only a well-formed array counts as "stored" -- `[]` is a real answer (the user
+        // deleted every view), whereas garbage/non-array JSON is treated as absent so the
+        // defaults still seed.
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        } catch  {
+            return null;
+        }
+        return Array.isArray(parsed) ? deserializeDataTableViews(raw) : null;
     } catch  {
         // A private-browsing tab / blocked storage throws on access, not just on quota --
         // this hook degrades to in-memory-only rather than crash the table over it.
@@ -2465,7 +2478,7 @@ function readStoredViews(storageKey) {
             // Nothing in storage yet (first run, or no `storageKey` at all) -- seed from
             // `defaultViews` instead of an empty list, matching every other hook's own
             // `defaultProp` semantics.
-            initialViewsRef.current = stored.length > 0 ? stored : defaultViews;
+            initialViewsRef.current = stored !== null ? stored : defaultViews;
         }
     }
     const [views = EMPTY_VIEWS, setViews] = useControllableState$1({
@@ -4461,6 +4474,10 @@ const { ClassNamesProvider, withContext: withContext$1, useClassNames } = create
     });
 }
 
+/** Attribute on the floating-ui-portaled option list of the `select`/`reference`/`actor`
+ *  editors. The portal lands in `document.body`, outside the cell and its expand overlay,
+ *  so `body-cells.tsx`'s outside-click detector checks for this marker to avoid reading an
+ *  option click as "outside" and cancelling the edit before it commits. */ const EDITOR_PORTAL_ATTR = "data-datatable-editor-portal";
 /** 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:
@@ -4609,6 +4626,7 @@ function SelectEditor({ column, value, pending, onCommit, onCancel }) {
                 ]
             }),
             /*#__PURE__*/ jsx(SelectPositioner, {
+                [EDITOR_PORTAL_ATTR]: "",
                 children: /*#__PURE__*/ jsxs(SelectContent, {
                     children: [
                         searchable && /*#__PURE__*/ jsx(SelectSearchField, {
@@ -4684,6 +4702,7 @@ function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
                 ]
             }),
             /*#__PURE__*/ jsx(SelectPositioner, {
+                [EDITOR_PORTAL_ATTR]: "",
                 children: /*#__PURE__*/ jsxs(SelectContent, {
                     children: [
                         /*#__PURE__*/ jsx(SelectSearchField, {
@@ -5299,8 +5318,14 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         function isInside(target) {
             return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
+        // The select/reference/actor editor's option list is portaled to `document.body` by
+        // floating-ui, outside both `cellRef` and `expandOverlayRef`; `editors.tsx` marks its
+        // positioner with `EDITOR_PORTAL_ATTR`, so a click on an option is not an outside click.
+        function isInsideEditorPortal(target) {
+            return target instanceof Element && target.closest(`[${EDITOR_PORTAL_ATTR}]`) != null;
+        }
         function handlePointerDown(event) {
-            if (!isInside(event.target)) {
+            if (!isInside(event.target) && !isInsideEditorPortal(event.target)) {
                 setOverlayOpen(false);
                 setPopoverStyle(null);
                 closePeek();
@@ -11174,7 +11199,13 @@ const toDateOrNull = (v)=>{
                 return f.op === "before" ? d < cd : d > cd;
             }
             const t = asText(raw).toLowerCase();
-            if (f.op === "isanyof") return (f.values ?? []).some((v)=>v.toLowerCase() === t);
+            if (f.op === "isanyof") {
+                const wanted = (f.values ?? []).map((v)=>v.toLowerCase());
+                const cells = Array.isArray(raw) ? raw.map((x)=>asText(x).toLowerCase()) : [
+                    t
+                ];
+                return cells.some((c)=>wanted.includes(c));
+            }
             const v = f.value.trim().toLowerCase();
             if (f.op === "contains") return t.includes(v);
             if (f.op === "doesnotcontain") return !t.includes(v);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",