@vygruppen/spor-react 12.24.16 → 13.0.1

package/src/breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import {
   BreadcrumbRootProps,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import React from "react";
 /**
  * A breadcrumb component.
  *
@@ -20,40 +20,43 @@ import React, { forwardRef } from "react";
  * </Breadcrumb>
  * ```
  */
-export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
-  ({ children, css, ...props }, ref) => {
-    const validChildren = React.Children.toArray(children).filter((element) =>
-      React.isValidElement(element),
-    );
+export const Breadcrumb = ({
+  ref,
+  children,
+  css,
+  ...props
+}: BreadcrumbRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const validChildren = React.Children.toArray(children).filter((element) =>
+    React.isValidElement(element),
+  );
 
-    return (
-      <ChakraBreadcrumb.Root ref={ref} {...props} css={css}>
-        <ChakraBreadcrumb.List data-part="list">
-          {validChildren.map((child, index) => {
-            const isLast = index === validChildren.length - 1;
-            return (
-              <React.Fragment key={index}>
-                <ChakraBreadcrumb.Item data-part="item">
-                  {child}
-                </ChakraBreadcrumb.Item>
-                {!isLast && (
-                  <ChakraBreadcrumb.Separator
-                    aria-hidden="true"
-                    data-part="separator"
-                  >
-                    <DropdownRightFill18Icon />
-                  </ChakraBreadcrumb.Separator>
-                )}
-              </React.Fragment>
-            );
-          })}
-        </ChakraBreadcrumb.List>
-      </ChakraBreadcrumb.Root>
-    );
-  },
-);
-
-Breadcrumb.displayName = "Breadcrumb";
+  return (
+    <ChakraBreadcrumb.Root ref={ref} css={css} {...props}>
+      <ChakraBreadcrumb.List data-part="list">
+        {validChildren.map((child, index) => {
+          const isLast = index === validChildren.length - 1;
+          return (
+            <React.Fragment key={index}>
+              <ChakraBreadcrumb.Item data-part="item">
+                {child}
+              </ChakraBreadcrumb.Item>
+              {!isLast && (
+                <ChakraBreadcrumb.Separator
+                  aria-hidden="true"
+                  data-part="separator"
+                >
+                  <DropdownRightFill18Icon />
+                </ChakraBreadcrumb.Separator>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </ChakraBreadcrumb.List>
+    </ChakraBreadcrumb.Root>
+  );
+};
 
 export {
   BreadcrumbCurrentLink,

package/src/button/Button.tsx

@@ -7,7 +7,13 @@ import {
   type RecipeVariantProps,
   Span,
 } from "@chakra-ui/react";
-import React, { cloneElement, forwardRef, PropsWithChildren } from "react";
+import React, {
+  cloneElement,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+} from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
@@ -92,72 +98,73 @@ const LoadingContent = ({
   </>
 );
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      loading,
-      disabled,
-      loadingText,
-      variant = "primary",
-      size = "md",
-      leftIcon,
-      rightIcon,
-      type = "button",
-      children,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
+const getChildContent = (child: ReactNode): ReactNode => {
+  if (isValidElement(child)) {
+    return (child.props as { children?: ReactNode }).children;
+  }
+  return child;
+};
 
-    const ariaLabel = loading
-      ? String(loadingText ?? t(texts.loadingText))
-      : (rest["aria-label"] as string);
+export const Button = ({
+  ref,
+  loading,
+  disabled,
+  loadingText,
+  variant = "primary",
+  size = "md",
+  leftIcon,
+  rightIcon,
+  type = "button",
+  children,
+  ...rest
+}: ButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) => {
+  const { t } = useTranslation();
 
-    const renderContent = () => {
-      const content = rest.asChild
-        ? (children as React.ReactElement).props.children
-        : children;
+  const ariaLabel = loading
+    ? String(loadingText ?? t(texts.loadingText))
+    : (rest["aria-label"] as string);
 
-      if (loading)
-        return (
-          <LoadingContent size={size} loadingText={loadingText}>
-            <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
-              {content}
-            </ButtonContent>
-          </LoadingContent>
-        );
+  const renderContent = () => {
+    const content = rest.asChild ? getChildContent(children) : children;
 
+    if (loading)
       return (
-        <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
-          {content}
-        </ButtonContent>
+        <LoadingContent size={size} loadingText={loadingText}>
+          <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
+            {content}
+          </ButtonContent>
+        </LoadingContent>
       );
-    };
 
     return (
-      <ChakraButton
-        type={type}
-        ref={ref}
-        aria-label={ariaLabel}
-        aria-busy={loading}
-        disabled={disabled || loading}
-        position="relative"
-        variant={variant}
-        size={size}
-        {...rest}
-      >
-        {rest.asChild
-          ? cloneElement(children as React.ReactElement, {
-              children: renderContent(),
-            })
-          : renderContent()}
-      </ChakraButton>
+      <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
+        {content}
+      </ButtonContent>
     );
-  },
-);
+  };
 
-Button.displayName = "Button";
+  return (
+    <ChakraButton
+      type={type}
+      ref={ref}
+      aria-label={ariaLabel}
+      aria-busy={loading}
+      disabled={disabled || loading}
+      position="relative"
+      variant={variant}
+      size={size}
+      {...rest}
+    >
+      {rest.asChild && isValidElement(children)
+        ? cloneElement(children as ReactElement<{ children: ReactNode }>, {
+            children: renderContent(),
+          })
+        : renderContent()}
+    </ChakraButton>
+  );
+};
 
 const texts = createTexts({
   loadingText: {

package/src/button/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import {
   type RecipeVariantProps,
   useRecipe,
 } from "@chakra-ui/react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { groupRecipe } from "../theme/recipes/group";
 
@@ -48,13 +48,15 @@ export type ButtonGroupProps = ChakraGroupProps &
  * </ButtonGroup>
  */
 
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "buttonGroup" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const ButtonGroup = ({
+  ref,
+  ...props
+}: ButtonGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const recipe = useRecipe({ key: "buttonGroup" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    return <ChakraGroup {...restProps} ref={ref} css={styles} />;
-  },
-);
-ButtonGroup.displayName = "ButtonGroup";
+  return <ChakraGroup {...restProps} ref={ref} css={styles} />;
+};

package/src/button/Clipboard.tsx

@@ -20,10 +20,12 @@ import { Button, ButtonProps } from "./Button";
  * </Clipboard>
  */
 
-const ClipboardIcon = React.forwardRef<
-  HTMLDivElement,
-  ChakraClipboard.IndicatorProps
->((props, ref) => {
+const ClipboardIcon = ({
+  ref,
+  ...props
+}: ChakraClipboard.IndicatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
   return (
     <ChakraClipboard.Indicator
       copied={<CheckmarkFill18Icon />}
@@ -33,13 +35,14 @@ const ClipboardIcon = React.forwardRef<
       <CopyOutline18Icon />
     </ChakraClipboard.Indicator>
   );
-});
-ClipboardIcon.displayName = "ClipboardIcon";
+};
 
-const ClipboardCopyText = React.forwardRef<
-  HTMLDivElement,
-  ChakraClipboard.IndicatorProps
->((props, ref) => {
+const ClipboardCopyText = ({
+  ref,
+  ...props
+}: ChakraClipboard.IndicatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
   const { t } = useTranslation();
   return (
     <ChakraClipboard.Indicator
@@ -50,15 +53,16 @@ const ClipboardCopyText = React.forwardRef<
       <Text variant="xs">{t(texts.copy)}</Text>
     </ChakraClipboard.Indicator>
   );
-});
-ClipboardCopyText.displayName = "ClipboardCopyText";
+};
 
 type ClipboardButtonProps = ButtonProps;
 
-export const ClipboardButton = React.forwardRef<
-  HTMLButtonElement,
-  ClipboardButtonProps
->((props, ref) => {
+export const ClipboardButton = ({
+  ref,
+  ...props
+}: ClipboardButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) => {
   return (
     <ChakraClipboard.Trigger asChild>
       <Button ref={ref} size="xs" leftIcon={<ClipboardIcon />} {...props}>
@@ -66,8 +70,7 @@ export const ClipboardButton = React.forwardRef<
       </Button>
     </ChakraClipboard.Trigger>
   );
-});
-ClipboardButton.displayName = "ClipboardButton";
+};
 
 export const Clipboard = ChakraClipboard.Root;
 

package/src/button/CloseButton.tsx

@@ -5,7 +5,6 @@ import {
   CloseFill24Icon,
   CloseFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { IconButton, IconButtonProps } from "./IconButton";
@@ -27,22 +26,25 @@ export type CloseButtonProps = Omit<
  * <CloseButton onClick={closeModal} />
  * ```
  */
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
-  ({ size = "sm", ...props }, ref) => {
-    const { t } = useTranslation();
-    return (
-      <IconButton
-        variant="ghost"
-        icon={<CloseIcon size={size} />}
-        size={size}
-        aria-label={props["aria-label"] || t(texts.close)}
-        {...props}
-        ref={ref}
-      />
-    );
-  },
-);
-CloseButton.displayName = "CloseButton";
+export const CloseButton = ({
+  ref,
+  size = "sm",
+  ...props
+}: CloseButtonProps & {
+  ref?: React.Ref<HTMLButtonElement | null>;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <IconButton
+      variant="ghost"
+      icon={<CloseIcon size={size} />}
+      size={size}
+      aria-label={props["aria-label"] || t(texts.close)}
+      {...props}
+      ref={ref}
+    />
+  );
+};
 
 const CloseIcon = ({ size }: { size: CloseButtonProps["size"] }) => {
   switch (size) {

package/src/button/FloatingActionButton.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { floatingActionButtonSlotRecipe } from "../theme/slot-recipes/floating-action-button";
 
@@ -36,55 +36,49 @@ type FloatingActionButtonProps = BoxProps &
  *  placement="bottom right"
  * />
  */
-export const FloatingActionButton = forwardRef<
-  HTMLButtonElement,
-  FloatingActionButtonProps
->(
-  (
-    {
-      children,
-      icon,
-      variant,
-      isTextVisible: externalIsTextVisible,
-      placement = "bottom right",
-      ...props
-    },
-    ref,
-  ) => {
-    const scrollDirection = useScrollDirection();
+export const FloatingActionButton = ({
+  ref,
+  children,
+  icon,
+  variant,
+  isTextVisible: externalIsTextVisible,
+  placement = "bottom right",
+  ...props
+}: FloatingActionButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) => {
+  const scrollDirection = useScrollDirection();
 
-    // Use derived value instead of setState in effect
-    const isTextVisible =
-      externalIsTextVisible === undefined
-        ? scrollDirection !== "down"
-        : !!externalIsTextVisible;
+  // Use derived value instead of setState in effect
+  const isTextVisible =
+    externalIsTextVisible === undefined
+      ? scrollDirection !== "down"
+      : !!externalIsTextVisible;
 
-    const recipe = useSlotRecipe({ key: "floatingActionButton" });
-    const style = recipe({
-      variant,
-      placement,
-    });
+  const recipe = useSlotRecipe({ key: "floatingActionButton" });
+  const style = recipe({
+    variant,
+    placement,
+  });
 
-    return (
-      <Box
-        css={style.root}
-        as="button"
-        aria-label={typeof children === "string" ? children : undefined}
-        ref={ref}
-        {...props}
-        aria-expanded={isTextVisible}
-      >
-        <Box css={style.icon}>{icon}</Box>
-        {isTextVisible && (
-          <Text data-state="open" css={style.text}>
-            {children}
-          </Text>
-        )}
-      </Box>
-    );
-  },
-);
-FloatingActionButton.displayName = "FloatingActionButton";
+  return (
+    <Box
+      css={style.root}
+      as="button"
+      aria-label={typeof children === "string" ? children : undefined}
+      ref={ref}
+      {...props}
+      aria-expanded={isTextVisible}
+    >
+      <Box css={style.icon}>{icon}</Box>
+      {isTextVisible && (
+        <Text data-state="open" css={style.text}>
+          {children}
+        </Text>
+      )}
+    </Box>
+  );
+};
 
 type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {

package/src/button/IconButton.tsx

@@ -2,7 +2,7 @@ import {
   IconButton as ChakraIconButton,
   type IconButtonProps as ChakraIconButtonProps,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { ButtonVariantProps, ColorSpinner } from "..";
 
@@ -56,20 +56,22 @@ export type IconButtonProps = Exclude<
  * />
  * ```
  */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
-    const { icon, size = "sm", loading = false, ...rest } = props;
-    return (
-      <ChakraIconButton
-        aria-label={props["aria-label"]}
-        size={size}
-        position="relative"
-        {...rest}
-        ref={ref}
-      >
-        {loading ? <ColorSpinner width="2em" height="2em" margin={1} /> : icon}
-      </ChakraIconButton>
-    );
-  },
-);
-IconButton.displayName = "IconButton";
+export const IconButton = ({
+  ref,
+  ...props
+}: IconButtonProps & {
+  ref?: React.Ref<HTMLButtonElement | null>;
+}) => {
+  const { icon, size = "sm", loading = false, ...rest } = props;
+  return (
+    <ChakraIconButton
+      aria-label={props["aria-label"]}
+      size={size}
+      position="relative"
+      {...rest}
+      ref={ref}
+    >
+      {loading ? <ColorSpinner width="2em" height="2em" margin={1} /> : icon}
+    </ChakraIconButton>
+  );
+};

package/src/calendar/CalendarContext.tsx

@@ -34,7 +34,7 @@ type BaseCalendarState = {
   prevButtonProps: AriaButtonProps<"button">;
   startValue: CalendarDate | null;
   isSelectingRange: boolean;
-  ref: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement | null>;
 };
 
 type SingleCalendarState = BaseCalendarState & {

package/src/color-mode/color-mode.tsx

@@ -47,10 +47,12 @@ export function ColorModeIcon() {
 
 type ColorModeButtonProps = Omit<IconButtonProps, "aria-label">;
 
-export const ColorModeButton = React.forwardRef<
-  HTMLButtonElement,
-  ColorModeButtonProps
->(function ColorModeButton(props, ref) {
+export const ColorModeButton = function ColorModeButton({
+  ref,
+  ...props
+}: ColorModeButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) {
   const { toggleColorMode } = useColorMode();
   return (
     <ClientOnly fallback={<Skeleton boxSize="8" />}>
@@ -72,4 +74,4 @@ export const ColorModeButton = React.forwardRef<
       </IconButton>
     </ClientOnly>
   );
-});
+};

package/src/datepicker/CalendarTriggerButton.tsx

@@ -2,7 +2,7 @@
 
 import { BoxProps, PopoverAnchor, useSlotRecipe } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { AriaButtonProps } from "react-aria";
 
 import {
@@ -19,12 +19,17 @@ type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
   CalendarVariants & {
     disabled?: boolean;
   };
-export const CalendarTriggerButton = forwardRef<
-  HTMLDivElement,
-  CalendarTriggerButtonProps
+export const CalendarTriggerButton = ({
+  ref,
+  variant,
+  disabled,
   // onPress is extracted because it is not supported by chakra.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
->(({ variant, disabled, onPress: _, ...buttonProps }, ref) => {
+  onPress: _,
+  ...buttonProps
+}: CalendarTriggerButtonProps & {
+  ref?: React.Ref<HTMLDivElement | null>;
+}) => {
   const { t } = useTranslation();
 
   const recipe = useSlotRecipe({
@@ -43,8 +48,7 @@ export const CalendarTriggerButton = forwardRef<
       />
     </PopoverAnchor>
   );
-});
-CalendarTriggerButton.displayName = "CalendarTriggerButton";
+};
 
 const texts = createTexts({
   openCalendar: {