@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/input/PasswordInput.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, useControllableState } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import { ButtonProps, Input, InputProps } from "..";
 import { createTexts, useTranslation } from "..";
@@ -42,70 +42,74 @@ export interface PasswordInputProps
  * @see https://spor.vy.no/components/password-input
  */
 
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  (props, ref) => {
-    const {
-      defaultVisible,
-      visible: visibleProperty,
-      onVisibleChange,
-      label,
-      startElement,
-      ...rest
-    } = props;
+export const PasswordInput = ({
+  ref,
+  ...props
+}: PasswordInputProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const {
+    defaultVisible,
+    visible: visibleProperty,
+    onVisibleChange,
+    label,
+    startElement,
+    ...rest
+  } = props;
 
-    const [visible, setVisible] = useControllableState({
-      value: visibleProperty,
-      defaultValue: defaultVisible || false,
-      onChange: onVisibleChange,
-    });
+  const [visible, setVisible] = useControllableState({
+    value: visibleProperty,
+    defaultValue: defaultVisible || false,
+    onChange: onVisibleChange,
+  });
 
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    return (
-      <Input
-        ref={ref}
-        startElement={startElement && startElement}
-        label={label}
-        type={visible ? "text" : "password"}
-        endElement={
-          <VisibilityTrigger
-            variant="ghost"
-            disabled={rest.disabled}
-            onPointerDown={(event) => {
-              if (rest.disabled) return;
-              if (event.button !== 0) return;
-              event.preventDefault();
-              setVisible(!visible);
-            }}
-          >
-            {visible ? t(texts.hidePassword) : t(texts.showPassword)}
-          </VisibilityTrigger>
-        }
-        {...rest}
-      />
-    );
-  },
-);
-PasswordInput.displayName = "PasswordInput";
+  return (
+    <Input
+      ref={ref}
+      startElement={startElement && startElement}
+      label={label}
+      type={visible ? "text" : "password"}
+      endElement={
+        <VisibilityTrigger
+          variant="ghost"
+          disabled={rest.disabled}
+          onPointerDown={(event) => {
+            if (rest.disabled) return;
+            if (event.button !== 0) return;
+            event.preventDefault();
+            setVisible(!visible);
+          }}
+        >
+          {visible ? t(texts.hidePassword) : t(texts.showPassword)}
+        </VisibilityTrigger>
+      }
+      {...rest}
+    />
+  );
+};
 
