@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/layout/RadioCard.tsx

@@ -4,7 +4,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import React, { useId } from "react";
 
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
@@ -38,32 +38,34 @@ type RadioCardItemProps = Exclude<
     ariaLabel?: string;
   };
 
-export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
-  (props, ref) => {
-    const { inputProps, children } = props;
-    const uniqueId = useId();
-    const itemControlId = `radio-card-item-control-${uniqueId}`;
+export const RadioCard = ({
+  ref,
+  ...props
+}: RadioCardItemProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const { inputProps, children } = props;
+  const uniqueId = useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
 
-    const inputHasAriaLabel =
-      inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
+  const inputHasAriaLabel =
+    inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
 
-    return (
-      <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput
-          aria-labelledby={
-            inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
-          }
-          ref={ref}
-          {...inputProps}
-        />
-        <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
-          {children}
-        </ChakraRadioCard.ItemControl>
-      </ChakraRadioCard.Item>
-    );
-  },
-);
-RadioCard.displayName = "RadioCard";
+  return (
+    <ChakraRadioCard.Item {...props}>
+      <ChakraRadioCard.ItemHiddenInput
+        aria-labelledby={
+          inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+        }
+        ref={ref}
+        {...inputProps}
+      />
+      <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
+        {children}
+      </ChakraRadioCard.ItemControl>
+    </ChakraRadioCard.Item>
+  );
+};
 
 type RadioCardRootProps = RadioCardVariantProps &
   Exclude<ChakraRadioCard.RootProps, "variant"> & {
@@ -73,34 +75,36 @@ type RadioCardRootProps = RadioCardVariantProps &
     display?: string;
   };
 
-export const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardRootProps>(
-  (props, ref) => {
-    const {
-      children,
-      variant,
-      gap = 2,
-      direction = "column",
-      display = "flex",
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "radio-card" });
-    const styles = recipe({ variant });
+export const RadioCardGroup = ({
+  ref,
+  ...props
+}: RadioCardRootProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    children,
+    variant,
+    gap = 2,
+    direction = "column",
+    display = "flex",
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "radio-card" });
+  const styles = recipe({ variant });
 
-    return (
-      <ChakraRadioCard.Root
-        ref={ref}
-        variant={variant}
-        css={styles}
-        display={display}
-        gap={gap}
-        flexDirection={direction}
-        {...rest}
-      >
-        {children}
-      </ChakraRadioCard.Root>
-    );
-  },
-);
-RadioCardGroup.displayName = "RadioCardGroup";
+  return (
+    <ChakraRadioCard.Root
+      ref={ref}
+      variant={variant}
+      css={styles}
+      display={display}
+      gap={gap}
+      flexDirection={direction}
+      {...rest}
+    >
+      {children}
+    </ChakraRadioCard.Root>
+  );
+};
 
 export const RadioCardLabel = ChakraRadioCard.Label;

package/src/layout/Separator.tsx

