@vygruppen/spor-react 12.1.1 → 12.2.0

package/src/input/PhoneNumberInput.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useControllableState } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
@@ -20,6 +20,7 @@ type PhoneNumberInputProps = InputProps & {
   value?: CountryCodeAndPhoneNumber;
   /** Returns an extra optional text when true */
   optional?: boolean;
+  allowedCountryCodes?: string[];
   invalid?: boolean;
   errorText?: string;
 };
@@ -51,6 +52,7 @@ export const PhoneNumberInput = forwardRef<
     onValueChange: externalOnChange,
     variant,
     optional,
+    allowedCountryCodes,
     invalid,
     errorText,
   } = props;
@@ -92,6 +94,7 @@ export const PhoneNumberInput = forwardRef<
           height="100%"
           width="6.25rem"
           variant={variant}
+          allowedCountryCodes={allowedCountryCodes}
           data-state="on"
         />
         <Input
@@ -103,7 +106,7 @@ export const PhoneNumberInput = forwardRef<
           onChange={(e) => {
             const target = e.target as HTMLInputElement;
             // Removes everything but numbers, spaces and dashes
-            const strippedValue = target.value.replace(/[^\d\s-]/g, "");
+            const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
             onChange({
               countryCode: value.countryCode,
               nationalNumber: strippedValue,
@@ -118,6 +121,7 @@ export const PhoneNumberInput = forwardRef<
     </AttachedInputs>
   );
 });
+PhoneNumberInput.displayName = "PhoneNumberInput";
 
 const texts = createTexts({
   phoneNumber: {

package/src/input/Popover.tsx

@@ -73,6 +73,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     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(
@@ -112,3 +113,4 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     );
   },
 );
+Popover.displayName = "Popover";

package/src/input/Radio.tsx

@@ -41,6 +41,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     </ChakraRadioGroup.Item>
   );
 });
+Radio.displayName = "Radio";
 
 type RadioGroupProps = Omit<
   ChakraRadioGroup.RootProps,
@@ -52,3 +53,4 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
     return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
   },
 );
+RadioGroup.displayName = "RadioGroup";

package/src/input/SearchInput.tsx

@@ -4,7 +4,7 @@ import {
   CloseOutline24Icon,
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { IconButton } from "../button/IconButton";
@@ -49,6 +49,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
     );
   },
 );
+SearchInput.displayName = "SearchInput";
 
 const texts = createTexts({
   label: {

package/src/input/Select.tsx

@@ -80,6 +80,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     );
   },
 );
+Select.displayName = "Select";
 
 type SelectItemProps = ChakraSelect.ItemProps &
   React.PropsWithChildren<SelectVariantProps> & {
@@ -108,6 +109,7 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
     );
   },
 );
