@vygruppen/spor-react 12.8.7 → 12.8.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.7",
+  "version": "12.8.9",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -67,8 +67,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "1.1.1"
+    "@vygruppen/eslint-config": "1.1.1",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.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

@@ -65,6 +65,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
       readOnly,
       required,
       direction,
+      id,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
@@ -79,12 +80,23 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           required={required}
           css={styles.root}
           direction={direction}
+          id={id}
         >
-          {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,7 +77,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <Field
         invalid={invalid}
         helperText={helperText}
+        required={required}
         errorText={errorText}
+        id={props.id}
         label={
           // Render startElement invisibly to align label text with input content when an icon is present
           <Flex>

package/src/input/NativeSelect.tsx

@@ -66,6 +66,7 @@ export const NativeSelect = React.forwardRef<
       required={required}
       helperText={helperText}
       errorText={errorText}
+      id={rest.id}
       floatingLabel={true}
     >
       <ChakraNativeSelect.Root

package/src/input/NumericStepper.tsx

@@ -101,7 +101,7 @@ export const NumericStepper = React.forwardRef<
   };
 
   return (
-    <Field css={styles.root} width="auto" {...rest} ref={ref}>
+    <Field css={styles.root} width="auto" {...rest} id={idProp} ref={ref}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(

package/src/input/Select.tsx

@@ -72,7 +72,13 @@ 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}
+        id={rest.id}
+      >
         <ChakraSelect.Root
           {...rest}
           ref={ref}

package/src/input/Switch.tsx

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

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} />
+    );
   },
 );