@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/input/CardSelect.tsx

@@ -9,7 +9,7 @@ import {
   DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef, ReactNode } from "react";
+import { ReactNode } from "react";
 
 import { Button, ButtonProps, StaticCard, StaticCardProps } from "..";
 
@@ -17,31 +17,34 @@ export const CardSelect = ({ size = "md", ...props }: PopoverRootProps) => {
   return <ChakraPopover.Root size={size} {...props} />;
 };
 
-export const CardSelectContent = forwardRef<HTMLDivElement, StaticCardProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Portal>
-        <ChakraPopover.Positioner>
-          <ChakraPopover.Content ref={ref} padding={0} bg="none">
-            <ChakraPopover.Body {...props}>
-              <StaticCard
-                p="2"
-                bg="bg"
-                border="sm"
-                borderColor="floating.outline"
-                borderRadius="sm"
-                {...props}
-              >
-                {children}
-              </StaticCard>
-            </ChakraPopover.Body>
-          </ChakraPopover.Content>
-        </ChakraPopover.Positioner>
-      </Portal>
-    );
-  },
-);
-CardSelectContent.displayName = "CardSelectContent";
+export const CardSelectContent = ({
+  ref,
+  children,
+  ...props
+}: StaticCardProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  return (
+    <Portal>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} padding={0} bg="none">
+          <ChakraPopover.Body {...props}>
+            <StaticCard
+              p="2"
+              bg="bg"
+              border="sm"
+              borderColor="floating.outline"
+              borderRadius="sm"
+              {...props}
+            >
+              {children}
+            </StaticCard>
+          </ChakraPopover.Body>
+        </ChakraPopover.Content>
+      </ChakraPopover.Positioner>
+    </Portal>
+  );
+};
 
 export type CardSelectTriggerProps = {
   /** The design of the trigger button.
@@ -63,44 +66,43 @@ const bgActiveStyleMap = {
   floating: "floating.surface.active",
 };
 
-export const CardSelectTrigger = forwardRef<
-  HTMLButtonElement,
-  CardSelectTriggerProps
->(
-  (
-    { icon, variant = "core", withChevron = true, size, children, ...props },
-    ref,
-  ) => {
-    const ChevronIcon =
-      size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
+export const CardSelectTrigger = ({
+  ref,
+  icon,
+  variant = "core",
+  withChevron = true,
+  size,
+  children,
+  ...props
+}: CardSelectTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const ChevronIcon =
+    size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
 
-    const { open } = usePopoverContext();
+  const { open } = usePopoverContext();
 
-    return (
-      <ChakraPopover.Trigger asChild ref={ref}>
-        <Button
-          leftIcon={icon}
-          variant={
-            variant === "core"
-              ? "tertiary"
-              : (variant as ButtonProps["variant"])
-          }
-          size={size}
-          bg={open ? bgActiveStyleMap[variant] : undefined}
-          rightIcon={
-            withChevron ? (
-              <ChevronIcon
-                transform={open ? "rotate(180deg)" : undefined}
-                transition="transform 0.3s"
-              />
-            ) : null
-          }
-          {...props}
-        >
-          {children}
-        </Button>
-      </ChakraPopover.Trigger>
-    );
-  },
-);
-CardSelectTrigger.displayName = "CardSelectTrigger";
+  return (
+    <ChakraPopover.Trigger asChild ref={ref}>
+      <Button
+        leftIcon={icon}
+        variant={
+          variant === "core" ? "tertiary" : (variant as ButtonProps["variant"])
+        }
+        size={size}
+        bg={open ? bgActiveStyleMap[variant] : undefined}
+        rightIcon={
+          withChevron ? (
+            <ChevronIcon
+              transform={open ? "rotate(180deg)" : undefined}
+              transition="transform 0.3s"
+            />
+          ) : null
+        }
+        {...props}
+      >
+        {children}
+      </Button>
+    </ChakraPopover.Trigger>
+  );
+};

package/src/input/Checkbox.tsx

@@ -29,20 +29,22 @@ type CheckboxProps = Omit<ChakraCheckbox.RootProps, "onChange"> &
  * You can group several of these together with a `CheckboxGroup`.
  */
 
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref) => {
-    const { children, inputProps, rootRef, ...rest } = props;
-    return (
-      <ChakraCheckbox.Root ref={rootRef} {...rest}>
-        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
-        <ChakraCheckbox.Control>
-          <ChakraCheckbox.Indicator />
-        </ChakraCheckbox.Control>
-        {children != null && (
-          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
-        )}
-      </ChakraCheckbox.Root>
-    );
-  },
-);
-Checkbox.displayName = "Checkbox";
+export const Checkbox = ({
+  ref,
+  ...props
+}: CheckboxProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const { children, inputProps, rootRef, ...rest } = props;
+  return (
+    <ChakraCheckbox.Root ref={rootRef} {...rest}>
+      <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+      <ChakraCheckbox.Control>
+        <ChakraCheckbox.Indicator />
+      </ChakraCheckbox.Control>
+      {children != null && (
+        <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+      )}
+    </ChakraCheckbox.Root>
+  );
+};

