@vygruppen/spor-react 12.24.0 → 12.24.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.24.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           330.53 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       700.07 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2926ms
-CJS dist/index.cjs           354.42 KB
+CJS dist/index.cjs           355.66 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       700.07 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2927ms
-DTS ⚡️ Build success in 22676ms
+CJS dist/index.cjs.map       701.23 KB
+CJS ⚡️ Build success in 2706ms
+ESM dist/index.mjs           331.48 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/icons/index.mjs.map 157.00 B
+ESM dist/index.mjs.map       701.23 KB
+ESM ⚡️ Build success in 2715ms
+DTS ⚡️ Build success in 20723ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        147.69 KB
+DTS dist/index.d.ts        147.51 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       147.69 KB
+DTS dist/index.d.cts       147.51 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.24.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.3] injecting env (0) from .env -- tip: ⚙️  override existing env vars with { override: true }
+[dotenv@17.2.3] injecting env (0) from .env -- tip: 🔄 add secrets lifecycle management: https://dotenvx.com/ops
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 12.24.1
+
+### Patch Changes
+
+- c9487f9: Fix issue with dynamic children not working for table sort, and fix column header no longer needing `children: string` to work
+
 ## 12.24.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -6281,38 +6281,49 @@ var TabsList = react.Tabs.List;
 var TabsTrigger = react.Tabs.Trigger;
 var TabsIndicator = react.Tabs.Indicator;
 var TabsContent = react.Tabs.Content;
-var getNextSortState = (current, key, columnIndex) => {
-  if (current.key !== key)
-    return { key, columnIndex, direction: "asc" };
+
+// src/table/sort-utils.ts
+var getNextSortState = (current, columnIndex) => {
+  if (current.columnIndex !== columnIndex)
+    return { columnIndex, direction: "asc" };
   if (current.direction === "asc")
-    return { key, columnIndex, direction: "desc" };
-  return { key: null, direction: "asc", columnIndex: null };
+    return { columnIndex, direction: "desc" };
+  return { direction: "asc", columnIndex: null };
 };
-var getSortKey = (children) => typeof children === "string" ? children.trim() : null;
 var getColumnIndex = (element) => {
   var _a5;
   return Array.prototype.indexOf.call((_a5 = element.parentElement) == null ? void 0 : _a5.children, element);
 };
-var getCellText = (row, columnIndex) => {
-  const cell = React20.Children.toArray(
-    row.props.children
-  )[columnIndex];
-  if (!React20.isValidElement(cell))
+var getCellSortText = (row, columnIndex) => {
+  var _a5;
+  const cell = row.cells[columnIndex];
+  if (!cell)
     return "";
-  const props = cell.props;
-  return typeof props["data-sort"] === "string" && props["data-sort"] || typeof props.children === "string" && props.children.trim() || "";
+  return cell.dataset.sort || ((_a5 = cell.textContent) == null ? void 0 : _a5.trim()) || "";
 };
-var sortRows = (children, columnIndex, direction) => React20.Children.toArray(children).toSorted((a, b) => {
-  if (!React20.isValidElement(a) || !React20.isValidElement(b))
-    return 0;
-  const cmp = getCellText(a, columnIndex).localeCompare(
-    getCellText(b, columnIndex)
-  );
-  return direction === "asc" ? cmp : -cmp;
-});
+var applyDomSort = (tbody, sortState, originalRows) => {
+  if (sortState.columnIndex == null) {
+    for (const row of originalRows)
+      tbody.append(row);
+  } else {
+    const rows = Array.from(tbody.rows);
+    rows.sort((a, b) => {
+      const cmp = getCellSortText(a, sortState.columnIndex).localeCompare(
+        getCellSortText(b, sortState.columnIndex)
+      );
+      return sortState.direction === "asc" ? cmp : -cmp;
+    });
+    for (const row of rows)
+      tbody.append(row);
+  }
+};
+var captureRowOrder = (tbody) => (
+  // eslint-disable-next-line unicorn/prefer-spread -- HTMLCollectionOf is not spreadable
+  Array.from(tbody.rows)
+);
 var SortContext = React20.createContext({
   enabled: false,
-  sortState: { key: null, direction: "asc", columnIndex: null },
+  sortState: { direction: "asc", columnIndex: null },
   onSort: () => {
   }
 });
@@ -6327,14 +6338,13 @@ var Table = React20.forwardRef(
     ...rest
   }, ref) => {
     const [sortState, setSortState] = React20.useState({
-      key: null,
       direction: "asc",
       columnIndex: null
     });
-    const handleSort = (key, columnIndex) => {
+    const handleSort = (columnIndex) => {
       if (!sortable)
         return;
-      setSortState(getNextSortState(sortState, key, columnIndex));
+      setSortState(getNextSortState(sortState, columnIndex));
     };
     const recipe = react.useSlotRecipe({ key: "table" });
     const styles = recipe({ variant, size });
@@ -6361,47 +6371,75 @@ var Table = React20.forwardRef(
 Table.displayName = "Table";
 var TableColumnHeader = React20.forwardRef(({ children, ...rest }, ref) => {
   const { enabled, sortState, onSort } = useTableSort();
-  const key = getSortKey(children);
+  const [columnIndex, setColumnIndex] = React20.useState(null);
   const props = rest;
-  const columnSortable = enabled && key != null && !("data-nosort" in props);
-  const isActive = columnSortable && key === sortState.key;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Table.ColumnHeader, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
-    children,
-    columnSortable && /* @__PURE__ */ jsxRuntime.jsx(
-      react.Button,
-      {
-        variant: "ghost",
-        onClick: (event) => {
-          const th = event.currentTarget.closest("th");
-          if (th)
-            onSort(key, getColumnIndex(th));
-        },
-        p: "0px !important",
-        size: "xs",
-        children: isActive ? sortState.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowUpFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowDownFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(
-          spor_icon_react_star.ChangeDirectionFill18Icon,
+  const columnSortable = enabled && !("data-nosort" in props);
+  const isActive = columnSortable && columnIndex != null && columnIndex === sortState.columnIndex;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Table.ColumnHeader,
+    {
+      ref: (element) => {
+        if (element)
+          setColumnIndex(getColumnIndex(element));
+        if (typeof ref === "function")
+          ref(element);
+        else if (ref)
+          ref.current = element;
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
+        children,
+        columnSortable && columnIndex != null && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Button,
           {
-            transform: "rotate(90deg)",
-            color: "icon.disabled"
+            variant: "ghost",
+            onClick: () => onSort(columnIndex),
+            p: "0px !important",
+            size: "xs",
+            children: isActive ? sortState.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowUpFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowDownFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(
+              spor_icon_react_star.ChangeDirectionFill18Icon,
+              {
+                transform: "rotate(90deg)",
+                color: "icon.disabled"
+              }
+            )
           }
         )
-      }
-    )
-  ] }) });
+      ] })
+    }
+  );
 });
 TableColumnHeader.displayName = "ColumnHeader";