+SelectItem.displayName = "SelectItem";
 
 type SelectItemGroupProps = ChakraSelect.ItemGroupProps &
   React.PropsWithChildren<SelectVariantProps> & {
@@ -218,8 +220,12 @@ export const SelectValueText = React.forwardRef<
     >
       <ChakraSelect.Context>
         {(select: {
-          selectedItems: any;
-          collection: { stringifyItem: (arg0: any) => any };
+          selectedItems: CollectionItem[];
+
+          collection: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            stringifyItem: (arg0: any) => any;
+          } /* Find a way to not use any */;
         }) => {
           const items = select.selectedItems;
           if (items.length === 0) return placeholder;

package/src/input/Switch.tsx

@@ -44,38 +44,26 @@ export type SwitchProps = Exclude<
  * ```
  */
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  (props, ref) => {
-    const {
-      inputProps,
-      children,
-      rootRef,
-      trackLabel,
-      thumbLabel,
-      size = "md",
-      label,
-      onCheckedChange,
-      ...rest
-    } = props;
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>((props) => {
+  const { rootRef, size = "md", label, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "switch" });
+  const styles = recipe({ size });
 
-    const recipe = useSlotRecipe({ key: "switch" });
-    const styles = recipe({ size });
-
-    return (
-      <Field style={{ width: "auto" }}>
-        <ChakraSwitch.Root
-          ref={rootRef}
-          {...rest}
-          checked={props.checked}
-          css={styles.root}
-        >
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
-          <ChakraSwitch.HiddenInput />
-          <ChakraSwitch.Control css={styles.control}>
-            <ChakraSwitch.Thumb />
-          </ChakraSwitch.Control>
-        </ChakraSwitch.Root>
-      </Field>
-    );
-  },
-);
+  return (
+    <Field style={{ width: "auto" }}>
+      <ChakraSwitch.Root
+        ref={rootRef}
+        {...rest}
+        checked={props.checked}
+        css={styles.root}
+      >
+        <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+        <ChakraSwitch.HiddenInput />
+        <ChakraSwitch.Control css={styles.control}>
+          <ChakraSwitch.Thumb />
+        </ChakraSwitch.Control>
+      </ChakraSwitch.Root>
+    </Field>
+  );
+});
+Switch.displayName = "Switch";

package/src/input/Textarea.tsx

@@ -44,16 +44,17 @@ const useLabelHeight = (label: ReactNode | undefined) => {
     };
 
     const observer = new ResizeObserver(updateLabelHeight);
-    if (labelRef.current) {
-      observer.observe(labelRef.current);
+    const currentLabelRef = labelRef.current;
+    if (currentLabelRef) {
+      observer.observe(currentLabelRef);
     }
 
     // Initial calculation with a slight delay to ensure CSS is applied
     setTimeout(updateLabelHeight, 0);
 
     return () => {
-      if (labelRef.current) {
-        observer.unobserve(labelRef.current);
+      if (currentLabelRef) {
+        observer.unobserve(currentLabelRef);
       }
     };
   }, [label]);
@@ -98,3 +99,4 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     );
   },
 );
+Textarea.displayName = "Textarea";

package/src/input/index.ts

@@ -4,8 +4,8 @@ export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChoiceChip";
 export * from "./Combobox";
-export * from "./Fieldset";
 export * from "./Field";
+export * from "./Fieldset";
 export * from "./Input";
 export * from "./ListBox";
 export * from "./NativeSelect";

package/src/layout/PressableCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ButtonProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 
@@ -40,5 +40,8 @@ type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> &
   ButtonProps;
 
 export const PressableCard = forwardRef<HTMLDivElement, PressableCardProps>(
-  (props, ref) => <PressableCardButton {...props} ref={ref} />,
+  (props, ref) => {
+    return <PressableCardButton {...props} ref={ref} />;
+  },
 );
+PressableCard.displayName = "PressableCard";

package/src/layout/RadioCard.tsx

@@ -4,7 +4,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import React, { forwardRef } from "react";
 
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
@@ -55,6 +55,7 @@ export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
     );
   },
 );
+RadioCard.displayName = "RadioCard";
 
 type RadioCardRootProps = RadioCardVariantProps &
   Exclude<ChakraRadioCard.RootProps, "variant"> & {
@@ -92,5 +93,6 @@ export const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardRootProps>(
     );
   },
 );
+RadioCardGroup.displayName = "RadioCardGroup";
 
 export const RadioCardLabel = ChakraRadioCard.Label;

package/src/layout/Separator.tsx

@@ -6,7 +6,7 @@ import {
   SeparatorProps as ChakraSeparatorProps,
   useRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { separatorRecipe } from "../theme/recipes/separator";
 
@@ -31,3 +31,4 @@ export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
     return <ChakraSeparator css={styles} {...props} ref={ref} />;
   },
 );
+Separator.displayName = "Separator";

package/src/layout/StaticCard.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { Box, BoxProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { BoxProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import { forwardRef } from "react";
 
 import { staticCardRecipe } from "../theme/recipes/static-card";
 
@@ -47,5 +47,8 @@ export type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> &
   BoxProps;
 
 export const StaticCard = forwardRef<HTMLDivElement, StaticCardProps>(
-  (props, ref) => <StyledCardBox {...props} ref={ref}></StyledCardBox>,
+  (props, ref) => {
+    return <StyledCardBox {...props} ref={ref}></StyledCardBox>;
+  },
 );
+StaticCard.displayName = "StaticCard";

package/src/linjetag/InfoTag.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { infoTagSlotRecipe } from "../theme/slot-recipes/info-tag";
 import { LineIcon } from "./LineIcon";
@@ -18,7 +18,7 @@ export type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
  * ```tsx
  * <InfoTag variant="subway" title="3" description="Ringen" />
  * ```
- * They support three different sizes – `sm`, `md` and `lg`.
+ * They support three different sizes –`sm`, `md` and `lg`.
  *
  * ```tsx
  * <InfoTag
@@ -63,6 +63,7 @@ export const InfoTag = ({
         variant={variant}
         size={size}
         aria-label={title}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         {...(customProps as any)} // TODO: Fix this
       />
       <Box css={styles.textContainer}>

package/src/linjetag/LineIcon.tsx

@@ -41,7 +41,7 @@ export type LineIconProps = Exclude<BoxProps, "variant"> &
  * <LineIcon variant="subway" />
  * ```
  *
- * They support three different sizes – `sm`, `md` and `lg`.
+ * They support three different sizes - `sm`, `md` and `lg`.
  *
  * ```tsx
  * <LineIcon variant="subway" size="lg" />
@@ -67,7 +67,7 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
     variant,
     size = "md",
     foregroundColor,
-    backgroundColor,
+
     disabled,
     style,
     target = "lineIcon",
@@ -85,11 +85,12 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
       return variant === "walk" && target === "travelTag" ? 0 : 0.5;
     };
 
-    const Icon: any = getCorrectIcon({
+    const Icon: React.ElementType = getCorrectIcon({
       variant:
         variant === "custom" && "customIconVariant" in rest
           ? rest.customIconVariant
-          : variant === "custom"
+          : // eslint-disable-next-line unicorn/no-nested-ternary
+            variant === "custom" //eslint rules and prettier conflict
             ? "local-train"
             : variant,
       size,

package/src/linjetag/TravelTag.tsx

@@ -13,7 +13,7 @@ import {
   WarningFill18Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
 import { LineIcon } from "./LineIcon";
@@ -48,7 +48,7 @@ export type TravelTagProps = TagProps &
  * <TravelTag variant="subway" title="3" description="Ringen" />
  * ```
  *
- * They support three different sizes – `sm`, `md` and `lg`.
+ * They support three different sizes - `sm`, `md` and `lg`.
  *
  * You can also render them with a deviation level to indicate an extra focus:
  *
@@ -133,7 +133,8 @@ export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
           customIconVariant={customIconVariant}
           disabled={disabled}
           target="travelTag"
-          {...(rest as any)}
+          // 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 && (
@@ -161,15 +162,18 @@ const getDeviationLevelIcon = ({
   size,
 }: Pick<TravelTagProps, "deviationLevel" | "size">) => {
   switch (deviationLevel) {
-    case "critical":
+    case "critical": {
       return size === "lg" ? ErrorFill24Icon : ErrorFill18Icon;
+    }
     case "major":
-    case "minor":
+    case "minor": {
       return size === "lg" ? WarningFill24Icon : WarningFill18Icon;
-    case "info":
+    }
+    case "info": {
       return size === "lg" ? InformationFill24Icon : InformationFill18Icon;
-    case "none":
-    default:
+    }
+    default: {
       return null;
+    }
   }
 };

package/src/link/TextLink.tsx

@@ -3,11 +3,18 @@ import {
   Link as ChakraLink,
   LinkProps as ChakraLinkProps,
   RecipeVariantProps,
+  VisuallyHidden,
 } from "@chakra-ui/react";
 import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  PropsWithChildren,
+} from "react";
+
+import { createTexts, useTranslation } from "@/i18n";
 
-import { createTexts, useTranslation } from "..";
 import { linkRecipe } from "../theme/recipes/link";
 
 type linkVariantProps = RecipeVariantProps<typeof linkRecipe>;
@@ -29,21 +36,49 @@ export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
  * </TextLink>
  * ```
  */
+const ExternalIcon = ({ label }: { label: string }) => (
+  <>
+    <LinkOutOutline24Icon aria-hidden />
+    <VisuallyHidden>{label}</VisuallyHidden>
+  </>
+);
+
 export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const external =
-      props.external !== undefined
-        ? props.external
-        : Boolean(props.href?.match(/^https?:\/\//));
+
+    const isExternal =
+      external ??
+      Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
+
+    const externalLabel = t ? t(texts.externalLink) : texts.externalLink.en;
+
+    // If asChild is true, we need to clone the children and add the external icon
+    if (props.asChild && isValidElement(children)) {
+      return (
+        <ChakraLink href={href} {...props} ref={ref}>
+          {cloneElement(children as React.ReactElement, {
+            ...children.props,
+            children: (
+              <>
+                {children.props.children}
+                {isExternal && <ExternalIcon label={externalLabel} />}
+              </>
+            ),
+          })}
+        </ChakraLink>
+      );
+    }
+
     return (
-      <ChakraLink {...props} ref={ref}>
+      <ChakraLink href={href} {...props} ref={ref}>
         {children}
-        {external && <LinkOutOutline24Icon aria-hidden />}
+        {isExternal && <ExternalIcon label={externalLabel} />}
       </ChakraLink>
     );
   },
 );
+TextLink.displayName = "TextLink";
 
 const texts = createTexts({
   externalLink: {

package/src/loader/ColorInlineLoader.tsx

@@ -1,6 +1,5 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderColorData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/ColorSpinner.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerColorData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/ContentLoader.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, VisuallyHidden } from "@chakra-ui/react";
 import { contentLoaderData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/DarkFullScreenLoader.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/DarkInlineLoader.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { Box, BoxProps, Center, useColorMode, VisuallyHidden } from "..";
 import { ClientOnly } from "./ClientOnly";

package/src/loader/LightFullScreenLoader.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/LightInlineLoader.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderLightData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/LightSpinner.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerLightData } from "@vygruppen/spor-loader";
-import React from "react";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/Lottie.tsx

@@ -1,9 +1,8 @@
 import ReactLottie from "lottie-react";
-import React from "react";
 
 /**
  * A wrapper around Lottie to make it tree-shakeable for SSR.
  */
-export default function Lottie({ animationData }: { animationData: any }) {
+export default function Lottie({ animationData }: { animationData: unknown }) {
   return <ReactLottie animationData={animationData} />;
 }

package/src/loader/ProgressBar.tsx

@@ -79,13 +79,11 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   (
     {
       value,
-      colorPalette = "white",
       label,
       labelRotationDelay = 5000,
       isActive = true,
       showValueText = false,
       height = "0.5rem",
-      "aria-label": ariaLabel,
       ...rest
     },
     ref,
@@ -117,3 +115,4 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     );
   },
 );
+ProgressBar.displayName = "ProgressBar";

package/src/loader/ProgressLoader.tsx

@@ -1,11 +1,5 @@
 "use client";
-import {
-  Box,
-  BoxProps,
-  chakra,
-  RecipeVariantProps,
-  Text,
-} from "@chakra-ui/react";
+import { BoxProps, chakra, RecipeVariantProps, Text } from "@chakra-ui/react";
 import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { useProgressBar } from "react-aria";
 
@@ -175,6 +169,7 @@ export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
     );
   },
 );
+ProgressLoader.displayName = "ProgressLoader";
 
 const texts = createTexts({
   fallbackLabel: (value) => ({

package/src/logo/CargonetLogo.tsx

@@ -1,5 +1,5 @@
 import { chakra } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 export type CargonetLogoProps = {
   /** The color of the logo
@@ -96,3 +96,4 @@ export const CargonetLogo = forwardRef<SVGSVGElement, CargonetLogoProps>(
     );
   },
 );
+CargonetLogo.displayName = "CargonetLogo";

package/src/logo/VyLogo.tsx

@@ -1,7 +1,5 @@
-import { Box, BoxProps, chakra, Icon } from "@chakra-ui/react";
-import React, { forwardRef, SVGProps, useId } from "react";
-
-import { useColorMode } from "..";
+import { BoxProps, chakra } from "@chakra-ui/react";
+import React, { forwardRef, useId } from "react";
 
 export const SvgBox = chakra("svg");
 
@@ -119,3 +117,4 @@ export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>((props, ref) => {
     </SvgBox>
   );
 });
+VyLogo.displayName = "VyLogo";