@vygruppen/spor-react 12.24.15 → 13.0.0

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: {

package/src/input/Select.tsx

@@ -57,51 +57,54 @@ export type SelectProps = ChakraSelectRootProps &
  *
  */
 
-export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
-  (props, ref) => {
-    const {
-      variant = "core",
-      children,
-      positioning,
-      label,
-      errorText,
-      invalid,
-      helperText,
-      css,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "select" });
-    const styles = recipe({ variant });
+export const Select = ({
+  ref,
+  ...props
+}: SelectProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    variant = "core",
+    children,
+    positioning,
+    label,
+    errorText,
+    invalid,
+    helperText,
+    css,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "select" });
+  const styles = recipe({ variant });
 
-    return (
-      <Field
-        errorText={errorText}
-        invalid={invalid}
-        helperText={helperText}
-        required={props.required}
-        id={rest.id}
-        css={css}
+  return (
+    <Field
+      errorText={errorText}
+      invalid={invalid}
+      helperText={helperText}
+      required={props.required}
+      id={rest.id}
+      css={css}
+    >
+      <ChakraSelect.Root
+        {...rest}
+        ref={ref}
+        positioning={{ sameWidth: true, ...positioning }}
+        variant={variant}
+        css={styles.root}
+        position="relative"
       >
-        <ChakraSelect.Root
-          {...rest}
-          ref={ref}
-          positioning={{ sameWidth: true, ...positioning }}
-          variant={variant}
-          css={styles.root}
-          position="relative"
-        >
-          <SelectTrigger data-attachable>
-            <SelectValueText withPlaceholder={label ? true : false} />
-          </SelectTrigger>
-          {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
-          <SelectContent css={styles.selectContent} baseStyle={css}>
-            {children}
-          </SelectContent>
-        </ChakraSelect.Root>
-      </Field>
-    );
-  },
-);
+        <SelectTrigger data-attachable>
+          <SelectValueText withPlaceholder={label ? true : false} />
+        </SelectTrigger>
+        {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
+        <SelectContent css={styles.selectContent} baseStyle={css}>
+          {children}
+        </SelectContent>
+      </ChakraSelect.Root>
+    </Field>
+  );
+};
 
 export const SelectLabel = (props: SelectLabelProps) => {
   const { value } = useSelectContext();
@@ -114,49 +117,49 @@ export const SelectLabel = (props: SelectLabelProps) => {
   );
 };
 
-Select.displayName = "Select";
-
 type SelectItemProps = ChakraSelect.ItemProps & {
   children: React.ReactNode;
   description?: React.ReactNode;
 };
 
-export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
-  (props, ref) => {
-    const { item, children, description, ...rest } = props;
-    const recipe = useSlotRecipe({ key: "select" });
-    const styles = recipe();
-    return (
-      <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
-        <Box width="100%">
-          <ChakraSelect.ItemText display="flex">
-            {children}
-          </ChakraSelect.ItemText>
-          {description && (
-            <Box data-part="item-description" css={styles.itemDescription}>
-              {description}
-            </Box>
-          )}
-        </Box>
+export const SelectItem = ({
+  ref,
+  ...props
+}: SelectItemProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { item, children, description, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "select" });
+  const styles = recipe();
+  return (
+    <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
+      <Box width="100%">
+        <ChakraSelect.ItemText display="flex">{children}</ChakraSelect.ItemText>
+        {description && (
+          <Box data-part="item-description" css={styles.itemDescription}>
+            {description}
+          </Box>
+        )}
+      </Box>
 
-        <ChakraSelect.ItemIndicator>
-          <CheckmarkFill18Icon />
-        </ChakraSelect.ItemIndicator>
-      </ChakraSelect.Item>
-    );
-  },
-);
-SelectItem.displayName = "SelectItem";
+      <ChakraSelect.ItemIndicator>
+        <CheckmarkFill18Icon />
+      </ChakraSelect.ItemIndicator>
+    </ChakraSelect.Item>
+  );
+};
 
 type SelectItemGroupProps = ChakraSelect.ItemGroupProps & {
   label: React.ReactNode;
   children: React.ReactNode;
 };
 
-export const SelectItemGroup = React.forwardRef<
-  HTMLDivElement,
-  SelectItemGroupProps
->(function SelectItemGroup(props, ref) {
+export const SelectItemGroup = function SelectItemGroup({
+  ref,
+  ...props
+}: SelectItemGroupProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const { children, label, ...rest } = props;
   return (
     <ChakraSelect.ItemGroup {...rest} ref={ref}>
@@ -164,17 +167,19 @@ export const SelectItemGroup = React.forwardRef<
       {children}
     </ChakraSelect.ItemGroup>
   );
-});
+};
 
 type SelectTriggerProps = ChakraSelect.ControlProps & {
   clearable?: boolean;
   children?: React.ReactNode;
 };
 