-var TableRow = React20.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(react.Table.Row, { ref, ...props })
-);
-TableRow.displayName = "TableRow";
 var TableBody = React20.forwardRef(
   ({ children, ...rest }, ref) => {
     const { sortState } = useTableSort();
-    const sorted = React20.useMemo(
-      () => sortState.columnIndex == null ? children : sortRows(children, sortState.columnIndex, sortState.direction),
-      [children, sortState]
+    const tbodyRef = React20.useRef(null);
+    const originalOrder = React20.useRef([]);
+    const previousChildren = React20.useRef(children);
+    React20.useLayoutEffect(() => {
+      const tbody = tbodyRef.current;
+      if (!tbody)
+        return;
+      if (previousChildren.current !== children || originalOrder.current.length === 0) {
+        originalOrder.current = captureRowOrder(tbody);
+        previousChildren.current = children;
+      }
+      applyDomSort(tbody, sortState, originalOrder.current);
+    }, [sortState, children]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Table.Body,
+      {
+        ref: (element) => {
+          tbodyRef.current = element;
+          if (typeof ref === "function")
+            ref(element);
+          else if (ref)
+            ref.current = element;
+        },
+        ...rest,
+        children
+      }
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Table.Body, { ref, ...rest, children: sorted });
   }
 );
 TableBody.displayName = "TableBody";
@@ -9681,7 +9719,12 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     root: {
       width: "100%",
       height: "fit-content",
-      position: "relative"
+      position: "relative",
+      backgroundColor: "surface",
+      "& option, & optgroup": {
+        color: "text",
+        backgroundColor: "surface"
+      }
     },
     field: {
       ...inputRecipe.base
@@ -12000,6 +12043,10 @@ Object.defineProperty(exports, "TableRoot", {
   enumerable: true,
   get: function () { return react.TableRoot; }
 });
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () { return react.TableRow; }
+});
 Object.defineProperty(exports, "VStack", {
   enumerable: true,
   get: function () { return react.VStack; }
@@ -12032,10 +12079,18 @@ Object.defineProperty(exports, "defineRecipe", {
   enumerable: true,
   get: function () { return react.defineRecipe; }
 });
+Object.defineProperty(exports, "defineSlotRecipe", {
+  enumerable: true,
+  get: function () { return react.defineSlotRecipe; }
+});
 Object.defineProperty(exports, "defineStyle", {
   enumerable: true,
   get: function () { return react.defineStyle; }
 });
+Object.defineProperty(exports, "mergeConfigs", {
+  enumerable: true,
+  get: function () { return react.mergeConfigs; }
+});
 Object.defineProperty(exports, "spor", {
   enumerable: true,
   get: function () { return react.chakra; }
@@ -12253,7 +12308,6 @@ exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableColumnHeader = TableColumnHeader;
-exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsIndicator = TabsIndicator;