package/src/input/CheckboxGroup.tsx

@@ -29,7 +29,6 @@ export type CheckboxGroupProps = React.ComponentProps<
  */
 
 export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  // Forwardref caues issue with prop types not working. Forwardref is unessessary here, as ChakraCheckbox already has a ref prop and is deprecated in react 19.
   const { direction = "row", children, gap = 1, ...rest } = props;
 
   return (
@@ -40,4 +39,3 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
     </ChakraCheckboxGroup>
   );
 };
-CheckboxGroup.displayName = "CheckboxGroup";

package/src/input/ChoiceChip.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 type CheckBoxIcon = {
   default: React.ReactNode;
@@ -49,42 +49,46 @@ export type ChoiceChipProps = Omit<
  * ```
  */
 
-export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
-  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
-    return (
-      <CheckboxCard.Root
-        {...rootProps}
-        {...(onCheckedChange && {
-          onCheckedChange: (details) => onCheckedChange(!!details.checked),
-        })}
-      >
-        <CheckboxCard.Context>
-          {({ checked }) => (
-            <>
-              <CheckboxCard.HiddenInput ref={ref} />
-              <CheckboxCard.Control>
-                <CheckboxCard.Content>
-                  <CheckboxCard.Label>
-                    {icon && (
-                      <Span width="24px">
-                        {checked ? icon.checked : icon.default}
-                      </Span>
-                    )}
+export const ChoiceChip = ({
+  ref,
+  children,
+  icon,
+  onCheckedChange,
+  ...rootProps
+}: ChoiceChipProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  return (
+    <CheckboxCard.Root
+      {...rootProps}
+      {...(onCheckedChange && {
+        onCheckedChange: (details) => onCheckedChange(!!details.checked),
+      })}
+    >
+      <CheckboxCard.Context>
+        {({ checked }) => (
+          <>
+            <CheckboxCard.HiddenInput ref={ref} />
+            <CheckboxCard.Control>
+              <CheckboxCard.Content>
+                <CheckboxCard.Label>
+                  {icon && (
+                    <Span width="24px">
+                      {checked ? icon.checked : icon.default}
+                    </Span>
+                  )}
 
-                    {rootProps.chipType !== "icon" && children}
+                  {rootProps.chipType !== "icon" && children}
 
-                    {rootProps.chipType === "filter" && checked && (
-                      <CloseOutline24Icon />
-                    )}
-                  </CheckboxCard.Label>
-                </CheckboxCard.Content>
-              </CheckboxCard.Control>
-            </>
-          )}
-        </CheckboxCard.Context>
-      </CheckboxCard.Root>
-    );
-  },
-);
-
-ChoiceChip.displayName = "ChoiceChip";
+                  {rootProps.chipType === "filter" && checked && (
+                    <CloseOutline24Icon />
+                  )}
+                </CheckboxCard.Label>
+              </CheckboxCard.Content>
+            </CheckboxCard.Control>
+          </>
+        )}
+      </CheckboxCard.Context>
+    </CheckboxCard.Root>
+  );
+};

package/src/input/Combobox.tsx

@@ -97,7 +97,9 @@ export const Combobox = (props: ComboboxProps<object>) => {
 
   const listboxId = useId();
 
-  const inputWidth = useInputWidth(inputRef);
+  const inputWidth = useInputWidth(
+    inputRef as React.RefObject<HTMLInputElement>,
+  );
 
   const state = useComboBoxState({
     defaultFilter: contains,
@@ -231,7 +233,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
             }}
             state={state}
             id={listboxId}
-            listBoxRef={listBoxRef}
+            listBoxRef={listBoxRef as React.RefObject<HTMLUListElement>}
             emptyContent={emptyContent}
             maxWidth={inputWidth}
             variant={variant}
@@ -244,8 +246,6 @@ export const Combobox = (props: ComboboxProps<object>) => {
   );
 };
 
-Combobox.displayName = "Combobox";
-
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   const [inputWidth, setInputWidth] = useState("auto");
 

package/src/input/CountryCodeSelect.tsx

@@ -2,7 +2,7 @@
 
 import { createListCollection } from "@chakra-ui/react";
 import { getSupportedCallingCodes } from "awesome-phonenumber";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 
 import {
   createTexts,
@@ -37,10 +37,12 @@ type CountryCodeSelectProps = Omit<SelectProps, "label" | "collection"> & {
   allowedCountryCodes?: string[];
 };
 
-export const CountryCodeSelect = forwardRef<
-  HTMLDivElement,
-  CountryCodeSelectProps
->((props, ref) => {
+export const CountryCodeSelect = ({
+  ref,
+  ...props
+}: CountryCodeSelectProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   const { t } = useTranslation();
 
   const filteredCallingCodes = useMemo(() => {
@@ -71,9 +73,7 @@ export const CountryCodeSelect = forwardRef<
       ))}
     </Select>
   );
-});
-
-CountryCodeSelect.displayName = "CountryCodeSelect";
+};
 
 const texts = createTexts({
   countryCode: {

package/src/input/Field.tsx

@@ -32,14 +32,14 @@ function renderLabelWithIndicator(
     );
   }
 
-  return React.cloneElement(label, {
-    children: (
-      <>
-        {label.props.children}
-        <ChakraField.RequiredIndicator />
-      </>
-    ),
-  });
+  return React.cloneElement(
+    label,
+    {},
+    <>
+      {(label.props as React.PropsWithChildren).children}
+      <ChakraField.RequiredIndicator />
+    </>,
+  );
 }
 
 export type FieldBaseProps = {
@@ -80,80 +80,83 @@ export type FieldProps = Omit<
  * This component is not exported and should be used as a wrapper for other input components.
  */
 
-export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  (props, ref) => {
-    const {
-      label,
-      children,
-      helperText,
-      errorText,
-      floatingLabel = false,
-      disabled,
-      invalid,
-      readOnly,
-      required,
-      direction,
-      id,
-      shouldFloat,
-      labelAsChild,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "field" });
-    const styles = recipe();
+export const Field = ({
+  ref,
+  ...props
+}: FieldProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    label,
+    children,
+    helperText,
+    errorText,
+    floatingLabel = false,
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    direction,
+    id,
+    shouldFloat,
+    labelAsChild,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "field" });
+  const styles = recipe();
 
-    return (
-      <Stack gap="2" ref={ref} width="100%" {...rest}>
-        <ChakraField.Root
-          disabled={disabled}
-          invalid={invalid}
-          readOnly={readOnly}
-          required={required}
-          css={styles.root}
-          direction={direction}
-          id={id}
-        >
-          {label && !floatingLabel && (
-            <Label asChild={labelAsChild} aria-hidden>
-              {renderLabelWithIndicator(label, labelAsChild)}
-            </Label>
-          )}
+  return (
+    <Stack gap="2" ref={ref} width="100%" {...rest}>
+      <ChakraField.Root
+        disabled={disabled}
+        invalid={invalid}
+        readOnly={readOnly}
+        required={required}
+        css={styles.root}
+        direction={direction}
+        id={id}
+      >
+        {label && !floatingLabel && (
+          <Label asChild={labelAsChild} aria-hidden>
+            {renderLabelWithIndicator(label, labelAsChild)}
+          </Label>
+        )}
 
-          {children}
+        {children}
 
-          {label && floatingLabel && (
-            <FloatingLabel
-              data-float={shouldFloat ? true : undefined}
-              asChild={labelAsChild}
-              aria-hidden
-            >
-              {renderLabelWithIndicator(label, labelAsChild)}
-            </FloatingLabel>
-          )}
-          {errorText && (
-            <ChakraField.ErrorText aria-live="polite">
-              {errorText}
-            </ChakraField.ErrorText>
-          )}
-        </ChakraField.Root>
-        {helperText && (
-          <Text variant="sm" color="text.tertiary">
-            {helperText}
-          </Text>
+        {label && floatingLabel && (
+          <FloatingLabel
+            data-float={shouldFloat ? true : undefined}
+            asChild={labelAsChild}
+            aria-hidden
+          >
+            {renderLabelWithIndicator(label, labelAsChild)}
+          </FloatingLabel>
         )}
-      </Stack>
-    );
-  },
-);
-Field.displayName = "Field";
+        {errorText && (
+          <ChakraField.ErrorText aria-live="polite">
+            {errorText}
+          </ChakraField.ErrorText>
+        )}
+      </ChakraField.Root>
+      {helperText && (
+        <Text variant="sm" color="text.tertiary">
+          {helperText}
+        </Text>
+      )}
+    </Stack>
+  );
+};
 
-export const FieldErrorText = React.forwardRef<
-  HTMLDivElement,
-  ChakraField.ErrorTextProps
->((props, ref) => {
+export const FieldErrorText = ({
+  ref,
+  ...props
+}: ChakraField.ErrorTextProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   return (
     <ChakraField.ErrorText ref={ref}>{props.children}</ChakraField.ErrorText>
   );
-});
-FieldErrorText.displayName = "FieldErrorText";
+};
 
 export const FieldLabel = ChakraField.Label;

package/src/input/FloatingLabel.tsx

@@ -1,13 +1,11 @@
 import { defineStyle, Field, FieldLabelProps } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
-export const FloatingLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
-  (props, ref) => (
-    <Field.Label ref={ref} {...props} css={floatingLabelStyles} />
-  ),
-);
-
-FloatingLabel.displayName = "FloatingLabel";
+export const FloatingLabel = ({
+  ref,
+  ...props
+}: FieldLabelProps & {
+  ref?: React.RefObject<HTMLLabelElement | null>;
+}) => <Field.Label ref={ref} {...props} css={floatingLabelStyles} />;
 
 const floatingLabelStyles = defineStyle({
   paddingX: 3,