@vygruppen/spor-react 12.22.1 → 12.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.22.1",
+  "version": "12.23.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "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-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.3.2"
+    "@vygruppen/spor-icon-react": "4.5.1"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -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/alert/AlertIcon.tsx

@@ -13,6 +13,7 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import { forwardRef } from "react";
+import { VisuallyHidden } from "react-aria";
 
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
@@ -30,7 +31,10 @@ export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
     const { t } = useTranslation();
 
     return (
-      <Box ref={ref} aria-label={t(texts[variant as keyof typeof texts])}>
+      <Box ref={ref}>
+        <VisuallyHidden>
+          {t(texts[variant as keyof typeof texts])}
+        </VisuallyHidden>
         {CustomAlertIcon ? (
           <CustomAlertIcon color={`alert.${variant}.icon`} />
         ) : (

package/src/input/AttachedInputs.tsx

@@ -90,7 +90,7 @@ const SwitchButton = chakra(
   defineRecipe({
     base: {
       position: "absolute !important",
-      zIndex: "docked !important",
+      zIndex: "101 !important",
       // eslint-disable-next-line spor/use-semantic-tokens
       bg: "bg !important",
       outlineWidth: "1px !important",
@@ -107,7 +107,7 @@ const SwitchButton = chakra(
         },
         vertical: {
           top: "calc(50% - 15px)",
-          right: "12px",
+          right: "3rem",
           transform: "rotate(90deg)",
         },
       },

package/src/input/Autocomplete.tsx

@@ -2,6 +2,7 @@ import {
   Combobox,
   ComboboxItemProps,
   ComboboxRootProps,
+  useCombobox,
   useComboboxContext,
   useFilter,
   useListCollection,
@@ -24,6 +25,8 @@ type Props = {
   leftIcon?: React.ReactNode;
   filteredExternally?: boolean;
   loading?: boolean;
+  emptyLabel?: React.ReactNode;
+  openOnFocus?: boolean;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 
@@ -40,6 +43,9 @@ export const Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }: Props) => {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -64,26 +70,29 @@ export const Autocomplete = ({
     [children, collection.items],
   );
 
+  const combobox = useCombobox({
+    collection,
+    openOnClick,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange?.(event);
+    },
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1,
+      },
+      flip: false,
+    },
+    disabled,
+    ...rest,
+  });
+
   return (
-    <Combobox.Root
-      {...rest}
-      collection={collection}
-      onInputValueChange={(event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange?.(event);
-      }}
-      positioning={{
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1,
-        },
-        flip: false,
-      }}
-      disabled={disabled}
-    >
+    <Combobox.RootProvider value={combobox}>
       <Combobox.Control>
         <Combobox.Input asChild>
           <Input
@@ -95,17 +104,22 @@ export const Autocomplete = ({
             helperText={helperText}
             errorText={errorText}
             required={required}
+            onFocus={() => {
+              if (openOnFocus) combobox.setOpen(true);
+            }}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>
-          <Combobox.ClearTrigger asChild>
+          <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
             <CloseButton size="xs" />
           </Combobox.ClearTrigger>
         </Combobox.IndicatorGroup>
       </Combobox.Control>
       <Combobox.Positioner>
         <Combobox.Content>
-          <Combobox.Empty>{!loading && t(texts.noItemsFound)}</Combobox.Empty>
+          <Combobox.Empty>
+            {!loading && (emptyLabel ?? t(texts.noItemsFound))}
+          </Combobox.Empty>
           {loading ? (
             <ColorSpinner width="1.5rem" p="2" />
           ) : (
@@ -113,7 +127,7 @@ export const Autocomplete = ({
           )}
         </Combobox.Content>
       </Combobox.Positioner>
-    </Combobox.Root>
+    </Combobox.RootProvider>
   );
 };
 
@@ -206,4 +220,10 @@ const texts = createTexts({
     sv: "Inga resultat",
     en: "No results found",
   },
+  clearValue: {
+    nb: "Tøm verdi",
+    nn: "Tøm verdi",
+    sv: "Rensa värde",
+    en: "Clear value",
+  },
 });

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/Field.tsx

@@ -129,7 +129,9 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             </FloatingLabel>
           )}
           {errorText && (
-            <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+            <ChakraField.ErrorText aria-live="polite">
+              {errorText}
+            </ChakraField.ErrorText>
           )}
         </ChakraField.Root>
         {helperText && (

package/src/input/FloatingLabel.tsx

@@ -19,14 +19,14 @@ const floatingLabelStyles = defineStyle({
   },
 
   pos: "absolute",
-  transition: "position",
+  transition: "top 160ms ease, font-size 160ms ease",
 
   top: "0.9rem",
   color: "text",
   fontSize: ["mobile.sm", "desktop.sm"],
 
   "&[data-float]": {
-    fontSize: ["mobile.xs", "desktop.xs"],
+    fontSize: ["mobile.2xs", "desktop.2xs"],
     color: "text",
     top: "0.3rem",
   },

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 fontSize={fontSize ?? "mobile.md"}>
+          <Flex id={labelId}>
             <Box visibility="hidden">{startElement}</Box>
             {label}
           </Flex>
@@ -119,6 +122,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           <InputElement
             pointerEvents="none"
             paddingX={2}
+            aria-hidden="true"
             fontSize={fontSize ?? "mobile.md"}
           >
             {startElement}
@@ -140,6 +144,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           placeholder=""
           css={styles}
           fontSize={fontSize ?? "mobile.md"}
+          aria-labelledby={labelId}
         />
         {endElement && (
           <InputElement

package/src/input/NumericStepper.tsx

@@ -107,7 +107,6 @@ export const NumericStepper = React.forwardRef<
     <Field
       css={styles.root}
       width="auto"
-      id={idProperty}
       ref={ref}
       label={label}
       helperText={helperText}
@@ -133,7 +132,6 @@ export const NumericStepper = React.forwardRef<
           }
         }}
         disabled={disabled || value <= minValue}
-        id={value <= minValue ? undefined : idProperty}
       />
       {withInput ? (
         <Input
@@ -142,7 +140,7 @@ export const NumericStepper = React.forwardRef<
           name={nameProperty}
           value={value}
           disabled={disabled}
-          id={value === 0 ? undefined : idProperty}
+          id={idProperty}
           css={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           aria-live="assertive"
@@ -189,7 +187,6 @@ export const NumericStepper = React.forwardRef<
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         disabled={disabled || value >= maxValue}
-        id={value >= maxValue ? undefined : idProperty}
       />
     </Field>
   );

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;
+  });