@vygruppen/spor-react 12.24.15 → 13.0.0

package/src/input/Textarea.tsx

@@ -7,7 +7,6 @@ import {
   useRecipe,
 } from "@chakra-ui/react";
 import React, {
-  forwardRef,
   PropsWithChildren,
   ReactNode,
   useId,
@@ -56,71 +55,74 @@ const useLabelHeight = (label: ReactNode | undefined) => {
   }, [label]);
   return { labelRef, labelHeight };
 };
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const {
-      label,
-      variant = "core",
-      invalid,
-      required,
-      errorText,
-      readOnly,
-      helperText,
-      floatingLabel = true,
-      ...restProps
-    } = props;
-    const recipe = useRecipe({ key: "textarea" });
-    const styles = recipe({ variant });
-    const { labelRef, labelHeight } = useLabelHeight(label);
 
-    const inputRef = useRef<HTMLTextAreaElement>(null);
-    useImperativeHandle(ref, () => inputRef.current as HTMLTextAreaElement, []);
-    const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
-      useFloatingInputState<HTMLTextAreaElement>({
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onFocus: props.onFocus,
-        onBlur: props.onBlur,
-        onChange: props.onChange,
-        inputRef,
-      });
+export const Textarea = ({
+  ref,
+  ...props
+}: TextareaProps & {
+  ref?: React.RefObject<HTMLTextAreaElement>;
+}) => {
+  const {
+    label,
+    variant = "core",
+    invalid,
+    required,
+    errorText,
+    readOnly,
+    helperText,
+    floatingLabel = true,
+    ...restProps
+  } = props;
+  const recipe = useRecipe({ key: "textarea" });
+  const styles = recipe({ variant });
 
-    const labelId = useId();
+  const { labelRef, labelHeight } = useLabelHeight(label);
 
-    return (
-      <Field
-        errorText={errorText}
-        helperText={helperText}
-        invalid={invalid}
-        required={required}
-        readOnly={readOnly}
-        floatingLabel={floatingLabel}
-        shouldFloat={shouldFloat}
-        position="relative"
-        label={
-          <Box id={labelId}>
-            <label ref={labelRef}>{label}</label>
-          </Box>
-        }
-        id={restProps.id}
-      >
-        <ChakraTextarea
-          {...restProps}
-          css={styles}
-          className="peer"
-          ref={inputRef}
-          value={isControlled ? props.value : undefined}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          style={
-            { "--label-height": `${labelHeight}px` } as React.CSSProperties
-          }
-          placeholder=" "
-          aria-labelledby={labelId}
-        />
-      </Field>
-    );
-  },
-);
-Textarea.displayName = "Textarea";
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  useImperativeHandle(ref, () => inputRef.current!, []);
+
+  const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
+    useFloatingInputState<HTMLTextAreaElement>({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      onChange: props.onChange,
+      inputRef: inputRef as React.RefObject<HTMLTextAreaElement>,
+    });
+
+  const labelId = useId();
+
+  return (
+    <Field
+      errorText={errorText}
+      helperText={helperText}
+      invalid={invalid}
+      required={required}
+      readOnly={readOnly}
+      floatingLabel={floatingLabel}
+      shouldFloat={shouldFloat}
+      position="relative"
+      label={
+        <Box id={labelId}>
+          <label ref={labelRef}>{label}</label>
+        </Box>
+      }
+      id={restProps.id}
+    >
+      <ChakraTextarea
+        {...restProps}
+        css={styles}
+        className="peer"
+        ref={inputRef}
+        value={isControlled ? props.value : undefined}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        style={{ "--label-height": `${labelHeight}px` } as React.CSSProperties}
+        placeholder=" "
+        aria-labelledby={labelId}
+      />
+    </Field>
+  );
+};

package/src/input/index.ts

@@ -9,6 +9,7 @@ export * from "./Field";
 export * from "./Fieldset";
 export * from "./Input";
 export * from "./ListBox";
+export * from "./Menu";
 export * from "./NativeSelect";
 export * from "./NumericStepper";
 export * from "./PasswordInput";

package/src/layout/PressableCard.tsx

@@ -5,7 +5,6 @@ import {
   RecipeVariantProps,
   useRecipe,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 
@@ -42,13 +41,15 @@ import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> &
   ButtonProps;
 
-export const PressableCard = forwardRef<HTMLButtonElement, PressableCardProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "pressableCard" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const PressableCard = ({
+  ref,
+  ...props
+}: PressableCardProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const recipe = useRecipe({ key: "pressableCard" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    return <chakra.button {...restProps} css={styles} ref={ref} />;
-  },
-);
-PressableCard.displayName = "PressableCard";
+  return <chakra.button {...restProps} css={styles} ref={ref} />;
+};

package/src/layout/RadioCard.tsx

@@ -4,7 +4,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import React, { useId } from "react";
 
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
@@ -38,32 +38,34 @@ type RadioCardItemProps = Exclude<
     ariaLabel?: string;
   };
 
