@navikt/ds-react 8.9.0 → 8.9.1

package/src/form/checkbox/Checkbox.tsx

@@ -3,93 +3,66 @@ import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
+import { CheckboxInput } from "./checkbox-input/CheckboxInput";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref) => {
+  (props: CheckboxProps, forwardedRef) => {
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
 
+    const { className, description, children, indeterminate, hideLabel } =
+      props;
+
     return (
       <div
-        className={cl(
-          props.className,
-          "aksel-checkbox",
-          `aksel-checkbox--${size}`,
-          {
-            "aksel-checkbox--error": hasError,
-            "aksel-checkbox--disabled": inputProps.disabled,
-            "aksel-checkbox--readonly": readOnly,
-          },
-        )}
+        className={cl(className, "aksel-checkbox", `aksel-checkbox--${size}`, {
+          "aksel-checkbox--error": hasError,
+          "aksel-checkbox--disabled": inputProps.disabled,
+          "aksel-checkbox--readonly": readOnly,
+        })}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <div className="aksel-checkbox__input-wrapper">
-          <input
-            {...omit(props, [
-              "children",
-              "size",
-              "error",
-              "description",
-              "hideLabel",
-              "indeterminate",
-              "errorId",
-              "readOnly",
-            ])}
-            {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-            aria-describedby={
-              cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-              }) || undefined
-            }
-            type="checkbox"
-            className="aksel-checkbox__input"
-            ref={(el) => {
-              if (el) {
-                el.indeterminate = props.indeterminate ?? false;
-              }
-
-              if (typeof ref === "function") {
-                ref(el);
-              } else if (ref != null) {
-                ref.current = el;
-              }
-            }}
-          />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 13 10"
-            fill="none"
-            focusable={false}
-            role="img"
-            aria-hidden
-            className="aksel-checkbox__icon"
-          >
-            <path
-              d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
+        <CheckboxInput
+          ref={forwardedRef}
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+            "errorId",
+            "readOnly",
+          ])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          indeterminate={indeterminate ?? false}
+          standalone={false}
+        />
         <BodyShort
           as="label"
           htmlFor={inputProps.id}
           size={size}
-          className={cl("aksel-checkbox__label", {
-            "aksel-sr-only": props.hideLabel,
-          })}
+          className="aksel-checkbox__label"
+          visuallyHidden={hideLabel}
         >
           {!nested && readOnly && <ReadOnlyIconWithTitle />}
-          {props.children}
+          {children}
         </BodyShort>
-        {props.description && (
+        {description && (
           <BodyShort
             id={descriptionId}
             size={size}
             className="aksel-form-field__subdescription aksel-checkbox__description"
+            visuallyHidden={hideLabel}
           >
-            {props.description}
+            {description}
           </BodyShort>
         )}
       </div>

package/src/form/checkbox/checkbox-input/CheckboxInput.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useCallback } from "react";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+
+type CheckboxInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  indeterminate?: boolean;
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  (
+    {
+      className,
+      indeterminate,
+      standalone = true,
+      compact,
+      ...rest
+    }: CheckboxInputProps,
+    forwardedRef,
+  ) => {
+    const indeterminateRef = useCallback(
+      (el: HTMLInputElement | null) => {
+        if (el) {
+          el.indeterminate = indeterminate ?? false;
+        }
+      },
+      [indeterminate],
+    );
+
+    const mergedRef = useMergeRefs(indeterminateRef, forwardedRef);
+
+    return (
+      <div
+        className="aksel-checkbox__input-wrapper"
+        data-standalone={standalone}
+        data-compact={compact}
+      >
+        <input
+          {...rest}
+          className={cl("aksel-checkbox__input", className)}
+          type="checkbox"
+          ref={mergedRef}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 13 10"
+          fill="none"
+          focusable={false}
+          role="img"
+          aria-hidden
+          className="aksel-checkbox__icon"
+        >
+          <path
+            d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+export { CheckboxInput };
+export type { CheckboxInputProps };

package/src/form/checkbox/types.ts

@@ -19,7 +19,7 @@ export interface CheckboxProps
    */
   children: React.ReactNode;
   /**
-   * Hides label and makes it viewable for screen-readers only.
+   * Visually hides label and description, and makes it viewable for screen-readers only.
    */
   hideLabel?: boolean;
   /**

package/src/form/fieldset/Fieldset.tsx

@@ -108,9 +108,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={legendId}
             size={size}
             as="legend"
-            className={cl("aksel-fieldset__legend", {
-              "aksel-sr-only": !!hideLegend,
-            })}
+            className="aksel-fieldset__legend"
+            visuallyHidden={!!hideLegend}
           >
             {readOnly &&
               (_fieldsSupportNativeReadOnly ? (
@@ -122,9 +121,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
-              className={cl("aksel-fieldset__description", {
-                "aksel-sr-only": !!hideLegend,
-              })}
+              className="aksel-fieldset__description"
+              visuallyHidden={!!hideLegend}
               id={inputDescriptionId}
               size={size ?? "medium"}
               as="div"

package/src/form/radio/Radio.tsx

@@ -2,52 +2,57 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
+import { RadioInput } from "./radio-input/RadioInput";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError, readOnly } = useRadio(props);
-  const descriptionId = useId();
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (props: RadioProps, forwardedRef) => {
+    const { inputProps, size, hasError, readOnly } = useRadio(props);
+    const descriptionId = useId();
 
-  return (
-    <div
-      className={cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
-        "aksel-radio--error": hasError,
-        "aksel-radio--disabled": inputProps.disabled,
-        "aksel-radio--readonly": readOnly,
-      })}
-      data-color={hasError ? "danger" : props["data-color"]}
-    >
-      <input
-        {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        aria-describedby={
-          cl(inputProps["aria-describedby"], {
-            [descriptionId]: props.description,
-          }) || undefined
-        }
-        className="aksel-radio__input"
-        ref={ref}
-      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        className="aksel-radio__label"
-        size={size}
+    const { className, description, children } = props;
+
+    return (
+      <div
+        className={cl(className, "aksel-radio", `aksel-radio--${size}`, {
+          "aksel-radio--error": hasError,
+          "aksel-radio--disabled": inputProps.disabled,
+          "aksel-radio--readonly": readOnly,
+        })}
+        data-color={hasError ? "danger" : props["data-color"]}
       >
-        {props.children}
-      </BodyShort>
-      {props.description && (
+        <RadioInput
+          ref={forwardedRef}
+          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          standalone={false}
+        />
         <BodyShort
-          id={descriptionId}
+          as="label"
+          htmlFor={inputProps.id}
+          className="aksel-radio__label"
           size={size}
-          className="aksel-form-field__subdescription aksel-radio__description"
         >
-          {props.description}
+          {children}
         </BodyShort>
-      )}
-    </div>
-  );
-});
+        {description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className="aksel-form-field__subdescription aksel-radio__description"
+          >
+            {description}
+          </BodyShort>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Radio;

package/src/form/radio/radio-input/RadioInput.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type RadioInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
+  (
+    { className, standalone = true, compact, ...rest }: RadioInputProps,
+    forwardedRef,
+  ) => {
+    return (
+      <input
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-radio__input", className)}
+        data-standalone={standalone}
+        data-compact={compact}
+        type="radio"
+      />
+    );
+  },
+);
+
+export { RadioInput };
+export type { RadioInputProps };