-export const SelectTrigger = React.forwardRef<
-  HTMLButtonElement,
-  SelectTriggerProps
->(function SelectTrigger(props, ref) {
+export const SelectTrigger = function SelectTrigger({
+  ref,
+  ...props
+}: SelectTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -194,16 +199,18 @@ export const SelectTrigger = React.forwardRef<
       </ChakraSelect.IndicatorGroup>
     </ChakraSelect.Control>
   );
-});
+};
 
 type SelectClearTriggerProps = ChakraSelect.ClearTriggerProps & {
   children?: React.ReactNode;
 };
 
-const SelectClearTrigger = React.forwardRef<
-  HTMLButtonElement,
-  SelectClearTriggerProps
->(function SelectClearTrigger(props, ref) {
+const SelectClearTrigger = function SelectClearTrigger({
+  ref,
+  ...props
+}: SelectClearTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   return (
     <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
       <CloseButton
@@ -214,7 +221,7 @@ const SelectClearTrigger = React.forwardRef<
       />
     </ChakraSelect.ClearTrigger>
   );
-});
+};
 
 type SelectContentProps = ChakraSelect.ContentProps & {
   portalled?: boolean;
@@ -222,12 +229,13 @@ type SelectContentProps = ChakraSelect.ContentProps & {
   baseStyle?: SystemStyleObject;
 };
 
-export const SelectContent = React.forwardRef<
-  HTMLDivElement,
-  SelectContentProps
->(function SelectContent(props, ref) {
+export const SelectContent = function SelectContent({
+  ref,
+  ...props
+}: SelectContentProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const { portalled = true, portalRef, baseStyle, ...rest } = props;
-
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraSelect.Positioner css={baseStyle}>
@@ -235,7 +243,7 @@ export const SelectContent = React.forwardRef<
       </ChakraSelect.Positioner>
     </Portal>
   );
-});
+};
 
 type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
   children?(items: CollectionItem[]): React.ReactNode;
@@ -243,10 +251,12 @@ type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
   withPlaceholder?: boolean;
 };
 
-export const SelectValueText = React.forwardRef<
-  HTMLSpanElement,
-  SelectValueTextProps
->(function SelectValueText(props, ref) {
+export const SelectValueText = function SelectValueText({
+  ref,
+  ...props
+}: SelectValueTextProps & {
+  ref?: React.RefObject<HTMLSpanElement>;
+}) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return (
     <ChakraSelect.ValueText
@@ -274,7 +284,7 @@ export const SelectValueText = React.forwardRef<
       </ChakraSelect.Context>
     </ChakraSelect.ValueText>
   );
-});
+};
 
 export const SelectItemText = ChakraSelect.ItemText;
 export const SelectRoot = ChakraSelect.Root;

package/src/input/Switch.tsx

@@ -5,7 +5,7 @@ import {
   Switch as ChakraSwitch,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { switchSlotRecipe } from "../theme/slot-recipes/switch";
 import { Field, FieldBaseProps } from "./Field";
@@ -45,45 +45,47 @@ export type SwitchProps = Exclude<
  * ```
  */
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  (props, ref) => {
-    const {
-      rootRef,
-      size = "md",
-      label,
-      invalid,
-      errorText,
-      helperText,
-      css,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "switch" });
-    const styles = recipe({ size });
+export const Switch = ({
+  ref,
+  ...props
+}: SwitchProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    css,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "switch" });
+  const styles = recipe({ size });
 
-    return (
-      <Field
-        style={{ width: "auto" }}
-        invalid={invalid}
-        errorText={errorText}
-        helperText={helperText}
-        required={props.required}
-        id={rest.id}
-        css={css}
+  return (
+    <Field
+      style={{ width: "auto" }}
+      invalid={invalid}
+      errorText={errorText}
+      helperText={helperText}
+      required={props.required}
+      id={rest.id}
+      css={css}
+    >
+      <ChakraSwitch.Root
+        ref={rootRef}
+        {...rest}
+        checked={props.checked}
+        css={styles.root}
       >
-        <ChakraSwitch.Root
-          ref={rootRef}
-          {...rest}
-          checked={props.checked}
-          css={styles.root}
-        >
-          <ChakraSwitch.HiddenInput ref={ref} />
-          <ChakraSwitch.Control css={styles.control}>
-            <ChakraSwitch.Thumb />
-          </ChakraSwitch.Control>
-          {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
-        </ChakraSwitch.Root>
-      </Field>
-    );
-  },
-);
-Switch.displayName = "Switch";
+        <ChakraSwitch.HiddenInput ref={ref} />
+        <ChakraSwitch.Control css={styles.control}>
+          <ChakraSwitch.Thumb />
+        </ChakraSwitch.Control>
+        {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
+      </ChakraSwitch.Root>
+    </Field>
+  );
+};