-export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
-  (props, ref) => {
-    const { inputProps, children } = props;
-    const uniqueId = useId();
-    const itemControlId = `radio-card-item-control-${uniqueId}`;
+export const RadioCard = ({
+  ref,
+  ...props
+}: RadioCardItemProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const { inputProps, children } = props;
+  const uniqueId = useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
 
-    const inputHasAriaLabel =
-      inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
+  const inputHasAriaLabel =
+    inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
 
-    return (
-      <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput
-          aria-labelledby={
-            inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
-          }
-          ref={ref}
-          {...inputProps}
-        />
-        <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
-          {children}
-        </ChakraRadioCard.ItemControl>
-      </ChakraRadioCard.Item>
-    );
-  },
-);
-RadioCard.displayName = "RadioCard";
+  return (
+    <ChakraRadioCard.Item {...props}>
+      <ChakraRadioCard.ItemHiddenInput
+        aria-labelledby={
+          inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+        }
+        ref={ref}
+        {...inputProps}
+      />
+      <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
+        {children}
+      </ChakraRadioCard.ItemControl>
+    </ChakraRadioCard.Item>
+  );
+};
 
 type RadioCardRootProps = RadioCardVariantProps &
   Exclude<ChakraRadioCard.RootProps, "variant"> & {
@@ -73,34 +75,36 @@ type RadioCardRootProps = RadioCardVariantProps &
     display?: string;
   };
 
-export const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardRootProps>(
-  (props, ref) => {
-    const {
-      children,
-      variant,
-      gap = 2,
-      direction = "column",
-      display = "flex",
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "radio-card" });
-    const styles = recipe({ variant });
+export const RadioCardGroup = ({
+  ref,
+  ...props
+}: RadioCardRootProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    children,
+    variant,
+    gap = 2,
+    direction = "column",
+    display = "flex",
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "radio-card" });
+  const styles = recipe({ variant });
 
-    return (
-      <ChakraRadioCard.Root
-        ref={ref}
-        variant={variant}
-        css={styles}
-        display={display}
-        gap={gap}
-        flexDirection={direction}
-        {...rest}
-      >
-        {children}
-      </ChakraRadioCard.Root>
-    );
-  },
-);
-RadioCardGroup.displayName = "RadioCardGroup";
+  return (
+    <ChakraRadioCard.Root
+      ref={ref}
+      variant={variant}
+      css={styles}
+      display={display}
+      gap={gap}
+      flexDirection={direction}
+      {...rest}
+    >
+      {children}
+    </ChakraRadioCard.Root>
+  );
+};
 
 export const RadioCardLabel = ChakraRadioCard.Label;

package/src/layout/Separator.tsx

