@vygruppen/spor-react 12.24.15 → 13.0.0

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

package/src/loader/ProgressLoader.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { BoxProps, chakra, RecipeVariantProps, Text } from "@chakra-ui/react";
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 import { useProgressBar } from "react-aria";
 
 import { createTexts, useTranslation } from "..";
@@ -87,93 +87,90 @@ const ProgressLoaderWrapper = chakra("div", progressLoaderRecipe);
  * ```
  */
 
-export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
-  (
-    {
-      value,
-      label,
-      labelRotationDelay = 5000,
-      "aria-label": ariaLabel,
-      width,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const currentLoadingText = useRotatingLabel({
-      label,
-      delay: labelRotationDelay,
-    });
-    const { labelProps, progressBarProps } = useProgressBar({
-      isIndeterminate: value === undefined,
-      value,
-      "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
-    });
-    const {
-      pathRef,
-      pathLength: progressPathLength,
-      progressOffset,
-    } = usePathLength(value);
+export const ProgressLoader = ({
+  ref,
+  value,
+  label,
+  labelRotationDelay = 5000,
+  "aria-label": ariaLabel,
+  width,
+  ...rest
+}: ProgressLoaderProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { t } = useTranslation();
+  const currentLoadingText = useRotatingLabel({
+    label,
+    delay: labelRotationDelay,
+  });
+  const { labelProps, progressBarProps } = useProgressBar({
+    isIndeterminate: value === undefined,
+    value,
+    "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
+  });
+  const {
+    pathRef,
+    pathLength: progressPathLength,
+    progressOffset,
+  } = usePathLength(value);
 
-    const id = useId();
+  const id = useId();
 
-    return (
-      <ProgressLoaderWrapper
-        {...progressBarProps}
-        width={width}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
-        {...rest}
-        ref={ref}
-      >
-        <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
-          <path
-            id={`${id}-start-dot`}
-            d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
-            fill="#FFB466"
-          />
-          <path
-            id={`${id}-track`}
-            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-            strokeWidth="13.6469"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            id={`${id}-progress`}
-            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-            strokeWidth="13.6469"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeDasharray={progressPathLength}
-            strokeDashoffset={progressOffset}
-            style={{ transition: "stroke-dashoffset .2s ease-out" }}
-            ref={pathRef}
-          />
-          <path
-            id={`${id}-end-dot`}
-            d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
-            fill="#688CBA"
-          />
-        </chakra.svg>
-        {currentLoadingText && (
-          <Text
-            textAlign="center"
-            marginTop={2}
-            fontWeight="bold"
-            {...labelProps}
-          >
-            {currentLoadingText}
-          </Text>
-        )}
-      </ProgressLoaderWrapper>
-    );
-  },
-);
-ProgressLoader.displayName = "ProgressLoader";
+  return (
+    <ProgressLoaderWrapper
+      {...progressBarProps}
+      width={width}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
+      {...rest}
+      ref={ref}
+    >
+      <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
+        <path
+          id={`${id}-start-dot`}
+          d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
+          fill="#FFB466"
+        />
+        <path
+          id={`${id}-track`}
+          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+          strokeWidth="13.6469"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id={`${id}-progress`}
+          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+          strokeWidth="13.6469"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={progressPathLength}
+          strokeDashoffset={progressOffset}
+          style={{ transition: "stroke-dashoffset .2s ease-out" }}
+          ref={pathRef}
+        />
+        <path
+          id={`${id}-end-dot`}
+          d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
+          fill="#688CBA"
+        />
+      </chakra.svg>
+      {currentLoadingText && (
+        <Text
+          textAlign="center"
+          marginTop={2}
+          fontWeight="bold"
+          {...labelProps}
+        >
+          {currentLoadingText}
+        </Text>
+      )}
+    </ProgressLoaderWrapper>
+  );
+};
 
 const texts = createTexts({
   fallbackLabel: (value) => ({

package/src/loader/Skeleton.tsx

@@ -11,7 +11,6 @@ import {
   useRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
-import { forwardRef } from "react";
 
 import { skeletonRecipe } from "@/theme/recipes/skeleton";
 
@@ -22,10 +21,12 @@ export type SkeletonCircleProps = ChakraSkeletonProps &
     size?: CircleProps["size"];
   };
 
-export const SkeletonCircle = React.forwardRef<
-  HTMLDivElement,
-  SkeletonCircleProps
->(function SkeletonCircle(props, ref) {
+export const SkeletonCircle = function SkeletonCircle({
+  ref,
+  ...props
+}: SkeletonCircleProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const recipe = useRecipe({ key: "skeleton" });
 
   const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -41,58 +42,65 @@ export const SkeletonCircle = React.forwardRef<
       <ChakraSkeleton css={{ ...recipe(recipeProps), ...css }} {...rest} />
     </Circle>
   );
-});
+};
 
 export type SkeletonTextProps = ChakraSkeletonProps &
   SkeletonVariantProps & {
     noOfLines?: number;
   };
 
-export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  function SkeletonText(props, ref) {
-    const recipe = useRecipe({ key: "skeleton" });
-    const [recipeProps, restProps] = recipe.splitVariantProps({
-      loading: true,
-      variant: "pulse",
-      ...props,
-    });
-    const { noOfLines = 3, height = "0.5rem", gap, css, ...rest } = restProps;
+export const SkeletonText = function SkeletonText(
+  props: SkeletonTextProps & { ref?: React.Ref<HTMLDivElement> },
+) {
+  const recipe = useRecipe({ key: "skeleton" });
+  const [recipeProps, restProps] = recipe.splitVariantProps({
+    loading: true,
+    variant: "pulse",
+    ...props,
+  });
 
-    return (
-      <Stack gap={gap} width="full" ref={ref}>
-        {Array.from({ length: noOfLines }).map((_, index) => (
-          <ChakraSkeleton
-            height={height}
-            css={{ ...recipe(recipeProps), ...css }}
-            key={index}
-            _last={{ maxW: "80%" }}
-            {...rest}
-          />
-        ))}
-      </Stack>
-    );
-  },
-);
+  const {
+    noOfLines = 3,
+    height = "0.5rem",
+    gap,
+    css,
+    ref,
+    ...rest
+  } = restProps;
 
+  return (
+    <Stack gap={gap} width="full" ref={ref}>
+      {Array.from({ length: noOfLines }).map((_, index) => (
+        <ChakraSkeleton
+          key={index}
+          height={height}
+          css={{ ...recipe(recipeProps), ...css }}
+          _last={{ maxW: "80%" }}
+          {...rest}
+        />
+      ))}
+    </Stack>
+  );
+};
 export type SkeletonProps = ChakraSkeletonProps & SkeletonVariantProps;
 
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  function SkeletonText(props, ref) {
-    const recipe = useRecipe({ key: "skeleton" });
-    const [recipeProps, restProps] = recipe.splitVariantProps({
-      loading: true,
-      variant: "pulse",
-      ...props,
-    });
+export const Skeleton = function Skeleton(
+  props: SkeletonProps & { ref?: React.Ref<HTMLDivElement> },
+) {
+  const recipe = useRecipe({ key: "skeleton" });
+  const [recipeProps, restProps] = recipe.splitVariantProps({
+    loading: true,
+    variant: "pulse",
+    ...props,
+  });
 
-    const { css, ...rest } = restProps;
+  const { css, ref, ...rest } = restProps;
 
-    return (
-      <ChakraSkeleton
-        ref={ref}
-        css={{ ...recipe(recipeProps), ...css }}
-        {...rest}
-      />
-    );
-  },
-);
+  return (
+    <ChakraSkeleton
+      ref={ref}
+      css={{ ...recipe(recipeProps), ...css }}
+      {...rest}
+    />
+  );
+};