@vygruppen/spor-react 12.3.0 → 12.3.2

package/src/input/Switch.tsx

@@ -45,39 +45,41 @@ export type SwitchProps = Exclude<
  * ```
  */
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>((props) => {
-  const {
-    rootRef,
-    size = "md",
-    label,
-    invalid,
-    errorText,
-    helperText,
-    ...rest
-  } = props;
-  const recipe = useSlotRecipe({ key: "switch" });
-  const styles = recipe({ size });
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (props, ref) => {
+    const {
+      rootRef,
+      size = "md",
+      label,
+      invalid,
+      errorText,
+      helperText,
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "switch" });
+    const styles = recipe({ size });
 
-  return (
-    <Field
-      style={{ width: "auto" }}
-      invalid={invalid}
-      errorText={errorText}
-      helperText={helperText}
-    >
-      <ChakraSwitch.Root
-        ref={rootRef}
-        {...rest}
-        checked={props.checked}
-        css={styles.root}
+    return (
+      <Field
+        style={{ width: "auto" }}
+        invalid={invalid}
+        errorText={errorText}
+        helperText={helperText}
       >
-        <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
-        <ChakraSwitch.HiddenInput />
-        <ChakraSwitch.Control css={styles.control}>
-          <ChakraSwitch.Thumb />
-        </ChakraSwitch.Control>
-      </ChakraSwitch.Root>
-    </Field>
-  );
-});
+        <ChakraSwitch.Root
+          ref={rootRef}
+          {...rest}
+          checked={props.checked}
+          css={styles.root}
+        >
+          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+          <ChakraSwitch.HiddenInput ref={ref} />
+          <ChakraSwitch.Control css={styles.control}>
+            <ChakraSwitch.Thumb />
+          </ChakraSwitch.Control>
+        </ChakraSwitch.Root>
+      </Field>
+    );
+  },
+);
 Switch.displayName = "Switch";

package/src/linjetag/LineIcon.tsx

@@ -63,17 +63,20 @@ export type LineIconProps = Exclude<BoxProps, "variant"> &
  */
 
 export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
-  function LineIcon({
-    variant,
-    size = "md",
-    foregroundColor,
+  function LineIcon(
+    {
+      variant,
+      size = "md",
+      foregroundColor,
 
-    disabled,
-    style,
-    target = "lineIcon",
-    label,
-    ...rest
-  }) {
+      disabled,
+      style,
+      target = "lineIcon",
+      label,
+      ...rest
+    },
+    ref,
+  ) {
     const recipe = useSlotRecipe({ key: "lineIcon" });
     const styles = recipe({ variant, size, ...rest });
 
@@ -112,6 +115,7 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
         borderWidth={borderContainer()}
         borderColor={variant === "walk" ? "core.outline" : "transparent"}
         aria-label={label}
+        ref={ref}
       >
         <Icon css={styles.icon} />
       </Box>

package/src/loader/ProgressLoader.tsx

@@ -88,14 +88,17 @@ const ProgressLoaderWrapper = chakra("div", progressLoaderRecipe);
  */
 
 export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
-  ({
-    value,
-    label,
-    labelRotationDelay = 5000,
-    "aria-label": ariaLabel,
-    width,
-    ...rest
-  }: ProgressLoaderProps) => {
+  (
+    {
+      value,
+      label,
+      labelRotationDelay = 5000,
+      "aria-label": ariaLabel,
+      width,
+      ...rest
+    },
+    ref,
+  ) => {
     const { t } = useTranslation();
     const currentLoadingText = useRotatingLabel({
       label,
@@ -124,6 +127,7 @@ export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
         aria-valuemax={100}
         aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
         {...rest}
+        ref={ref}
       >
         <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
           <path

package/src/progress-indicator/ProgressIndicator.tsx

@@ -35,7 +35,7 @@ export type ProgressIndicatorProps = BoxProps &
 export const ProgressIndicator = forwardRef<
   HTMLDivElement,
   ProgressIndicatorProps
->(({ numberOfSteps, activeStep }) => {
+>(({ numberOfSteps, activeStep }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator",
@@ -51,6 +51,7 @@ export const ProgressIndicator = forwardRef<
       aria-valuemax={numberOfSteps}
       aria-valuenow={activeStep}
       aria-valuetext={t(texts.stepsOf(activeStep, numberOfSteps))}
+      ref={ref}
     >
       <Box css={styles.container}>
         {Array.from({ length: numberOfSteps }, (_, i) => (

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

@@ -37,6 +37,7 @@ export const tableSlotRecipe = defineSlotRecipe({
       ...numericStyles,
       paddingX: 1.5,
       paddingY: 1,
+      width: "100%",
     },
     footer: {
       fontWeight: "medium",