@@ -4,11 +4,12 @@ import {
   Separator as ChakraSeparator,
   SeparatorProps as ChakraSeparatorProps,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
-export const Separator = forwardRef<HTMLDivElement, ChakraSeparatorProps>(
-  (props, ref) => {
-    return <ChakraSeparator {...props} ref={ref} data- />;
-  },
-);
-Separator.displayName = "Separator";
+export const Separator = ({
+  ref,
+  ...props
+}: ChakraSeparatorProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  return <ChakraSeparator {...props} ref={ref} data- />;
+};

package/src/layout/StaticCard.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 import { staticCardRecipe } from "../theme/recipes/static-card";
 
@@ -44,13 +43,15 @@ import { staticCardRecipe } from "../theme/recipes/static-card";
 export type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> &
   BoxProps;
 
-export const StaticCard = forwardRef<HTMLDivElement, StaticCardProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "staticCard" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const StaticCard = ({
+  ref,
+  ...props
+}: StaticCardProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const recipe = useRecipe({ key: "staticCard" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    return <Box css={styles} {...restProps} ref={ref}></Box>;
-  },
-);
-StaticCard.displayName = "StaticCard";
+  return <Box css={styles} {...restProps} ref={ref}></Box>;
+};

package/src/linjetag/LineIcon.tsx

@@ -6,7 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import clsx from "clsx";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
 import { LinjeTagIcon } from "./icons";
@@ -63,63 +63,57 @@ export type LineIconProps = Exclude<BoxProps, "variant"> &
  * @see https://spor.vy.no/components/line-tags
  */
 
-export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
-  function LineIcon(
-    {
-      variant,
-      size = "md",
-      foregroundColor,
-      disabled,
-      style,
-      target = "lineIcon",
-      label,
-      ...rest
-    },
-    ref,
-  ) {
-    const recipe = useSlotRecipe({ key: "lineIcon" });
-    const styles = recipe({ variant, size, ...rest });
+export const LineIcon = function LineIcon({
+  ref,
+  variant,
+  size = "md",
+  foregroundColor,
+  disabled,
+  style,
+  target = "lineIcon",
+  label,
+  ...rest
+}: LineIconProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
+  const recipe = useSlotRecipe({ key: "lineIcon" });
+  const styles = recipe({ variant, size, ...rest });
 
-    const targetPadding = () => {
-      return target === "travelTag" ? 0.5 : 1;
-    };
+  const targetPadding = () => {
+    return target === "travelTag" ? 0.5 : 1;
+  };
 
-    const borderContainer = () => {
-      return variant === "walk" && target === "travelTag" ? 0 : "1px";
-    };
+  const borderContainer = () => {
+    return variant === "walk" && target === "travelTag" ? 0 : "1px";
+  };
 
-    if (foregroundColor) {
-      styles.iconContainer.backgroundColor = disabled
-        ? "surface.disabled"
-        : foregroundColor;
-    }
+  if (foregroundColor) {
+    styles.iconContainer.backgroundColor = disabled
+      ? "surface.disabled"
+      : foregroundColor;
+  }
 
-    function getIconVariant() {
-      if (variant === "custom") {
-        if ("customIconVariant" in rest) {
-          return rest.customIconVariant;
-        }
-        return "local-train";
+  function getIconVariant() {
+    if (variant === "custom") {
+      if ("customIconVariant" in rest) {
+        return rest.customIconVariant;
       }
-      return variant;
+      return "local-train";
     }
+    return variant;
+  }
 
-    return (
-      <Box
-        css={{ ...styles.iconContainer, ...style }}
-        padding={targetPadding()}
-        borderWidth={borderContainer()}
-        borderColor={variant === "walk" ? "core.outline" : "transparent"}
-        aria-label={label}
-        ref={ref}
-        className={clsx("light", rest.className)}
-      >
-        <LinjeTagIcon
-          size={size}
-          css={styles.icon}
-          variant={getIconVariant()}
-        />
-      </Box>
-    );
-  },
-);
+  return (
+    <Box
+      css={{ ...styles.iconContainer, ...style }}
+      padding={targetPadding()}
+      borderWidth={borderContainer()}
+      borderColor={variant === "walk" ? "core.outline" : "transparent"}
+      aria-label={label}
+      ref={ref}
+      className={clsx("light", rest.className)}
+    >
+      <LinjeTagIcon size={size} css={styles.icon} variant={getIconVariant()} />
+    </Box>
+  );
+};

package/src/linjetag/TravelTag.tsx

@@ -15,7 +15,7 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import clsx from "clsx";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
 import { LineIcon } from "./LineIcon";
@@ -128,64 +128,62 @@ function renderDeviationLevelIcon(
   }
 }
 
-export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
-  function TravelTag(
-    {
-      variant,
-      size = "md",
-      deviationLevel = "none",
-      title,
-      description,
-      disabled,
-      foregroundColor,
-      backgroundColor,
-      customIconVariant,
-      ...rest
-    },
-    ref,
-  ) {
-    const recipie = useSlotRecipe({ key: "travelTag" });
-    const styles = recipie({
-      variant,
-      size,
-      deviationLevel,
-    });
+export const TravelTag = function TravelTag({
+  ref,
+  variant,
+  size = "md",
+  deviationLevel = "none",
+  title,
+  description,
+  disabled,
+  foregroundColor,
+  backgroundColor,
+  customIconVariant,
+  ...rest
+}: TravelTagProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
+  const recipie = useSlotRecipe({ key: "travelTag" });
+  const styles = recipie({
+    variant,
+    size,
+    deviationLevel,
+  });
 
-    return (
-      <Box
-        css={styles.container}
-        aria-disabled={disabled}
-        ref={ref}
-        className={clsx("light", rest.className)}
+  return (
+    <Box
+      css={styles.container}
+      aria-disabled={disabled}
+      ref={ref}
+      className={clsx("light", rest.className)}
+      backgroundColor={backgroundColor}
+      {...rest}
+    >
+      <LineIcon
+        variant={variant}
+        size={size}
+        foregroundColor={foregroundColor}
         backgroundColor={backgroundColor}
-        {...rest}
-      >
-        <LineIcon
-          variant={variant}
-          size={size}
-          foregroundColor={foregroundColor}
-          backgroundColor={backgroundColor}
-          customIconVariant={customIconVariant}
-          disabled={disabled}
-          target="travelTag"
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          {...(rest as any)} //Find a way to not use any here
-        />
-        <Box css={styles.textContainer}>
-          {title && (
-            <Box as="span" css={styles.title}>
-              {title}
-            </Box>
-          )}
-          {title && description && " "}
-          {description && (
-            <Box as="span" css={styles.description}>
-              {description}
-            </Box>
-          )}
-        </Box>
-        {renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)}
+        customIconVariant={customIconVariant}
+        disabled={disabled}
+        target="travelTag"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...(rest as any)} //Find a way to not use any here
+      />
+      <Box css={styles.textContainer}>
+        {title && (
+          <Box as="span" css={styles.title}>
+            {title}
+          </Box>
+        )}
+        {title && description && " "}
+        {description && (
+          <Box as="span" css={styles.description}>
+            {description}
+          </Box>
+        )}
       </Box>
-    );
-  },
-);
+      {renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)}
+    </Box>
+  );
+};