@vygruppen/spor-react 12.24.15 → 13.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.15",
+  "version": "13.0.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.3.3",
-    "@vygruppen/spor-icon-react": "4.5.3",
+    "@vygruppen/spor-icon-react": "5.0.0",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
@@ -56,13 +56,13 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/node": "^22.13.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
     "clsx": "^2.1.1",
     "concurrently": "^9.1.2",
     "eslint": "^9.39.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "tsup": "^7.2.0",
     "typescript": "^5.7.3",
     "vitest": "^0.26.3",
@@ -72,8 +72,8 @@
     "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
-    "react": ">=18.0.0 <19.0.0",
-    "react-dom": ">=18.0.0 <19.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "scripts": {
     "build": "tsup",

package/src/accordion/Accordion.tsx

@@ -8,7 +8,6 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DropdownDownFill24Icon } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 import { warnAboutMismatchingIcon } from "./helpers";
 import {
@@ -53,28 +52,33 @@ import {
  * @see https://spor.vy.no/components/accordion
  */
 
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  (props, ref) => {
-    const { variant = "core", children, gap = 2, css, ...rest } = props;
-    const recipe = useSlotRecipe({ key: "accordion" });
-    const styles = recipe({ variant });
-    return (
-      <ChakraAccordion.Root
-        {...rest}
-        ref={ref}
-        css={{ ...styles.root, ...css }}
-        variant={variant}
-      >
-        <Stack gap={gap}>{children}</Stack>
-      </ChakraAccordion.Root>
-    );
-  },
-);
+export const Accordion = ({
+  ref,
+  ...props
+}: AccordionProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { variant = "core", children, gap = 2, css, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "accordion" });
+  const styles = recipe({ variant });
+  return (
+    <ChakraAccordion.Root
+      {...rest}
+      ref={ref}
+      css={{ ...styles.root, ...css }}
+      variant={variant}
+    >
+      <Stack gap={gap}>{children}</Stack>
+    </ChakraAccordion.Root>
+  );
+};
 
-export const AccordionItemTrigger = forwardRef<
-  HTMLButtonElement,
-  AccordionItemTriggerProps
->(function AccordionItemTrigger(props, ref) {
+export const AccordionItemTrigger = function AccordionItemTrigger({
+  ref,
+  ...props
+}: AccordionItemTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   const {
     startElement,
     children,
@@ -105,12 +109,14 @@ export const AccordionItemTrigger = forwardRef<
       </ChakraAccordion.ItemTrigger>
     </Box>
   );
-});
+};
 
-export const AccordionItemContent = forwardRef<
-  HTMLDivElement,
-  AccordionItemContentProps
->(function AccordionItemContent(props, ref) {
+export const AccordionItemContent = function AccordionItemContent({
+  ref,
+  ...props
+}: AccordionItemContentProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const {
     children,
     css,
@@ -133,7 +139,6 @@ export const AccordionItemContent = forwardRef<
       </ChakraAccordion.ItemBody>
     </ChakraAccordion.ItemContent>
   );
-});
-Accordion.displayName = "Accordion";
+};
 
 export const AccordionItem = ChakraAccordion.Item;