@@ -4,11 +4,12 @@ import {
   Separator as ChakraSeparator,
   SeparatorProps as ChakraSeparatorProps,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
-export const Separator = forwardRef<HTMLDivElement, ChakraSeparatorProps>(
-  (props, ref) => {
-    return <ChakraSeparator {...props} ref={ref} data- />;
-  },
-);
-Separator.displayName = "Separator";
+export const Separator = ({
+  ref,
+  ...props
+}: ChakraSeparatorProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  return <ChakraSeparator {...props} ref={ref} data- />;
+};

package/src/layout/StaticCard.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 import { staticCardRecipe } from "../theme/recipes/static-card";
 
@@ -44,13 +43,15 @@ import { staticCardRecipe } from "../theme/recipes/static-card";
 export type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> &
   BoxProps;
 
-export const StaticCard = forwardRef<HTMLDivElement, StaticCardProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "staticCard" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const StaticCard = ({
+  ref,
+  ...props
+}: StaticCardProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const recipe = useRecipe({ key: "staticCard" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    return <Box css={styles} {...restProps} ref={ref}></Box>;
-  },
-);
-StaticCard.displayName = "StaticCard";
+  return <Box css={styles} {...restProps} ref={ref}></Box>;
+};

package/src/linjetag/LineIcon.tsx

@@ -6,7 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import clsx from "clsx";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
 import { LinjeTagIcon } from "./icons";
@@ -63,63 +63,57 @@ export type LineIconProps = Exclude<BoxProps, "variant"> &
  * @see https://spor.vy.no/components/line-tags
  */
 
-export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
-  function LineIcon(
-    {
-      variant,
-      size = "md",
-      foregroundColor,
-      disabled,
-      style,
-      target = "lineIcon",
-      label,
-      ...rest
-    },
-    ref,
-  ) {
-    const recipe = useSlotRecipe({ key: "lineIcon" });
-    const styles = recipe({ variant, size, ...rest });
+export const LineIcon = function LineIcon({
+  ref,
+  variant,
+  size = "md",
+  foregroundColor,
+  disabled,
+  style,
+  target = "lineIcon",
+  label,
+  ...rest
+}: LineIconProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
+  const recipe = useSlotRecipe({ key: "lineIcon" });
+  const styles = recipe({ variant, size, ...rest });
 
-    const targetPadding = () => {
-      return target === "travelTag" ? 0.5 : 1;
-    };
+  const targetPadding = () => {
+    return target === "travelTag" ? 0.5 : 1;
+  };
 
-    const borderContainer = () => {
-      return variant === "walk" && target === "travelTag" ? 0 : "1px";
-    };
+  const borderContainer = () => {
+    return variant === "walk" && target === "travelTag" ? 0 : "1px";
+  };
 
-    if (foregroundColor) {
-      styles.iconContainer.backgroundColor = disabled
-        ? "surface.disabled"
-        : foregroundColor;
-    }
+  if (foregroundColor) {
+    styles.iconContainer.backgroundColor = disabled
+      ? "surface.disabled"
+      : foregroundColor;
+  }
 
-    function getIconVariant() {
-      if (variant === "custom") {
-        if ("customIconVariant" in rest) {
-          return rest.customIconVariant;
-        }
-        return "local-train";
+  function getIconVariant() {
+    if (variant === "custom") {
+      if ("customIconVariant" in rest) {
+        return rest.customIconVariant;
       }
-      return variant;
+      return "local-train";
     }
+    return variant;
+  }
 
-    return (
-      <Box
-        css={{ ...styles.iconContainer, ...style }}
-        padding={targetPadding()}
-        borderWidth={borderContainer()}
-        borderColor={variant === "walk" ? "core.outline" : "transparent"}
-        aria-label={label}
-        ref={ref}
-        className={clsx("light", rest.className)}
-      >
-        <LinjeTagIcon
-          size={size}
-          css={styles.icon}
-          variant={getIconVariant()}
-        />
-      </Box>
-    );
-  },
-);
+  return (
+    <Box
+      css={{ ...styles.iconContainer, ...style }}
+      padding={targetPadding()}
+      borderWidth={borderContainer()}
+      borderColor={variant === "walk" ? "core.outline" : "transparent"}
+      aria-label={label}
+      ref={ref}
+      className={clsx("light", rest.className)}
+    >
+      <LinjeTagIcon size={size} css={styles.icon} variant={getIconVariant()} />
+    </Box>
+  );
+};

package/src/linjetag/TravelTag.tsx

@@ -15,7 +15,7 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import clsx from "clsx";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
 import { LineIcon } from "./LineIcon";
@@ -128,64 +128,62 @@ function renderDeviationLevelIcon(
   }
 }
 
-export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
-  function TravelTag(
-    {
-      variant,
-      size = "md",
-      deviationLevel = "none",
-      title,
-      description,
-      disabled,
-      foregroundColor,
-      backgroundColor,
-      customIconVariant,
-      ...rest
-    },
-    ref,
-  ) {
-    const recipie = useSlotRecipe({ key: "travelTag" });
-    const styles = recipie({
-      variant,
-      size,
-      deviationLevel,
-    });
+export const TravelTag = function TravelTag({
+  ref,
+  variant,
+  size = "md",
+  deviationLevel = "none",
+  title,
+  description,
+  disabled,
+  foregroundColor,
+  backgroundColor,
+  customIconVariant,
+  ...rest
+}: TravelTagProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
+  const recipie = useSlotRecipe({ key: "travelTag" });
+  const styles = recipie({
+    variant,
+    size,
+    deviationLevel,
+  });
 
-    return (
-      <Box
-        css={styles.container}
-        aria-disabled={disabled}
-        ref={ref}
-        className={clsx("light", rest.className)}
+  return (
+    <Box
+      css={styles.container}
+      aria-disabled={disabled}
+      ref={ref}
+      className={clsx("light", rest.className)}
+      backgroundColor={backgroundColor}
+      {...rest}
+    >
+      <LineIcon
+        variant={variant}
+        size={size}
+        foregroundColor={foregroundColor}
         backgroundColor={backgroundColor}
-        {...rest}
-      >
-        <LineIcon
-          variant={variant}
-          size={size}
-          foregroundColor={foregroundColor}
-          backgroundColor={backgroundColor}
-          customIconVariant={customIconVariant}
-          disabled={disabled}
-          target="travelTag"
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          {...(rest as any)} //Find a way to not use any here
-        />
-        <Box css={styles.textContainer}>
-          {title && (
-            <Box as="span" css={styles.title}>
-              {title}
-            </Box>
-          )}
-          {title && description && " "}
-          {description && (
-            <Box as="span" css={styles.description}>
-              {description}
-            </Box>
-          )}
-        </Box>
-        {renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)}
+        customIconVariant={customIconVariant}
+        disabled={disabled}
+        target="travelTag"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...(rest as any)} //Find a way to not use any here
+      />
+      <Box css={styles.textContainer}>
+        {title && (
+          <Box as="span" css={styles.title}>
+            {title}
+          </Box>
+        )}
+        {title && description && " "}
+        {description && (
+          <Box as="span" css={styles.description}>
+            {description}
+          </Box>
+        )}
       </Box>
-    );
-  },
-);
+      {renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)}
+    </Box>
+  );
+};

