@vygruppen/spor-react 12.24.0 → 12.24.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.0",
+  "version": "12.24.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-icon-react": "4.5.1",
     "@vygruppen/spor-design-tokens": "4.3.2",
+    "@vygruppen/spor-icon-react": "4.5.2",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "2.1.0",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "2.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/input/Field.tsx

@@ -113,7 +113,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           id={id}
         >
           {label && !floatingLabel && (
-            <Label asChild={labelAsChild}>
+            <Label asChild={labelAsChild} aria-hidden>
               {renderLabelWithIndicator(label, labelAsChild)}
             </Label>
           )}
@@ -124,6 +124,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             <FloatingLabel
               data-float={shouldFloat ? true : undefined}
               asChild={labelAsChild}
+              aria-hidden
             >
               {renderLabelWithIndicator(label, labelAsChild)}
             </FloatingLabel>

package/src/input/Textarea.tsx

@@ -98,7 +98,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         shouldFloat={shouldFloat}
         position="relative"
         label={
-          <Box id={labelId} aria-hidden>
+          <Box id={labelId}>
             <label ref={labelRef}>{label}</label>
           </Box>
         }

package/src/table/Table.tsx

@@ -7,7 +7,6 @@ import {
   TableBodyProps as ChakraTableBodyProps,
   TableColumnHeaderProps as ChakraTableColumnHeaderProps,
   TableRootProps as ChakraTableProps,
-  TableRowProps as ChakraTableRowProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import {
@@ -20,16 +19,17 @@ import {
   forwardRef,
   PropsWithChildren,
   useContext,
-  useMemo,
+  useLayoutEffect,
+  useRef,
   useState,
 } from "react";
 
 import { tableSlotRecipe } from "../theme/slot-recipes/table";
 import {
+  applyDomSort,
+  captureRowOrder,
   getColumnIndex,
   getNextSortState,
-  getSortKey,
-  sortRows,
   type SortState,
 } from "./sort-utils";
 
@@ -38,10 +38,10 @@ type TableVariantProps = RecipeVariantProps<typeof tableSlotRecipe>;
 const SortContext = createContext<{
   enabled: boolean;
   sortState: SortState;
-  onSort: (key: string, columnIndex: number) => void;
+  onSort: (columnIndex: number) => void;
 }>({
   enabled: false,
-  sortState: { key: null, direction: "asc", columnIndex: null },
+  sortState: { direction: "asc", columnIndex: null },
   onSort: () => {},
 });
 
@@ -83,14 +83,13 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
     ref,
   ) => {
     const [sortState, setSortState] = useState<SortState>({
-      key: null,
       direction: "asc",
       columnIndex: null,
     });
 
-    const handleSort = (key: string, columnIndex: number) => {
+    const handleSort = (columnIndex: number) => {
       if (!sortable) return;
-      setSortState(getNextSortState(sortState, key, columnIndex));
+      setSortState(getNextSortState(sortState, columnIndex));
     };
 
     const recipe = useSlotRecipe({ key: "table" });
@@ -123,22 +122,29 @@ export const TableColumnHeader = forwardRef<
   TableColumnHeaderProps
 >(({ children, ...rest }, ref) => {
   const { enabled, sortState, onSort } = useTableSort();
-  const key = getSortKey(children);
+  const [columnIndex, setColumnIndex] = useState<number | null>(null);
   const props = rest as Record<string, unknown>;
-  const columnSortable = enabled && key != null && !("data-nosort" in props);
-  const isActive = columnSortable && key === sortState.key;
+  const columnSortable = enabled && !("data-nosort" in props);
+  const isActive =
+    columnSortable &&
+    columnIndex != null &&
+    columnIndex === sortState.columnIndex;
 
   return (
-    <ChakraTable.ColumnHeader ref={ref} {...rest}>
+    <ChakraTable.ColumnHeader
+      ref={(element: HTMLTableCellElement) => {
+        if (element) setColumnIndex(getColumnIndex(element));
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+      }}
+      {...rest}
+    >
       <HStack>
         {children}
-        {columnSortable && (
+        {columnSortable && columnIndex != null && (
           <Button
             variant="ghost"
-            onClick={(event) => {
-              const th = event.currentTarget.closest("th");
-              if (th) onSort(key, getColumnIndex(th));
-            }}
+            onClick={() => onSort(columnIndex)}
             p="0px !important"
             size="xs"
           >
@@ -162,30 +168,40 @@ export const TableColumnHeader = forwardRef<
 });
 TableColumnHeader.displayName = "ColumnHeader";
 
-export type TableRowProps = ChakraTableRowProps;
-
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  (props, ref) => <ChakraTable.Row ref={ref} {...props} />,
-);
-TableRow.displayName = "TableRow";
-
 export type TableBodyProps = ChakraTableBodyProps;
 
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ children, ...rest }, ref) => {
     const { sortState } = useTableSort();
+    const tbodyRef = useRef<HTMLTableSectionElement | null>(null);
+    const originalOrder = useRef<HTMLTableRowElement[]>([]);
+    const previousChildren = useRef(children);
 
-    const sorted = useMemo(
-      () =>
-        sortState.columnIndex == null
-          ? children
-          : sortRows(children, sortState.columnIndex, sortState.direction),
-      [children, sortState],
-    );
+    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 (
-      <ChakraTable.Body ref={ref} {...rest}>
-        {sorted}
+      <ChakraTable.Body
+        ref={(element: HTMLTableSectionElement) => {
+          tbodyRef.current = element;
+          if (typeof ref === "function") ref(element);
+          else if (ref) ref.current = element;
+        }}
+        {...rest}
+      >
+        {children}
       </ChakraTable.Body>
     );
   },

package/src/table/index.tsx

@@ -6,6 +6,7 @@ export type {
   TableFooterProps,
   TableHeaderProps,
   TableRootProps,
+  TableRowProps,
 } from "@chakra-ui/react";
 export {
   TableCaption,
@@ -15,4 +16,5 @@ export {
   TableFooter,
   TableHeader,
   TableRoot,
+  TableRow,
 } from "@chakra-ui/react";

package/src/table/sort-utils.ts

@@ -1,51 +1,48 @@
-import { Children, isValidElement, type ReactNode } from "react";
-
 export type SortDirection = "asc" | "desc";
 export type SortState = {
-  key: string | null;
   direction: SortDirection;
   columnIndex: number | null;
 };
 
 export const getNextSortState = (
   current: SortState,
-  key: string,
   columnIndex: number,
 ): SortState => {
-  if (current.key !== key) return { key, columnIndex, direction: "asc" };
-  if (current.direction === "asc")
-    return { key, columnIndex, direction: "desc" };
-  return { key: null, direction: "asc", columnIndex: null }; // Initial sort state
+  if (current.columnIndex !== columnIndex)
+    return { columnIndex, direction: "asc" };
+  if (current.direction === "asc") return { columnIndex, direction: "desc" };
+  return { direction: "asc", columnIndex: null };
 };
 
-export const getSortKey = (children: ReactNode) =>
-  typeof children === "string" ? children.trim() : null;
-
 export const getColumnIndex = (element: HTMLElement) =>
   Array.prototype.indexOf.call(element.parentElement?.children, element);
 
-const getCellText = (row: React.ReactElement, columnIndex: number) => {
-  const cell = Children.toArray(
-    (row.props as { children?: ReactNode }).children,
-  )[columnIndex];
-  if (!isValidElement(cell)) return "";
-  const props = cell.props as Record<string, unknown>;
-  return (
-    (typeof props["data-sort"] === "string" && props["data-sort"]) ||
-    (typeof props.children === "string" && props.children.trim()) ||
-    ""
-  );
+const getCellSortText = (row: HTMLTableRowElement, columnIndex: number) => {
+  const cell = row.cells[columnIndex];
+  if (!cell) return "";
+  return cell.dataset.sort || cell.textContent?.trim() || "";
 };
 
-export const sortRows = (
-  children: ReactNode,
-  columnIndex: number,
-  direction: SortDirection,
-) =>
-  Children.toArray(children).toSorted((a, b) => {
-    if (!isValidElement(a) || !isValidElement(b)) return 0;
-    const cmp = getCellText(a, columnIndex).localeCompare(
-      getCellText(b, columnIndex),
-    );
-    return direction === "asc" ? cmp : -cmp;
-  });
+export const applyDomSort = (
+  tbody: HTMLTableSectionElement,
+  sortState: SortState,
+  originalRows: HTMLTableRowElement[],
+) => {
+  if (sortState.columnIndex == null) {
+    for (const row of originalRows) tbody.append(row);
+  } else {
+    // eslint-disable-next-line unicorn/prefer-spread -- HTMLCollectionOf is not spreadable
+    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);
+  }
+};
+
+export const captureRowOrder = (tbody: HTMLTableSectionElement) =>
+  // eslint-disable-next-line unicorn/prefer-spread -- HTMLCollectionOf is not spreadable
+  Array.from(tbody.rows);

package/src/theme/recipes/attached-inputs.ts

@@ -6,7 +6,7 @@ export const attachedInputsRecipe = defineRecipe({
     gap: "0.1rem",
     width: "100%",
     "& select": {
-      borderEndRadius: 0,
+      borderEndRadius: "0 !important",
     },
 
     "& > *": {
@@ -22,13 +22,13 @@ export const attachedInputsRecipe = defineRecipe({
       horizontal: {
         flexDirection: "row",
         "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderEndRadius: 0,
+          borderEndRadius: "0 !important",
         },
         "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0,
+          borderRadius: "0 !important",
         },
         "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderStartRadius: 0,
+          borderStartRadius: "0 !important",
         },
 
         "&[data-with-flip-button]": {
@@ -45,13 +45,13 @@ export const attachedInputsRecipe = defineRecipe({
       vertical: {
         flexDirection: "column",
         "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderBottomRadius: 0,
+          borderBottomRadius: "0 !important",
         },
         "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0,
+          borderRadius: "0 !important",
         },
         "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderTopRadius: 0,
+          borderTopRadius: "0 !important",
         },
       },
     },

package/src/theme/slot-recipes/native-select.ts

@@ -11,6 +11,11 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
       width: "100%",
       height: "fit-content",
       position: "relative",
+      backgroundColor: "surface",
+      "& option, & optgroup": {
+        color: "text",
+        backgroundColor: "surface",
+      },
     },
     field: {
       ...inputRecipe.base,

package/src/util/externals.tsx

@@ -1,17 +1,23 @@
 /** This file works as a proxy for all Chakra UI exports */
-export type { PortalProps, UseDisclosureProps } from "@chakra-ui/react";
+export type {
+  PortalProps,
+  SystemConfig,
+  UseDisclosureProps,
+} from "@chakra-ui/react";
 export {
   AspectRatio,
   ClientOnly,
   createIcon,
   createListCollection,
   defineRecipe,
+  defineSlotRecipe,
   defineStyle,
   For,
   FormatByte,
   FormatNumber,
   Icon,
   LocaleProvider,
+  mergeConfigs,
   Portal,
   Show,
   chakra as spor,