@vygruppen/spor-react 12.10.4 → 12.10.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.4",
+  "version": "12.10.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.8",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "4.2.1"
+    "@vygruppen/spor-icon-react": "4.2.1",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/dialog/Drawer.tsx

@@ -75,7 +75,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     const sizeNotFull = size !== "full";
     return (
       <Portal disabled={!portalled} container={portalRef}>
-        <ChakraDrawer.Positioner>
+        <ChakraDrawer.Positioner asChild>
           <Box {...handlers} width="100%">
             <ChakraDrawer.Content ref={ref} {...rest}>
               {sizeNotFull && placement === "bottom" && <CloseDrawerLine />}

package/src/dialog/types.ts

@@ -1,5 +1,5 @@
 import { Drawer as ChakraDrawer, RecipeVariantProps } from "@chakra-ui/react";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 
 import { drawerSlotRecipe } from "@/theme/slot-recipes/drawer";
 
@@ -24,5 +24,5 @@ export type DrawerProps = Omit<
 export type DrawerFullScreenHeaderProps = ChakraDrawer.HeaderProps & {
   backTrigger?: boolean;
   closeTrigger?: boolean;
-  title?: string;
+  title?: ReactNode;
 };

package/src/input/AttachedInputs.tsx

@@ -34,7 +34,9 @@ export const AttachedInputs = forwardRef<HTMLDivElement, AttachedInputsProps>(
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
 
-    return <Group ref={ref} css={styles} attached {...restProps} />;
+    return (
+      <Group ref={ref} css={styles} attached isolation="auto" {...restProps} />
+    );
   },
 );
 AttachedInputs.displayName = "AttachedInputs";

package/src/input/PhoneNumberInput.tsx

@@ -129,10 +129,4 @@ const texts = createTexts({
     en: "Phone number (optional)",
     sv: "Telefonnummer (valfritt)",
   },
-  countryCodeLabel: {
-    nb: "Landskode",
-    nn: "Landskode",
-    en: "Country code",
-    sv: "Landskod",
-  },
 });

package/src/input/Textarea.tsx

@@ -76,16 +76,35 @@ const useLabelHeight = (label: ReactNode | undefined) => {
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
-    const { label, variant = "core", ...fieldProps } = props;
+    const {
+      label,
+      variant = "core",
+      invalid,
+      required,
+      errorText,
+      readOnly,
+      helperText,
+      floatingLabel,
+      ...restProps
+    } = props;
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
 
     const { labelRef, labelHeight } = useLabelHeight(label);
 
     return (
-      <Field {...fieldProps} position="relative">
+      <Field
+        label={label}
+        errorText={errorText}
+        helperText={helperText}
+        invalid={invalid}
+        required={required}
+        readOnly={readOnly}
+        floatingLabel={floatingLabel}
+        position="relative"
+      >
         <ChakraTextarea
-          {...props}
+          {...restProps}
           css={styles}
           className="peer"
           ref={ref}

package/src/linjetag/TravelTag.tsx

@@ -124,6 +124,7 @@ export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
         aria-disabled={disabled}
         ref={ref}
         className={clsx("light", rest.className)}
+        backgroundColor={backgroundColor}
         {...rest}
       >
         <LineIcon

package/src/toast/toast.tsx

@@ -34,7 +34,7 @@ export const createToast = ({
   text,
   variant,
   id,
-  duration = 600_000,
+  duration = 6000,
 }: ToastProps) =>
   toaster.create({
     description: text,