@vygruppen/spor-react 12.22.2 → 12.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.22.2",
+  "version": "12.23.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.3.2",
-    "@vygruppen/spor-icon-react": "4.5.1",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "4.5.1"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/CountryCodeSelect.tsx

@@ -62,6 +62,7 @@ export const CountryCodeSelect = forwardRef<
       lazyMount
       aria-label={t(texts.countryCode)}
       sideRadiusVariant="rightSideSquare"
+      role="combobox"
     >
       {filteredCallingCodes.items.map((code) => (
         <SelectItem key={code.label} item={code}>

package/src/input/Input.tsx

@@ -11,6 +11,7 @@ import React, {
   ComponentProps,
   forwardRef,
   ReactNode,
+  useId,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -84,6 +85,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
 
+    const labelId = useId();
+
     const inputRef = useRef<HTMLInputElement>(null);
     useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
 
@@ -107,7 +110,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         id={props.id}
         labelAsChild={labelAsChild}
         label={
-          <Flex>
+          <Flex id={labelId}>
             <Box visibility="hidden">{startElement}</Box>
             {label}
           </Flex>
@@ -141,6 +144,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           placeholder=""
           css={styles}
           fontSize={fontSize ?? "mobile.md"}
+          aria-labelledby={labelId}
         />
         {endElement && (
           <InputElement

package/src/input/Textarea.tsx

@@ -1,6 +1,6 @@
 "use client";
-
 import {
+  Box,
   RecipeVariantProps,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
@@ -10,6 +10,7 @@ import React, {
   forwardRef,
   PropsWithChildren,
   ReactNode,
+  useId,
   useImperativeHandle,
   useLayoutEffect,
   useRef,
@@ -18,9 +19,7 @@ import React, {
 
 import { textareaRecipe } from "../theme/recipes/textarea";
 import { Field, FieldProps } from "./Field";
-import { FloatingLabel } from "./FloatingLabel";
 import { useFloatingInputState } from "./useFLoatingInputState";
-
 type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
 export type TextareaProps = Exclude<
   ChakraTextareaProps,
@@ -30,40 +29,33 @@ export type TextareaProps = Exclude<
   PropsWithChildren<TextareaVariants> & {
     label: ReactNode;
   };
-
 /**
  * Hook to calculate the height of the label element to adjust spacing for the input for floating label.
  */
 const useLabelHeight = (label: ReactNode | undefined) => {
   const labelRef = useRef<HTMLLabelElement>(null);
   const [labelHeight, setLabelHeight] = useState(0);
-
   useLayoutEffect(() => {
     const updateLabelHeight = () => {
       if (labelRef.current) {
         setLabelHeight(labelRef.current.offsetHeight);
       }
     };
-
     const observer = new ResizeObserver(updateLabelHeight);
     const currentLabelRef = labelRef.current;
     if (currentLabelRef) {
       observer.observe(currentLabelRef);
     }
-
     // Initial calculation with a slight delay to ensure CSS is applied
     setTimeout(updateLabelHeight, 0);
-
     return () => {
       if (currentLabelRef) {
         observer.unobserve(currentLabelRef);
       }
     };
   }, [label]);
-
   return { labelRef, labelHeight };
 };
-
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {
@@ -74,17 +66,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       errorText,
       readOnly,
       helperText,
-      floatingLabel,
+      floatingLabel = true,
       ...restProps
     } = props;
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
-
     const { labelRef, labelHeight } = useLabelHeight(label);
 
     const inputRef = useRef<HTMLTextAreaElement>(null);
     useImperativeHandle(ref, () => inputRef.current as HTMLTextAreaElement, []);
-
     const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
       useFloatingInputState<HTMLTextAreaElement>({
         value: props.value,
@@ -95,6 +85,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         inputRef,
       });
 
+    const labelId = useId();
+
     return (
       <Field
         errorText={errorText}
@@ -105,6 +97,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         floatingLabel={floatingLabel}
         shouldFloat={shouldFloat}
         position="relative"
+        label={
+          <Box id={labelId} aria-hidden>
+            <label ref={labelRef}>{label}</label>
+          </Box>
+        }
+        id={restProps.id}
       >
         <ChakraTextarea
           {...restProps}
@@ -119,16 +117,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             { "--label-height": `${labelHeight}px` } as React.CSSProperties
           }
           placeholder=" "
+          aria-labelledby={labelId}
         />
-        <FloatingLabel
-          ref={labelRef}
-          data-float={shouldFloat ? true : undefined}
-        >
-          {label}
-        </FloatingLabel>
       </Field>
     );
   },
 );
-
 Textarea.displayName = "Textarea";

package/src/table/Table.tsx

@@ -1,21 +1,57 @@
 "use client";
 import {
+  HStack,
   RecipeVariantProps,
   Table as ChakraTable,
+  TableBodyProps as ChakraTableBodyProps,
+  TableColumnHeaderProps as ChakraTableColumnHeaderProps,
   TableRootProps as ChakraTableProps,
+  TableRowProps as ChakraTableRowProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import { forwardRef, PropsWithChildren } from "react";
+import {
+  DropdownDownFill18Icon,
+  DropdownUpFill18Icon,
+} from "@vygruppen/spor-icon-react";
+import {
+  createContext,
+  forwardRef,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
 
 import { tableSlotRecipe } from "../theme/slot-recipes/table";
+import {
+  getColumnIndex,
+  getNextSortState,
+  getSortKey,
+  sortRows,
+  type SortState,
+} from "./sort-utils";
 
 type TableVariantProps = RecipeVariantProps<typeof tableSlotRecipe>;
 
+const SortContext = createContext<{
+  enabled: boolean;
+  sortState: SortState;
+  onSort: (key: string, columnIndex: number) => void;
+}>({
+  enabled: false,
+  sortState: { key: null, direction: "asc", columnIndex: null },
+  onSort: () => {},
+});
+
+export const useTableSort = () => useContext(SortContext);
+
 export type TableProps = Exclude<ChakraTableProps, "variant" | "colorPalette"> &
   PropsWithChildren<TableVariantProps> & {
     variant?: "ghost" | "core";
     colorPalette?: "grey" | "green" | "white";
+    sortable?: boolean;
   };
+
 /**
  * The `Table` component has support for two different variants - `ghost` and `core`. The `ghost` variant has basic lines between rows, while the `core` variant has borders for each cell.
  *
@@ -32,22 +68,114 @@ export type TableProps = Exclude<ChakraTableProps, "variant" | "colorPalette"> &
  * </Table>
  * ```
  */
-export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
-  const { variant = "ghost", size, colorPalette = "green", children } = props;
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  (
+    {
+      variant = "ghost",
+      size,
+      colorPalette = "green",
+      children,
+      sortable = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [sortState, setSortState] = useState<SortState>({
+      key: null,
+      direction: "asc",
+      columnIndex: null,
+    });
+
+    const handleSort = (key: string, columnIndex: number) => {
+      if (!sortable) return;
+      setSortState(getNextSortState(sortState, key, columnIndex));
+    };
+
+    const recipe = useSlotRecipe({ key: "table" });
+    const styles = recipe({ variant, size });
+
+    return (
+      <ChakraTable.Root
+        variant={variant}
+        size={size}
+        colorPalette={colorPalette}
+        css={styles}
+        ref={ref}
+        {...rest}
+      >
+        <SortContext.Provider
+          value={{ enabled: sortable, sortState, onSort: handleSort }}
+        >
+          {children}
+        </SortContext.Provider>
+      </ChakraTable.Root>
+    );
+  },
+);
+Table.displayName = "Table";
+
+export type TableColumnHeaderProps = ChakraTableColumnHeaderProps;
+
+export const TableColumnHeader = forwardRef<
+  HTMLTableCellElement,
+  TableColumnHeaderProps
+>(({ children, onClick, ...rest }, ref) => {
+  const { enabled, sortState, onSort } = useTableSort();
+  const key = getSortKey(children);
+  const isActive = enabled && key != null && key === sortState.key;
 
-  const recipe = useSlotRecipe({ key: "table" });
-  const styles = recipe({ variant, size });
   return (
-    <ChakraTable.Root
-      variant={variant}
-      size={size}
-      colorPalette={colorPalette}
-      css={styles}
+    <ChakraTable.ColumnHeader
       ref={ref}
-      {...props}
+      onClick={(event) => {
+        if (enabled && key) {
+          onSort(key, getColumnIndex(event.currentTarget));
+        }
+        onClick?.(event);
+      }}
+      cursor={enabled && key ? "pointer" : undefined}
+      {...rest}
     >
-      {children}
-    </ChakraTable.Root>
+      <HStack>
+        {children}
+        {isActive &&
+          (sortState.direction === "asc" ? (
+            <DropdownUpFill18Icon />
+          ) : (
+            <DropdownDownFill18Icon />
+          ))}
+      </HStack>
+    </ChakraTable.ColumnHeader>
   );
 });
-Table.displayName = "Table";
+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 sorted = useMemo(
+      () =>
+        sortState.columnIndex == null
+          ? children
+          : sortRows(children, sortState.columnIndex, sortState.direction),
+      [children, sortState],
+    );
+
+    return (
+      <ChakraTable.Body ref={ref} {...rest}>
+        {sorted}
+      </ChakraTable.Body>
+    );
+  },
+);
+TableBody.displayName = "TableBody";

package/src/table/index.tsx

@@ -1,24 +1,18 @@
 export * from "./Table";
 export type {
-  TableBodyProps,
   TableCaptionProps,
   TableCellProps,
-  TableColumnHeaderProps,
   TableColumnProps,
   TableFooterProps,
   TableHeaderProps,
   TableRootProps,
-  TableRowProps,
 } from "@chakra-ui/react";
 export {
-  TableBody,
   TableCaption,
   TableCell,
   TableColumn,
   TableColumnGroup,
-  TableColumnHeader,
   TableFooter,
   TableHeader,
   TableRoot,
-  TableRow,
 } from "@chakra-ui/react";

package/src/table/sort-utils.ts

@@ -0,0 +1,51 @@
+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 => ({
+  key,
+  columnIndex,
+  direction:
+    current.key === key && current.direction === "asc" ? "desc" : "asc",
+});
+
+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()) ||
+    ""
+  );
+};
+
+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;
+  });