package/src/link/TextLink.tsx

@@ -8,7 +8,12 @@ import {
   LinkOutOutline18Icon,
   LinkOutOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { cloneElement, forwardRef, isValidElement } from "react";
+import React, {
+  cloneElement,
+  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+} from "react";
 
 import { createTexts, useTranslation } from "@/i18n";
 
@@ -46,43 +51,25 @@ const ExternalIcon = ({
   </>
 );
 
-export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ children, external, href, ...props }, ref) => {
-    const { t } = useTranslation();
+export const TextLink = ({
+  ref,
+  children,
+  external,
+  href,
+  ...props
+}: LinkProps & {
+  ref?: React.RefObject<HTMLAnchorElement>;
+}) => {
+  const { t } = useTranslation();
 
-    const isExternal =
-      external ??
-      Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
+  const isExternal =
+    external ??
+    Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
 
-    const externalLabel = t ? t(texts.externalLink) : texts.externalLink.en;
-
-    // If asChild is true, we need to clone the children and add the external icon
-    if (props.asChild && isValidElement(children)) {
-      return (
-        <ChakraLink
-          href={href}
-          {...props}
-          ref={ref}
-          {...(isExternal && {
-            target: "_blank",
-            rel: "noopener noreferrer",
-          })}
-        >
-          {cloneElement(children as React.ReactElement, {
-            ...children.props,
-            children: (
-              <>
-                {children.props.children}
-                {isExternal && (
-                  <ExternalIcon label={externalLabel} size={props.size} />
-                )}
-              </>
-            ),
-          })}
-        </ChakraLink>
-      );
-    }
+  const externalLabel = t ? t(texts.externalLink) : texts.externalLink.en;
 
+  // If asChild is true, we need to clone the children and add the external icon
+  if (props.asChild && isValidElement(children)) {
     return (
       <ChakraLink
         href={href}
@@ -93,13 +80,36 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
           rel: "noopener noreferrer",
         })}
       >
-        {children}
-        {isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
+        {cloneElement(children as React.ReactElement<{ children: ReactNode }>, {
+          ...(children.props as object),
+          children: (
+            <>
+              {(children.props as PropsWithChildren).children}
+              {isExternal && (
+                <ExternalIcon label={externalLabel} size={props.size} />
+              )}
+            </>
+          ),
+        })}
       </ChakraLink>
     );
-  },
-);
-TextLink.displayName = "TextLink";
+  }
+
+  return (
+    <ChakraLink
+      href={href}
+      {...props}
+      ref={ref}
+      {...(isExternal && {
+        target: "_blank",
+        rel: "noopener noreferrer",
+      })}
+    >
+      {children}
+      {isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
+    </ChakraLink>
+  );
+};
 
 const texts = createTexts({
   externalLink: {

package/src/loader/ProgressBar.tsx

@@ -6,7 +6,7 @@ import {
   UseProgressProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { progressBarRecipe } from "../theme/slot-recipes/progress-bar";
 import { useRotatingLabel } from "./useRotatingLabel";
@@ -75,50 +75,45 @@ export type ProgressBarProps = BoxProps &
  * ```
  */
 
-export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
-  (
-    {
-      value,
-      label,
-      labelRotationDelay = 5000,
-      isActive = true,
-      showValueText = false,
-      height = "0.5rem",
-      css,
-      ...rest
-    },
-    ref,
-  ) => {
-    const recipe = useSlotRecipe({ key: "progressbar" });
-    const styles = recipe({});
-    const currentLoadingText = useRotatingLabel({
-      label,
-      delay: labelRotationDelay,
-    });
+export const ProgressBar = ({
+  ref,
+  value,
+  label,
+  labelRotationDelay = 5000,
+  isActive = true,
+  showValueText = false,
+  height = "0.5rem",
+  css,
+  ...rest
+}: ProgressBarProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const recipe = useSlotRecipe({ key: "progressbar" });
+  const styles = recipe({});
+  const currentLoadingText = useRotatingLabel({
+    label,
+    delay: labelRotationDelay,
+  });
 
-    return (
-      <Progress.Root
-        css={{ ...styles.container, ...css }}
-        ref={ref}
-        value={value}
-        {...rest}
+  return (
+    <Progress.Root
+      css={{ ...styles.container, ...css }}
+      ref={ref}
+      value={value}
+      {...rest}
+    >
+      <Progress.Track
+        height={height}
+        css={isActive ? styles.background : styles.disabledBackground}
       >
-        <Progress.Track
-          height={height}
-          css={isActive ? styles.background : styles.disabledBackground}
-        >
-          <Progress.Range css={styles.progress} />
-        </Progress.Track>
-
-        {label && (
-          <Progress.Label css={styles.description}>
-            {currentLoadingText}
-          </Progress.Label>
-        )}
-
-        {showValueText && <Progress.ValueText>{value}%</Progress.ValueText>}
-      </Progress.Root>
-    );
-  },
-);
-ProgressBar.displayName = "ProgressBar";
+        <Progress.Range css={styles.progress} />
+      </Progress.Track>
+      {label && (
+        <Progress.Label css={styles.description}>
+          {currentLoadingText}
+        </Progress.Label>
+      )}
+      {showValueText && <Progress.ValueText>{value}%</Progress.ValueText>}
+    </Progress.Root>
+  );
+};