@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/media-controller/SkipButton.tsx

@@ -4,7 +4,7 @@ import {
   NextMediaControllerFill30Icon,
   PreviousMediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 
@@ -27,34 +27,36 @@ type SkipButtonProps = BoxProps &
  * <SkipButton direction="forward" onClick={onNextChapter} />
  * ```
  */
-export const SkipButton = forwardRef<HTMLButtonElement, SkipButtonProps>(
-  (props, ref) => {
-    const { direction, disabled, size = "sm" } = props;
+export const SkipButton = ({
+  ref,
+  ...props
+}: SkipButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const { direction, disabled, size = "sm" } = props;
 
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    const recipe = useSlotRecipe({ key: "mediaControllerButton" });
-    const styles = recipe({ variant: "jumpSkip", size });
+  const recipe = useSlotRecipe({ key: "mediaControllerButton" });
+  const styles = recipe({ variant: "jumpSkip", size });
 
-    return (
-      <Center
-        ref={ref}
-        as="button"
-        css={styles.root}
-        aria-label={direction === "forward" ? t(texts.next) : t(texts.previous)}
-        disabled={disabled}
-        {...props}
-      >
-        {direction === "forward" ? (
-          <NextMediaControllerFill30Icon css={styles.icon} />
-        ) : (
-          <PreviousMediaControllerFill30Icon css={styles.icon} />
-        )}
-      </Center>
-    );
-  },
-);
-SkipButton.displayName = "SkipButton";
+  return (
+    <Center
+      ref={ref}
+      as="button"
+      css={styles.root}
+      aria-label={direction === "forward" ? t(texts.next) : t(texts.previous)}
+      disabled={disabled}
+      {...props}
+    >
+      {direction === "forward" ? (
+        <NextMediaControllerFill30Icon css={styles.icon} />
+      ) : (
+        <PreviousMediaControllerFill30Icon css={styles.icon} />
+      )}
+    </Center>
+  );
+};
 
 const texts = createTexts({
   next: {

package/src/nudge/Nudge.tsx

@@ -9,12 +9,7 @@ import {
   usePopoverContext,
 } from "@chakra-ui/react";
 import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
-import React, {
-  forwardRef,
-  PropsWithChildren,
-  useEffect,
-  useState,
-} from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 
 import {
   Button,
@@ -71,71 +66,72 @@ export const Nudge = (props: NudgeProps) => {
   );
 };
 
-export const NudgeTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraPopover.TriggerProps
->(({ ...props }, ref) => {
+export const NudgeTrigger = ({
+  ref,
+  ...props
+}: ChakraPopover.TriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   return <PopoverTrigger {...props} ref={ref} />;
-});
-NudgeTrigger.displayName = "NudgeTrigger";
-
-export const NudgeContent = forwardRef<HTMLDivElement, PopoverProps>(
-  ({ showCloseButton = true, children, ...props }, ref) => {
-    const [currentStep, setCurrentStep] = useState(1);
-    const childrenArray = React.Children.toArray(children); // Convert children to an array
-
-    const { open } = usePopoverContext();
-
-    useEffect(() => {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setCurrentStep(1);
-    }, [children, open]);
-
-    const wizardPages = childrenArray.filter(
-      (child) =>
-        React.isValidElement(child) &&
-        (child.type as React.ComponentType).displayName === "NudgeWizardStep",
-    );
+};
 
-    const restChildren = childrenArray.filter(
-      (child) =>
-        !React.isValidElement(child) ||
-        (child.type as React.ComponentType).displayName !== "NudgeWizardStep",
-    );
+export const NudgeContent = ({
+  ref,
+  showCloseButton = true,
+  children,
+  ...props
+}: PopoverProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const childrenArray = React.Children.toArray(children); // Convert children to an array
+
+  const { open } = usePopoverContext();
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setCurrentStep(1);
+  }, [children, open]);
+
+  const wizardPages = childrenArray.filter(
+    (child) => React.isValidElement(child) && child.type === NudgeWizardStep,
+  );
 
-    const totalSteps = wizardPages.length;
-    const isLastStep = totalSteps === currentStep;
+  const restChildren = childrenArray.filter(
+    (child) => !React.isValidElement(child) || child.type !== NudgeWizardStep,
+  );
 
-    if (wizardPages.length === 0) {
-      return (
-        <PopoverContent showCloseButton={showCloseButton} {...props} ref={ref}>
-          {children}
-        </PopoverContent>
-      );
-    }
+  const totalSteps = wizardPages.length;
+  const isLastStep = totalSteps === currentStep;
 
+  if (wizardPages.length === 0) {
     return (
       <PopoverContent showCloseButton={showCloseButton} {...props} ref={ref}>
-        {restChildren}
-        {wizardPages[currentStep - 1] as React.ReactElement}
-        <NudgeActions gap="18px">
-          <ProgressIndicator
-            activeStep={currentStep}
-            numberOfSteps={totalSteps}
-          />
-
-          <NextButton
-            isLastStep={isLastStep}
-            onNext={() => {
-              setCurrentStep((previous) => previous + 1);
-            }}
-          />
-        </NudgeActions>
+        {children}
       </PopoverContent>
     );
-  },
-);
-NudgeContent.displayName = "NudgeContent";
+  }
+
+  return (
+    <PopoverContent showCloseButton={showCloseButton} {...props} ref={ref}>
+      {restChildren}
+      {wizardPages[currentStep - 1] as React.ReactElement}
+      <NudgeActions gap="18px">
+        <ProgressIndicator
+          activeStep={currentStep}
+          numberOfSteps={totalSteps}
+        />
+
+        <NextButton
+          isLastStep={isLastStep}
+          onNext={() => {
+            setCurrentStep((previous) => previous + 1);
+          }}
+        />
+      </NudgeActions>
+    </PopoverContent>
+  );
+};
 
 export const NudgeActions = ({ ...props }: BoxProps) => {
   const { colorMode } = useColorMode();
@@ -205,12 +201,13 @@ export const NudgeWizardStep = ({ children }: PropsWithChildren) => {
   );
 };
 
-NudgeWizardStep.displayName = "NudgeWizardStep";
-
-export const NudgeCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraPopover.TriggerProps
->(({ children, ...props }, ref) => {
+export const NudgeCloseTrigger = ({
+  ref,
+  children,
+  ...props
+}: ChakraPopover.TriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const isStringChild = typeof children === "string";
 
   return (
@@ -218,5 +215,4 @@ export const NudgeCloseTrigger = forwardRef<
       {children}
     </ChakraPopover.CloseTrigger>
   );
-});
-NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
+};

package/src/pagination/Pagination.tsx

@@ -37,35 +37,39 @@ const [RootPropsProvider, useRootProps] = createContext<ButtonVariantContext>({
   name: "RootPropsProvider",
 });
 
-export const Pagination = React.forwardRef<HTMLDivElement, PaginationRootProps>(
-  (props, ref) => {
-    const { getHref, children, ...rest } = props;
-    const recipe = useSlotRecipe({ key: "pagination" });
-    const styles = recipe();
+export const Pagination = ({
+  ref,
+  ...props
+}: PaginationRootProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { getHref, children, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "pagination" });
+  const styles = recipe();
 
-    return (
-      <RootPropsProvider
-        value={{
-          getHref,
-        }}
+  return (
+    <RootPropsProvider
+      value={{
+        getHref,
+      }}
+    >
+      <ChakraPagination.Root
+        ref={ref}
+        type={getHref ? "link" : "button"}
+        {...rest}
       >
-        <ChakraPagination.Root
-          ref={ref}
-          type={getHref ? "link" : "button"}
-          {...rest}
-        >
-          <List css={styles.list}>{children}</List>
-        </ChakraPagination.Root>
-      </RootPropsProvider>
-    );
-  },
-);
-Pagination.displayName = "Pagination";
+        <List css={styles.list}>{children}</List>
+      </ChakraPagination.Root>
+    </RootPropsProvider>
+  );
+};
 
-export const PaginationEllipsis = React.forwardRef<
-  HTMLDivElement,
-  ChakraPagination.EllipsisProps
->((props, ref) => {
+export const PaginationEllipsis = ({
+  ref,
+  ...props
+}: ChakraPagination.EllipsisProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   return (
     <ListItem>
       <ChakraPagination.Ellipsis ref={ref} {...props} asChild>
@@ -73,13 +77,14 @@ export const PaginationEllipsis = React.forwardRef<
       </ChakraPagination.Ellipsis>
     </ListItem>
   );
-});
-PaginationEllipsis.displayName = "PaginationEllipsis";
+};
 
-export const PaginationItem = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.ItemProps
->((props, ref) => {
+export const PaginationItem = ({
+  ref,
+  ...props
+}: ChakraPagination.ItemProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = usePaginationContext();
@@ -116,14 +121,15 @@ export const PaginationItem = React.forwardRef<
       </ChakraPagination.Item>
     </ListItem>
   );
-});
-PaginationItem.displayName = "PaginationItem";
+};
 
 // eslint-disable-next-line unicorn/prevent-abbreviations
-export const PaginationPrevTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.PrevTriggerProps
->((props, ref) => {
+export const PaginationPrevTrigger = ({
+  ref,
+  ...props
+}: ChakraPagination.PrevTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const { page } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -166,13 +172,14 @@ export const PaginationPrevTrigger = React.forwardRef<
       </ChakraPagination.PrevTrigger>
     </ListItem>
   );
-});
-PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
+};
 
-export const PaginationNextTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.NextTriggerProps
->((props, ref) => {
+export const PaginationNextTrigger = ({
+  ref,
+  ...props
+}: ChakraPagination.NextTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const { page, totalPages } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -212,8 +219,7 @@ export const PaginationNextTrigger = React.forwardRef<
       </ChakraPagination.NextTrigger>
     </ListItem>
   );
-});
-PaginationNextTrigger.displayName = "PaginationNextTrigger";
+};
 
 export const PaginationItems = (
   props: React.HTMLAttributes<HTMLElement> & {},

package/src/popover/index.tsx

@@ -5,17 +5,20 @@ import {
   Portal,
   usePopoverContext,
 } from "@chakra-ui/react";
-import React, { forwardRef, useEffect } from "react";
+import React, { useEffect } from "react";
 
 import { CloseButton } from "@/button";
 import { useColorMode } from "@/color-mode";
 
 export const Popover = ChakraPopover.Root;
 
-export const PopoverTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraPopover.TriggerProps
->(({ children, ...props }, ref) => {
+export const PopoverTrigger = ({
+  ref,
+  children,
+  ...props
+}: ChakraPopover.TriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const isStringChild = typeof children === "string";
 
   return (
@@ -23,49 +26,51 @@ export const PopoverTrigger = forwardRef<
       {children}
     </ChakraPopover.Trigger>
   );
-});
-
-PopoverTrigger.displayName = "PopoverTrigger";
+};
 
 export type PopoverProps = ChakraPopover.ContentProps &
   React.RefAttributes<HTMLDivElement> & {
     showCloseButton?: boolean;
   };
 
-export const PopoverContent = forwardRef<HTMLDivElement, PopoverProps>(
-  ({ children, showCloseButton = false, ...props }, ref) => {
-    const { colorMode } = useColorMode();
+export const PopoverContent = ({
+  ref,
+  children,
+  showCloseButton = false,
+  ...props
+}: PopoverProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { colorMode } = useColorMode();
 
-    const closeButtonRef = React.useRef<HTMLButtonElement>(null);
+  const closeButtonRef = React.useRef<HTMLButtonElement>(null);
 
-    const { open } = usePopoverContext();
+  const { open } = usePopoverContext();
 
-    useEffect(() => {
-      if (showCloseButton && open && closeButtonRef.current) {
-        closeButtonRef.current.focus();
-      }
-    }, [showCloseButton, open]);
+  useEffect(() => {
+    if (showCloseButton && open && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  }, [showCloseButton, open]);
 
-    return (
-      <Portal>
-        <ChakraPopover.Positioner>
-          <ChakraPopover.Content ref={ref} {...props}>
-            <ChakraPopover.Arrow />
-            {showCloseButton && (
-              <div>
-                <ChakraPopover.CloseTrigger asChild>
-                  <CloseButton
-                    className={colorMode === "dark" ? "light" : "dark"}
-                    ref={closeButtonRef}
-                  />
-                </ChakraPopover.CloseTrigger>
-              </div>
-            )}
-            <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
-          </ChakraPopover.Content>
-        </ChakraPopover.Positioner>
-      </Portal>
-    );
-  },
-);
-PopoverContent.displayName = "PopoverContent";
+  return (
+    <Portal>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} {...props}>
+          <ChakraPopover.Arrow />
+          {showCloseButton && (
+            <div>
+              <ChakraPopover.CloseTrigger asChild>
+                <CloseButton
+                  className={colorMode === "dark" ? "light" : "dark"}
+                  ref={closeButtonRef}
+                />
+              </ChakraPopover.CloseTrigger>
+            </div>
+          )}
+          <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
+        </ChakraPopover.Content>
+      </ChakraPopover.Positioner>
+    </Portal>
+  );
+};

package/src/progress-indicator/ProgressIndicator.tsx

@@ -5,7 +5,7 @@ import {
   SystemStyleObject,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { Box, createTexts, useTranslation } from "..";
 import { progressIndicatorRecipe } from "../theme/slot-recipes/progress-indicator";
@@ -38,10 +38,14 @@ export type ProgressIndicatorProps = BoxProps &
  * ```
  */
 
-export const ProgressIndicator = forwardRef<
-  HTMLDivElement,
-  ProgressIndicatorProps
->(({ numberOfSteps, activeStep, css }, ref) => {
+export const ProgressIndicator = ({
+  ref,
+  numberOfSteps,
+  activeStep,
+  css,
+}: ProgressIndicatorProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator",
@@ -74,8 +78,7 @@ export const ProgressIndicator = forwardRef<
       </Box>
     </Box>
   );
-});
-ProgressIndicator.displayName = "ProgressIndicator";
+};
 
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({