-const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    return (
-      <Button
-        ref={ref}
-        type="button"
-        fontWeight="normal"
-        size="sm"
-        borderRadius="sm"
-        marginRight={1}
-        {...props}
-      >
-        {props.children}
-      </Button>
-    );
-  },
-);
-VisibilityTrigger.displayName = "VisibilityTrigger";
+const VisibilityTrigger = ({
+  ref,
+  ...props
+}: ButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      fontWeight="normal"
+      size="sm"
+      borderRadius="sm"
+      marginRight={1}
+      {...props}
+    >
+      {props.children}
+    </Button>
+  );
+};
 
 const texts = createTexts({
   showPassword: {

package/src/input/PhoneNumberInput.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { useControllableState } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
@@ -42,10 +41,12 @@ type PhoneNumberInputProps = Omit<InputProps, "value"> & {
  * ```
  */
 
-export const PhoneNumberInput = forwardRef<
-  HTMLInputElement,
-  PhoneNumberInputProps
->((props, ref) => {
+export const PhoneNumberInput = ({
+  ref,
+  ...props
+}: PhoneNumberInputProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
   const {
     label: externalLabel,
     value: externalValue,
@@ -114,8 +115,7 @@ export const PhoneNumberInput = forwardRef<
       />
     </AttachedInputs>
   );
-});
-PhoneNumberInput.displayName = "PhoneNumberInput";
+};
 
 const texts = createTexts({
   phoneNumber: {

package/src/input/Popover.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box } from "@chakra-ui/react";
-import React, { forwardRef, useRef } from "react";
+import React, { useRef } from "react";
 import {
   AriaPopoverProps,
   DismissButton,
@@ -56,62 +56,59 @@ type PopoverProps = {
  *
  * Used to render accessible popover content, only used in ComboBox.
  */
-export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
-  (
+export const Popover = ({
+  ref,
+  children,
+  state,
+  triggerRef,
+  offset = 0,
+  crossOffset = 0,
+  placement = "bottom",
+  shouldFlip = false,
+  isNonModal = false,
+  hasBackdrop = true,
+  containerPadding = 12,
+}: PopoverProps & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}) => {
+  const internalRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popoverRef = ref ?? (internalRef as any);
+
+  const { popoverProps, underlayProps } = usePopover(
     {
-      children,
-      state,
       triggerRef,
-      offset = 0,
-      crossOffset = 0,
-      placement = "bottom",
-      shouldFlip = false,
-      isNonModal = false,
-      hasBackdrop = true,
-      containerPadding = 12,
+      popoverRef,
+      offset,
+      crossOffset,
+      placement,
+      shouldFlip,
+      isNonModal,
+      containerPadding,
     },
-    ref,
-  ) => {
-    const internalRef = useRef<HTMLDivElement>(null);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const popoverRef = ref ?? (internalRef as any);
-
-    const { popoverProps, underlayProps } = usePopover(
-      {
-        triggerRef,
-        popoverRef,
-        offset,
-        crossOffset,
-        placement,
-        shouldFlip,
-        isNonModal,
-        containerPadding,
-      },
-      state,
-    );
+    state,
+  );
 
-    const popoverBox = (
-      <Box
-        {...popoverProps}
-        ref={popoverRef}
-        // eslint-disable-next-line react-hooks/refs
-        minWidth={triggerRef.current?.clientWidth ?? "auto"}
-      >
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </Box>
-    );
+  const popoverBox = (
+    <Box
+      {...popoverProps}
+      ref={popoverRef}
+      // eslint-disable-next-line react-hooks/refs
+      minWidth={triggerRef.current?.clientWidth ?? "auto"}
+    >
+      <DismissButton onDismiss={state.close} />
+      {children}
+      <DismissButton onDismiss={state.close} />
+    </Box>
+  );
 
-    if (isNonModal) {
-      return popoverBox;
-    }
-    return (
-      <Overlay>
-        {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
-        {popoverBox}
-      </Overlay>
-    );
-  },
-);
-Popover.displayName = "Popover";
+  if (isNonModal) {
+    return popoverBox;
+  }
+  return (
+    <Overlay>
+      {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
+      {popoverBox}
+    </Overlay>
+  );
+};

package/src/input/Radio.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { RecipeVariantProps } from "@chakra-ui/react";
 import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { radioGroupSlotRecipe } from "../theme/slot-recipes/radio";
 
@@ -28,7 +28,12 @@ export type RadioProps = PropsWithChildren<RadioVariants> &
  * </RadioGroup>
  */
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+export const Radio = ({
+  ref,
+  ...props
+}: RadioProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
   const { children, inputProps, rootRef, ...rest } = props;
 
   return (
@@ -40,17 +45,17 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
       )}
     </ChakraRadioGroup.Item>
   );
-});
-Radio.displayName = "Radio";
-
+};
 type RadioGroupProps = Omit<
   ChakraRadioGroup.RootProps,
   "colorPalette" | "variant" | "size"
 > & {};
 
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  (props, ref) => {
-    return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
-  },
-);
-RadioGroup.displayName = "RadioGroup";
+export const RadioGroup = ({
+  ref,
+  ...props
+}: RadioGroupProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
+};

package/src/input/SearchInput.tsx

@@ -4,7 +4,6 @@ import {
   CloseOutline24Icon,
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { IconButton } from "../button/IconButton";
@@ -19,37 +18,39 @@ export type SearchInputProps = InputProps & {
  * Includes a search icon, a localized label and a reset button.
  */
 
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  (props, ref) => {
-    const { t } = useTranslation();
-    const { variant = "core", onReset, label, value } = props;
-    const clearButton = onReset && value;
+export const SearchInput = ({
+  ref,
+  ...props
+}: SearchInputProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const { t } = useTranslation();
+  const { variant = "core", onReset, label, value } = props;
+  const clearButton = onReset && value;
 
-    return (
-      <Input
-        ref={ref}
-        type="search"
-        variant={variant}
-        {...props}
-        startElement={<SearchOutline24Icon color="icon" />}
-        endElement={
-          clearButton && (
-            <IconButton
-              variant="ghost"
-              type="button"
-              size="sm"
-              aria-label={t(texts.reset)}
-              icon={<CloseOutline24Icon />}
-              onClick={onReset}
-            />
-          )
-        }
-        label={(label as string) ?? t(texts.label)}
-      />
-    );
-  },
-);
-SearchInput.displayName = "SearchInput";
+  return (
+    <Input
+      ref={ref}
+      type="search"
+      variant={variant}
+      {...props}
+      startElement={<SearchOutline24Icon color="icon" />}
+      endElement={
+        clearButton && (
+          <IconButton
+            variant="ghost"
+            type="button"
+            size="sm"
+            aria-label={t(texts.reset)}
+            icon={<CloseOutline24Icon />}
+            onClick={onReset}
+          />
+        )
+      }
+      label={(label as string) ?? t(texts.label)}
+    />
+  );
+};
 
 const texts = createTexts({
   label: {