package/src/accordion/Expandable.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { forwardRef } from "react";
-
 import {
   Accordion,
   AccordionItem,
@@ -24,23 +22,26 @@ import { ExpandableItemProps, ExpandableProps } from "./types";
  * ```
  */
 
-export const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(
-  (props, ref) => {
-    const { title, children, headingLevel, startElement, ...rest } = props;
-    return (
-      <Accordion ref={ref} {...rest}>
-        <ExpandableItem
-          title={title}
-          headingLevel={headingLevel}
-          startElement={startElement}
-          value="single-expandable"
-        >
-          {children}
-        </ExpandableItem>
-      </Accordion>
-    );
-  },
-);
+export const Expandable = ({
+  ref,
+  ...props
+}: ExpandableProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { title, children, headingLevel, startElement, ...rest } = props;
+  return (
+    <Accordion ref={ref} {...rest}>
+      <ExpandableItem
+        title={title}
+        headingLevel={headingLevel}
+        startElement={startElement}
+        value="single-expandable"
+      >
+        {children}
+      </ExpandableItem>
+    </Accordion>
+  );
+};
 
 /**
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
@@ -85,5 +86,3 @@ export const ExpandableItem = (props: ExpandableItemProps) => {
     </AccordionItem>
   );
 };
-
-Expandable.displayName = "Expandable";

package/src/alert/Alert.tsx

@@ -7,7 +7,6 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { IconComponent } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 import { CloseButton } from "@/button";
 
@@ -44,7 +43,12 @@ export type AlertProps = Omit<ChakraAlert.RootProps, "colorPalette"> & {
  * @see Docs https://spor.vy.no/alert
  */
 
-export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+export const Alert = ({
+  ref,
+  ...props
+}: AlertProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   const {
     title,
     showIndicator = true,
@@ -109,6 +113,4 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       )}
     </ChakraAlert.Root>
   );
-});
-
-Alert.displayName = "Alert";
+};

package/src/alert/AlertIcon.tsx

@@ -12,7 +12,6 @@ import {
   SuccessFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 import { VisuallyHidden } from "react-aria";
 
 import { createTexts, useTranslation } from "../i18n";
@@ -26,26 +25,26 @@ type AlertIconProps = {
 /**
  * Internal component that shows the correct icon for the alert
  */
-export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
-  ({ variant, customIcon: CustomAlertIcon }, ref) => {
-    const { t } = useTranslation();
-
-    return (
-      <Box ref={ref}>
-        <VisuallyHidden>
-          {t(texts[variant as keyof typeof texts])}
-        </VisuallyHidden>
-        {CustomAlertIcon ? (
-          <CustomAlertIcon color={`alert.${variant}.icon`} />
-        ) : (
-          <BaseAlertIcon variant={variant} />
-        )}
-      </Box>
-    );
-  },
-);
+export const AlertIcon = ({
+  ref,
+  variant,
+  customIcon: CustomAlertIcon,
+}: AlertIconProps & {
+  ref?: React.RefObject<SVGSVGElement>;
+}) => {
+  const { t } = useTranslation();
 
-AlertIcon.displayName = "AlertIcon";
+  return (
+    <Box ref={ref}>
+      <VisuallyHidden>{t(texts[variant as keyof typeof texts])}</VisuallyHidden>
+      {CustomAlertIcon ? (
+        <CustomAlertIcon color={`alert.${variant}.icon`} />
+      ) : (
+        <BaseAlertIcon variant={variant} />
+      )}
+    </Box>
+  );
+};
 
 export const BaseAlertIcon = ({
   variant,

package/src/alert/ExpandableAlert.tsx

@@ -10,7 +10,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { AccordionItemContent } from "@/accordion";
 import { alertExpandableSlotRecipe } from "@/theme/slot-recipes/alert-expandable";
@@ -59,70 +59,71 @@ type ExpandableAlertProps = PropsWithChildren<ExpandableAlertVariantProps> &
  * </ExpandableAlert>
  * ```
  */
-export const ExpandableAlert = forwardRef<HTMLDivElement, ExpandableAlertProps>(
-  (props, ref) => {
-    const {
-      variant = "info",
-      children,
-      title,
-      collapsible = true,
-      headingLevel = "h3",
-      defaultOpen = false,
-      css,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "alertExpandable" });
-    const styles = recipe({ variant });
+export const ExpandableAlert = ({
+  ref,
+  ...props
+}: ExpandableAlertProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    variant = "info",
+    children,
+    title,
+    collapsible = true,
+    headingLevel = "h3",
+    defaultOpen = false,
+    css,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "alertExpandable" });
+  const styles = recipe({ variant });
 
-    const defaultValue = "alert-expandable";
+  const defaultValue = "alert-expandable";
 
-    return (
-      <Accordion.Root
-        defaultValue={defaultOpen ? [defaultValue] : undefined}
-        ref={ref}
-        css={{ ...styles.root, ...css }}
-        collapsible={collapsible}
-        {...rest}
-      >
-        <Accordion.Item value={defaultValue}>
-          <Accordion.ItemTrigger css={styles.itemTrigger}>
-            <HStack
-              gap="1"
-              alignItems="center"
-              justifyContent="space-between"
-              flex="1"
-              width="full"
-            >
-              <HStack gap="1" alignItems="center">
-                <Box css={styles.indicator}>
-                  <AlertIcon variant={variant} />
-                </Box>
-                <Span
-                  as={headingLevel}
-                  css={{
-                    // Truncate the title to one line
-                    display: "-webkit-box",
-                    overflow: "hidden",
-                    WebkitLineClamp: "1",
-                    WebkitBoxOrient: "vertical",
-                  }}
-                >
-                  {title}
-                </Span>
-              </HStack>
-
-              <Accordion.ItemIndicator>
-                <DropdownDownFill18Icon />
-              </Accordion.ItemIndicator>
+  return (
+    <Accordion.Root
+      defaultValue={defaultOpen ? [defaultValue] : undefined}
+      ref={ref}
+      css={{ ...styles.root, ...css }}
+      collapsible={collapsible}
+      {...rest}
+    >
+      <Accordion.Item value={defaultValue}>
+        <Accordion.ItemTrigger css={styles.itemTrigger}>
+          <HStack
+            gap="1"
+            alignItems="center"
+            justifyContent="space-between"
+            flex="1"
+            width="full"
+          >
+            <HStack gap="1" alignItems="center">
+              <Box css={styles.indicator}>
+                <AlertIcon variant={variant} />
+              </Box>
+              <Span
+                as={headingLevel}
+                css={{
+                  // Truncate the title to one line
+                  display: "-webkit-box",
+                  overflow: "hidden",
+                  WebkitLineClamp: "1",
+                  WebkitBoxOrient: "vertical",
+                }}
+              >
+                {title}
+              </Span>
             </HStack>
-          </Accordion.ItemTrigger>
-          <AccordionItemContent css={styles.itemContent}>
-            {children}
-          </AccordionItemContent>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-);
 
-ExpandableAlert.displayName = "ExpandableAlert";
+            <Accordion.ItemIndicator>
+              <DropdownDownFill18Icon />
+            </Accordion.ItemIndicator>
+          </HStack>
+        </Accordion.ItemTrigger>
+        <AccordionItemContent css={styles.itemContent}>
+          {children}
+        </AccordionItemContent>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};

package/src/alert/ServiceAlert.tsx

@@ -14,7 +14,7 @@ import {
   ServiceFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { alertServiceSlotRecipe } from "../theme/slot-recipes/alert-service";
@@ -57,86 +57,86 @@ type ServiceAlertProps = Omit<AlertProps, "variant"> &
  * ```
  */
 
-export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
-  (props, ref) => {
-    const {
-      variant = "service",
-      children,
-      title,
-      notification,
-      contentWidth = "container.md",
-      headingLevel = "h3",
-      defaultOpen = false,
-      collapsible = true,
-      css,
-      ...rest
-    } = props;
-    const { t } = useTranslation();
-    const recipe = useSlotRecipe({ key: "alertService" });
-    const styles = recipe({ variant });
+export const ServiceAlert = ({
+  ref,
+  ...props
+}: ServiceAlertProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    variant = "service",
+    children,
+    title,
+    notification,
+    contentWidth = "container.md",
+    headingLevel = "h3",
+    defaultOpen = false,
+    collapsible = true,
+    css,
+    ...rest
+  } = props;
+  const { t } = useTranslation();
+  const recipe = useSlotRecipe({ key: "alertService" });
+  const styles = recipe({ variant });
 
-    const defaultValue = "spor-service-alert";
-    return (
-      <Accordion.Root
-        defaultValue={defaultOpen ? [defaultValue] : undefined}
-        collapsible={collapsible}
-        css={{ ...styles.root, ...css }}
-        ref={ref}
-        {...rest}
-      >
-        <Accordion.Item value={defaultValue}>
-          <Accordion.ItemTrigger css={styles.itemTrigger}>
-            <HStack
-              justifyContent="space-between"
-              alignContent="center"
-              width="100%"
-              maxWidth={contentWidth}
-            >
-              <HStack as={headingLevel} alignItems="center" gap="1">
-                {variant === "service" ? (
-                  <ServiceFill24Icon aria-label={t(texts.service)} />
-                ) : (
-                  <WarningFill24Icon
-                    aria-label={t(texts["global-deviation"])}
-                  />
-                )}
-                <Span
-                  css={{
-                    // Truncate the title to one line
-                    display: "-webkit-box",
-                    overflow: "hidden",
-                    WebkitLineClamp: "1",
-                    WebkitBoxOrient: "vertical",
-                    ...styles.itemTriggerTitle,
-                  }}
-                >
-                  {title}
-                </Span>
-              </HStack>
-              <Flex alignItems="center" gap={[0.5, null, null, 1]}>
-                {notification && (
-                  <Text css={styles.notificationText}>
-                    {t(texts.notification(notification))}
-                  </Text>
-                )}
-                <Accordion.ItemIndicator>
-                  <DropdownDownFill24Icon color="icon.inverted" />
-                </Accordion.ItemIndicator>
-              </Flex>
+  const defaultValue = "spor-service-alert";
+  return (
+    <Accordion.Root
+      defaultValue={defaultOpen ? [defaultValue] : undefined}
+      collapsible={collapsible}
+      css={{ ...styles.root, ...css }}
+      ref={ref}
+      {...rest}
+    >
+      <Accordion.Item value={defaultValue}>
+        <Accordion.ItemTrigger css={styles.itemTrigger}>
+          <HStack
+            justifyContent="space-between"
+            alignContent="center"
+            width="100%"
+            maxWidth={contentWidth}
+          >
+            <HStack as={headingLevel} alignItems="center" gap="1">
+              {variant === "service" ? (
+                <ServiceFill24Icon aria-label={t(texts.service)} />
+              ) : (
+                <WarningFill24Icon aria-label={t(texts["global-deviation"])} />
+              )}
+              <Span
+                css={{
+                  // Truncate the title to one line
+                  display: "-webkit-box",
+                  overflow: "hidden",
+                  WebkitLineClamp: "1",
+                  WebkitBoxOrient: "vertical",
+                  ...styles.itemTriggerTitle,
+                }}
+              >
+                {title}
+              </Span>
             </HStack>
-          </Accordion.ItemTrigger>
+            <Flex alignItems="center" gap={[0.5, null, null, 1]}>
+              {notification && (
+                <Text css={styles.notificationText}>
+                  {t(texts.notification(notification))}
+                </Text>
+              )}
+              <Accordion.ItemIndicator>
+                <DropdownDownFill24Icon color="icon.inverted" />
+              </Accordion.ItemIndicator>
+            </Flex>
+          </HStack>
+        </Accordion.ItemTrigger>
 
-          <Accordion.ItemContent css={styles.itemContent}>
-            <Accordion.ItemBody maxWidth={contentWidth} css={styles.itemBody}>
-              {children}
-            </Accordion.ItemBody>
-          </Accordion.ItemContent>
-        </Accordion.Item>
-      </Accordion.Root>
-    );
-  },
-);
-ServiceAlert.displayName = "ServiceAlert";
+        <Accordion.ItemContent css={styles.itemContent}>
+          <Accordion.ItemBody maxWidth={contentWidth} css={styles.itemBody}>
+            {children}
+          </Accordion.ItemBody>
+        </Accordion.ItemContent>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};
 
 const texts = createTexts({
   notification: (notification) => {