@vygruppen/spor-react 12.8.6 → 12.8.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.6",
+  "version": "12.8.8",
   "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.7",
-    "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "4.2.1"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/datepicker/DatePicker.tsx

@@ -130,6 +130,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               errorText={errorText}
               invalid={invalid}
               helperText={helperText}
+              required={props.required}
             >
               <PopoverAnchor>
                 <StyledField

package/src/datepicker/DateRangePicker.tsx

@@ -127,6 +127,7 @@ type DateRangePickerProps = Omit<
             errorText={errorText}
             helperText={helperText}
             invalid={invalid}
+            required={props.required}
           >
             <PopoverAnchor>
               <StyledField

package/src/input/Field.tsx

@@ -80,11 +80,21 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           css={styles.root}
           direction={direction}
         >
-          {label && !floatingLabel && <Label>{label}</Label>}
+          {label && !floatingLabel && (
+            <Label>
+              {label}
+              <ChakraField.RequiredIndicator />
+            </Label>
+          )}
 
           {children}
 
-          {label && floatingLabel && <FloatingLabel>{label}</FloatingLabel>}
+          {label && floatingLabel && (
+            <FloatingLabel>
+              {label}
+              <ChakraField.RequiredIndicator />
+            </FloatingLabel>
+          )}
           {errorText && (
             <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
           )}

package/src/input/Input.tsx

@@ -64,6 +64,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       invalid,
       helperText,
       errorText,
+      required,
       ...props
     },
     ref,
@@ -76,6 +77,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <Field
         invalid={invalid}
         helperText={helperText}
+        required={required}
         errorText={errorText}
         label={
           // Render startElement invisibly to align label text with input content when an icon is present

package/src/input/Select.tsx

@@ -72,7 +72,12 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     const styles = recipe({ variant });
 
     return (
-      <Field errorText={errorText} invalid={invalid} helperText={helperText}>
+      <Field
+        errorText={errorText}
+        invalid={invalid}
+        helperText={helperText}
+        required={props.required}
+      >
         <ChakraSelect.Root
           {...rest}
           ref={ref}

package/src/input/Switch.tsx

@@ -65,6 +65,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         invalid={invalid}
         errorText={errorText}
         helperText={helperText}
+        required={props.required}
       >
         <ChakraSwitch.Root
           ref={rootRef}

package/src/link/TextLink.tsx

@@ -37,9 +37,9 @@ const ExternalIcon = ({
 }) => (
   <>
     {size === "lg" || size === "md" ? (
-      <LinkOutOutline24Icon aria-hidden />
+      <LinkOutOutline24Icon aria-hidden display="inline" />
     ) : (
-      <LinkOutOutline18Icon aria-hidden />
+      <LinkOutOutline18Icon aria-hidden display="inline" />
     )}
     {/* Visually hidden text for screen readers */}
     <VisuallyHidden>{label}</VisuallyHidden>

package/src/theme/recipes/link.ts

@@ -2,34 +2,25 @@ import { defineRecipe } from "@chakra-ui/react";
 
 export const linkRecipe = defineRecipe({
   base: {
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    transitionTimingFunction: "ease-out",
-    cursor: "pointer",
-    backgroundImage: "linear-gradient(currentColor, currentColor)",
-    backgroundSize: "100% 1px",
-    backgroundPosition: "0 100%",
-    backgroundRepeat: "no-repeat",
-    borderRadius: "none",
-    paddingX: "2px",
-    paddingY: "0",
+    display: "inline",
     color: "inherit",
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "0",
-    position: "relative",
-    boxDecorationBreak: "clone",
-    textUnderlineOffset: "0",
+    cursor: "pointer",
+    textDecorationLine: "underline",
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "auto",
+    textUnderlinePosition: "from-font",
+
+    gap: "0.5",
+    borderRadius: "xs",
+    paddingX: "0.5",
+    whiteSpace: "normal",
+    wordBreak: "break-word",
 
-    "&:focus, &:focus-visible, &:active, &:hover": {
-      backgroundImage: "none",
-      backgroundSize: "100%",
-      outline: "none",
-      borderRadius: "xs",
+    _hover: {
+      textDecoration: "none",
     },
 
     "& svg": {
-      display: "inline-block",
       width: "1.125em",
       height: "1.125em",
       position: "relative",

package/src/theme/slot-recipes/checkbox.ts

@@ -8,6 +8,8 @@ export const checkboxSlotRecipe = defineSlotRecipe({
   slots: checkboxAnatomy.keys(),
   base: {
     root: {
+      whiteSpace: "normal",
+      wordBreak: "break-word",
       display: "flex",
       gap: 1.5,
       _hover: {
@@ -35,6 +37,7 @@ export const checkboxSlotRecipe = defineSlotRecipe({
     control: {
       width: 4,
       height: 4,
+      flexShrink: 0,
       transitionProperty: "background, border-color",
       transitionDuration: "moderate",
       border: "2px solid",
@@ -77,7 +80,6 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       },
     },
     label: {
-      userSelect: "none",
       _disabled: { opacity: 0.4 },
     },
   },

package/src/theme/slot-recipes/field.ts

@@ -16,6 +16,9 @@ export const fieldSlotRecipe = defineSlotRecipe({
       marginStart: 1,
       color: "brightRed",
     },
+    label: {
+      display: "flex",
+    },
     helperText: {
       marginTop: 2,
       color: "text.tertiary",

package/src/typography/Heading.tsx

@@ -4,7 +4,7 @@ import {
   HeadingProps as ChakraHeadingProps,
   Text,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 
 import { slugify } from "..";
 
@@ -52,11 +52,18 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
       ...rest
     } = props;
 
-    const id =
-      (externalId ?? (autoId && typeof rest.children === "string"))
-        ? slugify(rest.children as string)
-        : undefined;
+    const reactId = useId();
 
-    return <Text as={as} textStyle={variant} id={id} ref={ref} {...rest} />;
+    function getId() {
+      if (externalId !== undefined) return externalId;
+      if (!autoId) return;
+      return typeof rest.children === "string"
+        ? slugify(rest.children)
+        : reactId;
+    }
+
+    return (
+      <Text as={as} textStyle={variant} id={getId()} ref={ref} {...rest} />
+    );
   },
 );